QuartzComposerでiOSアプリプロトタイピングする必要があるのか  #vgadvent2014

**※これは[VOYAGE GROUP エンジニアブログ：Advent Calendar 2014](http://tech.voyagegroup.com/archives/7941760.html)の5日目の記事です。**

VoyageGroupエンジニア ガイアです。
ご存知の通り、モバイルアプリ開発はまずプロトタイプを作り、動きを確認するのがよいとされています。
今回はQuartzComposer上で動く、facebook製のツールOrigamiを見ていきましょう。

##QuartzComposer
http://ja.wikipedia.org/wiki/Quartz_Composer
パッチをついないでいく形でプログラムしていくApple製のツール。
直感的で強力な、メディアアートのためのプロトタイピングツールだと僕は思っています。
（以前よくお世話になっていました）

##Facebook Origami
facebook製のプロトタイピングツール
QuartzComposer上で動くってのがかなり胸熱
日本語の記事もいくつかあります、ちゃんと学びたい人はすぐにリンク先に飛んでください。

[インタラクティブデザインプロトタイピングのための Facebook Origami](http://tai2.net/docs/origami_intro/#eval)
[slideshare Designers Pit 01 Origamiを使ったプロトタイプ作成を学ぼう](http://www.slideshare.net/ryoyos/origami-32856872)

##Facebook Origamiをインストールだ！
[Facebook Origami](https://facebook.github.io/origami/) Get started now に従ってください。
英語のサイトを見ると発作を起こしそうになるやつのために、手順だけ紹介しておきます。
- Xcodeインストール
- 無料のAppleDeveloper登録
- QuarzComposerインストール
- Facebook Origamiインストール

##Sample is Best!
喜んで下さい、facebookチームはサンプルを提供してくれています。
[Origami Example](http://facebook.github.io/origami/examples/) alpha and ScaleをダウンロードしてQuartzComposerにドラック&ドロップしましょう。

![スクリーンショット 2014-12-05 1.44.52.png](https://qiita-image-store.s3.amazonaws.com/0/61786/aa919422-adaf-4737-f7fa-317788cc1904.png)

画面表示の部分をクリックすればiPhoneの画面が出てくるはずです。
もちろんこんな一つのパッチで表現できるわけではありません。
マクロパッチをダブルクリックしてみてください。

![スクリーンショット 2014-12-05 2.00.44.png](https://qiita-image-store.s3.amazonaws.com/0/61786/12eba409-b6d4-66a6-0a96-2379aff3b6ec.png)

ここが基本の入出力です、デバイスの種類をパッチから選び、（パラメタを開いてそこで変更できます）
でレイヤグループパッチの出力されたimageをPhoneで画面に表示しています。
レイヤグループパッチをダブルクリックしましょう。

![スクリーンショット 2014-12-05 1.03.32.png](https://qiita-image-store.s3.amazonaws.com/0/61786/dfb75fe9-0213-8efb-cffb-04b641e7ca7d.png)

ここがインタラクションやイメージ出力を管理しているところです。
青いパッチは画面への出力を行うのですが、
レイヤグループパッチの中で画面出力を行うとレイヤグループパッチの出力として扱えます。

###まあ、まずは触ってみてください。

```
- 触る上で知っておくべきこと
  - 色
    - 青は画面出力
    - 紫がデータ入力
    - 黒が処理
  - パッチの角
    - 角丸のパッチが一番最小のパッチ
    - 角が尖ったパッチがマクロパッチ
```
##使ってみる
では実際にアプリをプロトタイピングしてみます。

###コンセプトと仕様
まずは妄想を膨らませて、どんなアプリを作るか考えます。

![Evernote Camera Roll 20141205 211316.jpg](https://qiita-image-store.s3.amazonaws.com/0/61786/2de78dba-08e8-2577-fd29-49ac4c46c7b5.jpeg)

今回は弊社の[社内Bar AJITO](http://voyagegroup.com/business/office/office015/)の混雑具合を表示する、
AJITO運用監視アプリを作りたいと思いました。

AJITOでのひととき
![AJITO](http://livedoor.blogimg.jp/kushii_/imgs/d/a/dac95710bcfa3c061f95-LL.JPG)
写真は[株式会社 VOYAGE GROUP に行ってきた！ : 941::blog](http://blog.kushii.net/archives/1675844.html)から転載

![Evernote Camera Roll 20141205 211317.jpg](https://qiita-image-store.s3.amazonaws.com/0/61786/0fdaa381-d8bd-5230-679a-5786ffbc025f.jpeg)

```
- いい感じにAJITOの混雑状況を表示してくれる
- AJITOButtonでみんなにAJITOに入ったことを伝えられる
```

###UIデザイン

次に画面遷移や、言われたむちゃくちゃなことを、UIとして落とし込んでいきます。
今回画面は2つでした、このまま見せても、動きが分からないとか、触ってみないとと言われてしまいます。

![Evernote Camera Roll 20141205 212124.jpg](https://qiita-image-store.s3.amazonaws.com/0/61786/cecae586-26f8-2e59-6522-7baab57a8130.jpeg)

![スクリーンショット 2014-12-05 21.14.03.png](https://qiita-image-store.s3.amazonaws.com/0/61786/9966891e-5e54-0935-26fd-f4b8b00a4ae9.png)

###プロトタイピング
Facebook Origamiでプロトタイピング

![スクリーンショット 2014-12-05 21.33.02.png](https://qiita-image-store.s3.amazonaws.com/0/61786/e72283e7-7766-03cb-098c-15df34d3e093.png)

```
- 現在のAJITOの込み具合を色で教えてくれる
　- 緑 空いてる
　- 黄色 ちょっと人が多い
　- 赤 人であふれかえっている
- AJITOへのin通知を出す
```

![スクリーンショット 2014-12-05 21.33.53.png](https://qiita-image-store.s3.amazonaws.com/0/61786/33f9ae2c-e573-a3e0-cbd8-7facafaecf91.png)![スクリーンショット 2014-12-05 21.34.04.png](https://qiita-image-store.s3.amazonaws.com/0/61786/57022db2-1a52-d71b-ae14-bb4c3300815b.png)

社内のハイパーディレクターの方に見てもらいました。

![Evernote Camera Roll 20141205 215017.jpg](https://qiita-image-store.s3.amazonaws.com/0/61786/23881455-6f1f-1fc6-be07-053ae6838b1e.jpeg)

ディレクター「この押す感じがすげーいい、採用したいわ」
通常のプロトタイピングにはない、アニメーションまでかなり作り込めるため、そこがこのディレクターの方に
少しだけ刺さったみたいです。
と、実際にアプリのプロトタイプを作ってみるところまでやってみました。

## 【まとめ】QuartzComposerでiOSアプリプロトタイピングする必要があるのか
###**ほぼない**
まあ他の人も言っていますが、学習コストが高い、プロトタイピングにはリッチすぎる。
デザイナーが使っているであろうツールとはかけ離れている。
ほぼ必要はないと言っていいと思う。

だが、アニメーションが重要になるプロダクト（FacebookのPaperとか)ではもちろん
動的にパラメータを設定できることは非常に価値のあることだと思う。
全体を作るのは難しいが、パラメータを変えるぐらいならだれでもできる。
そういう意味では、Baseのプロジェクトがあれば変更が容易であると言える。
また、ユーザテストにも向いているでしょう。

エンジニアからしたらデザイナがこんなツールばりばり触ってたら冷や汗ものです。
デザイナーの表現方法が広がり、僕らも更に学んでいかなければ、形にはならないでしょう。
なんともエンジニア泣かせのツールです。

さて、この記事は[VOYAGE GROUP Advent Calendar 2014](http://tech.voyagegroup.com/archives/7941760.html)、12/5の記事でした。
次は@hagino3000さんらしいので、皆さん、お楽しみに！！