iOSアプリ(iApp)のバッチ（バッジ）表示するHTMLの取得方法

2013/11/29 2014/11/22

iOSアプリ(iApp)のバッチ表示を行うHTMLの取得方法をご紹介しておきます。
特に難しいわけでもありません。
コツさえつかめれば、慣れてしまうでしょう。

はじめに

iOSアプリ(iApp)のバッチ表示はよく見かけるものですので、
ご自分でも探せるとは思いますがご参考まで紹介します。

手順はリンクを作成して貼るだけなのですが、
ブログなどのシステムとの相性が悪くうまく貼れない場合もあるようなので、ご紹介しておきます。

以前の投稿（ドラゴンクエスト（初代）が100万ダウンロードまで無料！）で
バッチ表示を行ったのですが、どうもビジュアルエディタで保存すると消えてしまう場合があります。

今回は、以下のドラクエアプリに対してのリンクを作成しました。
ドラゴンクエストポータルアプリ – SQUARE ENIX INC
※PCでご覧の方はiTunesが起動します。

リンクメーカーサイトへアクセス

iOSアプリのLink Makerサイトへアクセスします。
ITMS Link Maker

以下のようなページが表示されます。

LinkMakerサイト

この画面で、検索するアプリの名前などを入力し
表示したいiOSアプリ(iApp)を表示してリンクを作成します。

メディアファイルは以下から選択可能です。

iOS APP
Mac APP
Podcast
オーディオブック
コンテンツを選択
ショートフィルム
ブック
ミュージック
ミュージックビデオ
映画

ジャンル/カテゴリは、メディアファイルに応じてリストが変わります。
[iOS APP]を選択した場合は以下のようなリストが表示されます。

すべて
Newsstand
エンターテインメント
カタログ
ゲーム
スポーツ
ソーシャルネットワーキング
ナビゲーション
ニュース
ファイナンス
フード／ドリンク
ブック
ヘルスケア／フィットネス
ミュージック
メディカル
ユーティリティー
ライフスタイル
仕事効率化
写真／ビデオ
天気
教育
辞書／辞典／その他

LinkMakerで作成できる種類

実際にキーワードを入力し検索します。

キーワード検索

下部に検索結果が一覧で表示されます。
iOSアプリ(iApp)を選択して検索した場合は、
上部にiPhone App、下部にiPad Appが表示されます。
一覧から[iPhone(iPad) App リンク]をクリックしリンクを表示します。

検索結果の表示

ポップアップ画面でAppへリンク画面が開きます。
リンクを含むHTMLの部分で表示したいリンクのタイプを選択し、
HTMLソースの下に表示されたプレビューを確認します。

プレビュー部分はクリックすると作成したアプリのページが表示され、
実際の動作を確認することができます。

バッジの作成とコードコピー

リンクページを表示すると以下のように表示されます。

プレビューの確認

取得したHTMLコード例

<a href="https://itunes.apple.com/jp/app/doragonkuesuto-potaruapuri/id705126077?mt=8&uo=4" target="itunes_store"style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/htmlResources/assets/ja_jp//images/web/linkmaker/badge_appstore-lrg.png) no-repeat;width:135px;height:40px;@media only screen{background-image:url(https://linkmaker.itunes.apple.com/htmlResources/assets/ja_jp//images/web/linkmaker/badge_appstore-lrg.svg);}"></a>