Facebook Origamiを使ったプロトタイプ習作 その2

前回に続いて、Origamiのプロトタイピングについて。

前回の課題であった「通常はスクロールに付いてくるが、タップした時にスクロールがオフになって画面中央に拡大表示されるサムネイル」が作れた。

構成はこんな感じ。 

ミソは「Multiplexer」で、こいつを使うと複数入力・単一出力が作れる。

入力にはスクロールと、もう1つクリックのSwitchと繋げたTransition（Start Value:1 || End Value:0）をアテて、出力をサムネイルのxに繋ぐ。

そうすれば、通常時はスクロールする分のxが適用されるが、クリックした時には強制的に0になるのでサムネイルが中央に来る（座標が0=センターになってる）。

今回はOrigami独自のパッチだけじゃなくて、QCがもともと持ってるパッチを使うことになった。きっと今後はそういう機会が増えると思う。

ちなみにQCを勉強する上で鹿野護さんの神本の話題は外せないのだが、Gumroadで定価で販売されてるのでみんな買うべきだと思う。

Quartz Composer Book - PDF edition

今回のものも含めると、QCを触っていた時間は大体12時間程度だと思う（1日3時間ほど）。始めた当初はもっと難しいかと思ったけど、予定よりも早く自分の望む成果が得られたので、とっかかりだけが難点であとは頑張ればなんとでもなると感じた。まあ世の中の大抵はそんな感じか。

さてOrigamiを触っていると、いい意味でも悪い意味でもプログラマ的思考になっているのが自分でも分かる。一定以上使えるようになってくると「できる範囲でものを作ろう」と考えてくるんじゃないか、みたいな。

それは不健全な思考なので、自分の中でOrigamiを使う意図は何か、をはっきり持たないといけないな、と感じた。

じゃあそれは何かと言うと…まぁまだどこまで出来るかを把握してないので答えを出すのは早いとは思うんだけど「自分の端末にプロトタイプを入れて、一連のUI設計 / インタラクションを触って確認してもらう」フェーズに使うべきかな。ある程度要件も固まってデザインも進んで、じゃあ一度流して確認してみましょうか、みたいな時。相手はクライアントの場合もあればエンジニアの場合もある。「触って確認してもらう」ってのがミソで、ここはAEには無理な部分なので、Origamiの出番なのかな、と。

ただqc-mobileの導入がまだ出来てないので、ホントに端末上で動かせるかどうかは怪しい…！

次は実際のデザインに今まで作ってきたものがちゃんと適用できるのかとか、あとはスクロールの閾値を取ってインタラクションに結びつける（Twitterアプリのプロフィール画面とか）部分を作っていこうかと思ってる。