ブログでスマホ・タブレット用のアプリの紹介をする場合、入手し易いようにアプリへのリンクを貼っておきたいという場合もあるかと思います。そこで、はてなブログに App Store と Google Play のアプリバッジを貼る方法をメモとして残しておくことにします。
■ 一番簡単なアプリへのリンクの張り方
はてなブログ で最も簡単なアプリへのリンクの張り方は、はてなブログ の機能を使って貼り付ける方法です。
App Store や Google Play のアプリの URL を はてなブログ のエディタ画面にコピペしてやれば右のようなダイアログが開くので「埋め込み」にチェックを入れて「選択した形式でリンクを挿入」ボタンを押すだけでアプリへのリンクを貼り付ける事が出来ます。
はてなブログ へ画像を貼り付ける感覚でアプリへのリンクを張ることができるので非常に簡単です。
App Store の場合
apps.apple.com
Google Play の場合
play.google.com
この際に、ブログエディタに入力されるコードから末尾の「:cite」を消しておくと、下の URL が消えて下の様に若干すっきりした表示になります。
App Store、Google Play それぞれ単体でアプリのリンクを貼る場合はこれはこれでいいと思うのでですが、Google Play の方はブログカード形式の表示になってしまい、両方のリンクを置いておきたい場合に横に並べて表示させることは出来ませんし、何より統一感がありません。App Store の方に統一してくれていれば使いやすかったのですけどね。
■ 「バッジ」を使ってアプリへのリンクを埋め込む方法
そこで、「バッジ」を使ってアプリのリンクを埋め込む方法について考えてみます。まずはそれぞれのアプリストアで「バッジ」を取得してみます。
App Store の場合
App Store の場合、以前は「Link Maker」というツールを使用すればアプリのバッジを取得することが出来たのですが、現在は「Apple Services Marketing Tools 」というページにある「App Store Toolbox 」を使うようになっているようです。
App Store 以外にも Apple Books や Apple Music などのリンクも作成することが出来るようです（Apple News は日本ではそもそも利用することすら出来ませんが）。
以前は iTunes Store の楽曲やアルバムのリンクも作成することが出来たのですが、最近は Apple Music をプッシュさせたいらしく作れなくなってしまったようですね。
ダイアログボックスにアプリの名前を入れると検索する事が出来ます。日本語で直接入れて構いません。紹介したいアプリが検索結果にあればそのアイコンをクリックする事で埋め込み用のコードを取得する事の出来る画面に遷移します。
アプリの紹介画面に移るので、「Badges and lookups」のところで色（白ベースか黒ベースか）と言語を選択すると上部にバッジのプレビューが表示されます。ただ、このページ、どうもレスポンスが良くないようなので上手く表示されないかも知れません。
上記の画面で「Copy Embeded」を選ぶと、埋め込み用のコードを取得する事が出来ます。特に表示が変わったりはしませんが、クリップボードにコピーされているので、そのままエディタ画面で貼り付けて下さい。ためしに はてなブログ のアプリバッジを埋め込んでみると下の様に表示されます。
バッジをクリックしてみるときちんとアプリのダウンロード画面に飛ぶのが確認できるかと思います。ただ、このバッジの表示、どうも安定していないようです。コード作成ツールからバッジの画像データを引っ張ってきているようなのですが、レスポンスが悪いのかうまく表示される時とされない時があるようです。
バッジの表示が上手くいかない場合は「Download on App Store」と代替テキストが表示されますが、これだとなんのアプリか分からないのでコード中の「alt=""」の中身をアプリの名称などに変えておいていいのではないかと思います。Apple のガイドラインにバッジの画像に手を加えたりするなとは書かれていますが、代替テキストを変更するなとは書いてなかったと思いますので（問題があればご指摘下さい）。
ともあれ、ひとまず App Store のバッジは表示出来るようになりました。
Google Play の場合
Google Play のバッジを取得するのは非常に簡単です。
「Google Play バッジのページへようこそ」へアクセスし、Google Play にあるアプリの URL を「Play ストア URL:」の所に入力するとすぐに青四角で囲った部分に HTMLコードが表示されるので、それをブログのエディタ画面上へ貼り付けるだけです。
試しに はてなブログ アプリのバッジを置いてみると下の様に表示されます。
・・・バッジのでかさは取りあえず今は気にしてはいけません。先に進みましょう（笑）。
■ バッジの大きさを揃えて並べて表示させる
さて、取りあえずそれぞれのアプリストアからバッジは取得する事が出来たのですが、このまま並べて表示させようとしてもサイズすら合わずに酷いレイアウトになってしまいます。
うちで今使っているブログテーマでは幅が足らず、横にすら並べて表示することが出来ないようです。
そこでサイズを揃えていくわけですが、これがまた曲者でして・・・。Google Play の方はサイズが指定されていないので、とりあえず App Store のサイズに合わせて表示させてみると・・・今度は横には並びましたが縦の位置がズレてしまいます。どうやら Google Play のバッジの余白が大きいようです。
そこで、Google Play のバッジの方の上部余白を少し削ってサイズ調整してやると、
なんとか揃いましたね・・・。ただちょっと大きいのでもう少し全体に小さくしてみます。
こんなもんでどうでしょうか？この状態のサンプルコードを置いておきます。
<div class="center"> <a href="（App Store アプリの URL）?itsct=apps_box_badge&itscg=30200" style="display: inline-block; overflow: hidden; border-radius: 13px; width: 179px; height: 53px;"> <img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/ja-jp?size=250x83&releaseDate=1355616000&h=ab494bb3ae9e1e1ba6ce8caf68446390" alt="（アプリ名称など代替テキスト）" style="border-radius: 13px; width: 179px; height: 53px;"> </a> <a href='（Google Play アプリの URL）'> <img alt='Google Play で手に入れよう' src='https://play.google.com/intl/ja/badges/static/images/badges/ja_badge_web_generic.png'/ style="margin-top: -44px;width: 179px;"> </a> </div> <br clear="all">
基本的には取得したそれぞれのバッジのコードを併記しておき、黄色の太字にしている横幅と高さ、上部の余白の値を調整しているだけです。また、全体を中央に表示させるために <div> タグで囲っています。
全体を <div> タグで囲っているので、<div> タグの中の「class="center"」を "right" や ”left” に代えればこんな風に右寄せしたり左寄せしたりして余白に文字を入れる事も可能です。
黄色の太字にしている部分の数値を弄れば好きな大きさに調整出来ますが、上下のズレがまた出ると思うので何度か数値を変えて試しながら調整して下さい。アナログなやり方ですが致し方ありません。上記のサンプルの中で「179」とか「53」とか中途半端な数値になっているのは悪戦苦闘の結果です（笑）。
