Apple原理主義者の大坪です。
Facebookが「インタラクションデザインのPhotoshop」を公開したぞーと驚いたのが２月の始め。さて使ってみようと思ってはみたけれど肝心のQuartz Composerの使い方を完全に忘れている。とはいえ
「インタラクションデザイナーと名乗るからにはこれくらい使えなくちゃね」
などと言いっぱなしで終わるのはいかがなものか（そもそもお前はいつからインタラクションデザイナーについて語れるようになったのだ、という根本的は疑問は無視）
というわけで、まずOrigamiを使うまでの手順を書きます。
自分が「正しいコンピュータ」を持っていることを確認する。「正しいコンピュータ」とはMacです。はて、Windows PCってなんのことですか？（錯乱）
Origamiのページに行く。ここからページの下半分に書いてある手順です。
Appleの開発者登録を行う。(Apple Developer Registration - Apple Developer)登録だけなら無料。 下のほうにあるSign Inを選びます。もしiPhoneとかを持っていて、既にApple IDを作っていればそれを入力するだけで登録できます（多分）
ここをクリックしてQuartz Composerをダウンロードしてインストールする。（さっき登録した開発者IDとパスワードの入力が必要） ダウンロードしたディスクイメージをダブルクリックすると、Graphics Toolsというフォルダが開きます。この中のQuartz Composerというアプリをアプリケーションフォルダにコピーします。
Origamiのインストール：最初のページのリンクの「３」番をクリックするだけで、ファイルがダウンロードされます。でもってそれをダブルクリックするとインストーラーが開いてOrigamiがインストールされる。その後サンプルのページが開き、かつQuartz Composerが起動します。
というわけで、ようやくOrigamiを使う準備ができました。
Origamiのサンプルページにはいくつかの例が載っています。その中で一番簡単な"Alpha and Scale"を一部だけ（Scaleのみ）「写経」しつつ、何をしているのかについて分かったことを書きます。
とはいってもQuartz Composerの使い方というのは少し変わっている。まずはいくつかの基本用語を抑えないことにはなんともなりません。以下の２つのサイトが参考になると思います。
Quartz Composer入門 良いサイトですが、内容が9年前なのが惜しい。
上記ページを見てからでもよいですし、なんなら飛ばして後から見てもよいです。とにかくQuartz Composerを立ち上げます。するとTemplate Chooserという画面が表示されます。Basic Compositionを選んで、右下のChooseというボタンを押す。
すると２つのウィンドウが開きます。一つはEditorとタイトルがついていて、なにやらClearという文字がついた青い四角がでている。もう一つのウィンドウはViewerで真っ黒です。
Editorの中に表示される四角いものは、「パッチ:Patch」と呼ばれます。「何かをしてくれる」ものです。Quartz Composerのプログラミングは、このパッチを並べて、必要な情報をつなぐことで行います。
真っ暗のViewerをみていても、楽しくないのでとりあえずiPhoneを表示させましょう。Editorの右上にある"Patch Library"というボタンを押します。するとこんな画面がでてきます。
下の方にある検索窓に"Phone”と入力するとこんな感じになります。 でもってPhoneのところをダブルクリックしてください。するとEditorにPhoneが追加されます。それと同時にViewerにもiPhoneの外枠が表示されます。
わーい、できたできたー、と喜びたいところですが、まだ外枠が表示されただけだということを思い出しましょう。先は長いのです。
とはいえここで一休みしてそもそも何をやっているかを考えるのは無駄ではないでしょう。
青い色をしたパッチは、「スクリーンに何かを表示する」役目を持っています。今はPhoneとClearの２つの青いパッチがある。スクリーンに何かを表示してくれるものが２つあるとき何がおこるか？一つが書き込んだ上に、もう一つが書き込むという動作をします。その順番を示しているのが、右肩にある小さな数字。数字が小さいものほど下にある。そこをクリックすると順番を変えられます。ちなみにここでClearを２にすると、画面に何も表示されなくなります。Phoneが一生懸命フレームを書いても、上からクリアされてしまうわけですね。
さて、もし青いパッチの順番を変えていたとしたら元に戻して...(Clearパッチを1,Phoneパッチを２）
ここから２つパッチを追加します。まずTemplate Chooserから"Phone Dimensions"を選んでEditorに追加。もう一つは"Render in Image"です。
追加した"phone Dimensions"を選んで、メニューバーにある"Parameters"を選ぶと、右側にパッチで設定できるパラメータを入力する画面がでます。iPhone/Android/Windows Phoneが選べるはずです。
Render in Imageパッチを選択すると、なにやら英語で説明がどわーっと出ます。細かいところは別として読んでみると「このパッチのサブパッチが描画したものを、Imageとして出力するよん」と書いてあるような、書いてないような。というわけで、今存在しているパッチを接続しましょう。
Phone DimensionsのPixels Wideをクリックして、ボタンを押したままずりずるとどらっぐすると糸が伸びます。その糸を、Render in ImageのPixels Wideにつなぐ。同様にして
Phone DimensiosのPixels High→Render in ImageのPixels High
Render in ImageのImage→PhoneのScreen Image
つなぎ終わるとこんな感じに見えます。ここまでで何をやっているかというと、
画面のサイズをPhone DimensionsからRender in Imageに渡す
Render in Imageは描画した結果を（まだ何も作ってないけど）Phoneに渡す。
Quartz Composerはひたすら画面をクリアした後に、Render in Imageから渡された結果を描画する。
というわけで、あとはRender in Imageの中身さえちゃんと作ればきっと何かができるはずさ！とまるで駅前で歌っている若者のようなことを言ったところで次に行きます。
Render in Imageのパッチをダブルクリックします。ここで"Render in image"の文字をクリックするとタイトルが編集できるモードになってしまいますので下の方をダブルクリックしましょう。するといきなり画面がまっさらになります。
うぎゃー、今まで作ったのが全部消えた！と叫ぶ前に深呼吸をしましょう。大丈夫。メニューバーのオレンジ色のメニュー"Edit Parent"を押せばさっきの画面に戻るはずです。つまるところはRender in Imageの中にはいっていたのでした。
というわけでもしEdit Parentを押していれば、もう一度Render in imageをダブルクリックしてまっさら画面に戻ります。心を一旦落ち着けて次の図のようにひたすらパッチを入力＋パッチの間をつなぎましょう。ヒント：最初に"Image"を追加すると、一緒に"Layer"も接続され＋追加されるのでお得です。
ここで何をしている（と思われるか）は後で説明します。ひたすら写経の精神でつなぐのです。でもって3点だけ設定が必要な部分があります。
まず右下のほうにある"Transition"パッチですが、選んだ状態でPatch Inspectorを開くと"Start Value"とEnd Valueという欄があり、値が０と１になっています。このStart Valueのほうを0.5にしてください。（これを忘れると、最初の画面が真っ黒になります）
次にBouncy Animationパッチを選びPatch Inspectorを開いてください。Tensionという値を100にします。（これを忘れると、拡大したときにあまり「びよーん」と動かずつまらない思いをします）
最後にImageパッチをクリックした状態でメニューバーの"Patch Inspector"を押しましょう。でもって開いた画面の上部にあるオプションメニューの"Settings"を選択します。でもってここの"import from file"というボタンを押すと、ファイルを選択する画面が開くはずです。ここで画像ファイルを選択します。なんでもいいのですが、このあと何度も見ることになるのである程度の大きさがあって、かつ何度も見たくなるような画像がいいと思います。
選択が終わったら、どきどきしながらメニューバーのViewerボタンをおしましょう。すると先ほど選択した画像がiPhoneの中に表示されているはずです。
でもってiPhoneの画面をマウスでクリックすると画像が大きくなったり、小さくなったりします。ああ、長い道のりだった。感動しませんか？しますよね？ね？（うざい）
というわけでしばし感動しながら画像を大きくしたり小さくしたりしましょう。エンジニアの怨嗟の言葉を聴くことなしにiPhoneアプリの動きを表現することができたのです。画像を拡大するだけの動きになんの意味がある、という根本的な疑問は聞かなかったことにして、「では今何をやっていたのか」の説明は後編で。
今回説明しているプログラムのファイルはGitHubにおいてあります。GitHubとはなんだ？という人は周りにいるソフトウェアエンジニアを捕まえてダウンロードしてもらいましょう*1。GitHubを知らない、などという人はそもそもソフトウェアエンジニアではありません。（暴言）
*1:あるいはリンク先のページで、画面右下のほうにある"Download Zip"というボタンを押しましょう
