![通常のプログラミングと Origami Studio の違い
function myFunc(a, b, c) {
const total = a + b + c;
const num = 100;
const result1 = total * 2 + num;
const result2 = total * 2 - num;
const result3 = total * 2 * num;
const result4 = total * 2 / num;
return [result1, result2, result3, result4];
}
複数の出力
▼コード ▼パッチ
?コードでは複数出力の際は配列化など必要
?Origami studio ではそのままでOK](https://image.slidesharecdn.com/origamistudiover2-200913055424/85/Origami-studio-ver2-2-9-320.jpg)
More Related Content
Similar to Origami studio (ver2) 勉強会 #2 - 仕組みやコンセプトを理解しよう (20)
Origami studio (ver2) 勉強会 #2 - 仕組みやコンセプトを理解しよう
- 2. アジェンダ 1. Origami studio の成り立ち 2. Origami studio が使われる理由 3. 他ツールとの比較 4. デザイナーのためのビジュアルプログラミング 5. 通常のプログラミングとOrigami Studio の違い 6. ショートカットを制するものがOrigami Studio を制す 7. アプリケーションのフロントエンドは「ステート（状態）管理」が生命線 8. アニメーションの仕組みを理解する 9. Anchorを理解する 10. まとめ
- 3. Origami studio の成り立ち FacebookがAppleのモーショングラフィック作成ツールQuartz Composer をベースに開発し、2016 年4月にFacebookの開発者向けイベント『f8』で発表、2017年はじめにスタンドアローンアプリとしてリ ニューアルした Quartz Composer
- 4. Origami studio が使われる理由 ● 用意されたパーツを組み合わせることで、プログラミングなしで複雑なインタラクションを表現で きる ● デフォルトで用意されているiOS や Android コンポーネントだけでなく、独自で作成したコン ポーネントをライブラリとして共有できる ● Facebook社のナレッジがたまっているので、自由度が高く精度の高いプロトタイプが作成でき る ● プレビューやファイルの共有が簡単 ● sketch との相性が良い ● 無料！
- 6. デザイナーのためのビジュアルプログラミング https://note.com/designdiv/n/nca1a36b2eb03?magazine_key=m3c80e84c9d0d#ehGcg より抜粋 > インタラクションを加えるためには「どうみえるかといった直感で操作するだけでなく、実現したいイン タラクションの仕組みから考えてデザインする」必要がある > 「Origami Studioでプロトタイプできるようになる」＝「プログラミングの基本原理が理解できるように なる」ことなので、自然に実装可能なデザインができるようになると感じました。 > デザイナーが「デザインがどのように実装されるのか」を考える視点を持つことは、エンジニアの仕事 への理解を深め、より効率よく適切な決断を下していくために大切なことだと思います。 >Origami Studioが必要とするプログラミング的思考を理解することは、デザイナーにとってややハー ドルが高いとはいえ、「デザイナーとエンジニアが互いを理解し、一つのチームとして良いプロダクトを 生み出す」ために意味があると思います。
- 7. 通常のプログラミングと Origami Studio の違い function myFunc(a, b, c) { const result = ... return result; } 関数とパッチ ?パッチでは左が入力、右が出力 ▼コードでの関数 ▼パッチでの関数
- 8. 通常のプログラミングと Origami Studio の違い function myFunc(a, b, c) { const total = a + b + c; const num = 100; return total * 2 + num; } 処理の流れ ▼コード ▼パッチ ?コードは上から下の流れ ?Origami studio では左から右の流れ
- 9. 通常のプログラミングと Origami Studio の違い function myFunc(a, b, c) { const total = a + b + c; const num = 100; const result1 = total * 2 + num; const result2 = total * 2 - num; const result3 = total * 2 * num; const result4 = total * 2 / num; return [result1, result2, result3, result4]; } 複数の出力 ▼コード ▼パッチ ?コードでは複数出力の際は配列化など必要 ?Origami studio ではそのままでOK
- 10. 通常のプログラミングと Origami Studio の違い 論理?比較条件 ▼コード ▼パッチ if (3 > 2 && (2 == 3 || 2 < 3) && 2 !=> 3) { ... }
- 11. 通常のプログラミングと Origami Studio の違い コメント ▼コード ▼パッチ // 複雑な条件ほげほげ if (3 > 2 && (2 == 3 || 2 < 3) && 2 !=> 3) { ... }
- 12. ショートカットを制するものが Origami Studio を制す ● 主要なパッチにはショートカットが当てられており、連続で入力するとチェーンのように続けてつ なぐことができる ○ 試しに「i」「s」「t」「c」と入力すると… ● なるべく早いうちにショートカットを覚えると得 ● ショートカット一覧：https://origami.design/documentation/workflow/KeyboardShortcuts.html
- 13. アプリケーションのフロントエンドは 「ステート（状態）管理」が生命線 ● ステートとはアプリケーションの画面表示において、動的に変化する値を保持しておくもの。ス テートの変化によって画面も変化する。 ● ステート管理をどう行うかが最近のフロントエンドでは重要視されている。 最近のReact.js、vue.js などもステートに基づいてコンポーネントの出し分けを行ったりしてい る。 ● Origami でのプロトタイプ制作においてもステート管理が重要 ● 基本的にインタラクション（down、tap、dragなど）によってステートに変化が起きる ● そのステート管理を行う上で、Origami Studio で 重要なのが 「switch」「Option Switch」「counter」
- 14. { sideMenu: { isOpen: false // サイドメニューが開いているか }, account: { name: ‘HOGE’, // アカウント名 zipCode: ‘123-4567’, // 郵便番号 ... }, itemCountInCart: 0, // カート内のアイテム数 prItem: { // PRする商品 recommend: { name: ‘...’, id: …. }, again: { name: ‘ドライカレー’, id: …. } } ... } ステートの例
- 15. アニメーションの仕組みを理解する https://origami.design/documentation/basics/Animations.html > Animation patches in Origami are designed to be ?uid and reversible: they take any changing number and tween it to be smooth. 訳）Origami のアニメーションパッチは、滑らかでリバーシブルになるように設計されています。これら のパッチは、変化する数を取り、トゥイーンで滑らかにします。 > In combination with an Interaction or a Switch patch, which output 0 or 1, an Animation patch can tween that value so it smoothly animates from 0 to 1, and vice versa. Origami refers to this 0 to 1 value generally as progress. 訳）0または1を出力するインタラクションパッチまたはスイッチパッチと組み合わせて、アニメーション パッチはその値をトゥイーンできるため、0から1に、またはその逆にスムーズにアニメーション化できま す。Origami では、この0から1の値を一般的に「プログレス（進捗状況）」と呼びます。
- 16. アニメーションの仕組みを理解する https://origami.design/documentation/basics/Animations.html > Animating from 0 to 1 is simple, but what about animating between other values? 訳）0から1へのアニメーション化は簡単ですが、他の値の間でのアニメーション化についてはどうでしょ うか？ > Transition patches let you transform that 0/1 into any start/end value: 訳）トランジションパッチを使用すると、その0/1を任意の開始/終了値に変換できます。
- 17. アニメーションの仕組みを理解する https://origami.design/documentation/basics/Animations.html 上の Number にいろんな値を入れて Progress の変化を見てみる ?0 -> 1 にすると…？ ?次に100 にすると…？ 上の Number と、Transtion の Start と End にいろんな値を入れてTransition の出力結 果を見てみる ?Number を 0.5 にすると…？ ?Number を 2 にすると…？ ?Start: 100 End: 200 にすると…？ (End - Start) * Number + start覚える必要なし！ →
- 19. Anchorについて理解する ● Anchorは親の大きさを基準とする ○ 一番外の親はアートボード ● その要素自体の基準点にもなる
- 21. まとめ ● Origami studio は数ある中でもひとつの選択肢 ● プログラミングに近いので、Origami Studio をマスターできればプログラミングの素養は身につ く気がする ● どのようなデザイン構造にすればアニメーションが可能か実践的な力が身につく ○ エンジニアと同じ目線でコミュニケーションができる ● ショートカットを覚えよう ● ライブラリにすれば開発効率は向上する。チーム間で共有できる ● とりあえずチュートリアルを一周すれば、だいたい分かると思う