この記事では、外部データソースをプロトタイプに接続して、よりリアルで没入感のあるテスト体験を実現する方法をご紹介します。Enterprise プランの ProtoPie Connect と、新しい parseJson 関数を使えば、これを実現できます。
このチュートリアルでは、天気 API と Spotify API を連携し、実際のデータをユーザーインターフェースに組み込みます。しかも、可能性は無限大です！
そもそも API とは何を意味するのでしょうか？ API は Application Programming Interface の略で、要するに別のアプリケーションに接続して、そこから特定の情報を要求できるということです。
下のデモ動画を見て、最終的にどのような仕上がりになるか確認してみましょう！
プロトタイピング向けの最新 API 機能に興味がありますか？ それなら、API 機能のニュースやプロトタイピングのヒントを受け取るために登録しましょう！
要点
リソース
1. ローカルサーバーを起動する
2. Python ブリッジアプリを作成する
2.1. ブリッジの例を理解する
2.2. 次に、天気データを取得しましょう！
2.3. データを ProtoPie に送信する
2.4. 音楽データを取得する
2.5. プロトタイプで音楽データを使う
3. すべてを UI に追加する
これで完了です！ 🥧 実際のデータをプロトタイプに追加できました！
リソース
このチュートリアルでは、以下のリソースを使用します。記事を読み進めながら一緒に作成しても、最終ファイルをダウンロードして動作を確認しても構いません！
下記の Python コード
注意：スクリプトをインストールするには Python 3.9 が必要です（それ以降のバージョンでは回避できないエラーが発生するため、新しいバージョンを使っている場合は 3.9 へダウングレードしてください）
1. ローカルサーバーを起動する
Python スクリプトを ProtoPie に接続するためにまず必要なのは、Socket.io です。
ProtoPie Connect を起動すると、左下に表示されているアドレスでサーバーのホスティングが始まります。Socket.io を使うことで、そのローカルサーバーに Python スクリプトを接続し、そこを通してメッセージの送受信ができるようになります！
ProtoPie Connect
2. Python ブリッジアプリを作成する 🐍
2.1. まずはブリッジの例を理解する必要があります
ProtoPie に接続する Python アプリケーションのテンプレートはこちらにあります。ほかにも、できるだけ早く始められるよう ProtoPie が作成したさまざまなブリッジアプリがあります！
少し複雑に聞こえるかもしれませんが、Python ブリッジアプリを ProtoPie Connect のプラグインとしてコンパイルすることも可能です。より簡単な代替案については、ProtoPie Connect コースで解説しています。
ぜひ最後の 2 つのレッスンもご覧ください。カスタムブリッジアプリの作成と、それらをプラグインにコンパイルする方法に焦点を当てています。
セットアップ
ページの上部には、まずプログラムを正しく動作させるために必要な関連パッケージを取り込む import がいくつかあります。
次に、プログラムが接続しようとするアドレスがあります。ProtoPie Connect を Python プログラムと同じマシンで実行している場合は、変更する必要はありません。
最後に、ソケットを宣言して、それを操作できるようにします。
Connect 関数の設定
セットアップの後には on_connect 関数があり、これは Python プログラムがサーバーに接続するたびに呼び出されます。
接続が成功したことを確認するために、メッセージを emit（サーバーへ送信）します。
メッセージを受信する
on_connect 関数の後に on_message 関数があります。これは、プログラムが特定のメッセージを受信したときに実行したい処理を追加する場所です。
接続する
ここで、プログラムは先ほど指定したアドレスへの接続を実際に開始します。
メッセージを送信する
デフォルトのブリッジアプリには、ターミナルでメッセージ ID と値を入力し、それを ProtoPie Connect のサーバーへ emit する機能も用意されています。
試してみましょう！
Python がインストールされていることを確認してください。次に、client.py ファイルを保存したフォルダで右クリックし、「フォルダ内の新規ターミナル」を選択して、ターミナルを開くだけです。
Python ファイルを含むフォルダ
関連パッケージをインストールするために pip3 install -r requirements.txt コマンドを実行し、その後 python3 client.py を実行してプログラムを起動します。
入力するよう求められるので、message id と value を入力し、Enter キーで確定します。
すべてがうまくいけば、ProtoPie Connect でメッセージとその値が表示されます！
ProtoPie Connect
2.2. 次に、天気データを取得しましょう！
では、天気データを取得するために、値として場所を持つ「getWeatherAndMusicData」というメッセージを送信する必要があります。すると、Python プログラムがその場所の天気データと音楽データを返します。
API 連携でここまでできるなんて、すごくありませんか？
緯度と経度のデータを取得する
特定の場所の天気データを取得するために、このアプリケーションを使いたいです。まずは、都市の緯度と経度を取得するために Geocoding API を使用します。
API Key の取得方法についてはドキュメントを確認してください。API へアクセスするための、あなた専用の一意なキーです。そのキーを、コード内の {API key} と書かれている場所に入力する必要があります。
新しいプログラムでは、まず ProtoPie から受信したメッセージが「getWeatherAndMusicData」と等しいかどうかを確認します。
それが true なら、ProtoPie がデータ取得を試みているということなので、messageValue を location という変数に代入します。
次に、変数 **locationUrl **を作成し、ProtoPie から受け取った値をこの URL の中央に貼り付けます。
次に、requests.get(locationUrl).json() を使って、その場所の geo データを取得します。
これにより大量のデータを含む長いメッセージが返されますが、必要なのは緯度、経度、国だけです。
読みにくくて困ったときは、私たちも同じです。単にJSON フォーマッターに貼り付けて、全体像を確認しましょう。
このメッセージ内の値にアクセスするには、次の構文を使えます。
print 関数はAmsterdam, NL has latitude 52.3727598 and longitude 4.8936041 を出力します。これは次のステップである天気データの取得にまさに必要なものです！
データを含むメッセージ
天気データを取得する
次は、Weather API を同じ要領で使います。先ほど取得した緯度と経度を使って URL を組み立て、requests.get(weatherUrl).json() 関数を使ってその場所の天気データを取得します。
この print では、天気の説明、気温、湿度など、Weather API から取得した大量の情報が出力されます！
json.dumps(weatherData, indent=1) は weatherData を、そのままではなく、見やすくインデントして表示するだけです 😉。
Python ブリッジ
送信した場所の時刻も使いたいので、次のコードを使って weatherData から timezone を取得し、その timeData を weatherData に追加します。
これにより、次の情報が weatherData に追加されます。
時間データ
あとは、それをソケットサーバーへ送り返して、ProtoPie がデータにアクセスできるようにするだけです。
message ID は「weatherData」、value はデータそのものです。JSON データを文字列に戻すために str(weatherData).replace("'", "\\"") 関数を使い、ProtoPie で使われている形式に合わせて、すべての ' を \\" に置き換えます。
2.3. データを ProtoPie に送信する
まずは、値としてデータを取得したい都市を指定して、「getWeatherAndMusicData」を ProtoPie Studio に送信します。
Response を送信
次に、Receive trigger を作成し、受信したデータを 変数 に割り当てます。変数の型が Text に設定されていることを確認してください。
Receive Trigger
その 変数 を parseJson 関数 と組み合わせることで、好きな情報を取り出して、たとえばテキストレイヤーの内容を置き換えることができます。
parseJson 関数を使って Json オブジェクト内のデータにアクセスする方法の詳細は、こちらのPieをご覧ください。
parseJson 関数と組み合わせた変数
この Pie を ProtoPie Connect で開いて実行すると、次の結果が得られます。
ProtoPie Connect 内の Pie
ご覧のとおり、Pie は「getWeatherAndMusicData」を値「Amsterdam」とともに ProtoPie Connect に送信し、Python ブリッジは JSON オブジェクトを値として持つ「weatherData」を返しています。Pie はこれを受信し、その中から主な天気の説明を取得しています。すばらしいですね！
2.4. 音楽データを取得しましょう
Python プログラムで **weatherData ** を emit した後、次の処理を追加します。
これにより、"country" を引数として「get_top_tracks」という関数が呼び出され、受け取ったデータをその関数からの戻り値として「musicData」で Socket サーバーへ emit します。
アクセストークンを取得する
get_top_tracks 関数 は、さらに別の get_access_token という関数の呼び出しから始まります。
Spotify は他の API より少し複雑なので、client ID と client secret を使って、実際に 必要に応じてキーを要求 する必要があります。これらの認証情報は、Spotify Developer アカウントを作成すれば取得できます。
get_access_token 関数 は、その認証情報を使って Spotify から access token を返します。
Spotify API について詳しく読む
生の音楽データを取得する
引き続き get_top_tracks 関数 の中で、この access token を使って音楽データを取得できます。
天気 API から取得した country code を Spotify のエンドポイントに追加して、その国の音楽データを取得する必要がある点に注意してください！
これでもまた、非常に大量のデータが返ってきます。
プレイリストデータ一覧
プレイリストにアクセスする
私たちが特に知りたいのは、その国のトップソングです。
まずリクエストに ['playlists']['items'] を追加して、プレイリストだけを取得します。
次に playlists 内のすべてのオブジェクトを確認し、名前が「Top 50」で始まるものがあるかどうかを見ます。見つかったオブジェクトは “top_50_playlist” という変数に代入します。見つからない場合は None を代入します。
top_50_playlist が None の場合、その国のリストを見つけられなかったという意味なので、代わりにリストの最初のプレイリストを使います。見つかった場合は、top_50_playlist の href（リンク）と名前を使います。
その後、top_50_href と playlistName** の変数 **を使って、そのリスト内のトラック配列をリクエストします。
musicData オブジェクトを作成する
次に、musicData という オブジェクト を作成して playlistName に playlistName を代入し、"topSongs" という空の 配列 を作成します。
playlistName に対して replace_whitespace 関数 を呼び出します。これは、ProtoPie が正しく表示できない奇妙な文字が含まれることがあるためです。この関数は、そのような文字を通常のスペースに置き換えて返します。
トップソングを取得する
ここでは、最初の 8 曲のタイトルとアーティストが musicData の空の topSongs 配列 に追加されます。
その後、それを出力します。繰り返しますが、ASCII を使っていることを確認してください。私たちの Pie に変な文字は入れたくありません！
この print では、playlistName と topSongs** という配列を持つオブジェクトが出力されます。そこには、指定した場所の Top 50 プレイリストの最初の 8 曲が入っています。
音楽データ
2.5. プロトタイプで音楽データを使う
私たちの Pie では、このデータも再び 変数 に割り当てて、parseJson 関数 を使いながら、好きなように Pie 内で利用できます。
変数に割り当てられた Receive Trigger
3. すべてを UI に追加する
天気データを含む Tesla プロトタイプ
私たちのプロトタイプでは、weatherData と musicData をさまざまな方法で使用しています。ProtoPie の formula フィールドでの使い方の例をいくつか紹介します。
右上の日付と時刻は、
parseJson(weatherData, "localtime.day") + " " + parseJson(weatherData, "localtime.month") + " " + parseJson(weatherData, "localtime.hour") + ":" + parseJson(weatherData, "localtime.minute")を使って設定しています上部中央の場所は、
parseJson(weatherData, "name") + ", " + parseJson(weatherData, "sys.country")を使って設定しています天気データは、
format((parseJson(weatherData, "main.temp") - 273), "##") + "°C – " + upperCase(left(parseJson(weatherData, "weather.0.description"), 1)) + right(parseJson(weatherData, "weather.0.description"), length(parseJson(weatherData, "weather.0.description")) - 1)を使って設定しています。
ここでは、主気温から 273 を引いて摂氏に変換し、説明の最初の文字を大文字にしています。そのほうが見栄えがいいからです。🤷🏼♂️
天気データ
天気アイコンは、Weather API が提供するコード
parseJson(weatherData, "weather.0.icon")を使って設定します。そのコードを変数に代入し、変更を検知して、こちらで提供されているアイコンセットを表示します。また、このコードを使って、さまざまな天気オーバーレイを適切にフェードイン・フェードアウトさせることで制御しています。
ProtoPie Connect 内の天気データ
さらに、"mode" という変数もあり、
right(parseJson(weatherData, "weather.0.icon"), 1)が代入されています。これはコードの最初の文字だけで、昼なら “d”、夜なら “n” です。この変数を使ってナイトモードを制御し、それに応じてテキストカラーを変更できます。
mode 変数
プレイリスト名には
parseJson(musicData, "playlistName")を使います各曲については、各タイトルのテキストオブジェクトを
parseJson(musicData, "topSongs.0.title")に、各アーティストをparseJson(musicData, "topSongs.0.artist")に変更します。ここで.0.は.1.、.2.などに変わっていきます。また、musicData 変数に変更が検知されたとき、アルバムカバーにランダムな色を割り当てて、曲が更新されているように見せています。
color(random(100,250), random(100,250), random(100,250))
割り当てられた色
これで完了です！ 🥧 実際のデータをプロトタイプに追加できました！
おめでとうございます。最後までやり遂げましたね！ 私たちはあなたをとても誇りに思います 😉。この内容が、今後あなたが固定観念にとらわれず、Pie をさらにリアルで魅力的なものにする助けになれば幸いです。
API 連携でプロトタイピングをアップグレードする
ProtoPie を無料で始める そして、API 連携の力でリアルで没入感のあるユーザー体験を作るためのあらゆる可能性を探ってみましょう。
楽しくプロトタイピングしましょう！
