무엇을 했는가

영화나 드라마의 감상을 쓸 수 있는 채팅 사이트를 만들고 있어, 영화라든지의 포스터를 취득할 수 있는 API 없을까라고 생각해 조사하면 TMDB의 API라고 하는 것을 발견했습니다.
그 API가 매우 편리했기 때문에 TMDB의 API를 어떻게 사용했는지를 썼습니다.

만든 채팅 사이트

TMDB란?

htps //w w. 그래도 ぃぃえ db. rg/
"The Movie Database"의 약자로 영화나 TV 등의 데이터베이스와 같습니다.
해외 사이트 같지만 일본 작품도 상당히 있는 것 같습니다.

검색

만든 채팅 사이트는 "토크 룸을 작성 → 그 토크 룸에서 채팅"이라는 흐름이 있습니다.
토크룸을 만들 때 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"
]

참고