TMDbの各種リクエスト方法

はじめに

前回に引き続きTMDbのWEBAPIについての記事です。
今回は自身のサービスで利用したいサービス内容を考えて、公式ドキュメントを見てそのリクエスト方法を調査していきます。

実現したいサービス内容

まずは実現したいサービス内容大まかに以下に分けてみました。

・映画の一覧の取得
トップページには最新映画の情報を一覧表示
タイトルとジャンル、ポスター画像程度の簡易的な情報でいい
ジャンル別や人気別になっているとなおいい

・映画の詳細の取得
一覧ページから特定の映画情報を選択した際に、該当映画の詳細情報を表示
あらすじやキャスト等

・検索した映画情報の取得
検索ボックスから指定した映画情報を表示する

・お気に入りに追加した映画情報の取得
一覧や検索結果で表示した映画情報をお気に入り登録しておくことで、自分のお気に入りリスト（観た映画や観たい映画）を作成できる

ひとまずこの辺の実現方法を調査していきたいと思います。

TMDbAPI利用時の便利なパラメータ

リクエスト時に言語の指定をすることができます。

https://api.themoviedb.org/3/movie/550?api_key=xxxxxxxxxxxxx&language=ja-JP

keyの値は個々のAPIキーを入れます。
パラメータに「&language=ja-JP」とすることで取得するデータの言語を日本語に指定できます。

ただ、日本語訳が追記されていないデータに関してはレスポンスがnullで返ってきてしまいます。英語でしか対応してない概要欄などですね。

日本語訳がない場合は英語で代替えテキストを表示するような設定があるといいのですが、まだわかっていないので調査中です。

映画の一覧の取得

TMDbのドキュメントに倣って、人気の映画一覧を取得する方法です。
リクエスト方法はmovie/popularで、パラメータにAPIキーを指定します。

javascriptでのサンプル

axios.get('https://api.themoviedb.org/3/movie/popular?api_key=xxxxxxxxxxxxxxxxxx&language=ja-JA&page=1')
.then(response => {
  let data = response.data.results
  console.log(data)
}).catch(err => {
  console.log('err:', err);
  return
})

TMDbで毎日更新されている人気映画のリストがこれだけで取得できます。
※上記一覧の取得では日本語を指定しても、訳があれば日本語で、なければ英語のオリジナルタイトルが返ってくるようになっているので、上の方で書いたnullで返ってくる問題は考慮不要でよさそうです。

ポスター画像の表示方法

先ほどの人気映画一覧を取得した結果でposter_pathというオブジェクトに画像URLのパスが入っています。

画像の表示方法は、「BASEURL + 画像サイズ + 画像パス」のようなので、リクエスト先のURLは以下のような感じになります。

https://image.tmdb.org/t/p/w185/279PwJAcelI4VuBtdzrZASqDPQr.jpg

※サイズはいくつか用意されたものがあるので、その中から選んで指定してあげます。

"backdrop_sizes": [
      "w300",
      "w780",
      "w1280",
      "original"
    ],
"logo_sizes": [
      "w45",
      "w92",
      "w154",
      "w185",
      "w300",
      "w500",
      "original"
    ],
"poster_sizes": [
      "w92",
      "w154",
      "w185",
      "w342",
      "w500",
      "w780",
      "original"
    ],
"profile_sizes": [
      "w45",
      "w185",
      "h632",
      "original"
    ],
"still_sizes": [
      "w92",
      "w185",
      "w300",
      "original"
    ]

映画情報の検索

キーワードから映画情報を検索するには、/search/movieに対してGETでリクエストを送信します。

リクエストURLは以下のような例となります。

https://api.themoviedb.org/3/search/movie?api_key=xxxxxxxxxxxxxxxxxxxxxxxxxx&language=ja-JA&page=1&query=あんぱんまん

javascriptでのサンプル

        axios.get('https://api.themoviedb.org/3/search/movie', {
            params: {
                query: あんぱんまん,
                page: 1,
                language: 'ja-JA',
                api_key: 'xxxxxxxxxxxxxxxxxxxxxxxxxx'
            }
        })
        .then(response => {
            let data = response.data.results
            console.log(data)
            return
        }).catch(err => {
            console.log('err:', err);
            return
        })

・・・執筆中（お待ちください）