iPhone・Macアプリ、iTunesにある音楽や映画の画像付きリンクを作成できる「AppHtmlブックマークレット・メーカー」

便利なiPhoneアプリやおすすめしたい映画などを紹介したい時に、簡単にアクセスできるようにリンクを貼っておきたいですよね。
Appleが配信しているサービスであれば「AppHtml」というブックマークレットを使いましょう。画像や詳細を取得したリンクを簡単に作ることができます。基本的な使い方と設定、カスタマイズ方法を紹介します。

sponsored link

「AppHtml」の使用例

「AppHtmlブックマークレット・メーカー」を使用すると以下のようなリンクを一瞬で生成できる「ブックマークレット」を作成することができます。(上からiPhone・Mac・Album・Movie)

そら案内
開発者: feedtailor Inc.
¥300(2014.7.28 時点)
4月の雨 - Single
アーティスト: aiko
収録曲数: 1曲
¥250(2014.7.28 時点)
アナと雪の女王 (日本語吹替版)
監督・著者名: クリス・バック & ジェニファー・リー
再生時間: 103 分
¥2,000(2014.7.28 時点)

カスタマイズは色々しているんですが、HTMLとCSSも公開しますので、参考にしてみてください。

ブックマークレットの使い方

ブックマークレットというのは、ブックマークに「JavaScript」という言語を登録しておくことで、色々な処理をさせる仕組みのことです。難しそうに感じるかもしれませんが、「AppHtmlブックマークレット・メーカー」が代わりにやってくれるのでHTMLとCSSの知識さえあれば、自分好みにカスタマイズすることができます。

ブックマークレットはブックマークをクリックすることで起動します。
ダイアログが表示されるので取得したいアプリなどの名前を入力してOKをクリックします。

取得したいものではない場合はOKを、取得したいものが表示されたらキャンセルをクリックします。

ダイアログにHTMLが表示され、選択した状態になっているのでコピーしてエディタにペーストしましょう。

ブックマークレットの登録方法

「AppHtmlブックマークレット・メーカー」は以下のリンクからアクセスできます。

ブックマークレットの作成には4つの設定情報が必須になっています。

  1. 検索対象
  2. 書式テンプレート
  3. 出力先
  4. 検索件数

検索対象

[検索対象]にはiPhoneアプリからiTunesのMovieなど7種類から選択します。

  • iPhone
  • iPad
  • Mac
  • Song
  • Album
  • Movie
  • eBook

書式テンプレート

あらかじめ5つのテンプレートが用意されています。そのまま使用してもいいですし、自分なりにカスタマイズすることもできます。

  • 小さいボタン
  • 大きいボタン
  • テキストのみ
  • アイコン付き(小)
  • アイコン付き(大)

テンプレートには「予約語一覧」というものもあります。これはアプリなどの名前やアイコン(画像)、スクリーンショットなどを自動で取得してくれる便利な機能で${name}${icon100url}といった書き方をします。詳しくは下記のリンクから予約語という項目を参照するか、予約語一覧を選択してブックマークレットを作成してみてください。

出力先

出力先は取得したHTMLをどこに表示させるかを選択できます。パソコンの場合は[プレビュー表示]か[ポップアップ]を選択してください。主に使用するのはこのあたりかなと思います。

  • プレビュー表示
  • ポップアップ
  • するぷろ
  • Moblogger
  • PressSync Pro
  • Textwell

下の4つはiPhoneアプリです。HTMLを取得すると、そのアプリに移動してすぐにペーストすることができます。iPhoneでブログを書いている(いわゆるモブログ)なら、iPhone用にも作っておきましょう。

検索件数

3件から20件まで選択できます。検索にひっかりにくいものもあるので、20件にしておきます。


4つを選択したら[Bookmarkletを生成]というボタンをクリックするとブックマークレットが表示されます(この場合はAppHtml(iPhone)というリンクです)。

リンクをドラッグ&ドロップでブックマークバーまで持って行ってブックマークします。その場でクリックしても動作を確認できます。

カスタマイズしたHTMLとCSS

書式テンプレートを選択してから[テンプレートを直接カスタマイズできます]というところ(下の画像で選択している範囲)を変更すると、オリジナルのリンクを作成することができます。

僕はこのように登録しています。(見やすいように改行しているので、改行をなくしてから使用してください。ブックマークレットがうまく起動できなくなってしまいます)

一部を除いてHTMLは共通のものが多いです。違うのは${badgeL}という予約語を囲んでいるdivのクラス名です。

AlbumとMovieのテンプレートも一部変えています。${badgeL}を囲んでいるdivのクラス名、収録している曲数を取得する予約語の${trackcnt}とクラス名、再生時間を取得する予約語の${playtime}とクラス名、アイコンのheightです。

カスタマイズする際のHTMLに関しては大さん(@delaymania)のエントリーを参考にしました。予約語などは一部変更されているので使用できないものもありますが、HTMLの参考になると思います。

次にCSSです。appHtmlFrameで内側に余白を作り、アイコンは左側でテキストは右側、ダウンロードボタンはセンタリングするといった感じになっています。パソコンの場合はダウンロードボタンをホバーすると透明化するようにもなっています。

標準ではダウンロードボタンがPNGでサイズが小さいためiPhoneなどのRetinaディスプレイでは、そのままのサイズで表示させるとぼやけてしまいます。SVGファイルを読み込ませるようにCSSで指定して、それを回避しています。

ダウンロードボタンの表記を日本語から英語に変更することもできます。詳しくは下のリンクを参考にしてください。

アイコンのサイズを大きくする

iPhoneとMacアプリはそれぞれ1024pxと512pxという少し大きめの画像を読み込んでくれるんですが、AlbumとMovieは最大でも長辺100pxと少し画像サイズが小さいです。

アナと雪の女王 (日本語吹替版)
監督・著者名: クリス・バック & ジェニファー・リー
再生時間: 103 分
¥2,000(2014.7.29 時点)
アナと雪の女王 (日本語吹替版)
監督・著者名: クリス・バック & ジェニファー・リー
再生時間: 103 分
¥2,000(2014.7.28 時点)

上が100pxで下が300pxです。見え方があきらかに違うのが分かると思います。

300pxの画像を読み込ませる方法は簡単で、imgタグのsrc""内にある100x100-75.jpgという部分を300x300-75.jpgに変更してあげるだけです。

すべての画像サイズが用意されているわけではないので、プレビューを見て画像が正常に表示されているか確認をしておいてください。


ブックマークレットはSafariやChromeといったブラウザ、iPhoneやパソコンといった異なる環境でも同じように使用できるのが最大のメリットです。カスタマイズしようとすると、少し時間がかかってしまうかもしれませんが、最初に作ってしまえばあとはずっと使えます。ぜひ挑戦してみてください。