Coming Soon ...
Thanks for visiting!
Sorry, currently this page is not available in English yet.
It will be translated soon.
tips_javascript
Web APIを利用して映画のポスターやあらすじを自分のサイトに表示する
Last Update : August 23, 2019
Table of Contents
外部サイトのデータを二次利用することができる「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「戦争映画のサイトを作った話・その3」, <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)