インタラクティブデザインプロトタイピングのための
Facebook Origami
この記事では、Facebook Origamiの概要を説明してから、簡単なプロトタイプの作りかたを説明します。(筆者のOrigamiに対する評価は、記事の最後にあります)
Origamiは、Facebookのデザインチームが公開している、アプリケーションプロトタイプを作成するためのMac OSX上で動作するツールです。Origamiを使えば、パッチと呼ばれる要素を線で繋いでいくことで、プログラミング言語を習得しなくても、インタラクティブなモックアップを作成することができます。昨今、アプリケーションのデザインにおいて、アニメーションを含むインタラクティブな要素の重要性は増してきていますが、通常、インタラクティブなモックアップを作成するためには、なんらかのプログラミング言語や、マークアップ言語でコードを記述しなければなりません。CompositeのようなPhotoshopと連携して、インタラクティブなモックアップを作成できるツールもありますが、自由度はそれほど高くないので、フレームワークの枠からはみ出た新規性のあるアプリケーションのアイデアを実験するには向いていません。
Origamiは、世界中のVJたちに愛用されてきた実績のあるヴィジュアル作成環境であるQuartz Composerをベースにしているので、自由自在な表現をプログラミング言語の知識なしに試すことができます。
Origamiは、Quartz Composerという、Apple社によるモーショングラフィック作成ツールへのプラグインという形で提供されています。Quartz Composerは、汎用のモーショングラフィック作成環境ですので、これだけでもインタラクティブなアプリケーションを作成することは可能ですが、Origamiをインストールすることにより、アプリケーションプロトタイプがより簡単にできるように、いくつかの機能(パッチ)が追加されます。
Quartz Composer自体は、Appleは最近あまり積極的にアップデートする気はないらしく、最後にアップデートされたのが2011年です。動作が不安定で、筆者のMavericks環境だと、プロジェクトのウインドウをクローズするたびにクラッシュしたりします。そのあたりさえ目をつむれば、問題なく使えます。
Quartz Composerでのヴィジュアル作成の基本要素となるのが、パッチです。それぞれのパッチには、入力ポートと出力ポート(どちらか片方のみの場合もある)が備わっており、ポートとポートを接続することで、コンポジションを作成していきます。ポートを流れる値には、数値や画像など、さまざまな型があります。
図1 マクロパッチ(Phone Dimensions, Phone)と通常のパッチ(Layer Group)
通常のパッチは、角が丸くなっていますが、マクロパッチと呼ばれる角の四角い特別なパッチもあります。マクロパッチは、複数のパッチをひとまとめにする機能があります。マクロパッチをダブルクリックすると、その中に入って、マクロパッチに含まれるサブパッチを編集することができます。これを使うことで、コンポジションを階層化して整理することができるのです。マクロパッチは、自分で任意に作成することもできますが、中には、できあいの、それ自体が特殊な用途を持ったものもあります(たとえば、マクロの中で描画された結果を、それ自体ひとつの画像として出力する、Render in Imageパッチや、パッチの中で描画されるオブジェクトに照射される照明のパラメータを設定するLightingパッチなどがあります)。
Origamiの実体は、パッチの集合です。ここでは、以降のサンプルで使用するいくつかのパッチについて簡単に説明します。といっても、Origami自体のパッチは、全部合わせてもそれほど多くはありません(Quartz Composer自体に含まれるパッチを含めると膨大な数になりますが)。Origamiパッチの独自機能として、パッチ名の横に、通常のQuartz Composerのパッチにはないポートがあります。Origamiパッチの中には、このポート特殊なポートを互いに接続することで、組になって動作するものがあります。
図2 Interaction 2パッチとHit Areaパッチは、組になって動作する
Layerパッチは、Origamiでもっとも基本的なパッチです。これを使うことで、UI要素を画面上に簡単にレイアウトできるようになります。
複数のLayerをグループ化します。
テキストを描画します。
Quartz Composerの世界では、実行中常に時間が流れており、ある種のパッチは、値を時間にそって変化させます。Classic Animationパッチは、Numberポートに接続された値が変化したときに、その二つの値の間を一定時間で変化させます(いわゆるEasingです)。これにより、UI用要素の滑らかな変化を表現できます。
0〜1の間の値を、任意の区間の数値にマッピングします。Classic Animationパッチや、それに類するパッチと組み合わせて使うと便利です。
マウスに関するイベントを送出します。Hit Areaパッチと組み合わせて使います。ちなみに、2となっているのは、InteractionというパッチがQuartz Composerにもともとあるからです。
ユーザー入力に反応する領域を定義します。Interaction 2パッチと組み合わせて使います。
内部にOn/Offの状態を保持しており、FlipポートがTrueになるたびに、状態を反転させます。
さまざまなモバイルの解像度が定義されています。また、デバイスの向きを切り替えることもできます。Phoneパッチと組み合わせて使います
モバイルデバイスを模した枠を描画します。
モバイルだけでなく、デスクトップブラウザを模した外観もあります。
それでは、簡単なプロトタイプを作ってみましょう。この例では、iOS7のカメラアプリを模したプロトタイプを作ってみます。完成版のコンポジションとアセットを置いておきますので、参考にしてください(インターネットからダウンロードしたコンポジションの初回の実行は、Finderのコンテキストメニューからファイルを開く必要があります)。
まずは、全体の枠組みを作ります。エディターウインドウにパッチを配置するには、Patch Libraryを使います。ツールバーからPatch Libraryを開きます(または、Cmd+Enterを押す)。Patch Library下部の検索ボックスにパッチ名を入力すると絞り込みができます。以下の3つのパッチを画面に配置してください。
次に、Phone DimensionsパッチとLayer GroupパッチのPixels Wideポート,Pixels Highポートをそれぞれ接続します。また、Layer GroupパッチのImageポートとPhoneパッチのScreen Imageポートも接続します。図1のようなコンポジションになったかと思います。では、実行してみましょう。ツールバーから、Viewerを開きます(または、Cmd+Shift+V)。中身が空のiPhoneの枠が表示されます。
画像パーツを配置して、全体のレイアウトを行います。完成すると、以下のような実行画面が得られます。
図3 全体のレイアウトを完了したViewerウィンドウ
エディターウィンドウへ画像ファイルをドラッグ&ドロップすると、画像をインポートできます。Origamiをインストール済みの場合は、画像インポート時に、自動的にLayerパッチがImageパッチと接続された状態で追加されます。パッチ名の部分をダブルクリックすると、任意の文字列をラベルとして表示できますので、理解し易い名前を付けましょう。テキストの表示は、Text Layerパッチ、半透明の背景には、Layerパッチを使います。
Parametersペインから、パッチのパラメータを設定できます。ツールバーから表示してください(または、Cmd+T)。LayerパッチのWidthとHeightはてきとうに設定してください。初期設定でAnchor PointがCenterになっていますので、配置場所に応じて変えると、簡単にレイアウトできます。pic2.pngは、サムネイルを押したときに遷移するビューになりますので、初期状態では画面外に置いておきます。Anchor PointをTop Centerにして、Y Positionを-1136にしてください。全体のレイアウトが終わった段階でのコンポジションを置いておきます。
カメラアプリでは、画面のトランジションが起きる前にプレビューにボケが入りますので、それを再現してみます。
まずは、プレビューエリアをボカしてみましょう。Quartz Composerには、じつに様々なフィルターが用意されています。画像をやわらかくボカすためには、Gaussian Blurパッチが使えます。次の図のようにプレビューエリアのImageパッチとLayerパッチの間に、Gaussian Blurパッチを差し込んでみましょう。
図4 画像にボカしをかけるための接続
プレビュー画像がボケました。ボケ味の強さは、Radiusポートの値によって決まりますので、値を変化させて確認してみてくだい。0にすると、ボケなしになります。
図5 ぼかしを入れたプレビュー
画面をクリックしたときの挙動を実装するには、Hit AreaパッチとInteraction 2パッチを使います。Hit AreaパッチとInteraction 2パッチは、パッチ名の左側にあるポートを接続して使います。
Interaction 2パッチのClickポートは、Hit Areaパッチがクリックされたときに一度だけTrueになります。クリックによって切り替わる挙動を表現するために、Switchパッチを使いましょう。SwitchパッチのFlipポートをInteraction 2パッチのClickポートと接続します。これにより、Hit Areaがクリックされるたびに、SwitchパッチのOn/Offの値が反転する回路ができます。
Switchパッチの出力は、真偽値型です。真偽値型は、TrueまたはFalseの値を取りますが、これは、数値で言うと1または0に相当しますので、真偽値型を取るポートを直接数値型のポートに接続することもできます。したがって、Switchパッチの出力は、1と0との間をいったりきたりすることになりますが、このままではアニメーションに使うには都合が悪いです。数値と数値の間を滑らかに変化させるには、Classic Animationパッチを使います。このパッチは、Numberポートに入力された値が変化したときに、それらの値の間を時間をかけてなめらかに変化させてくれます。Numberポートと、On/Offポートを接続しましょう。
Classic Animationポートの出力は、常に0から1の間の値を取ります。われわれは、いま、サムネイルがクリックされたときに、プレビューのボケ味を変化させたいのですが、0〜1では、ボケ味の強さが足りません。値の範囲を広げるためにTransitionパッチを使いましょう。このパッチは、0〜1の範囲で変化する値を、任意の範囲にマッピングしてくれます。値の範囲は、0〜20くらいに設定した上で、Classic AnimationとTransitionパッチのProgressポートを接続します。あとは、TransitionパッチのValueとGaussian BlurパッチのRadiusを接続すれば、写真をぼかす処理は完成です。
図6 クリックに反応してボカしを入れるための接続
カメラアプリでは、プレビューのぼかし処理が完了した後に、下から写真ビューがせり上がってきます。やりたいことは、ぼかし処理が終わったかどうかの判定です。条件分岐には、Quartz ComposerのConditionalパッチを使います。First ValueとClassic AnimationパッチのProgressポートを接続して、Second Valueには1、Conditionには、is Equalを設定します。これにより、ぼかし処理が完了したときに、ConditionalパッチのResultが1になります。
これをそのまま次のパッチの出力にしてもいいのですが、写真ビューをクローズするときのことも考えて、もうひとつ条件を加えておきましょう。前期の条件に加えて、SwitchパッチがOffのときに限り、結果がTrueになるように仕込んでおきます。こうしておくと、クローズ処理のときにも正しい結果が得られます。ふたつの条判定を接続するには、Logicパッチを使います。OperationポートをANDに設定して、入力をSwitchパッチとConditionalパッチの出力に接続します。
あとは、写真ビューのY座標を-1136から0に滑らかに変化させます。ぼかし処理のときと同様に、Classic AnimationパッチとTransitionパッチを使って処理してみてください。
最後に、完了ボタンを押したときのクローズ処理を実装します。
まずは、完了ボタンにHit AreaパッチとInteraction 2パッチを設定して、フッタのサムネイルと完了ボタンどちらが押されたときにも、Switchパッチの状態が反転するように修正します。ふたつのInteraction 2パッチのClickポートとORに設定したLogicパッチを接続します。ORパッチの出力は、SwitchパッチのFlipポートに接続します。
この状態でも画面のクローズは動きますが、ぼかし解除とスライドアウトが同時に走ってしまいます。カメラアプリでは、スライドアウトが完了してからぼかし処理が開始する段取りになっていますので、再現してみます。写真ビューの表示で作成したClassic Animationパッチの出力が0よりも大きいとき、または、SwitchがOnのときという条件のConditionalパッチを作成して、ぼかし処理のClassic Animationパッチに接続します。以上で、最初に提示したサンプルコンポジションと同じプロトタイプが作成できました。
次のステップとしては、今回作成したコンポジションを元に、動画モードから、写真モードへの遷移などを実装してみるといいかもしれません。