Facebook Origami：コーディングせずにインタラクティブなアプリケーションプロトタイプを作成する強(qiáng)力なツール

コアポイント：

• Facebookの折り紙ツールを使用すると、コーディングの知識(shí)なしでインタラクティブなアプリケーションプロトタイプを作成できます。 Facebookで多數(shù)のフラッグシップアプリケーションを構(gòu)築するために使用されており、その信頼性と機(jī)能性が証明されています。
• 折り紙はシームレスにスケッチと統(tǒng)合され、設(shè)計(jì)ツールで変更が行われるとプロトタイプが自動(dòng)的に更新されます。また、コードエクスポート機(jī)能があり、エンジニアがiOS、Android、およびWebアニメーションに必要なコードをエクスポートできるようにします。
• 折り紙は広範(fàn)なサポートリソースが不足している可能性のある比較的新しいツールですが、使いやすく、迅速なプロトタイピングを可能にします。変更が行われたときに視聴者にリアルタイムの更新を提供し、パッチプロパティをスムーズに統(tǒng)合して、理解して使用しやすくすることができます。

ソフトウェア開(kāi)発の分野では、プロトタイプは、フィードバックのテストと収集によく使用されるアプリケーション（またはWebサイト）のプロトタイプが機(jī)能しています。

巧妙に作成されたプロトタイプは、最終アプリケーションが數(shù)十の靜的モデルページよりも確実に機(jī)能する方法を常に提示します。

ただし、すべてのデザイナーとチームがそのようなプロトタイプを構(gòu)築する能力を持っているわけではありません。ゼロからコードを書(shū)くには時(shí)間と専門(mén)知識(shí)が必要ですが、多くのオンラインツールには何らかのサブスクリプションが必要です。

幸いなことに、1年前、Facebookはコードを作成せずに最新のUIとインタラクティブなプロトタイプを設(shè)計(jì)するための無(wú)料ツールであるOrigamiをリリースしました。

実際にテストされていたに違いありません。Facebookは、Instagram、メッセンジャー、スリングショット、Facebookペーパーなど、折り紙を使用していくつかのフラッグシップアプリを構(gòu)築しています。

はじめに：

Facebook Origami自體は、大規(guī)模なクォーツ作曲家の「パッチ」スタックであり、デモンストレーションアニメーションやその他の複雑な相互作用を含む作業(yè)モデルを簡(jiǎn)単に開(kāi)発できます。

パッチは、既存のアニメーション、グラフィックス、またはインタラクティブモジュールです。パッチは、プロトタイプを構(gòu)築するためのビルディングブロックと考えることができます。

Quartz Composerを理解する最良の方法は、入力パラメーターと出力結(jié)果を取得できる視覚的なプログラミングツールと考えることです。スケッチまたはPhotoshopレイヤーをパッチとしてインポートし、最終的なアプリケーションエクスペリエンスをシミュレートするものを作成するまで、アニメーションやイベントに接続できます。

Quartz Composerをマスターしたら、プロトタイプをすぐに簡(jiǎn)単に組み合わせることができるはずです。クォーツ作曲家の歴史のより詳細(xì)な説明を以下に示します。折り紙をダウンロードするには、公式ウェブサイトのダウンロードセクションの手順に従ってください。

インターフェイスと基本ツール：

Quartz Composerを開(kāi)始すると、最初にテンプレートセレクターウィンドウが表示されます。新しい折り紙プロジェクトを開(kāi)始するには、次のように移動(dòng)します。ファイル＆gt;新しい折り紙ファイル "または??n。

折り紙プロジェクトを作成した後、3つのオーバーラップウィンドウを使用するように求められます。ワークスペースをより良く見(jiàn)えるようにするには、次のように移動(dòng)します。

1編集ウィンドウ

ウィンドウの編集はメインワークスペースです。パッチをドラッグアンドドロップし、デザインのさまざまなレイヤーを接続することでアニメーションとインタラクションの最適な組み合わせを組み立てることができるワークベンチです。

編集ウィンドウから、パッチライブラリ、ビューアーウィンドウ、パッチインスペクター、バック/フォワードやズームイン/アウトなどの基本ツールボタンなど、他のツールやウィンドウにアクセスすることもできます。

2ライブラリウィンドウ

パッチライブラリには、プロトタイプの構(gòu)築に必要なすべてのコンポーネントが含まれています。これらは、魔法の効果を達(dá)成するボルトとナッツです。ダブルクリックまたはドラッグアンドドロップするだけで、イベントとパッチライブラリから編集ウィンドウにさまざまな要素を追加します。

3

ビューアーウィンドウは、実際のデバイスエミュレータのように見(jiàn)えます。ワークスペース（編集ウィンドウ）で実行するすべてのアクションがここに反映されます。タイプの視聴者サイズパッチプロパティを、選択したデバイスタイプの優(yōu)先値に変更することにより、表示されるデバイスタイプを変更できます。

デフォルトでは、ドロップダウンメニューにWindows PhoneやApple Watchの種類もあります。

コードエクスポート

プロトタイプを承認(rèn)した後、エンジニアがそれを行う時(shí)が來(lái)ました。明らかに、これは、最終製品がプロトタイプと非常によく一致するように緊密に協(xié)力する必要があるデザイナーやプログラマーにとって非常に挑戦的なプロセスになる可能性があります。

最終製品が承認(rèn)されたプロトタイプに十分に類似していない場(chǎng)合、

問(wèn)題が発生する可能性があります。

ただし、Origamiのコードエクスポート機(jī)能のおかげで、エンジニアはiOS、Android、およびWebで同じアニメーションを?qū)g裝するために必要なコードをエクスポートすることにより、この問(wèn)題を簡(jiǎn)単に解決できます。

スケッチ統(tǒng)合

Origamiのスケッチ統(tǒng)合を使用すると、スケッチアプリの設(shè)計(jì)されたレイヤーをプロトタイプに直接リンクできます。これは、スケッチでデザインを編集するたびに、折り紙プロジェクトに更新が自動(dòng)的に反映されることを意味します。

デモモード

デモモードを使用すると、さまざまな背景畫(huà)像、デバイスを保持し、ポインターをタッチすると、フルスクリーンモードでプロトタイプを視聴者に美しく表示できます。

iPhoneまたはiPadをお持ちの場(chǎng)合、またはAppleデバイスのトラックパッドを介して、プロトタイプを直接制御できます。

このリンクを介して、公式折り紙のウェブサイトのさまざまな機(jī)能の詳細(xì)を見(jiàn)つけることができます。

結(jié)論：

Facebook折り紙はうまく機(jī)能し、仕事を終わらせます。パッチを編集したり、新しい畫(huà)像をインポートしたりするときに、プロトタイプの調(diào)整は高速です。すべてのコンテンツは、リアルタイムで視聴者に反映されます。

他の誰(shuí)かからプロトタイプを取得したときにそれが何を意味するのかを理解するために、あなたはそれが何を意味するのかを理解する必要はありません。パッチプロパティは通常、自明であり、他のものを壊すことなくスムーズに統(tǒng)合されているようです。

欠點(diǎn)は、折り紙が比較的新しく、まだ大量のサポートリソースがないことです。それにもかかわらず、既存のリソースはよく作られており、組織化されています。

ここにある公式ウェブサイトで例とチュートリアルを見(jiàn)つけることができます。

この入門(mén)記事にコンテンツを追加する場(chǎng)合、または質(zhì)問(wèn)がある場(chǎng)合は、以下のコメントセクションにコメントを殘してください。

Facebook折り紙を使用したプロトタイピングに関する

FAQ：

Facebook折り紙は他のアプリケーションプロトタイプツールとどう違うのですか？

Facebook Origamiは、さまざまなアプリケーションプロトタイピング機(jī)能を提供するユニークなツールです。他のツールとは異なり、折り紙はデザインのリアルタイムプレビューを提供し、変更をリアルタイムで表示できます。また、複雑な相互作用の作成を容易にするために、さまざまな事前に構(gòu)築されたコンポーネントを提供しています。さらに、折り紙を使用すると、プロジェクトで直接使用できるコードスニペットをエクスポートでき、時(shí)間と労力を節(jié)約できます。

Facebook折り紙は自由に使用できますか？

はい、Facebook折り紙は完全に自由に使用できます。これはオープンソースツールです。つまり、誰(shuí)でも使用して獨(dú)自のアプリケーションプロトタイプを作成できます。これにより、個(gè)人と企業(yè)の両方にとって費(fèi)用対効果の高いソリューションになります。

オペレーティングシステムでFacebook折り紙を使用できますか？

現(xiàn)在、Facebook折り紙はmacOSでのみ利用できます。ただし、折り紙の背後にあるチームは常に更新と改善に取り組んでいるため、將來(lái)的には他のオペレーティングシステムで機(jī)能する可能性があります。

Facebook折り紙で作成されたプロトタイプを共有する方法は？

Facebook Origamiを使用すると、さまざまな方法でプロトタイプを共有できます。ビデオ、GIF、またはインタラクティブなプロトタイプとしてプロトタイプをエクスポートできます。プロトタイプリンクを共有して、他の人が直接対話できるようにすることもできます。

コーディングの知識(shí)なしでFacebook折り紙を使用できますか？

はい、Facebook折り紙は使いやすいように設(shè)計(jì)されており、コーディングの知識(shí)は必要ありません。コンポーネントをドラッグしてドロップするだけで複雑な相互作用を作成できる視覚インターフェイスを使用します。

Facebook折り紙を使用してどのようなアプリケーションプロトタイプを作成できますか？

Facebook origamiは、さまざまなアプリケーションのプロトタイプに使用できる多機(jī)能ツールです。ソーシャルメディアアプリ、モバイルゲーム、生産性ツールを作成しているかどうかにかかわらず、折り紙には、アイデアを?qū)g現(xiàn)する機(jī)能と柔軟性があります。

Facebook折り紙を始める方法は？

Facebook Origamiを開(kāi)始するには、MacにOrigami Studioソフトウェアをダウンロードしてインストールする必要があります。インストールが完了したら、さまざまな利用可能なツールと機(jī)能を使用して獨(dú)自のプロトタイプの作成を開(kāi)始できます。

Facebook折り紙で他の人と協(xié)力できますか？

Facebook origamiは現(xiàn)在組み込みのコラボレーション機(jī)能を提供していませんが、プロトタイプを共有してフィードバックを収集することで、他の人とコラボレーションすることができます。

Facebook折り紙の使用について詳しく知る方法は？

Facebook折り紙の使用について詳しく知るのに役立つ多くのリソースがあります。折り紙のウェブサイトにはさまざまなチュートリアルとガイドがあり、他の折り紙ユーザーとつながり、その経験を?qū)Wぶことができるオンラインコミュニティがたくさんあります。

Facebook折り紙のシステム要件は何ですか？

Facebook折り紙には、macos 10.13以上が必要です。また、64ビットプロセッサを備えたMacが必要です。

以上がアプリのプロトタイピング：Facebookの折り紙を始めましょうの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。