2019/8/23外部サイトのデータを二次利用することができる「API」。広義の意味ではソフトウェアコンポーネントが互いにやりとりするのに使用するインタフェースの仕様(フリー百科事典『ウィキペディア(Wikipedia)』)です。Webサービスやアプリの開発においても、HTTP通信によってWebサーバーのAPIを取り扱う「WebAPI」を利用した新たなサービスが生み出されています。API」、Twitterが提供しているAPIを利用した「Togetterまとめ」などがあります。本記事ではAPIのデータベースから取得した情報を表示するページを作成します。APIは映画やTV作品のデータベースを提供する「TMDb」を使用します。TMDbは作品のタイトルやポスター画像、出演者、スタッフ以外に、ユーザーによる評価やレビューなどもサイト上で公開しており、それらもAPIとして利用することが可能です。一部日本語でも提供されています。利用するにはアカウントの作成が必要ですが無料です。実現したいことAPIのデータを取得しページ上に表示するTMDbのAPIを利用する準備TMDbのアカウント作成ページで登録を行います。Settings」を開きます。Key」からAPIの利用申請を行います。Keyが付与され、利用申請を行なったページで確認できるようになります。メソッドでより簡単に取得することが可能になりました。各ブラウザの対応状況はこちらでご確認ください。console.log('error');})サンプルとして現在上映中の映画のリストを表示してみます。Keyを組み合わせたURLを、先ほどの基本的な書き方にあてはめてみて、情報が取得できるかどうかコンソールに出力してみます。console.log('error');});問題なければコンソールにデータが表示されます。すると作品の一覧のみがコンソールに表示されます。メソッドで表示したい情報をさらに細かく取得していきます。ここではタイトルとポスター画像を表示します。それぞれに適したタグを生成して、テキストやURLを設定し、各アイテム用のdivに順番に挿入していきます。row.appendChild(title);});画像とタイトルが表示されていれば完成です。最後にTMDbのAPIドキュメントページでは、取得したい情報ごとにコードジェネレーターが用意されています。Keyなど必要項目を入力すると「Response」のエリアに取得できるJSONが表示されます。すると日本語になります(日本語訳が登録されている作品のみ)。Generation」では各言語ごとのコードのサンプルも表示されます。