HTPC（ホームシアター用パソコン）を利用した動画管理Webアプリ「MovieJukeBox」

 今日はどの映画をみようかな？どんな俳優さんが出演しているのだろう？予告編をみて決めたいな！同じ俳優さんが出演している映画は他にあるかな？今日はSFから選びたいな、後でみるためにカートに入れておこう！こんなことを考えて自作したASP.NETのWebアプリです。

概要

• ショーケースでディスプレイされているように、映画情報をブラウザで表示する自作のWebアプリ。 家庭内LANのパソコン、Androidから利用可能。
• TMDbのAPI経由で情報（言語選択可能）を取得。
• ブラウザの拡張機能（例：Edgeの翻訳）を使えばストーリーや俳優の紹介など日本語で表示可能。
• 映画のチラシをめくるような感覚で作品情報を確認できる。
• それぞれの作品が、キャスト、スタッフ、製作会社、ジャンルで自動的にリンクされている。
• 手動でのタグ付けも可能。
• 作品名・主演・出演・監督でのGoogle、IMDb検索のリンクを作成。
• WebサーバはIIS＋ASP.NET。
• 対応ブラウザはEdge、Chrome、IE11.

メイン画面（ショーケース）

メイン画面では、図1上部の項目でフィルタリング、ページングできる。

メイン画面

インターネット上の映画情報（TMDb）を取得し表示

以下は取得内容。

映画の基本情報

邦題、原題、ストーリー、製作費、興行収入、公開日とYoutube上の予告編

取得した映画情報の基本情報


Edgeの翻訳を使って翻訳したところ。


↓

ポスター

取得した映画情報のメインポスター画像

製作会社、ジャンル、キャスト

製作会社、ジャンル、キャストの写真はリンクボタンになている。例えば、俳優の写真クリックすると、その俳優のページを表示。ジャンルや製作会社をクリックすると、その値でフィルタリングされる。
図4：取得した映画情報の製作会社、ジャンル、キャスト

製作スタッフ

取得した映画情報の製作スタッフ

Youtubeの予告編

取得した映画情報の予告編

ポスター

取得した映画情報のポスター一覧

ファンアート

取得した映画情報のファンアート

人物画面

キャスト、スタッフの写真をクリックすると、その人物ページ詳細画面が開く。人物ページでは、その人物が出演する動画ファイルが一覧化されている。動画画像をクリックすると作品ページが表示される。
動画画像の上をマウスオーバーすると、Youtube上の予告編がポップアップされる。ポップアップ内で再生可能。

人物ページ


下部には人物の写真が表示されていて、写真をクリックすると大きな写真が表示される。

人物ページ下部


同様に紹介文も日本語に翻訳可能。


↓

ジャンル画面

動画画像の上をマウスオーバーすると、Youtube上の予告編がポップアップされる。動画画像をクリックすると作品ページが表示される。

「Science Fiction」でフィルタリングした画面

各種メニュー

上記以外にもいくつか機能がある。MovieJukeBoxの初期表示はショーケースだが、上部のバナーをクリックすることでメニューが表示される。

管理のサブメニュー

ジャンル選択画面

Adventureを選択して「007慰めの報酬」の日本語タイトル部分をクリックしてをYouTubeポップアップを出したところ。



「007慰めの報酬」の上部をクリックすると作品詳細のページが新しいウインドウで表示される。

俳優・スタッフ選択画面

俳優かスタッフで絞り込んで、名前を頭文字（アルファベット）を選択して絞り込む。


「M」を選択して、Mackenzie Foyをクリックする。


↓

カート機能

後で見たい作品をカートに保存可能。Windows認証しているので、MicrosoftアカウントでWindowsにログオンしていれば（ローカルの場合はアカウント名を統一していれば）どこのパソコンからでもカートを参照可能。

Cartをクリック数するとカートに入る。


↓