(新)タイトルいつ決めるのさ

何かの参考にして頂ければ幸いです。

【備忘録】はてなブログで App Store と Google Play のアプリのリンクを埋め込む方法

ブログでスマホ・タブレット用のアプリの紹介をする場合、入手し易いようにアプリへのリンクを貼っておきたいという場合もあるかと思います。そこで、はてなブログに App Store と Google Play のアプリバッジを貼る方法をメモとして残しておくことにします。

■ 一番簡単なアプリへのリンクの張り方

アプリリンク埋め込み はてなブログ で最も簡単なアプリへのリンクの張り方は、はてなブログ の機能を使って貼り付ける方法です。

App Store や Google Play のアプリの URL を はてなブログ のエディタ画面にコピペしてやれば右のようなダイアログが開くので「埋め込み」にチェックを入れて「選択した形式でリンクを挿入」ボタンを押すだけでアプリへのリンクを貼り付ける事が出来ます。

はてなブログ へ画像を貼り付ける感覚でアプリへのリンクを張ることができるので非常に簡単です。

この際に、ブログエディタに入力されるコードから末尾の「:cite」を消しておくと、下の URL が消えて下の様に若干すっきりした表示になります。

はてなブログ

はてなブログ

  • 株式会社はてな
  • ソーシャルネットワーキング
  • 無料

App Store、Google Play それぞれ単体でアプリのリンクを貼る場合はこれはこれでいいと思うのでですが、Google Play の方はブログカード形式の表示になってしまい、両方のリンクを置いておきたい場合に横に並べて表示させることは出来ませんし、何より統一感がありません。App Store の方に統一してくれていれば使いやすかったのですけどね。


■ 「バッジ」を使ってアプリへのリンクを埋め込む方法

そこで、「バッジ」を使ってアプリのリンクを埋め込む方法について考えてみます。まずはそれぞれのアプリストアで「バッジ」を取得してみます。

  • App Store の場合

    App Store の場合、以前は「Link Maker」というツールを使用すればアプリのバッジを取得することが出来たのですが、現在は「Apple Services Marketing Tools 」というページにある「App Store Toolbox 」を使うようになっているようです。

    Apple Services Marketing Tools App Store 以外にも Apple Books や Apple Music などのリンクも作成することが出来るようです(Apple News は日本ではそもそも利用することすら出来ませんが)。

    以前は iTunes Store の楽曲やアルバムのリンクも作成することが出来たのですが、最近は Apple Music をプッシュさせたいらしく作れなくなってしまったようですね。
    App Store Marketing Tools ダイアログボックスにアプリの名前を入れると検索する事が出来ます。日本語で直接入れて構いません。紹介したいアプリが検索結果にあればそのアイコンをクリックする事で埋め込み用のコードを取得する事の出来る画面に遷移します。
    コード取得画面 アプリの紹介画面に移るので、「Badges and lookups」のところで色(白ベースか黒ベースか)と言語を選択すると上部にバッジのプレビューが表示されます。ただ、このページ、どうもレスポンスが良くないようなので上手く表示されないかも知れません。
    上記の画面で「Copy Embeded」を選ぶと、埋め込み用のコードを取得する事が出来ます。特に表示が変わったりはしませんが、クリップボードにコピーされているので、そのままエディタ画面で貼り付けて下さい。ためしに はてなブログ のアプリバッジを埋め込んでみると下の様に表示されます。

    はてなブログアプリへリンク
    バッジをクリックしてみるときちんとアプリのダウンロード画面に飛ぶのが確認できるかと思います。ただ、このバッジの表示、どうも安定していないようです。コード作成ツールからバッジの画像データを引っ張ってきているようなのですが、レスポンスが悪いのかうまく表示される時とされない時があるようです。

    バッジの表示が上手くいかない場合は「Download on App Store」と代替テキストが表示されますが、これだとなんのアプリか分からないのでコード中の「alt=""」の中身をアプリの名称などに変えておいていいのではないかと思います。Apple のガイドラインにバッジの画像に手を加えたりするなとは書かれていますが、代替テキストを変更するなとは書いてなかったと思いますので(問題があればご指摘下さい)。

    ともあれ、ひとまず App Store のバッジは表示出来るようになりました。

  • Google Play の場合

    Google Play コード取得画面 Google Play のバッジを取得するのは非常に簡単です。

    Google Play バッジのページへようこそ」へアクセスし、Google Play にあるアプリの URL を「Play ストア URL:」の所に入力するとすぐに青四角で囲った部分に HTMLコードが表示されるので、それをブログのエディタ画面上へ貼り付けるだけです。

    試しに はてなブログ アプリのバッジを置いてみると下の様に表示されます。
    Google Play で手に入れよう ・・・バッジのでかさは取りあえず今は気にしてはいけません(笑)。


■ バッジの大きさを揃えて並べて表示させる

さて、取りあえずそれぞれのアプリストアからバッジは取得する事が出来たのですが、このまま並べて表示させようとしてもサイズすら合わずに酷いレイアウトになってしまいます。

はてなブログアプリへリンク Google Play で手に入れよう


うちで今使っているブログテーマでは幅が足らず、横にすら並べて表示することが出来ないようです。

そこでサイズを揃えていくわけですが、これがまた曲者でして・・・。Google Play の方はサイズが指定されていないので、とりあえず App Store のサイズに合わせて表示させてみると・・・今度は横には並びましたが縦の位置がズレてしまいます。どうやら Google Play のバッジの余白が大きいようです。

はてなブログアプリへリンク Google Play で手に入れよう


そこで、Google Play のバッジの方の上部余白を少し削ってサイズ調整してやると、

はてなブログアプリへリンク 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: 200px;">
</a>
</div>
<br clear="all">

基本的には取得したそれぞれのバッジのコードを併記しておき、黄色の太字にしている横幅と高さ、上部の余白の値を調整しているだけです。また、全体を中央に表示させるために <div> タグで囲っています。

はてなブログアプリへリンク Google Play で手に入れよう

全体を <div> タグで囲っているので、<div> タグの中の「class="center"」を "right" や ”left” に代えればこんな風に右寄せしたり左寄せしたりして余白に文字を入れる事も可能です。

黄色の太字にしている部分の数値を弄れば好きな大きさに調整出来ますが、上下のズレがまた出ると思うので何度か数値を変えて試しながら調整して下さい。アナログなやり方ですが致し方ありません。上記のサンプルの中で「179」とか「53」とか中途半端な数値になっているのは悪戦苦闘の結果です(笑)。