ProtoPie Connect は、プロトタイピングをデジタル画面の先へと押し広げる、ほぼ無限ともいえる機能を備えています。そして ProtoPie らしく、ProtoPie Connect にはこれを本当に簡単にするためのいくつかのプラグインが含まれています。その一つが新しい API プラグインで、コードを書くことなく一般的なデータサービスに接続できます。この記事では、いくつかの例を通して、プロトタイプで実データを使い始めることがどれほど簡単かをご紹介します。
ProtoPie Connect をダウンロード
このチュートリアルに沿って進めるには、ProtoPie Connect をダウンロードしてインストールする必要があります。すでに ProtoPie Connect がインストールされている場合は、最新バージョンに更新してください。このチュートリアルのすべての手順を完了するには、最新バージョンが必要です。ProtoPie Connect は有料プランでのみ利用可能なため、Pro または Enterprise ライセンスが必要です。
API とは？
API は “Application Programming Interface” の略で、リモートシステム同士が通信する一般的な方法です。特に、ProtoPie Connect のプラグインは RESTful API に対応しています。RESTful が正確に何を意味するかを理解する必要はありませんが、Web 上で見つかる非常に多くの API がこの種類であり、したがってプラグインで使用できる、ということだけ知っていれば十分です。
RESTful API のやり取りは 2 つの部分で構成されます:
いくつかのデータを求めて、リモートシステムの URL にリクエストを送ります。多くの場合、このリクエストには、探している内容をより明確に示すためのパラメータが含まれます。
リモートシステムは、データまたは、問題が発生した場合はエラーを返します。このレスポンスは通常 JSON 形式です。
JSON とは？
JSON は情報を整形するための標準的な方法です。JSON はテキストベースなので読みやすく、便利です。この形式は理解しやすく、使いやすくしてくれます。この記事では、すでに JSON にある程度親しみがあることを前提としていますが、入門が必要な場合は、Web 上の優れたリソースで素早く基礎を身につけることができます。たとえば、こちらです。
API プラグインを使った基本例
この例は、これ以上ないほどシンプルです。以下の Useless Fact Machine のスターター Pie をダウンロードして、手順に沿って進めてください。
Studio で Pie を開きます。この Pie をプレビューすると、インタラクションとアニメーションがすべて完成していることがわかります。コインをガムボールマシンのハンドルの上にドラッグして、指を離してください。
コインをガムボールマシンのハンドルの上にドラッグして、指を離してください。
最後の手順を完了します。それは、API にリクエストを送って、役に立たない事実を返してもらうことです。その事実を取り出して、ガムボールに印字されているかのように表示します。
使用する API は、無料で利用できるインターネット API で、正式名称は “Useless Facts” です。API の詳細はこちらで確認できます。使用する具体的なリクエスト URL（またはエンドポイント）はこちらです。
さっそくクリックしてみましょう！ ブラウザーに次のようなレスポンスが表示されるはずです:
“Useless Facts” のリクエスト URL。
これが JSON 形式のレスポンスです。テキストであるにもかかわらず、あまり読みやすくないことに注目してください。そこでプロのヒントです！ Google Chrome 用 JSON Formatter プラグインをインストールしましょう。プラグインがインストールされると、Google が上記の読みづらい表示を自動的に次のように整形してくれます:
Google Chrome 用 JSON Formatter プラグイン。
JSON は、最も基本的には、コロンで区切られた key と value のペアの集合です。コロンの左側のテキストが key、右側のテキストが value です。ここでは、“text” という名前の key に注目します。この key の value が、ランダムな役に立たない事実です！
API プラグインの設定
ProtoPie でデータを扱うには、3 つの手順があります:
ProtoPie Connect でプラグインを設定します。
Pie を作成し、API リクエストをトリガーする Send メッセージと、API のレスポンスを受け取る Receive メッセージを送受信できるようにします。
ProtoPie Connect で Pie を実行して、動作を確認します。
まずはこの最初の手順に注目しましょう。
ProtoPie Connect を起動します
右上の Plugins をクリックし、次に API をクリックします。
右上の Plugins をクリックし、次に API をクリックします。
次のような画面が表示されるはずです:
API プラグインの設定。
次のように設定します:
URL フィールドに、API のリクエスト URL を入力します:
https://uselessfacts.jsph.pl/api/v2/facts/random少し下にある Connect API with Pie, セクションで、Message from Pie フィールドに
GET_USELESS_FACTを入力します。Message to Pie フィールドに
RETURN_USELESS_FACTを入力します。Activate をクリックします。
すべて正しく動作しているか確認するには、Test Request をクリックします。“Test Success.” というメッセージが表示されるはずです。表示されない場合は、上記の内容をすべて正確に入力したか確認して、戻ってください。
API プラグインは設定され、使用準備ができています！
これで完了です！ API プラグインは設定され、使用準備ができています！
NOTE: 使用したメッセージ — GET_USELESS_FACT と RETURN_USELESS_FACT — は完全に架空のものです。ここでは好きなメッセージを使用できます。Pie ファイルでも同じメッセージを使うようにしてください（次の手順を参照）。
プラグインを使用するように Pie を作成する
ProtoPie Studio に戻ります。Touch Up “Nickel.” という名前の Trigger に注目してください。このトリガーは、コインをドラッグした後に指を離したときに発火します。
Touch Up “Nickel" トリガーは、コインをドラッグした後に指を離したときに発火します。
このトリガーの下に Send Response を追加します。次のように設定します:
Channel には ProtoPie Studio を選択します。ProtoPie Connect を通じて通信したい場合は、常にこのチャネルを使用する必要があります。
Message には、プラグインの Message from Pie フィールドで設定したものと同じ内容を使用します。今回の場合は
GET_USELESS_FACTを使いました。
Send レスポンスの設定。
この Send は、マシンにコインを落としたときに発火し、API プラグインが Useless Facts API へのリクエストを送るようにします。
次に、API からのレスポンスを受け取り、使用する仕組みを設定する必要があります。Receive Trigger を追加します。次のように設定します:
ここでも Channel には ProtoPie Studio を使用します。
Message には、プラグインの Message to Pie フィールドで設定したものと同じメッセージを使用します。今回の場合は
RETURN_USELESS_FACTというメッセージを使いました。
実際の JSON レスポンスは、メッセージの value として含まれます。それを使うには、変数に割り当てる必要があります。まだ変数がないので、作成しましょう:
ProtoPie Studio の左下で、Variables タブをクリックして変数パネルを開きます。
パネル右上の + アイコンをクリックして、新しい変数を作成します。Pie にはシーンが 1 つしかないので、For All Scenes と For This Scene のどちらを選んでもかまいません。
変数には適切な名前を付けます。ここでは
apiResponseという名前を使います。API は JSON、つまり実質的にはテキストを返すため、変数が Text 型であることを確認する必要があります。Studio の右上にある変数のプロパティで、Text をクリックします。
Studio の右上にある変数のプロパティで、Text をクリックします。
次に Receive Trigger に戻り、Assign to Variable の横のチェックボックスをオンにします。表示された新しいドロップダウンリストで、今作成した変数を選択します。
Receive Trigger に戻り、Assign to Variable の横のチェックボックスをオンにします。
ここまでで、Pie には API のレスポンスが Text 変数 apiResponse に保存されるようになります。では、これを使ってみましょう！
レイヤースタックの上部には、Random Fact という名前の Text レイヤーがあります。このテキストレイヤーに、API レスポンス内の “text” key の value を表示します。
今作成した Receive Trigger の下に Text Response を追加します。
ドロップダウンリストから Text レイヤーの Random Fact を選択します。
Content の下にあるドロップダウンリストから Formula を選択します。
次の式を使用します:
parseJson(apiResponse, "text")
次の式を使用します: parseJson(apiResponse, "text").
何をしたのでしょうか？
parseJson() 関数を使って、apiResponse 変数に保存された JSON レスポンスからデータを抽出しました。この関数の動作を初めて見る場合は、ドキュメントをこちらでぜひ確認してください。parseJson() 関数は、API プラグインから返されるデータを扱ううえで不可欠であり、このシリーズの第 2 部にある、より高度な例でも再び使用します。
Pie は、コンピューター上のわかりやすい場所に保存してください。これで最後の手順の準備が整いました！
ProtoPie Connect でプレビューする
Pie がデータを取得するには、ProtoPie Connect を通して実行する必要があります。Studio で Pie をプレビューした場合、何も変わっていないように見えることに気づくでしょう。これは、Studio が ProtoPie Connect や API プラグインを認識していないためです。
ProtoPie Connect に戻り、保存した Pie を ProtoPie Connect のインターフェース左側へドラッグします。
保存した Pie を ProtoPie Connect のインターフェース左側へドラッグします。
コンピューターのモニターのようなアイコンをクリックします。これにより、デスクトップの web view で Pie が開きます。
コインをマシンの上にドラッグして、魔法が繰り広げられるのを見ましょう！
コインをマシンの上にドラッグして、魔法が繰り広げられるのを見ましょう！
ProtoPie Connect にメッセージの流れが表示されることに注目してください。これは、インタラクションのバグをトラブルシューティングするのに役立ちます。
メッセージの流れは、インタラクションのバグをトラブルシューティングするのに役立ちます。
今回はここまでです。API プラグインの上級チュートリアルもぜひご覧ください。さらに高度な例をいくつか紹介しています。
ProtoPie の API プラグインでデザインを強化しましょう
データベースや API をシームレスに統合して、デザインの可能性を最大限に引き出しましょう。今すぐ無料で試すことで、ProtoPie の最先端機能を体験できます。
