• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 

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

on

  • 219 views

~ Getting started prototyping with Framer.

~ Getting started prototyping with Framer.

※このスライドは、2014年6月19日のCSS Niteで話した内容です。
http://cssnite.jp/afterdark/cpi/vol11/

Statistics

Views

Total Views
219
Views on SlideShare
178
Embed Views
41

Actions

Likes
7
Downloads
0
Comments
0

4 Embeds 41

http://cssnite.jp 25
https://cybozulive.com 12
http://feedly.com 3
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via SlideShare as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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() })
    • レイヤーのインスタンスを作る 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() })
    • レイヤーを指定して、どうしたいかを記述 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() })
    • アニメーションには、オプション指定も可 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() })
    • クリックやドラッグのイベントで発火させる 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/
    • Framerの基本的な使い方 Framerの実体は、JavaScriptのみ。 配布ファイルをダウンロードして、すぐに始められる http://framerjs.com/
    • Framerの構成要素 解凍してできた「Project」内のファイルが基本構成。 app.jsに自分のコードを書いていけばよい index.html app.js framer/framer.js images/ 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/