何をしたのか
映画やドラマの感想を書けるチャットサイトを作っていて、映画とかのポスターを取得できる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"
]
参考