designers pit 01 origamiを使ったプロトタイプ作成を学ぼう
DESCRIPTION
イベントページ：http://connpass.com/event/5507/ 近年、モバイルアプリの世界において、1枚のデザインカンプや切り出した画像リソースを用いて、擬似的に動くプロトタイプを作り出せるツール・サービスが登場しています。 これによってデザイナーでも手軽にプロトタイピングのサイクルを作れるようになりましたが、まだまだインタラクションを伴った成果物を作るのは難しく、また環境も整っていません。 このワークショップではFacebookデザインチームが開発したQuartz Composer用ツールキット「Origami」について学び、インタラクティブなプロトタイプの作成を体験して頂けます。TRANSCRIPT
Designers Pit 01
Designers Pit 2
タイムテーブル
1900 講師紹介挨拶参加者自己紹介
1910 イントロダクション〜Origami について〜
1920 ワークショップ（基礎編30分応用編 30分を予定）
2030 まとめ
2040 終了
2045 次回 LT
2100 退室
Designers Pit 3
自己紹介
httpyo-ryhateblojp
吉竹 遼（よしたけ りょう）
1987 年 4 月生まれ
2011 年よりフェンリルで UI デザイナーとして働いています
Origami 歴はトータル 20 時間程度
ニャーン
Designers Pit 4
イントロダクション
Designers Pit 5
プロトタイピングの種類
ペーパープロトタイプ紙ベースでプロトタイプを作成しクライアントやエンジニアと認識合わせを行いますデバイスを模したベースの紙上に UI コンポーネントの形をした紙片を置き福笑いのように入れ替えながらレイアウトについて議論したり紙芝居のように 1 枚 1 枚画面を遷移の順にスライドして流れを確認したりします
UI プロトタイプ要件も固まりデザインカンプを作成した後はより実際のプロダクトに近いプロトタイプを作ることで具体的なイメージ全体的な流れをクライアントと共有できますデザインカンプを用いて作成することがほとんどとなりUI の振る舞い方や画面遷移のトランジションなどより本物らしいプロトタイプを作ることが可能です
Designers Pit 6
プロトタイピングの種類
インタラクティブプロトタイプビデオプロトタイプは一方通行なアウトプットとなるため見栄えはいいものの実際に触って試せないという弱点がありますUI プロトタイプとビデオプロトタイプの中間くらいに位置するのがインタラクティブプロトタイプです名前通りユーザーのフィードバックを受けて実際に動くプロトタイプを作成することができます
プロトタイピングのためのツールやサービスは色々あるので詳しく知りたい方は httpyo-ryhateblojpentry20140213204727をどうぞ
ビデオプロトタイプUI プロトタイプは画面遷移の作成確認が主となるため細かいアニメーションは機能的に補えないものがほとんどですまた新しい UI のかたちを考える際にもツールとしては不適切ですそのような「間の動き」を補完したりゼロから新しい UI を作る場合などに動画を使ったプロトタイプが用いられます
Designers Pit 7
Origami とは何か
Origami とはFacebook Design チームがプロトタイピ
ングを行うために開発した『Quartz Composer』用のツー
ルキットです
例えるならライブラリとかアドオン的な存在
本来であればスクリーンセーバーや VJ っぽいプログラムを
作るための QC を使ってプロトタイプを作成するという面
白い試みですあの Facebook Paper などもOrigami
を使ってプロトタイピングをしたそうです
httpfacebookgithubioorigami
Designers Pit 8
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
Designers Pit 9
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
もちろん時と場合によって印象は変わります
というかこの表は完全に主観 (Flash 触ったことないhellip)
何を作るかによって作成時間は上下するし
端末による確認も見て確認なのか触って確認なのかで
大きく変わります
Designers Pit 10
なぜ Origami なのか
Origami を選ぶワケビデオプロトタイプのように一方向性でない
Framer のようにプログラムを書かなくてもよい
Facebook ページがそこそこ賑わっている
定型的なインタラクションならすぐ作れる
慣性の調整が簡単にできる
Origami を選ばないワケ参考になるドキュメントが少ない
初期の学習曲線の伸びが低い
Apple に見放された環境である
自由度を得るにはプログラムの記述が必要
実装面での効率化はあまり図れない
Designers Pit 11
なぜ Origami なのか
どんな時に Origami を使うべきか
Flinto や Briefs など静的イメージのみで作るプロトタイプでは
伝わらないでも動きを正確に伝えたい 部分を作りたい時
動作の繰り返しや行ったり来たりを検証して自分が頭の中で思
い描いていたインタラクションと差異がないか確認したい時
この 2 つがメインかなと個人的には思います
全体の設計の流れは Flinto や Briefs で行い確認したい箇所ご
とに Origami で作るが効果的に成果を得られそうな感触
Designers Pit 12
HelloOrigami
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 2
タイムテーブル
1900 講師紹介挨拶参加者自己紹介
1910 イントロダクション〜Origami について〜
1920 ワークショップ（基礎編30分応用編 30分を予定）
2030 まとめ
2040 終了
2045 次回 LT
2100 退室
Designers Pit 3
自己紹介
httpyo-ryhateblojp
吉竹 遼（よしたけ りょう）
1987 年 4 月生まれ
2011 年よりフェンリルで UI デザイナーとして働いています
Origami 歴はトータル 20 時間程度
ニャーン
Designers Pit 4
イントロダクション
Designers Pit 5
プロトタイピングの種類
ペーパープロトタイプ紙ベースでプロトタイプを作成しクライアントやエンジニアと認識合わせを行いますデバイスを模したベースの紙上に UI コンポーネントの形をした紙片を置き福笑いのように入れ替えながらレイアウトについて議論したり紙芝居のように 1 枚 1 枚画面を遷移の順にスライドして流れを確認したりします
UI プロトタイプ要件も固まりデザインカンプを作成した後はより実際のプロダクトに近いプロトタイプを作ることで具体的なイメージ全体的な流れをクライアントと共有できますデザインカンプを用いて作成することがほとんどとなりUI の振る舞い方や画面遷移のトランジションなどより本物らしいプロトタイプを作ることが可能です
Designers Pit 6
プロトタイピングの種類
インタラクティブプロトタイプビデオプロトタイプは一方通行なアウトプットとなるため見栄えはいいものの実際に触って試せないという弱点がありますUI プロトタイプとビデオプロトタイプの中間くらいに位置するのがインタラクティブプロトタイプです名前通りユーザーのフィードバックを受けて実際に動くプロトタイプを作成することができます
プロトタイピングのためのツールやサービスは色々あるので詳しく知りたい方は httpyo-ryhateblojpentry20140213204727をどうぞ
ビデオプロトタイプUI プロトタイプは画面遷移の作成確認が主となるため細かいアニメーションは機能的に補えないものがほとんどですまた新しい UI のかたちを考える際にもツールとしては不適切ですそのような「間の動き」を補完したりゼロから新しい UI を作る場合などに動画を使ったプロトタイプが用いられます
Designers Pit 7
Origami とは何か
Origami とはFacebook Design チームがプロトタイピ
ングを行うために開発した『Quartz Composer』用のツー
ルキットです
例えるならライブラリとかアドオン的な存在
本来であればスクリーンセーバーや VJ っぽいプログラムを
作るための QC を使ってプロトタイプを作成するという面
白い試みですあの Facebook Paper などもOrigami
を使ってプロトタイピングをしたそうです
httpfacebookgithubioorigami
Designers Pit 8
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
Designers Pit 9
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
もちろん時と場合によって印象は変わります
というかこの表は完全に主観 (Flash 触ったことないhellip)
何を作るかによって作成時間は上下するし
端末による確認も見て確認なのか触って確認なのかで
大きく変わります
Designers Pit 10
なぜ Origami なのか
Origami を選ぶワケビデオプロトタイプのように一方向性でない
Framer のようにプログラムを書かなくてもよい
Facebook ページがそこそこ賑わっている
定型的なインタラクションならすぐ作れる
慣性の調整が簡単にできる
Origami を選ばないワケ参考になるドキュメントが少ない
初期の学習曲線の伸びが低い
Apple に見放された環境である
自由度を得るにはプログラムの記述が必要
実装面での効率化はあまり図れない
Designers Pit 11
なぜ Origami なのか
どんな時に Origami を使うべきか
Flinto や Briefs など静的イメージのみで作るプロトタイプでは
伝わらないでも動きを正確に伝えたい 部分を作りたい時
動作の繰り返しや行ったり来たりを検証して自分が頭の中で思
い描いていたインタラクションと差異がないか確認したい時
この 2 つがメインかなと個人的には思います
全体の設計の流れは Flinto や Briefs で行い確認したい箇所ご
とに Origami で作るが効果的に成果を得られそうな感触
Designers Pit 12
HelloOrigami
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 3
自己紹介
httpyo-ryhateblojp
吉竹 遼（よしたけ りょう）
1987 年 4 月生まれ
2011 年よりフェンリルで UI デザイナーとして働いています
Origami 歴はトータル 20 時間程度
ニャーン
Designers Pit 4
イントロダクション
Designers Pit 5
プロトタイピングの種類
ペーパープロトタイプ紙ベースでプロトタイプを作成しクライアントやエンジニアと認識合わせを行いますデバイスを模したベースの紙上に UI コンポーネントの形をした紙片を置き福笑いのように入れ替えながらレイアウトについて議論したり紙芝居のように 1 枚 1 枚画面を遷移の順にスライドして流れを確認したりします
UI プロトタイプ要件も固まりデザインカンプを作成した後はより実際のプロダクトに近いプロトタイプを作ることで具体的なイメージ全体的な流れをクライアントと共有できますデザインカンプを用いて作成することがほとんどとなりUI の振る舞い方や画面遷移のトランジションなどより本物らしいプロトタイプを作ることが可能です
Designers Pit 6
プロトタイピングの種類
インタラクティブプロトタイプビデオプロトタイプは一方通行なアウトプットとなるため見栄えはいいものの実際に触って試せないという弱点がありますUI プロトタイプとビデオプロトタイプの中間くらいに位置するのがインタラクティブプロトタイプです名前通りユーザーのフィードバックを受けて実際に動くプロトタイプを作成することができます
プロトタイピングのためのツールやサービスは色々あるので詳しく知りたい方は httpyo-ryhateblojpentry20140213204727をどうぞ
ビデオプロトタイプUI プロトタイプは画面遷移の作成確認が主となるため細かいアニメーションは機能的に補えないものがほとんどですまた新しい UI のかたちを考える際にもツールとしては不適切ですそのような「間の動き」を補完したりゼロから新しい UI を作る場合などに動画を使ったプロトタイプが用いられます
Designers Pit 7
Origami とは何か
Origami とはFacebook Design チームがプロトタイピ
ングを行うために開発した『Quartz Composer』用のツー
ルキットです
例えるならライブラリとかアドオン的な存在
本来であればスクリーンセーバーや VJ っぽいプログラムを
作るための QC を使ってプロトタイプを作成するという面
白い試みですあの Facebook Paper などもOrigami
を使ってプロトタイピングをしたそうです
httpfacebookgithubioorigami
Designers Pit 8
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
Designers Pit 9
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
もちろん時と場合によって印象は変わります
というかこの表は完全に主観 (Flash 触ったことないhellip)
何を作るかによって作成時間は上下するし
端末による確認も見て確認なのか触って確認なのかで
大きく変わります
Designers Pit 10
なぜ Origami なのか
Origami を選ぶワケビデオプロトタイプのように一方向性でない
Framer のようにプログラムを書かなくてもよい
Facebook ページがそこそこ賑わっている
定型的なインタラクションならすぐ作れる
慣性の調整が簡単にできる
Origami を選ばないワケ参考になるドキュメントが少ない
初期の学習曲線の伸びが低い
Apple に見放された環境である
自由度を得るにはプログラムの記述が必要
実装面での効率化はあまり図れない
Designers Pit 11
なぜ Origami なのか
どんな時に Origami を使うべきか
Flinto や Briefs など静的イメージのみで作るプロトタイプでは
伝わらないでも動きを正確に伝えたい 部分を作りたい時
動作の繰り返しや行ったり来たりを検証して自分が頭の中で思
い描いていたインタラクションと差異がないか確認したい時
この 2 つがメインかなと個人的には思います
全体の設計の流れは Flinto や Briefs で行い確認したい箇所ご
とに Origami で作るが効果的に成果を得られそうな感触
Designers Pit 12
HelloOrigami
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 4
イントロダクション
Designers Pit 5
プロトタイピングの種類
ペーパープロトタイプ紙ベースでプロトタイプを作成しクライアントやエンジニアと認識合わせを行いますデバイスを模したベースの紙上に UI コンポーネントの形をした紙片を置き福笑いのように入れ替えながらレイアウトについて議論したり紙芝居のように 1 枚 1 枚画面を遷移の順にスライドして流れを確認したりします
UI プロトタイプ要件も固まりデザインカンプを作成した後はより実際のプロダクトに近いプロトタイプを作ることで具体的なイメージ全体的な流れをクライアントと共有できますデザインカンプを用いて作成することがほとんどとなりUI の振る舞い方や画面遷移のトランジションなどより本物らしいプロトタイプを作ることが可能です
Designers Pit 6
プロトタイピングの種類
インタラクティブプロトタイプビデオプロトタイプは一方通行なアウトプットとなるため見栄えはいいものの実際に触って試せないという弱点がありますUI プロトタイプとビデオプロトタイプの中間くらいに位置するのがインタラクティブプロトタイプです名前通りユーザーのフィードバックを受けて実際に動くプロトタイプを作成することができます
プロトタイピングのためのツールやサービスは色々あるので詳しく知りたい方は httpyo-ryhateblojpentry20140213204727をどうぞ
ビデオプロトタイプUI プロトタイプは画面遷移の作成確認が主となるため細かいアニメーションは機能的に補えないものがほとんどですまた新しい UI のかたちを考える際にもツールとしては不適切ですそのような「間の動き」を補完したりゼロから新しい UI を作る場合などに動画を使ったプロトタイプが用いられます
Designers Pit 7
Origami とは何か
Origami とはFacebook Design チームがプロトタイピ
ングを行うために開発した『Quartz Composer』用のツー
ルキットです
例えるならライブラリとかアドオン的な存在
本来であればスクリーンセーバーや VJ っぽいプログラムを
作るための QC を使ってプロトタイプを作成するという面
白い試みですあの Facebook Paper などもOrigami
を使ってプロトタイピングをしたそうです
httpfacebookgithubioorigami
Designers Pit 8
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
Designers Pit 9
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
もちろん時と場合によって印象は変わります
というかこの表は完全に主観 (Flash 触ったことないhellip)
何を作るかによって作成時間は上下するし
端末による確認も見て確認なのか触って確認なのかで
大きく変わります
Designers Pit 10
なぜ Origami なのか
Origami を選ぶワケビデオプロトタイプのように一方向性でない
Framer のようにプログラムを書かなくてもよい
Facebook ページがそこそこ賑わっている
定型的なインタラクションならすぐ作れる
慣性の調整が簡単にできる
Origami を選ばないワケ参考になるドキュメントが少ない
初期の学習曲線の伸びが低い
Apple に見放された環境である
自由度を得るにはプログラムの記述が必要
実装面での効率化はあまり図れない
Designers Pit 11
なぜ Origami なのか
どんな時に Origami を使うべきか
Flinto や Briefs など静的イメージのみで作るプロトタイプでは
伝わらないでも動きを正確に伝えたい 部分を作りたい時
動作の繰り返しや行ったり来たりを検証して自分が頭の中で思
い描いていたインタラクションと差異がないか確認したい時
この 2 つがメインかなと個人的には思います
全体の設計の流れは Flinto や Briefs で行い確認したい箇所ご
とに Origami で作るが効果的に成果を得られそうな感触
Designers Pit 12
HelloOrigami
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 5
プロトタイピングの種類
ペーパープロトタイプ紙ベースでプロトタイプを作成しクライアントやエンジニアと認識合わせを行いますデバイスを模したベースの紙上に UI コンポーネントの形をした紙片を置き福笑いのように入れ替えながらレイアウトについて議論したり紙芝居のように 1 枚 1 枚画面を遷移の順にスライドして流れを確認したりします
UI プロトタイプ要件も固まりデザインカンプを作成した後はより実際のプロダクトに近いプロトタイプを作ることで具体的なイメージ全体的な流れをクライアントと共有できますデザインカンプを用いて作成することがほとんどとなりUI の振る舞い方や画面遷移のトランジションなどより本物らしいプロトタイプを作ることが可能です
Designers Pit 6
プロトタイピングの種類
インタラクティブプロトタイプビデオプロトタイプは一方通行なアウトプットとなるため見栄えはいいものの実際に触って試せないという弱点がありますUI プロトタイプとビデオプロトタイプの中間くらいに位置するのがインタラクティブプロトタイプです名前通りユーザーのフィードバックを受けて実際に動くプロトタイプを作成することができます
プロトタイピングのためのツールやサービスは色々あるので詳しく知りたい方は httpyo-ryhateblojpentry20140213204727をどうぞ
ビデオプロトタイプUI プロトタイプは画面遷移の作成確認が主となるため細かいアニメーションは機能的に補えないものがほとんどですまた新しい UI のかたちを考える際にもツールとしては不適切ですそのような「間の動き」を補完したりゼロから新しい UI を作る場合などに動画を使ったプロトタイプが用いられます
Designers Pit 7
Origami とは何か
Origami とはFacebook Design チームがプロトタイピ
ングを行うために開発した『Quartz Composer』用のツー
ルキットです
例えるならライブラリとかアドオン的な存在
本来であればスクリーンセーバーや VJ っぽいプログラムを
作るための QC を使ってプロトタイプを作成するという面
白い試みですあの Facebook Paper などもOrigami
を使ってプロトタイピングをしたそうです
httpfacebookgithubioorigami
Designers Pit 8
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
Designers Pit 9
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
もちろん時と場合によって印象は変わります
というかこの表は完全に主観 (Flash 触ったことないhellip)
何を作るかによって作成時間は上下するし
端末による確認も見て確認なのか触って確認なのかで
大きく変わります
Designers Pit 10
なぜ Origami なのか
Origami を選ぶワケビデオプロトタイプのように一方向性でない
Framer のようにプログラムを書かなくてもよい
Facebook ページがそこそこ賑わっている
定型的なインタラクションならすぐ作れる
慣性の調整が簡単にできる
Origami を選ばないワケ参考になるドキュメントが少ない
初期の学習曲線の伸びが低い
Apple に見放された環境である
自由度を得るにはプログラムの記述が必要
実装面での効率化はあまり図れない
Designers Pit 11
なぜ Origami なのか
どんな時に Origami を使うべきか
Flinto や Briefs など静的イメージのみで作るプロトタイプでは
伝わらないでも動きを正確に伝えたい 部分を作りたい時
動作の繰り返しや行ったり来たりを検証して自分が頭の中で思
い描いていたインタラクションと差異がないか確認したい時
この 2 つがメインかなと個人的には思います
全体の設計の流れは Flinto や Briefs で行い確認したい箇所ご
とに Origami で作るが効果的に成果を得られそうな感触
Designers Pit 12
HelloOrigami
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 6
プロトタイピングの種類
インタラクティブプロトタイプビデオプロトタイプは一方通行なアウトプットとなるため見栄えはいいものの実際に触って試せないという弱点がありますUI プロトタイプとビデオプロトタイプの中間くらいに位置するのがインタラクティブプロトタイプです名前通りユーザーのフィードバックを受けて実際に動くプロトタイプを作成することができます
プロトタイピングのためのツールやサービスは色々あるので詳しく知りたい方は httpyo-ryhateblojpentry20140213204727をどうぞ
ビデオプロトタイプUI プロトタイプは画面遷移の作成確認が主となるため細かいアニメーションは機能的に補えないものがほとんどですまた新しい UI のかたちを考える際にもツールとしては不適切ですそのような「間の動き」を補完したりゼロから新しい UI を作る場合などに動画を使ったプロトタイプが用いられます
Designers Pit 7
Origami とは何か
Origami とはFacebook Design チームがプロトタイピ
ングを行うために開発した『Quartz Composer』用のツー
ルキットです
例えるならライブラリとかアドオン的な存在
本来であればスクリーンセーバーや VJ っぽいプログラムを
作るための QC を使ってプロトタイプを作成するという面
白い試みですあの Facebook Paper などもOrigami
を使ってプロトタイピングをしたそうです
httpfacebookgithubioorigami
Designers Pit 8
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
Designers Pit 9
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
もちろん時と場合によって印象は変わります
というかこの表は完全に主観 (Flash 触ったことないhellip)
何を作るかによって作成時間は上下するし
端末による確認も見て確認なのか触って確認なのかで
大きく変わります
Designers Pit 10
なぜ Origami なのか
Origami を選ぶワケビデオプロトタイプのように一方向性でない
Framer のようにプログラムを書かなくてもよい
Facebook ページがそこそこ賑わっている
定型的なインタラクションならすぐ作れる
慣性の調整が簡単にできる
Origami を選ばないワケ参考になるドキュメントが少ない
初期の学習曲線の伸びが低い
Apple に見放された環境である
自由度を得るにはプログラムの記述が必要
実装面での効率化はあまり図れない
Designers Pit 11
なぜ Origami なのか
どんな時に Origami を使うべきか
Flinto や Briefs など静的イメージのみで作るプロトタイプでは
伝わらないでも動きを正確に伝えたい 部分を作りたい時
動作の繰り返しや行ったり来たりを検証して自分が頭の中で思
い描いていたインタラクションと差異がないか確認したい時
この 2 つがメインかなと個人的には思います
全体の設計の流れは Flinto や Briefs で行い確認したい箇所ご
とに Origami で作るが効果的に成果を得られそうな感触
Designers Pit 12
HelloOrigami
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 7
Origami とは何か
Origami とはFacebook Design チームがプロトタイピ
ングを行うために開発した『Quartz Composer』用のツー
ルキットです
例えるならライブラリとかアドオン的な存在
本来であればスクリーンセーバーや VJ っぽいプログラムを
作るための QC を使ってプロトタイプを作成するという面
白い試みですあの Facebook Paper などもOrigami
を使ってプロトタイピングをしたそうです
httpfacebookgithubioorigami
Designers Pit 8
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
Designers Pit 9
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
もちろん時と場合によって印象は変わります
というかこの表は完全に主観 (Flash 触ったことないhellip)
何を作るかによって作成時間は上下するし
端末による確認も見て確認なのか触って確認なのかで
大きく変わります
Designers Pit 10
なぜ Origami なのか
Origami を選ぶワケビデオプロトタイプのように一方向性でない
Framer のようにプログラムを書かなくてもよい
Facebook ページがそこそこ賑わっている
定型的なインタラクションならすぐ作れる
慣性の調整が簡単にできる
Origami を選ばないワケ参考になるドキュメントが少ない
初期の学習曲線の伸びが低い
Apple に見放された環境である
自由度を得るにはプログラムの記述が必要
実装面での効率化はあまり図れない
Designers Pit 11
なぜ Origami なのか
どんな時に Origami を使うべきか
Flinto や Briefs など静的イメージのみで作るプロトタイプでは
伝わらないでも動きを正確に伝えたい 部分を作りたい時
動作の繰り返しや行ったり来たりを検証して自分が頭の中で思
い描いていたインタラクションと差異がないか確認したい時
この 2 つがメインかなと個人的には思います
全体の設計の流れは Flinto や Briefs で行い確認したい箇所ご
とに Origami で作るが効果的に成果を得られそうな感触
Designers Pit 12
HelloOrigami
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 8
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
Designers Pit 9
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
もちろん時と場合によって印象は変わります
というかこの表は完全に主観 (Flash 触ったことないhellip)
何を作るかによって作成時間は上下するし
端末による確認も見て確認なのか触って確認なのかで
大きく変わります
Designers Pit 10
なぜ Origami なのか
Origami を選ぶワケビデオプロトタイプのように一方向性でない
Framer のようにプログラムを書かなくてもよい
Facebook ページがそこそこ賑わっている
定型的なインタラクションならすぐ作れる
慣性の調整が簡単にできる
Origami を選ばないワケ参考になるドキュメントが少ない
初期の学習曲線の伸びが低い
Apple に見放された環境である
自由度を得るにはプログラムの記述が必要
実装面での効率化はあまり図れない
Designers Pit 11
なぜ Origami なのか
どんな時に Origami を使うべきか
Flinto や Briefs など静的イメージのみで作るプロトタイプでは
伝わらないでも動きを正確に伝えたい 部分を作りたい時
動作の繰り返しや行ったり来たりを検証して自分が頭の中で思
い描いていたインタラクションと差異がないか確認したい時
この 2 つがメインかなと個人的には思います
全体の設計の流れは Flinto や Briefs で行い確認したい箇所ご
とに Origami で作るが効果的に成果を得られそうな感触
Designers Pit 12
HelloOrigami
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 9
他のツールとの比較
After Effects
インタラクティブ性
作成時間
参考資料
自由度
端末による確認
Flash Origami Framer
もちろん時と場合によって印象は変わります
というかこの表は完全に主観 (Flash 触ったことないhellip)
何を作るかによって作成時間は上下するし
端末による確認も見て確認なのか触って確認なのかで
大きく変わります
Designers Pit 10
なぜ Origami なのか
Origami を選ぶワケビデオプロトタイプのように一方向性でない
Framer のようにプログラムを書かなくてもよい
Facebook ページがそこそこ賑わっている
定型的なインタラクションならすぐ作れる
慣性の調整が簡単にできる
Origami を選ばないワケ参考になるドキュメントが少ない
初期の学習曲線の伸びが低い
Apple に見放された環境である
自由度を得るにはプログラムの記述が必要
実装面での効率化はあまり図れない
Designers Pit 11
なぜ Origami なのか
どんな時に Origami を使うべきか
Flinto や Briefs など静的イメージのみで作るプロトタイプでは
伝わらないでも動きを正確に伝えたい 部分を作りたい時
動作の繰り返しや行ったり来たりを検証して自分が頭の中で思
い描いていたインタラクションと差異がないか確認したい時
この 2 つがメインかなと個人的には思います
全体の設計の流れは Flinto や Briefs で行い確認したい箇所ご
とに Origami で作るが効果的に成果を得られそうな感触
Designers Pit 12
HelloOrigami
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 10
なぜ Origami なのか
Origami を選ぶワケビデオプロトタイプのように一方向性でない
Framer のようにプログラムを書かなくてもよい
Facebook ページがそこそこ賑わっている
定型的なインタラクションならすぐ作れる
慣性の調整が簡単にできる
Origami を選ばないワケ参考になるドキュメントが少ない
初期の学習曲線の伸びが低い
Apple に見放された環境である
自由度を得るにはプログラムの記述が必要
実装面での効率化はあまり図れない
Designers Pit 11
なぜ Origami なのか
どんな時に Origami を使うべきか
Flinto や Briefs など静的イメージのみで作るプロトタイプでは
伝わらないでも動きを正確に伝えたい 部分を作りたい時
動作の繰り返しや行ったり来たりを検証して自分が頭の中で思
い描いていたインタラクションと差異がないか確認したい時
この 2 つがメインかなと個人的には思います
全体の設計の流れは Flinto や Briefs で行い確認したい箇所ご
とに Origami で作るが効果的に成果を得られそうな感触
Designers Pit 12
HelloOrigami
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 11
なぜ Origami なのか
どんな時に Origami を使うべきか
Flinto や Briefs など静的イメージのみで作るプロトタイプでは
伝わらないでも動きを正確に伝えたい 部分を作りたい時
動作の繰り返しや行ったり来たりを検証して自分が頭の中で思
い描いていたインタラクションと差異がないか確認したい時
この 2 つがメインかなと個人的には思います
全体の設計の流れは Flinto や Briefs で行い確認したい箇所ご
とに Origami で作るが効果的に成果を得られそうな感触
Designers Pit 12
HelloOrigami
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 12
HelloOrigami
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 13
というわけでまずは QC について軽くお勉強
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 14
QC について
QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで結果をアウトプットします
例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ
る）Bouncy Animation（値の変化の差分を見せる）を介してLayer の「Width」「Height」を
Transition の「Value」によって変化（拡大）させています
QC のプログラムは左から右へ流れる
パッチ
ポート ケーブル
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 15
QC について
またパッチを置き過ぎるとエディタ画面が汚くなってしまうのでPhotoshop のレイヤーグループに
相当するマクロパッチを生成することで画面がきれいに片付きます
実は下図のマクロパッチは前ページのパッチを格納しています
これがマクロパッチ（角が四角い）
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 16
QC について
Patch Library は QC にインストールされているパッチを検索して探すことができますここからエディ
タ画面へパッチを置いていきます
Patch Inspector は選択したパッチの設定を閲覧編集することができますちなみにインスペクタ内の
数値や状態を変更しても +Z で元に戻らないので注意
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 17
パッチの種類
Color Transition2 つの色を切り替える
Image Transition2 つの画像を切り替える
Layer階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation慣性のあるアニメーション
Classic Animation慣性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスの外見を生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 18
Origami にはモバイルアプリの挙動などを
再現するためのパッチが多く用意されていますが
自分の思い描いた動きを作るためには
もともと QC にあるパッチも有効活用しなければなりません
そのあたりは独学が必要となります
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 19
それではさっそく簡単なものから作ってみましょう
基礎編
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 20
Origami 基礎編 テンプレート
テンプレートを開いてみる
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 21
Origami 基礎編 テンプレート
Render in image をダブルクリックして下の階層に入る
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 22
Origami 基礎編 画像を置く
Sleipnirpng を DampD で置く
この数字が高いほど上のレイヤーに置かれる
ダブルクリックで名前が変えられる
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 23
この数字が高いほど上のレイヤーに置かれる
Origami 基礎編 ビューワ
出た
QC はカンバスど真ん中がx0y0 になる
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 24
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 25
とりあえずスクロールさせてみる
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 26
Origami 基礎編 ScrollBouncy Animation
Scroll と Bouncy Animation をライブラリから探しだして配置する
Enter キーで配置できる
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 27
Enter キーで配置できる
こいつhelliphellip動くぞ
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 28
でもちょっと待って
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるしhellip
これじゃダサい
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 30
マクロパッチを使ってダサくなくする
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 31
Origami 基礎編 Layer Group
Layer Group を新しく配置してLayer と Image をカットする
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 32
Origami 基礎編 Layer Group
Layer Group をダブルクリックして中に入りLayer と Image をペーストする
ここから上の階層に戻れる
（ショートカット +U）
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 33
Origami 基礎編 Layer Group
Layer Group を Layer の Image に繋げる
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 34
Origami 基礎編 Layer Group
さらにLayer Group と Scroll の Image を繋げる
なんかこれがポイントっぽい
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 35
（何故か）ダサくなくなった
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 36
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 37
あるエリアをクリックしたら画像が拡大するようにしてみる
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 38
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
Hit AreaInteraction 2SwitchTransition を繋げてLayer の Scale に結びつける
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 39
何をやったか
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 40
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
①まずはエリアを作成位置とかサイズ決める
②エリアにインタラクションを追加する今回の場合は Click
「エリアをクリックしたら〜」となる
右上のポチと左上のポチを繋げると
それに対してのみアクションが適用される
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 41
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
③エリアをクリックしたらを ONOFF する（は右のパッチ）
なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 42
Origami 基礎編 Hit AreaInteraction 2SwitchTransition
④最初の値は 1 だけど ON になったら 2 になる
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 43
Hit Area を Click するたびにStart Value と End Value を
Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 44
切り替える先が Position ならオブジェクトが移動するOpacity なら透明度
Rotation なら回転軸などなどhellipInteraction 2+Switch+Transition の組み合わせはお世話になります
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 45
Origami 基礎編 Timer
ちなみに Timer を挟むとアクションを遅延させることができるTimer は QC にデフォで入ってる Smooth パッチと合わせたりする
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 46
Origami 基礎編
Color Transition2 色間をフェードさせる
Image Transition2 つの画像をフェードさせる
Layer画像に階層情報を持たせる
Text Layerテキストをレイヤーとして配置
Buttonテキスト + 背景をボタンとして配置
Fill Layer画面全体を覆う矩形を生成
Switchある状態のオンオフの切り替え
Scroll画像のスクロール
Bouncy Animation弾力性のあるアニメーション
Classic Animation弾力性のないアニメーション
Transition開始値と終了値の設定
Layer Group空のマクロパッチを生成
Hit Areaクリック可能なエリアを生成
Phoneモバイルデバイスのエミュレータを生成
Timerタイマーの実行
Counter 2カウンターらしい（よく分かってない）
Progress取得値を 0 と 1 に設定（よく ry）
Origami に備わっているパッチ
11 で追加されたパッチ
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 47
以上で Origami の簡単な基礎をおさえることができました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 48
アプリの機能から挙動を考えてみる
応用編
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 49
成果物
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 50
Origami 応用編 画像を置く
とりあえず TabBarpng と NavBarpng を置く
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 51
Origami 応用編 Image Transition
まずは TabBar の仕組みを先に作りますOrigami プリインの Image Transition を置く
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 52
Origami 応用編 Image Transition
Image Transition を Layer に繋げる
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 53
Origami 応用編 Image Transition
btn_tab_newcard_defaultpng を置く
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 54
Origami 応用編 Image Transition
Layer から切り離す
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 55
Origami 応用編 Image Transition
同じ要領で btn_tab_newcard_disablepng も置きnormal を Start ImageDisable を End Image に繋げる
Anchor Point Bottom CenterY Pos 8
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 56
Origami 応用編 Image Transition
TabBarButton を選択して
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 57
Origami 応用編 Image Transition
マクロパッチにまとめる（画面を綺麗にするため）とりあえず TabBar は一旦寝かしておく
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 58
Origami 応用編 画像を置く
次にリストを作るLayer Group と Layer を新規で配置して
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 59
Origami 応用編 画像を置く
Layer Group の中に Listspng を置く
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 60
見た目が整った
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 61
ここからインタラクションを考えていきます
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 62
Origami 応用編 インタラクションの付加
Listspng の他に Menupng も置きScroll を繋げる
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 63
Origami 応用編 インタラクションの付加
毎度おなじみHit Area + Interaction 2 + Switch + Transition を作成
Anchor Point Top RightX Pos -22 Y Pos -55Width 120 Height 60
Start Value 0End Value 380
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 64
Origami 応用編 インタラクションの付加
List の Layer Group に潜って Bouncy Animation をList の X Pos と繋げる
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 65
Origami 応用編 Publish Inputs
Bouncy Animation を右クリックしてPublish Inputs -gt Number を選択する
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 66
Publish Inputs Outputs を設定することで上の階層にポートの口（くち）を出すことができます
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 67
Origami 応用編 Publish Inputs
なんか出てきたのでTransition の Value と Number を繋げる
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 68
Hit Area をクリックするとリストが動いた
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 69
この調子で TabBar にも変化を与えてみましょう
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 70
Origami 応用編 Conditional
新登場 Conditionalこれは QC に元からあるパッチです簡単に言うと if 文のようなもの
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 71
Conditional を使って何をやるか
今までは Interaction 2 と Switch を使って「クリックされたらする」という命令の行き帰りだけでした
Conditional を挟むことで「の値がでなかったらする」というような命令を作ることができます
今回は「Hit Area がクリックされたら Button を disable に切り替える」
という動きを作ります
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 72
Origami 応用編 Conditional
Conditional のインスペクタを下図のように設定する
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 73
Origami 応用編 Conditional
TabBar のマクロパッチに潜ってImage Transition の Progress を Publish する
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 74
切り替わった
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 75
ここから先は時間があれば
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 76
Origami 応用編 MultiplexerLogic
List の Layer Group に潜って AddCategorypng を置きいつものセット + Bouncy Animation を作成しY Pos に繋げる
Anchor Point Bottom Center
Start Value 0End Value 98
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 77
Origami 応用編 MultiplexerLogic
Hit Area の Y Pos を Scroll と繋げるここまででAddCategorypng の出し入れができるはず
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 78
Origami 応用編 MultiplexerLogic
さらに Conditional を加える（今回は画面外に出しListpng がスライドするタイミングで出現させる）
Start Value -400End Value 0
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 79
Origami 応用編 MultiplexerLogic
こんな感じの全体像になりました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 80
でもちょっと待って
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 81
この状態で AddCategory は出したくない
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 82
ので
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 83 Designers Pit 83
少し条件を複雑にしてみます
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 84
AddCategorypngは
Menu 上の Hit Area（+ ボタン）を
タップすると出し入れができるが
NavBar 上の Hit Area（ 完了 ラベル）の Switchが
オフになった場合は
「元に戻す（画面内に出さない）」
という条件をつくってみる
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 85
QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 86
Origami 応用編 MultiplexerLogic
とりあえずまずは Conditional を置くFirst Value を Publish Inputs で上の階層に
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 87
Origami 応用編 MultiplexerLogic
Multiplexer を置く
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 88
Origami 応用編 MultiplexerLogic
Source Index に Conditional の Result をSource 0 に Switch の OnOff を繋げる
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 89
Origami 応用編 MultiplexerLogic
次に Logic を置くダブルクリックで OR に変更ぶっちゃけ Logic がどういうものかはまだよく分かってないです
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 90
Origami 応用編 MultiplexerLogic
左上のポートに Interaction 2 の Click を左下のポートに Multiplexer の Output を繋げ出力先を Switch にする
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 91
Origami 応用編 MultiplexerLogic
1 つ上の階層に戻りTransition の Value とPublish しておいたFirst Value を繋げる
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 92
できたハズ
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 93
まとめ
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 94
まとめ
できることとできないことがある
他のツールと比較してメリットもデメリットもある
細かい設計を考えることもできるが時間がかかる
QC について熟知する必要がある
やっぱり最初のとっかかりがむずかしい
実機に入れる手段がようわからん
それでもパッチを繋げて動かすのは楽しい
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 95
まとめ
おまけ〜実機での表示〜
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 96
まとめ
まずは基本からネットで情報を集めたり鹿野さんの本読んだり
いきなり最終成果物に挑まない小さいブロックに切り分けて考える
うまくいかない時はインスペクタを見ながら流れを逆算してみる
Facebook ページからみんなの作品を DL して学ぶ
Origami マスターになるために
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 97
参考資料
参考資料
Facebook Origami
Origami Community
Prototyping with Facebook Origami (Viemo)
Prototyping With Quartz Composer (Gibbon)
Introducing Origami for Quartz Composer (Medium)
Quartz Composer Book - PDF edition
KanoLab
Designers Pit 98
ありがとうございました
Designers Pit 98
ありがとうございました