戦争映画のサイトを作った話・その3

mmmatch
8 min readMay 8, 2016

--

最後に、どうやって作ったかの話。

簡単な構成はこんな感じ。

・サーバー:sakura VPS

・webサーバー:nginx

・開発言語/フレームワーク:node.js / Express4

・DB:MySQL

以前からnode+Expressで何か作ってみたいなと思ってたので、フレームワークの選定には迷わず。

最近会社でもgulpを使い始めたりして、nodeの勉強は仕事でも活かせるので丁度よかったと思う。

最初はMEAN stackでやってみたいなと思って、AngularとmongoDBも軽くさわりだけ勉強してみたけど、Angularはちょっと学習コスト高そう・・と思いまた次の機会に。。DBも結局、使い慣れてるMySQLに。

映画関連のAPI

サイトを作るに当たって、一番の肝が「映画の情報をどうやって取ってくるか」、ということ。

最初はAmazonかitunesとかのAPI使えばいっか、と安易に考えてたがそれだけでは足りず。FilmarksのAPIがあったら迷わず使いたかったところだけど、残念ながら公開されてない模様。結局、海外サイトも含め色々と探しまくって、下記の図のように複数のAPIを利用。

後半二つは、海外の映画サイトのAPI。特に最後から二つめの「OMDb API」、これは今回サイトを作る上でかなり強力な助けになりました。アメリカの大手映画サイトIMDbの情報が取れるAPI(非公式だけど)です。最後のTMDbも結構いい感じなのですが、OMDb APIに比べるとまだまだ歴史が浅いようで、現状だと映画のラインナップが少なめな印象。

OMDb API、何が一番良かったって、映画のポスター画像が取得できること。

AmazonのAPIで取れる商品画像とかだと、「DVDのパッケージ画像」になっちゃうんですよね。。特にブルーレイ商品だと、商品画像が思いっきり「Blu-ray」のパッケージ画像・・

作りたいデザインとしては映画のポスター画像がきれいに並ぶ感じにしたかったので・・これはNG。一方でOMDb APIは、donateした人向けの機能でポスター画像の取得ができます。しかも英語版のポスター、というのが何気に嬉しい。

映画「バードマン」のときちょっと話題になってましたけど、日本公開版のポスターって、どうしても情報盛りがちで、ぱっと見あまり美しくないんですよね・・・。

今回はOMDb APIを使うことで海外版ポスターの画像を取得することができたので、想定通りのデザインに仕上げることができて満足。

原題の取得

海外サイトのAPIを使うにあたって、一つ壁にブチ当たる。それは、作品タイトルを原題(英語)で指定しないといけないということ。AmazonのAPIもitunesのAPIも、日本語のタイトルで引ける情報の中にオリジナルタイトルは入ってなかった。

こことかここ見る限り、データベースとしてもってるところは勿論あるんだろうけど、APIで取れる情報としては見つからず。。

止むを得ず、日本語タイトル→オリジナルタイトル変換の部分だけは、某映画データベースサイトをスクレイピングすることで、とりあえず無理矢理運用中・・。

便利なnpm

nodeといえばnpm。ということで、今回使って便利だったnpmをまとめてみます。

ちなみに、この本はかなり参考になりました。この本なかったら作れなかったかも。。紹介するnpmも、ほぼこの本で知ったやつです。

・apac:Amazonのproduct advertising APIを簡単に使えるnpm。

・cheerio-httpcli:スクレイピングがかなり楽になります。パースしたものをjqueryっぽくdom操作できる。

・mysql:そのまんまですが・・、今回はDBがmysqlだったので。

うーん、思ったより技術的な話にならなかった・・。 一番の苦労は、良いAPIに巡り合うまでに探しまくったところかも。個人で映画サイト作ってみようかなと思ってる人に、少しでも参考になれば。

という感じで、「戦争映画アーカイブス」、鋭意運営中ですのでどうぞよろしくお願いします。

--

--

mmmatch

webサービスのデザイナー。映画や音楽、web、デザイン、社会のことなど好きに書いてます。個人で映画サイト運営中 → http://warfilms4peace.com/