amana tech night #2

実践！Pixate

http://www.standardinc.jp/

amana tech night #2 // 実践！ Pixate

いま話している人について

吉竹 遼@ryo_pan

2011 年〜 2014 年 10 月までフェンリル株式会社で受託開発に従事。

2014 年 10 月から Standard Inc に参画。

amana tech night #2 // 実践！ Pixate

これまでの活動

http://yo-ry.hateblo.jp/entry/2014/02/13/204727

amana tech night #2 // 実践！ Pixate

これまでの活動

http://www.slideshare.net/ryoyos/origami-32856872

amana tech night #2 // 実践！ Pixate

これまでの活動

http://www.standardinc.jp/reflection/article/prototyping-for-app-design/

amana tech night #2 // 実践！ Pixate

これまでの活動

http://www.slideshare.net/ryoyos/creative-insights-01-42453782

amana tech night #2 // 実践！ Pixate

これまでの活動

http://www.slideshare.net/ryoyos/ui-crunch-03

amana tech night #2 // 実践！ Pixate

事前準備

• Pixate の登録 http://www.pixate.com/

•ビューワーアプリのインストール iPhone　/　Android

•アセットのDL・解凍 https://www.dropbox.com/s/cfxkodl35ep4vcm/assets.zip?dl=0

ワークショップの時とはファイル構成が微妙に違うので、当日参加された方もDLをお願いします

amana tech night #2 // 実践！ Pixate

おおざっぱな流れ

•プロジェクトの新規作成

•アセットの読み込み

•アセットの配置

•動きをつける

•さらに動きをつけてみる

amana tech night #2 // 実践！ Pixate

01

プロジェクトの新規作成

新規プロジェクトを作成する

新規プロトタイプを作成する

今回は iPhone5 を選ぶ

アクションパネル（自動化のためのアクションが選択でき

る。自分で作ることも可能）

アニメーションプロパティパネル（付加されたアニメーションやインタラク

ションの細かい設定ができる）

キャンバス（レイヤーやアセットはここに表示される）

プロパティパネル（選択したレイヤーの情報が編集できる）

レイヤーパネル（作成したレイヤーとか置いたアセット

はここに表示される）

インタラクションパネル（レイヤーに対して付加できるインタラ

クションが選べる）

アニメーションタブ（アニメーションパネルに切り替え

ることができる）

amana tech night #2 // 実践！ Pixate

02

アセットの読み込み

真ん中のアイコンをクリックして

アセットパネルを開く

あらかじめダウンロードしておいたフォルダ

から、テキストファイル以外の6個の PNG

ファイルを画面上にD&Dする

読み込みが終わるとアセットが一

覧表示されます

なお今回はbtn_search.png は使

用しません

amana tech night #2 // 実践！ Pixate

03

アセットの配置

クリックしてレイヤーを新規作成

■ Position

Left:0pt/Top:64pt

■ Size

Width:320pt/Height:504pt

にする

ダブルクリックしてレイヤー名を

『main』に変更

ダブルクリックして色を『f7f7f7』に変更

（初期状態だとRGBが入ってるけど、#な

しのHEXcoloro を入力しても適用してく

れる！かしこい！）

適当にD&Dで置く

main.pngをmain レイヤーにD&D

②

■ Position

Left:0pt/Top:0pt

にする

①

main.pngを選んだ状態で

親レイヤーに格納された子レイヤーの

Position は親を基点に指定されるので、0,0

を指定すればいい感じに上に配置できます

まず作りたいオブジェクトのサイズのレイ

ヤーを作成して、その中にアセットを入れる、

という流れでやるとスムーズに作れます

①

nav.png をキャンバス上にD&D

する

②

■ Position

Left:0pt/Top:0pt

にする

amana tech night #2 // 実践！ Pixate

04

このあたりからビューワーアプリを起動しておくと、リアルタイムで更新されていくのが見れて楽しいです

画面をスクロールさせてみる

Scroll インタラクションを

main レイヤーにD&Dで適用する

（適用したいレイヤーを選択した状態

でアニメーションプロパティパネルに

D&Dでも可）

amana tech night #2 // 実践！ Pixate

05

カートボタンを作る

①

新規レイヤーを作成する

②

レイヤー名をbtn_cartに変更する

③

■ Position

Left:260pt/Top:508pt

■ Size

Width:50pt/Height:50pt

にする

btn_cart_00.png,btn_cart_01.png

をキャンバス上にD&Dする

btn_cart レイヤーにD&D

btn_cart_00.png は 01.png よりも

上にあるようにする

00,01 共に

■ Position

Left:0pt/Top:0pt

にする

amana tech night #2 // 実践！ Pixate

06

サムネイルを作る

①

新規レイヤーを作成する

②

レイヤー名を thumbに変更する

③

■ Position

Left:70pt/Top:84pt

■ Size

Width:180pt/Height:180pt

にする

レイヤーの色はこの後の作業

をわかりやすくするためにし

ばらく残しておく

thumb.pngをキャンバス

上にD&Dし、thumbレ

イヤーに格納する

thumb.pngを適当に動かして thumbレイヤー

の中心に吸い付かせる（かしこい！）

amana tech night #2 // 実践！ Pixate

07

サムネイルをドラッグできるようにする

Drag インタラクションを

thumbレイヤーにD&Dで適用する

アニメーションタブをクリックして

アニメーションパネルを表示する

Drag インタラクションを

thumbレイヤーにD&Dで適用する

実機で確認してみると……

動かせるようになった！

amana tech night #2 // 実践！ Pixate

08

サムネイルが元の位置に戻るようにする

さっき追加したMoveアニメーション

の中にあるBasedOnをクリック

■BasedOn

thumb/DragRelease

■Moveto

Left:70pt/Top:84pt

にする

amana tech night #2 // 実践！ Pixate

何をしたのか？

Moveアニメーションはレイヤーを動かすアニメーション。素のままだと

ドラッグで動かせるだけなので『どのタイミングで』『どう動かすか』

という条件を追加した。具体的には

■BasedOn（タイミングの基準）

thumbレイヤーが/ドラッグリリースされた時に

■Moveto（どう動かすか）

Left70pt/Top84ptに動かす

といった感じ。

元の位置に戻るようにはなったけど

位置が固定なのでちょっとびみょう。。

amana tech night #2 // 実践！ Pixate

09

スクロールに追従させてみる

もう1つMoveアニメーションを追加して、

■Basedon

main/ScrollPosition

■ Animates

Continuouslywithrate

■Move

Top/-1

にする

amana tech night #2 // 実践！ Pixate

10

サムネイルの大きさを変えてみる

Scale インタラクションを

thumbレイヤーにD&Dで適用する

■BasedOn

thumb/DragStart

■ Scale

1.5x

にする

再度 Scale を thumb.png に適用して

■BasedOn

thumb/DragRelease

■ Scale

0x

にする

デフォルトの Scale も０xにする

サムネイルがカートの上に来たら

小さくなるようにしてみる

①

3つ目の Scale を thumb.png に適用

して

■BasedOn

thumb/DragPosition

■ Animates

Withdurationtofinalvalue

にする

②

Zip に入っていた『conditions.txt』

を開き、01の文字列をペーストする

Scale は０.5x に設定する

③

画面下部にある『+CONDITION』をクリックする

新しくELSEIF という項目が追加され

るので『conditions.txt』の 02の文

字列をペーストする

Scale は 1.5x に設定する

Fade アニメーションを追加して

■Basedon

thumb/DragStart

■ Fadeto

100%

に設定する

amana tech night #2 // 実践！ Pixate

何をしたのか？

conditions.txt に書かれているのは、ちょっとした条件の記述（いわゆる

if 文というやつです）。ざっくり解説すると

・レイヤー（ここでは thumb）の

・横の中心位置が

・250pt よりも

・大きく

・加えて、

・thumbレイヤーの縦の中心位置が520pt よりも大きければ

thumb.cx>250&&thumb.cy>520

amana tech night #2 // 実践！ Pixate

250pt

520pt

前ページに書いた条件

に当てはまるエリアで

のみ、サイズを小さく

した。

amana tech night #2 // 実践！ Pixate

条件でできることは限られているため、

慣れるのに時間はかかりません。

詳しく知りたい方は↓を読んでみてください。

http://help.pixate.com/knowledgebase/articles/462989-11-conditions

amana tech night #2 // 実践！ Pixate

11

カートボタンの大きさも変えてみる

Scale アニメーションを

btn_cart レイヤーにD&Dで適用する

■Basedon

thumb/DragStart

■ Scale

1.5x

に設定する

2つ目の Scale アニメーションを適用し、

■Basedon

thumb/DragRelease

■ Animates

Withdurationtofinalvalue

に設定する

『conditions.txt』の 01をペーストする

■ Scale

1x/基点を右下に変える

■ EasingCurve

spring

■ Friction/Tension

10/300

に設定する

『+CONDITION』をクリックし、条件を

追加

■ Scale

1x/基点は右下

に設定する

amana tech night #2 // 実践！ Pixate

12

サムネイルの処理を詰めるこれを適用することで、サムネイルを離した時にカートに吸い込まれたように見えます

thumb.png に Fade アニメーションを

追加し、

■Basedon

thumb/DragRelease

■ Animates

Withdurationtofinalvalue

に設定する

『conditions.txt』の 01をペーストする

■ Fadeto

0%

■ Duration

0s

に設定する

amana tech night #2 // 実践！ Pixate

ex1

highlighted を再現するどこをタップしたのかが分かるようになります

①

main レイヤー内に新規レイヤーを

作成する（ここではhighlighted

に名前を変更）

■ Position

Left:4pt/Top:4pt

■ Size

Width:312pt/Height:209pt

■ Appearance 内 Color

ffffff

■ Opacity

0%

に設定する

②

Fade アニメーションを 2つ追加し、

1つ目を

■Basedon

thumb/DragStart

■ Fadeto

50%

2つ目は

■ Basedon

thumb/DragRelease

■ Fadeto

0%

に設定する

amana tech night #2 // 実践！ Pixate

ex2

カートの数字を変えてみる

Reorder インタラクションを

btn_cart_01.png に D&Dで適用する

■Basedon

thumb/DragRelease

に設定する

■Ordering

PlaceBehind/btn_cart_01.png

■ Delay

1.5seconds

に設定する

『conditions.txt』の 01をペーストする

Tap インタラクションを

btn_cart レイヤーにD&Dで適用する

btn_cart_00.pngに再度 Reorder を適

用して

■Basedon

thumb/DragRelease

に設定する

■Ordering

BringToFront

■ Delay

0seconds

に設定する

amana tech night #2 // 実践！ Pixate

完成！

amana tech night #2 // 実践！ Pixate

おまけ

Pixate でできることの簡単な解説

amana tech night #2 // 実践！ Pixate

Pixate でできること ( ざっくり )

レイヤーに

レイヤーを

レイヤーのを付加して

させる

xの位置/x の中心位置/y の位置/y の中心位置/右位置/下位置

スケール/x のスケール/y のスケール/透明度/回転/x の回転

yの回転/z の回転/y のスクロール速度/x のスクロール速度

yのスクロール量/x のスクロール量

に変化があった場合

ドラッグ/タップ/ダブルタップ/長押し

回転/ピンチ/スクロール

移動/スケール/回転/透明度/色の切り替え

画像の切り替え/階層切り替え

amana tech night #2 // 実践！ Pixate

Pixate を使ってみての雑感

•できることに限りがあるのがいい

• iPhone でも Android でも見れるのがいい

•Origami や Framerjs よりも覚えるのが簡単

amana tech night #2 // 実践！ Pixate

まとめ

•作ったプロトタイプをどう使うかが大切

•実際に触ってできることできないことを知ろう

•あまり手法に振り回されすぎないように！

amana tech night #2 // 実践！ Pixate

参考リンク

公式ヘルプ (5,6,10,10a,10b,11 は特に必読 )

公式チュートリアル

公式デモ

PrototypingandDesignwithLyft&Pixate

http://help.pixate.com/knowledgebase/articles/461798-1-introduction

http://www.pixate.com/education/video-tutorials/

http://www.pixate.com/education/demos/

https://www.youtube.com/watch?v=X-jDSOHsix8