iTunesの映画紹介ブックマークレット「MovieHtml」を自分好みにカスタマイズ

スポンサーリンク

iTunesの映画ソフトをブログで簡単に紹介できるツール


iPad thought by Brett Jordan

最近DVD収集してないなぁ。りく(@Rikuma_)です。

ここ数年、特にiPadの普及が大きな呼び水となって、iPhoneやiPadで映画を鑑賞する人が増えてきてるのだそうです。

AppleTVの話題も最近よく耳にします。私も欲しいのですが、買っちゃうと自宅で映画ばっかり見ちゃうから今は自重してます。

iPhoneやiPadで映画を観る場合は、iPhoneなどのアプリを購入するのと同じく、iTunes Storeで映画を購入・レンタルします。

映画大好きな私はブログのエントリーでも時々映画に関する話題を書いてます。となるとエントリーでも映画ソフトを紹介したくなりますよね。

iTunes Storeで取り扱われている映画をブログで簡単に紹介できるツールとして、「MovieHtml」というブックマークレットがあります。最近知ったのですが、とても便利。

先日、iPhoneアプリを紹介するブックマークレット「AppHtml」の画像が表示されない現象があり、Apple側の画像置き場が変更されたことが原因だと判明しました。

その際、AppHtmlで生成するアプリ紹介コードに画像を一切使わなくするよう、大谷さん(@delaymania)のエントリーを参考にカスタマイズし、ついでに過去のエントリーも全て「画像なしバージョン」に変更しました。それが先週末。

http://delaymania.com/201210/blog/apphtml_link_broken/

今回、この流れで「せっかくだからMovieHtmlもカスタマイズしちゃお!」ってことでやってみました。

画像サイズについてのおさらい

「MovieHtml」では映画パッケージ画像を5種類の中から選べます。

・XLサイズ(高さ227px)
・Lサイズ(高さ140px)
・Mサイズ(高さ100px)
・Sサイズ(高さ60px)
・XSサイズ(高さ30px)

この5つのサイズがあるというのを頭の片隅に置いて頂いて、次にいきます。

ブックマークレートの基本的な設定方法

「MovieHtml」は、上のサイトで自分好みの設定にしたブックマークレットを作成し、それを起動して紹介したい映画タイトルを検索し、ブログ用コードを作成するという使い方です。

screenshot_201210_033

1番はブックマークレットの名前。自分が分かりやすい名前を付けておきましょう。

2番はリンクシェアのID。お持ちの方は変更をお忘れなく。

3番は説明文が入るエリアの横幅指定。私は特に変更せず使ってます。

4番は画像の大きさと出力させる項目を指定します。上で解説した5種類の画像はココで指定するのですが、画像の右側に表示される項目が固定されています。今回カスタマイズするのは、ここを自由に表示したいというのが目的。

出力方法の箇所も私は初期値の「プレビュー表示」で使ってます。

ここを「するぷろ」や「DraftPad」といったiPhoneアプリにすることで、iPhoneでのブックマークレットが設定できるのでしょうね。私はiPhoneでまだブログ更新したことがないので今回は割愛。

screenshot_201210_034

↑全ての設定が終わったら「Bookmarkletを生成する」をクリックするとブックマークレットが生成されます。これをブックマークレット置き場(表示場所)にドラッグ&ドロップ。

screenshot_201210_035

↑ブックマークレットをクリックすると起動されますので、映画タイトルを入力して対象となる作品を探し、コードを生成してブログに貼り付けるという流れです。

初期設定のままで生成すると、こうなります

当初私は2番目に大きい「Lサイズ」の画像を使い、初期設定の通りでコードを生成してました。

screenshot_201210_036

↑これが「アイコンL+イントロ(短)」のテンプレートで生成したサンプル。映画の解説も自動で付けてくれますが、画像の下にはみ出てしまってますね。

screenshot_201210_037

↑これが「アイコンL+コメント印」のテンプレートで生成したサンプル。解説の代わりに線とコメント欄が付いています。

2つを見比べ、どうカスタマイズするかを考えました。

★プレビューのボタンは要らないな。(予告編らしいのですが、私のPC環境が悪いのか?再生されないので)
★解説が下にあふれちゃうので要らないな。(画像XLサイズだと解説あったら見映えもいいですけどね)
★コメント欄付きのテンプレートをベースにしよう。
★映画監督の名前は表示させたいな。あとジャンルも。
★ってことは行が増えるので、文字フォントは小さ目がいいな。

ということでカスタマイズしていきます。

予約語を追加して好みのブックマークレットを作っちゃおう

テンプレートには「予約語」というのがあって、「映画タイトルの予約語」「監督名の予約語」といった風にいろんな予約語が設定されています。それをテンプレートに追加していくことで、お好みのカスタマイズが出来ます。

上に紹介した「代助のブログ」さんのMovieHtml解説エントリーに、予約語の一覧が掲載されていますので、参考にされて下さい。私のエントリーでは使用した予約語だけを解説します。

screenshot_201210_038

↑一度ブックマークレットを生成していれば、MovieHtmlのブックマークレット生成ページ(注:元ページが削除されているのでリンクを外しています)で、書式テンプレートの下にHTMLコードが表示されているはずです。それをコピーして、テキストを編集できるエディタ(TeraPadでもメモ帳でも、何でもいいです)に貼り付けてください。

上のサンプルは適度に改行を入れていますが、実際は1行で書かれています。

1行目~8行目が画像に関する記述。ここは今回何もイジリません。

ちなみに画像のサイズを変えたいなら、3行目の最後にある「icon140url」の数値を画像サイズに合わせて変更すればいいです。一番大きい「XLサイズ(高さ227px)」にしたいなら、「icon227url」にすればOK。Mサイズなら「icon100url」です。

9行目以降は、画像右に表示される文字部分の記述。ここをカスタマイズしていきます。

カスタマイズ内容

★文字を小さ目に → 9行目の「div」にクラスをつけてCSSで装飾できるようにする。
★プレビューボタン要らない → 11行目の「${previewbtn}」を削除。
★映画監督の名前 → 「${artist}」という予約語を追加。
★ジャンル → 「${category}」という予約語を追加。

以上を踏まえてカスタマイズすると、下のようなオリジナルのコードになります。

1~8行の画像に関する記述は前述した通り変更していません。

9行目の「div」に「movieHtmlBox」というクラスを追加し、CSSで文字フォントなどを変更できるようにしました。

14行目に「ジャンル」、15行目に「監督」を新たに追加してます。

16行目はコメント欄ですが、コメントに色を付けてみよっかなと思い、「span」タグで囲んで「movieComment」というクラスも付けてみました。コメントの色もCSSで自由自在に変更できます。

というわけでコードが完成しました。くり返しますが、上のサンプルコードは見やすいように改行を入れてます。

この改行を全部取っ払い、余計な空白文字などが入ってないことも確認して、1行のコードにして下さい

というのも、「AppHtml」をカスタマイズする時、余計な半角スペース文字が含まれていたせいでブックマークレットが正常に起動されない不具合が発生し、原因が判明するまで私はかなりの時間ハマりました。

PCブラウザで見た場合に余計な空白文字が挿入されてしまうこともあるかもしれないので、テキストエディタなどで作成したコードの改行などを削除して1行のコードにして下さい。

screenshot_201210_039

↑1行にしたコードをMovieHtmlのブックマークレット生成ページの「書式テンプレート」下にある枠に貼り付け、ボタンをクリックしてブックマークレットを生成。

生成されたブックマークレットをブラウザのブックマークレット置き場に保存すれば完成です。

screenshot_201210_040

↑カスタマイズすると、こんな感じになりました。CSSで文字の大きさを少し小さくして、コメント文字は茶色にしてます。

コメント欄に何か自分自身の感想などを一言コメントで添えればオリジナリティーも出ますよね。

いかがでしたでしょうか。今回私が作ってみたサンプル以外にも、画像を大きくしてみたり、予約語を追加したり変更したりして、いろいろお好みで改造できると思います。カスタマイズの参考になれば幸いです。

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