MovieHtmlによる映画紹介欄を再びカスタマイズしました

スポンサーリンク

 

SD23
SD23 / RK Production

週1回、その週に劇場公開が開始される映画作品を当ブログにて紹介しています。

お気に入りの俳優・女優については、文末で他の出演作品リンクを紹介するようにしています。俳優の名前は知ってる(聞いたことある)けど何の作品に出てたっけ?という質問があって以降、追加するようにしました。

Amazonや楽天で取り扱われているブルーレイやDVDに関しては、@kankichiさんが提供されているWebサービス「カエレバ」を利用しています。

↑こんな感じに。

一方、iTunes映画ストアで取り扱われている作品に関しては、@hondamarlboroさんが提供されているブックマークレット「MovieHtml」を利用しています。

MovieHtmlを再びカスタマイズしました

新レイアウトの変更点は以下の通り。

◆幅140px画像から幅227px画像に変更し、サイズを大きくした
◆再生時間、リリース年情報を削除
◆作品の概要文を追加
◆ボタン位置を概要文の直下に固定
◆スマートフォン表示時は画像・タイトル・監督名をセンタリング

MovieHtmlのカスタマイズ方法は以前にエントリーを書いています。

iPad thought by Brett Jordan


今回の再カスタマイズも上で紹介したエントリーに書いてある通りで、指定パラメータを変更しHTMLコードを少しイジっただけ。やり方は全く同じです。

◆幅140px画像から幅227px画像に変更し、サイズを大きくした

MovieHtmlで取得できるiTunes映画ストアのデータ群には、複数個の画像サイズが用意されています。

旧レイアウトでは2番目に大きな140ピクセルの画像を使うため、画像指定に「{icon140url}」という命令を付けていましたが、新レイアウトは最大サイズの227ピクセル画像にするため「{icon227url}」としました。

◆再生時間、リリース年情報を削除

これまで紹介してきた映画作品の中には、再生時間が「なし」というデータのものも幾つかありました。「なし」では意味がないので、新レイアウトでは消しました。

また、その映画が制作あるいは公開された年を参考にしてもらいたい主旨でリリース年を表示させていたのですが、どうもこれは制作や公開の年ではないっぽいです。iTunesでリリース開始した年というわけでもなさそうだし、何の年なのか私も分かりません。

たとえば90年代に公開された懐かしい作品を紹介したらリリース年が「2011年」になってたこともあり、これでは私の紹介主旨とズレるため、新レイアウトでは消しました。

◆作品の概要文を追加

作品内容をもう少し詳しく知りたいという意見を以前に頂いてたので、新レイアウトでは作品内容の概要文を表示させることにしました。ブックマークレットに「{longdesc}」を追加することで表示できます。

概要文の短いバージョンで「{shortdesc}」というパラメータもあるのですが、私は長いバージョンにしました。

概要文はiTunesが提供しているデータをそのまま使用しています。私が概要文を書いてるわけではありません。概要文の背景色(薄いグリーン)と枠線はCSSで設定しています。

◆ボタン位置を概要文の直下に固定

概要文が長くなると、その下にくるボタンが画像の下に回り込んでしまいました。概要文が短い時は画像の右側に表示され、視覚的な統一ができないため、画像が回り込まず常に概要文の下にくるよう、CSSを調整しました。

具体的には「overflow: hidden;」を入れています。

◆スマートフォン表示時は画像・タイトル・監督名をセンタリング

旧レイアウトはPC表示のコードやCSS設定をそのままスマホ版でも使用していたため、表示があんまりよろしくない状態になってました。新レイアウトに変更したのを機に、iTunes映画の紹介リンクをスマホ版専用のものに変更。

screenshot_201306_005

↑PCブラウザで見た時は上のように表示。

IMG_2103

↑スマートフォンのブラウザで見た時は上のように表示。PC版とは違うCSS指定にして全体をセンタリングさせるようにしました。スマートフォンは閲覧領域の幅が狭いので、センタリングでもいいかなと思って。

ついでにYouTube動画の表示幅も修正しました

MovieHtmlとは別の話なのですが、劇場公開作品を紹介するエントリーでは、掲載可能な予告編動画も紹介しています。

動画の幅は600ピクセルに設定していて、

screenshot_201306_006

↑PCブラウザだと何の問題もなく表示されるんですが、スマートフォンで表示する際に何も設定変更していなかったため、600ピクセルの幅がそのまま適用され、動画が半分ちょっとのところでバッサリ見切れて表示されてました。

タップすれば正常に動画を閲覧できるんですけど、見た目が良くないな~と自覚しつつずっと放置してました。今回のカスタマイズでようやく対応。

IMG_2105

↑スマートフォンブラウザで見ても動画が見切れることなく、ページ内に収めて表示できました。具体的にはCSSでiframeの指定に「width: 100%;」を追加しただけです。

まとめ

Amazonリンクにも概要文を表示できれば統一できてイイなとは思いますし、AmazonのWebサービスを駆使すれば概要文データを取ってこれるはずなのですが、まだ私にその技術と知識がありません。(ただいま勉強中)

私自身、将来的にiPadを購入して「映画閲覧」に活用させたいな~という夢があるため、当ブログでもiTunes映画ストアでリリースされているものを優先的に紹介するようにしています。なければAmazonリンクを代替的に使用、という風に。

どうせ紹介するのであれば、情報をもっと正確にしたいし、作品概要も共有したいし、表示も見やすくしたいし、ってことで今回の再カスタマイズとなりました。

今後も映画情報はいろいろと紹介していきますので、映画ファンの方々と情報共有できればいいなと思っております。

スポンサーリンク
この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします
CATEGORY :