Web APIを利用して映画のポスターやあらすじを自分のサイトに表示する

外部サイトのデータを二次利用することができる「API」。APIはApplication Programming Interfaceの略で、

広義の意味ではソフトウェアコンポーネントが互いにやりとりするのに使用するインタフェースの仕様（フリー百科事典『ウィキペディア（Wikipedia）』）

です。Webサービスやアプリの開発においても、HTTP通信によってWebサーバーのAPIを取り扱う「WebAPI」を利用した新たなサービスが生み出されています。データの二次利用の例では、インスタグラムの投稿を自分のサイトに表示させるための「Instagram API」、Twitterが提供しているAPIを利用した「Togetterまとめ」などがあります。

本記事ではAPIのデータベースから取得した情報を表示するページを作成します。APIは映画やTV作品のデータベースを提供する「TMDb」を使用します。TMDbは作品のタイトルやポスター画像、出演者、スタッフ以外に、ユーザーによる評価やレビューなどもサイト上で公開しており、それらもAPIとして利用することが可能です。また、一部日本語でも提供されています。利用するにはアカウントの作成が必要ですが無料です。

実現したいこと

• APIのデータを取得しページ上に表示する

事前準備

TMDbのAPIを利用するにはTMDbのアカウントが必要です。アカウント作成ページで登録を行います。アカウント作成後、Profile and Settings > Settings を開きます。サイドメニューにある「API」をクリックして、一番下の「Request an API Key」からAPIの利用申請を行います。承認後、API Keyが付与され、利用申請を行なったページで確認できるようになります。

JavaScriptで表示するページを作成

JavaScriptでAPIを取得する際に、以前まではXMLHttpRequestを使用していましたが、Fetch APIの fetch() メソッドでより簡単に取得することが可能になりました。各ブラウザの対応状況はこちらでご確認ください。

fetch() の基本的な書き方です。

fetch('http://sample.com/sample.json')
.then(response => {
  return response.json();
})
.then(data => {
  //取得したJSONデータの処理
  console.log(data);
})
.catch(error => {
  //エラー発生時の処理
  console.log('error');
})

サンプルとして現在上映中の映画のリストを表示してみます。

index.htmlに情報を表示するための div を記述します。

<div id="app"></div>

TMDbのAPIとAPI Keyを組み合わせたURLを、先ほどの基本的な書き方にあてはめてみて、情報が取得できるかどうかコンソールに出力してみます。

fetch('https://api.themoviedb.org/3/movie/now_playing?api_key=ここにAPI Key入れる&language=en-US&page=1')
  .then(response => {
    return response.json();
  })
  .then(data => {
    //取得したJSONデータの処理
    console.log(data);
  })
  .catch(error => {
    //エラー発生時の処理
    console.log('error');
});

問題なければコンソールにデータが表示されます。

取得したJSONデータを見てみると作品群は results キーの値として定義されていますので、 data.results とすると作品の一覧のみがコンソールに表示されます。

データが取得できたら、 map() メソッドで表示したい情報をさらに細かく取得していきます。ここではタイトルとポスター画像を表示します。それぞれに適したタグを生成して、テキストやURLを設定し、各アイテム用のdivに順番に挿入していきます。

data.results.map(movie => {
  const row = document.createElement('div');
  row.setAttribute('class', 'item');

  const title = document.createElement('p');
  title.setAttribute('class', 'title');
  title.textContent = movie.title;

  const poster = document.createElement('img');
  poster.src = `https://image.tmdb.org/t/p/w300_and_h450_bestv2/${movie.poster_path}`;

  container.appendChild(row);
  row.appendChild(poster);
  row.appendChild(title);
});

画像とタイトルが表示されていれば完成です。

最後に

TMDbのAPIドキュメントページでは、取得したい情報ごとにコードジェネレーターが用意されています。左のサイドバーから利用したい情報を選び、「Try it out」のタブをクリックしてAPI Keyなど必要項目を入力すると「Response」のエリアに取得できるJSONが表示されます。「language」を ja とすると日本語になります（日本語訳が登録されている作品のみ）。さらに下の「Code Generation」では各言語ごとのコードのサンプルも表示されます。

参考サイト

Tania Rascia「How to Use the JavaScript Fetch API to Get JSON Data」（参照2019-08-23）
Tania Rascia「How to Connect to an API with JavaScript」（参照2019-08-23）
クロジ「映画ブログ作りました」, <https://nanokamo.com/kinematos>（参照2017-09-30）
mmmatch「戦争映画のサイトを作った話・その３」, <https://medium.com/@mmmatch/%E6%88%A6%E4%BA%89%E6%98%A0%E7%94%BB%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F%E8%A9%B1-%E3%81%9D%E3%81%AE%EF%BC%93-62511b7541df>（参照2017-09-30）