Framerで動くモックアップを簡単作成

Framerで動くモックアップを簡単作成こもりまさあき　2014 6.19 ／ CPI x CSS Nite x 優クリエイト「After Dark」（11）

Getting started prototyping with Framer

自己紹介

こもりまさあき

1972年生まれのフリーランス。1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行して従事。2001年、会社を退職しそのままフリーランスに。案件ごとに業務内容や立ち位置が異なることが多く、職能・職域的な肩書きはなし。『基礎から覚える、深く理解できる。 Webデザインの新しい教科書』（共著・MdN刊）をはじめ、執筆多数。2014年からはWeb制作者向けに必要な情報を早く届けたい、との想いから電子書籍の執筆・販売を開始。現在、その第一弾となる『Sketch 3 Book for Beginner』が好評発売中。

@cipher @cipher

今日お話しすること

• プロトタイピングツールあれこれ

• Framerでできること

• Framerの基本的な使い方

• Sketch × Framer（デモ）

プロトタイピングツールあれこれ

Webサイトやスマートデバイス向けのコンテンツ制作、ワイヤーフレームや画面イメージを作っただけではどうしても動作イメージがわきにくい

プロトタイピングとは、プロトタイプを作ること。ワイヤーフレームの時点から、カンプができてから、人によって使う段階が異なるため、ツールは山のように…

Framerでできること

カンプから書き出した画像を使って、動くモックアップを簡単に作れるのがFramer

動作確認は、Webブラウザ。ローカルでもリモートからでも確認が可能

使い方はいろいろ

カンプの画像を使うだけではなく、直接HTMLやテキストを書くこともできる

複雑な動きがいらないなら、あらかじめ用意されてる機能だけで作れる

http://bit.ly/ad11med


JavaScriptだけど、難しくない

imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/icon.png"})imageLayer.center()

imageLayer.states.add({second: {y:100, scale:0.6, rotationZ:100},third: {y:300, scale:1.3},fourth: {y:200, scale:0.9, rotationZ:200},

})

imageLayer.states.animationOptions = {curve: "spring(500,12,0)"

}

imageLayer.on(Events.Click, function() {imageLayer.states.next()

})

レイヤーのインスタンスを作る



})


}


})

レイヤーを指定して、どうしたいかを記述



})


}


})

アニメーションには、オプション指定も可



})


}


})

クリックやドラッグのイベントで発火させる



})


}


})

書き方がわからないときは？

日本語のリソースは少ないので…、examples.framerjs.com を参考にしましょう

Framer Examples: http://examples.framerjs.com/

http://examples.framerjs.com/

Framerの基本的な使い方

Framerの実体は、JavaScriptのみ。配布ファイルをダウンロードして、すぐに始められる

http://framerjs.com/


Framerの構成要素

解凍してできた「Project」内のファイルが基本構成。app.jsに自分のコードを書いていけばよい

index.htmlapp.jsframer/framer.jsimages/

GitHub版はコンパイルが必要: https://github.com/koenbok/Framer/


app.jsに書いてみよう

demoLayer = new Layer({ x: 0, y: 0, width: 640, height: 1136, backgroundColor: "red"})

demoLayer.draggable = true;demoLayer.draggable.speedX = 0;











もう少し追加してみる

childLayer = new Layer({width:128, height:128,image:"images/Icon.png"})

demoLayer.addSubLayer(childLayer)childLayer.center()

childLayer.animate({ properties: { rotationZ: 180 }, curve: "spring(1500,12,10)", delay: 2})













Framer Generator

Framer Generatorは、OS X専用アプリ。Photoshopを開きながらの作業が可能

書き出すパーツは、レイヤーグループに

公式サイトに記述はないが、最新β版でSketchファイルにも対応済

Sketchプラグイン単体はコンパイルが必要: https://github.com/bomberstudios/sketch-framer-3


Framer Generatorで書き出した場合

画像が書き出されるだけでなく、JSONファイルにレイヤー名や親子関係などの情報が保存される。画像へのアクセスは、レイヤー名で

var PSD = Framer.Importer.load("imported/images");

PSD.layerName.animate({•••

})

Framer Generatorで書き出したJSONを読み込むため、ローカルでサーバを起動する必要がある


ローカルサーバを起動する

「サーバのこととかわからない！」という方は、インストールするだけのAnvilを使うのが一番簡単（無償）

Sketch × Framer

では、Sketchのファイルを使ってデモをおこないます

Framerのリソース

• Framer Examples http://examples.framerjs.com/• Prototyping with Framer http://framer.camp/• Framer-templates https://github.com/tisho/framer-templates• Shortcuts for Framer 3 https://github.com/facebook/shortcuts-for-framer• Cactus for Mac http://cactusformac.com/• Browser-Sync http://browsersync.io/• Clear Browser http://www.aliceturtle.com/clear-browser/

http://examples.framerjs.com/

http://framer.camp/

https://github.com/tisho/framer-templates

https://github.com/facebook/shortcuts-for-framer

http://cactusformac.com/

http://browsersync.io/

http://www.aliceturtle.com/clear-browser/

Design

Framerで動くモックアップを簡単作成