Facebook Origami:コーディングせずにインタラクティブなアプリケーションプロトタイプを作成する強力なツール
コアポイント:
- Facebookの折り紙ツールを使用すると、コーディングの知識なしでインタラクティブなアプリケーションプロトタイプを作成できます。 Facebookで多数のフラッグシップアプリケーションを構築するために使用されており、その信頼性と機能性が証明されています。
- 折り紙はシームレスにスケッチと統合され、設計ツールで変更が行われるとプロトタイプが自動的に更新されます。また、コードエクスポート機能があり、エンジニアがiOS、Android、およびWebアニメーションに必要なコードをエクスポートできるようにします。
- 折り紙は広範なサポートリソースが不足している可能性のある比較的新しいツールですが、使いやすく、迅速なプロトタイピングを可能にします。変更が行われたときに視聴者にリアルタイムの更新を提供し、パッチプロパティをスムーズに統合して、理解して使用しやすくすることができます。
ソフトウェア開発の分野では、プロトタイプは、フィードバックのテストと収集によく使用されるアプリケーション(またはWebサイト)のプロトタイプが機能しています。
巧妙に作成されたプロトタイプは、最終アプリケーションが数十の静的モデルページよりも確実に機能する方法を常に提示します。
ただし、すべてのデザイナーとチームがそのようなプロトタイプを構築する能力を持っているわけではありません。ゼロからコードを書くには時間と専門知識が必要ですが、多くのオンラインツールには何らかのサブスクリプションが必要です。幸いなことに、1年前、Facebookはコードを作成せずに最新のUIとインタラクティブなプロトタイプを設計するための無料ツールであるOrigamiをリリースしました。
実際にテストされていたに違いありません。Facebookは、Instagram、メッセンジャー、スリングショット、Facebookペーパーなど、折り紙を使用していくつかのフラッグシップアプリを構築しています。
はじめに:
Facebook Origami自体は、大規模なクォーツ作曲家の「パッチ」スタックであり、デモンストレーションアニメーションやその他の複雑な相互作用を含む作業モデルを簡単に開発できます。
Quartz Composerを理解する最良の方法は、入力パラメーターと出力結果を取得できる視覚的なプログラミングツールと考えることです。スケッチまたはPhotoshopレイヤーをパッチとしてインポートし、最終的なアプリケーションエクスペリエンスをシミュレートするものを作成するまで、アニメーションやイベントに接続できます。
Quartz Composerをマスターしたら、プロトタイプをすぐに簡単に組み合わせることができるはずです。クォーツ作曲家の歴史のより詳細な説明を以下に示します。折り紙をダウンロードするには、公式ウェブサイトのダウンロードセクションの手順に従ってください。
インターフェイスと基本ツール:
Quartz Composerを開始すると、最初にテンプレートセレクターウィンドウが表示されます。新しい折り紙プロジェクトを開始するには、次のように移動します。ファイル>新しい折り紙ファイル "または⌥⌘n。折り紙プロジェクトを作成した後、3つのオーバーラップウィンドウを使用するように求められます。ワークスペースをより良く見えるようにするには、次のように移動します。
1編集ウィンドウ
ウィンドウの編集はメインワークスペースです。パッチをドラッグアンドドロップし、デザインのさまざまなレイヤーを接続することでアニメーションとインタラクションの最適な組み合わせを組み立てることができるワークベンチです。
編集ウィンドウから、パッチライブラリ、ビューアーウィンドウ、パッチインスペクター、バック/フォワードやズームイン/アウトなどの基本ツールボタンなど、他のツールやウィンドウにアクセスすることもできます。
2ライブラリウィンドウ
パッチライブラリには、プロトタイプの構築に必要なすべてのコンポーネントが含まれています。これらは、魔法の効果を達成するボルトとナッツです。ダブルクリックまたはドラッグアンドドロップするだけで、イベントとパッチライブラリから編集ウィンドウにさまざまな要素を追加します。
3
ビューアーウィンドウは、実際のデバイスエミュレータのように見えます。ワークスペース(編集ウィンドウ)で実行するすべてのアクションがここに反映されます。タイプの視聴者サイズパッチプロパティを、選択したデバイスタイプの優先値に変更することにより、表示されるデバイスタイプを変更できます。デフォルトでは、ドロップダウンメニューにWindows PhoneやApple Watchの種類もあります。
プロトタイプを承認した後、エンジニアがそれを行う時が来ました。明らかに、これは、最終製品がプロトタイプと非常によく一致するように緊密に協力する必要があるデザイナーやプログラマーにとって非常に挑戦的なプロセスになる可能性があります。
最終製品が承認されたプロトタイプに十分に類似していない場合、
問題が発生する可能性があります。ただし、Origamiのコードエクスポート機能のおかげで、エンジニアはiOS、Android、およびWebで同じアニメーションを実装するために必要なコードをエクスポートすることにより、この問題を簡単に解決できます。
スケッチ統合
Origamiのスケッチ統合を使用すると、スケッチアプリの設計されたレイヤーをプロトタイプに直接リンクできます。これは、スケッチでデザインを編集するたびに、折り紙プロジェクトに更新が自動的に反映されることを意味します。
デモモード
デモモードを使用すると、さまざまな背景画像、デバイスを保持し、ポインターをタッチすると、フルスクリーンモードでプロトタイプを視聴者に美しく表示できます。
iPhoneまたはiPadをお持ちの場合、またはAppleデバイスのトラックパッドを介して、プロトタイプを直接制御できます。
このリンクを介して、公式折り紙のウェブサイトのさまざまな機能の詳細を見つけることができます。
結論:
Facebook折り紙はうまく機能し、仕事を終わらせます。パッチを編集したり、新しい画像をインポートしたりするときに、プロトタイプの調整は高速です。すべてのコンテンツは、リアルタイムで視聴者に反映されます。
他の誰かからプロトタイプを取得したときにそれが何を意味するのかを理解するために、あなたはそれが何を意味するのかを理解する必要はありません。パッチプロパティは通常、自明であり、他のものを壊すことなくスムーズに統合されているようです。
欠点は、折り紙が比較的新しく、まだ大量のサポートリソースがないことです。それにもかかわらず、既存のリソースはよく作られており、組織化されています。
ここにある公式ウェブサイトで例とチュートリアルを見つけることができます。
この入門記事にコンテンツを追加する場合、または質問がある場合は、以下のコメントセクションにコメントを残してください。
Facebook折り紙を使用したプロトタイピングに関するFAQ:
Facebook折り紙は他のアプリケーションプロトタイプツールとどう違うのですか?
Facebook Origamiは、さまざまなアプリケーションプロトタイピング機能を提供するユニークなツールです。他のツールとは異なり、折り紙はデザインのリアルタイムプレビューを提供し、変更をリアルタイムで表示できます。また、複雑な相互作用の作成を容易にするために、さまざまな事前に構築されたコンポーネントを提供しています。さらに、折り紙を使用すると、プロジェクトで直接使用できるコードスニペットをエクスポートでき、時間と労力を節約できます。
Facebook折り紙は自由に使用できますか?
はい、Facebook折り紙は完全に自由に使用できます。これはオープンソースツールです。つまり、誰でも使用して独自のアプリケーションプロトタイプを作成できます。これにより、個人と企業の両方にとって費用対効果の高いソリューションになります。
オペレーティングシステムでFacebook折り紙を使用できますか?
現在、Facebook折り紙はmacOSでのみ利用できます。ただし、折り紙の背後にあるチームは常に更新と改善に取り組んでいるため、将来的には他のオペレーティングシステムで機能する可能性があります。
Facebook折り紙で作成されたプロトタイプを共有する方法は?
Facebook Origamiを使用すると、さまざまな方法でプロトタイプを共有できます。ビデオ、GIF、またはインタラクティブなプロトタイプとしてプロトタイプをエクスポートできます。プロトタイプリンクを共有して、他の人が直接対話できるようにすることもできます。
コーディングの知識なしでFacebook折り紙を使用できますか?
はい、Facebook折り紙は使いやすいように設計されており、コーディングの知識は必要ありません。コンポーネントをドラッグしてドロップするだけで複雑な相互作用を作成できる視覚インターフェイスを使用します。
Facebook折り紙を使用してどのようなアプリケーションプロトタイプを作成できますか?
Facebook origamiは、さまざまなアプリケーションのプロトタイプに使用できる多機能ツールです。ソーシャルメディアアプリ、モバイルゲーム、生産性ツールを作成しているかどうかにかかわらず、折り紙には、アイデアを実現する機能と柔軟性があります。
Facebook折り紙を始める方法は?
Facebook Origamiを開始するには、MacにOrigami Studioソフトウェアをダウンロードしてインストールする必要があります。インストールが完了したら、さまざまな利用可能なツールと機能を使用して独自のプロトタイプの作成を開始できます。
Facebook折り紙で他の人と協力できますか?
Facebook origamiは現在組み込みのコラボレーション機能を提供していませんが、プロトタイプを共有してフィードバックを収集することで、他の人とコラボレーションすることができます。
Facebook折り紙の使用について詳しく知る方法は?
Facebook折り紙の使用について詳しく知るのに役立つ多くのリソースがあります。折り紙のウェブサイトにはさまざまなチュートリアルとガイドがあり、他の折り紙ユーザーとつながり、その経験を学ぶことができるオンラインコミュニティがたくさんあります。
Facebook折り紙のシステム要件は何ですか?
Facebook折り紙には、macos 10.13以上が必要です。また、64ビットプロセッサを備えたMacが必要です。
以上がアプリのプロトタイピング:Facebookの折り紙を始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

これらのトップ開発者ニュースレターを使用して、最新のハイテクトレンドについてお知らせください! このキュレーションされたリストは、AI愛好家からベテランのバックエンドやフロントエンド開発者まで、すべての人に何かを提供します。 お気に入りを選択し、Relを検索する時間を節約してください

このチュートリアルは、AWSサービスを使用してサーバーレスイメージ処理パイプラインを構築することをガイドします。 APIゲートウェイ、Lambda関数、S3バケット、およびDynamoDBと対話するECS Fargateクラスターに展開されたnext.jsフロントエンドを作成します。 th

このパイロットプログラム、CNCF(クラウドネイティブコンピューティングファンデーション)、アンペアコンピューティング、Equinix Metal、およびActuatedのコラボレーションであるCNCF GithubプロジェクトのARM64 CI/CDが合理化されます。 このイニシアチブは、セキュリティの懸念とパフォーマンスリムに対処します


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

Dreamweaver Mac版
ビジュアル Web 開発ツール

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

メモ帳++7.3.1
使いやすく無料のコードエディター
