Skip to content

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

February 9

・javascript

API とは

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

データの二次利用の例では、インスタグラムの投稿を自分のサイトに表示させるための「Instagram API」、Twitterが提供しているAPIを利用した「Togetterまとめ」などがあります。

TMDbとは

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

アカウントの作成

TMDbのAPIを利用するにはTMDbのアカウントが必要です。 アカウント作成ページ で登録を行います。

アカウント作成後、右上のプロフィールアイコンから Profile and Settings > Settings を開きます。

Settings ページに移動したら、サイドメニューにある「 API 」をクリックして、一番下の「Request an API Key」からAPIの利用申請を行います。

承認後、API Key, API Read Access Token が付与され、利用申請を行なった API ページで確認できるようになります。

API からデータを取得する方法

JavaScriptでAPIを取得するには、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");
  });

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

サンプルとして 現在上映中の映画 のリストを表示します。
Source & Demo（CodeSandbox）

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

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

TMDbのAPIとAPI Keyを組み合わせたURLを、先ほどの基本的な書き方にあてはめてみて、情報が取得できるかどうかコンソールに出力してみます。件数が多いため1ページ分のみ取得します。 日本語で情報を取得したい場合は language=en-US の部分を language=ja にします。 取得する地域（Regions）を日本にする場合は region=JP にします。

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

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

データが取得できたら、 map() メソッドで表示したい情報をさらに細かく取得していきます。ここではタイトルとポスター画像を表示します。作品群は results キーの値として定義されていますので、data.results に対して map() を実行します。

例では後ほど作成する createItem() にタイトルとポスターの path を渡しています。

data.results.map((movie) => {
  createItem(movie.title, movie.poster_path);
});

データ表示用のコード。

/** データを表示するdivを取得 */
const container = document.getElementById("app");

/** map()内で実行する、アイテム作成用のfunction */
const createItem = (titleName, imgPath) => {
  const row = document.createElement("div");
  row.setAttribute("class", "item");

  const title = document.createElement("p");
  title.setAttribute("class", "title");
  title.textContent = titleName;

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

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

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

Source & Demo（CodeSandbox）

最後に

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

参照

Tags

api how-to web-developer