このチュートリアルでは、実際のデータをデザインプロジェクトにシームレスに組み込む方法を学びます。ProtoPie の強力な機能群である API プラグイン や セルフホストメディア などの活用方法を紹介しながら、映画データベース API を使って映画レビューサイトを作成する手順を、The Movie Database（TMDB）を参考モデルとしてステップごとにご案内します。
準備はいいですか？映画の魔法を起こしましょう！
概要
The Movie Database API とは？
TMDB API キーを取得する
API プラグインの設定方法
リアルタイム検索候補を提供する
API で映画メタデータを取得する
デザインに実データを使う理由
動画ストリーミングと TV UI デザインのマスタークラスに参加する
The Movie Database API とは？
TMDB (The Movie Database) API は、その使いやすさと包括的なカバー範囲が際立っています。特筆すべき利点の一つは、TMDB の API が無料であることです。そのため、プロトタイプに実データを組み込みたいデザイナーや開発者にとって魅力的な選択肢となります。出演者や制作スタッフの詳細からレビュー、評価まで幅広い情報を提供し、TMDB は使いやすいインターフェースと充実したドキュメントを備えているため、データ連携を試すのに理想的なプラットフォームです。
IMDB API も価値あるデータを提供し、業界で長年の実績がありますが、アクセスは AWS Data Exchange 経由で、AWS アカウントが必要なうえ有料プランで利用する点に注意が必要です。今回は、ドキュメントが充実していて無料でアクセスできる TMDB API を活用します。
TMDB API キーを取得する
個人用 API キーを取得するには、このガイドに記載された手順に従ってください。完了すると、アクセス認証情報は API リンクページで確認できるようになります。
TMDB には 2 つの認証方法があり、それぞれに利点があります：
クエリパラメータを使う方法： URL 内で
api_keyという名前の単一のクエリパラメータを使用します。たとえば、次のようになります：https://api.themoviedb.org/3/movie/11?api_key=API_KEYヘッダー内の Bearer トークン：アクセス トークンを、Authorization ヘッダー内で送信される Bearer トークンとして使用します。次の例は、API プラグインの設定例です：
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }
どちらの方法を選ぶかは、用途によって異なります。ProtoPie では、たとえば信頼できる同僚と主に共同作業する場合、URL 方式を使うと、キーをプロトタイプ内の変数として保存し、API 呼び出しに自動で渡せるため共有が簡単になります。逆に、認証情報を公開したくない外部の関係者向けには、2 つ目の方法のほうが安全です。各自がそれぞれの認証情報を取得し、API プラグインの設定内で個別に設定することが重要です。
API プラグインの設定方法
プロトタイプをダウンロードし、デバイスに保存してください。完了したら ProtoPie Connect を起動し、このプロジェクトを Connect インターフェースにドラッグします。
次は API の設定です。ドロップダウンメニューの右上にあるプラグインアイコンを探し、最初の「API」と表示された項目を選択してください。これが TMDB API を操作するための入口になります。ProtoPie の API プラグイン機能を初めて使う場合は、まず次のチュートリアルを確認してみてください：
ここでの例では、複数の API エンドポイントを使用します。Pro プランでは、一度に 1 つの API プラグインしか扱えない点に注意してください。ただし、Enterprise プランをご利用の場合は、複数のプラグインを作成できる柔軟性があり、上のデモ動画で紹介したのと同じ包括的な機能を体験できます。
リアルタイム検索候補を提供する
この機能を有効にするには、Search > Movie エンドポイントを利用します。このエンドポイントは、クエリで指定したキーワードに基づき、翻訳タイトルや別名タイトルを含む映画情報を取得します。
映画検索のリアルタイム機能。
プロトタイプでは、基盤となるロジックが Detect トリガーによって動作し、検索ボックス内の変化を監視しています。変化が検知されるたびに、検索ボックスの内容をクエリパラメータとしてすばやく TMDB API に渡します。API はすぐに応答し、取得したデータを活用して、関連情報を検索候補としてリアルタイムに表示できます。
リアルタイム検索候補用にプラグインを設定する簡潔なガイドです：
方法：GET
ヘッダー："ACCESS_TOKEN" を固有のアクセストークンに置き換えてください。
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }Pie からのメッセージ：SEARCH
「Override URL with msg value」チェックボックスを選択してください。
Pie へのメッセージ：SEARCH RESULT
設定が完了したら、「Activate」ボタンをクリックします。次に、検索ボックスに入力してテストしてみてください。入力に基づくリアルタイムの候補が表示されるはずです。
API で映画メタデータを取得する
TMDB API には、出演者や制作スタッフの詳細からレビュー、評価まで、映画関連の情報が幅広く揃っています。この API で利用できる豊富な映画関連データについてさらに詳しく知りたい場合は、詳細なドキュメントのページをご覧ください。ページ左側の「MOVIES」カテゴリ内には、この API が提供する詳細項目の一覧が充実しているのがわかります。
映画メタデータをリクエストする方法。
この例では、映画の詳細を確認する方法が 2 つあります。ホームページに表示されている映画をクリックするか、検索候補を選択するかです。映画の詳細ページに移動すると、いくつかのセクションが表示されます。
映画タイトル、ポスター、詳細を含むヘッダーセクション。
ヘッダーセクション： このセクションでは、タイトル、公開日、概要、評価、そして印象的な映画ポスターなど、映画の基本情報を表示します。
映画の主要キャストセクション。
「Top Billed Cast」セクション：ここでは、映画に参加している主要人物のクレジット、演じる役名、プロフィール画像を確認できます。
映画を紹介する宣伝画像
「Media」セクション： ここでは、映画に関連する視覚的に魅力的な画像を厳選して表示し、没入感のある視覚体験を提供します。
おすすめ映画セクション。
「Recommendations」セクション： 類似性に基づいて提案される関連映画の一覧を確認でき、興味のある映画に関連した追加コンテンツを探すのに役立ちます。
この例のプロジェクトでは、これを実現するために 4 つの API エンドポイントを組み込みました
Movies > Details をヘッダーセクション用に使用
Movies > Credits を「Top Billed Cast」セクション用に使用
Movies > Images を「Media」セクション用に使用
Movies > Recommendations を「Recommendations」セクション用に使用
さあ、API プラグインを設定しましょう。この記事の前半でも触れたように、Enterprise プランをご利用の方は複数の API を同時に扱える柔軟性があり、私たちのデモに近い包括的な体験ができます。ただし、Pro プランの場合でも心配はいりません。プラグインを 1 つずつ実行すれば、データがデザインにどのように反映されるかを十分に理解できます。
ヘッダーセクション
方法：GET
ヘッダー："ACCESS_TOKEN" を固有のアクセストークンに置き換えてください。
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }Pie からのメッセージ：DETAILS
「Override URL with msg value」チェックボックスを選択してください。
Pie へのメッセージ：DETAILS RESPONSE
「Top Billed Cast」セクション
方法：GET
ヘッダー："ACCESS_TOKEN" を固有のアクセストークンに置き換えてください。
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }Pie からのメッセージ：CREDITS
「Override URL with msg value」チェックボックスを選択してください。
Pie へのメッセージ：CREDITS RESPONSE
「Media」セクション
方法：GET
ヘッダー："ACCESS_TOKEN" を固有のアクセストークンに置き換えてください。
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }Pie からのメッセージ：MEDIA
「Override URL with msg value」チェックボックスを選択してください。
Pie へのメッセージ：MEDIA RESPONSE
「Recommendations」セクション
方法：GET
ヘッダー："ACCESS_TOKEN" を固有のアクセストークンに置き換えてください。
{ "Authorization": "Bearer ACCESS_TOKEN", "accept": "application/json" }Pie からのメッセージ：RECOMMENDATIONS
「Override URL with msg value」チェックボックスを選択してください。
Pie へのメッセージ：RECOMMENDATIONS RESPONSE
デザインに実データを使う理由
この素晴らしいプロトタイプを体験したところで、ProtoPie におけるデータ中心のアプローチがなぜ画期的なのかを見ていきましょう。
映画レビューサイト、TV ストリーミングサービス、コンテンツ管理システムのようなプラットフォームを作るとき、実データに触れることは単なる選択肢ではなく、必要不可欠です。細かなディテールが最も重要な場面で、想像だけに頼る様子を思い浮かべてください。ここで本物のデータに踏み込むことが、デザイナーにとって大きな意味を持ちます。実データを活用することで、さまざまな利点が得られます：
プロトタイプを実地でテストする：実データは、プロトタイプにとって現実チェックのような役割を果たします。実際の状況を想定でき、隠れた問題を明らかにし、さまざまなシナリオを検討できます。たとえば映画データにサムネイルや評価がない場合、どう対応しますか？ レイアウトを崩さずに、コンテンツの長さの違いへ対応できるでしょうか？
みんなを惹きつける：実データはプロトタイプを一気に魅力的にし、関係者やユーザーに「おっ、すごい！」と思わせます。実際のデータでデザインがどのように機能するかを見ることで、その可能性と実際の動作をより深く理解してもらえます。
時間と手間を節約する：デザインプロセスに実データを取り入れることで、内容を作り込んだり手作業で更新したりする手間を省けます。ProtoPie の API プラグインはまるで魔法の杖のように、さまざまなリアルタイムデータソースを追加の作業負担なしで直接プロトタイプに取り込めます。
パフォーマンスと成果を最適化する：この例のプロジェクトは 4.4 MB と非常に軽量で、データ用のプレースホルダを持つ 2 つのテンプレートシーンのみで構成されています。この戦略的なアプローチは、アセット管理の改善に役立つだけでなく、プロジェクトサイズも最適化し、パフォーマンスを大幅に向上させます。プロジェクトサイズを適切に管理することで、よりスムーズな動作と優れたパフォーマンスが実現し、デザイン作業において重要な要素となります。
映画メタデータのプレースホルダ用テンプレート。
動画ストリーミングと TV UI デザインのマスタークラスに参加する
今まさに体験したような、機能豊富なプロトタイプを作り上げる複雑なポイントをさらに深く学びたいなら、これ以上探す必要はありません。ProtoPie Masterclass は、実データをシームレスに統合したいと願うだけでなく、デザインの中でデータを処理し、洗練された形で提示する技術を習得したい方のために最適化されています。最先端のプロトタイピング技術が次々と登場する旅に備え、常に一歩先を行きましょう。
お見逃しなく！ ProtoPie School の スマート TV と動画ストリーミングのためのプロトタイピング コースに登録して、従来のデザインの境界を超える冒険へ出発しましょう。
