何をしたのか

映画やドラマの感想を書けるチャットサイトを作っていて、映画とかのポスターを取得できるAPIないかなと思って調べたらTMDBのAPIというのを見つけました。
そのAPIがすごく便利だったのでTMDBのAPIをどう使ったのかを書きました。

作ったチャットサイト

TMDBとは

https://www.themoviedb.org/
「The Movie Database」の略で映画やテレビ等のデータベースのようです。
海外のサイトのようですが日本の作品も結構あるみたいです。

検索

作ったチャットサイトは『トークルームを作成→そのトークルームでチャット』という流れになっています。
トークルームの作成でTMDBのAPIの検索機能を使いました。
例えば「ルパン」で検索した場合は下のようになりました。
切り取ったので画像は一部しか載ってないのですが、たくさんヒットしました。

コードは下のようになりました。
今回はsearchWordには「ルパン」、TMDB_API_KEYにはTMDBのAPI用のkeyが入っています。
TMDB_BASE_URLはhttps://api.themoviedb.org/3/search/movieとなっています。

const params = {
  params: {
    query: searchWord,
    page: 1,
    language: 'ja-JA',
    api_key: process.env.TMDB_API_KEY
  }
}

try {
  const res = await axios.get(TMDB_BASE_URL, params)
  if (!res || !res.data) return

  const movies = res.data.results.map((result: any) => {
    return {
      title: result.title,
      image: result.poster_path
    }
  })
  commit('setMovies', movies)
} catch (e) {
  throw e
}

レスポンスは下記のようになりました。
今回はtitleとposter_pathだけ取得しました。

{
  "page":1,
  "results": [
    {
      "adult":false,
      "backdrop_path":"/z1N17Y5q1EE0IMrBbALyCHBuNE8.jpg",
      "genre_ids":[28,12,35],
      "id":241868,
      "original_language":"ja",
      "original_title":"ルパン三世",
      "overview":"ユリウス・カエサルがクレオパトラ7世に贈った・・・",
      "popularity":7.743,
      "poster_path":"/nJ2Ra5Y6l4CL11aqvPkIasFycoL.jpg",
      "release_date":"2014-08-30",
      "title":"ルパン三世",
      "video":false,
      "vote_average":6,
      "vote_count":63
    },
    {
      "adult":false,
      "backdrop_path":"/iQgb3uBH2JYGqc2Gje3MlXEGPx7.jpg",
      ・・・
    }
  ]
}

ポスター

先ほど取得したposter_pathでポスター画像を表示できます。
例えば下記のようにimgタグに指定すれば画像が表示されます。

<img src="https://image.tmdb.org/t/p/w185/z1N17Y5q1EE0IMrBbALyCHBuNE8.jpg" />

URLのw185は画像のサイズで他に下記のサイズを指定できます。

"poster_sizes": [
  "w92",
  "w154",
  "w185",
  "w342",
  "w500",
  "w780",
  "original"
]

参考