パソコン・インターネット 日記・ブログ

App StoreとGoogle Playのダウンロードバナー(バッジ)をAMP化するのに苦労した話

投稿日:2018年9月13日 更新日:

この記事はAMPに対応していません。コピペは可能です。

AMP(Accelerated Mobile Pages)プロジェクトとはGoogleとTwitterなどの共同プロジェクトで、特にモバイル端末でウェブコンテンツを高速で表示させるためのプロジェクトのことです。

このブログはWordPressで作成しており、WordPressテーマはWing(AFFINGER5)ですが、AFFINGER5はワンクリックで簡単にAMP設定の記事を書くことができます。

WordPress初心者の私は、なんとなく記事をAMPに対応させていたのですが、前回のブログ記事

レジでスマホを見せる
ドコモユーザーでない私がdポイント(期間・用途限定)を使えるようになるまで

2018年9月11日より、コンビニエンスストア「ローソン」において「d払い」が使えるようになりました。 ローソンのお支払いはバーコードでピッと決済!支払方法に「d払い」が仲間入り!|ローソン研究所 と ...

で、iOSのApp StoreとAndroidのGoogle Playのアプリのダウンロードバナー(バッジ)をそれぞれ設置したとき、それらをAMPに対応させるのに大変苦労しました。

そのため、自分の備忘録としてこの記事を残したいと思います。

アプリーチ:iPhone, Androidアプリを紹介するブログパーツを瞬時に作成

iOSアプリとAndroidアプリを紹介するバッジを横にキレイに並べる方法をいろいろ探していたところ、次のサイトを見つけました。

これを使って、例えばInstagramアプリのブログパーツを作成したのが下です。

ここでは旧コードを利用しました。

Instagram

Instagram
開発元:Instagram, Inc.
無料
posted withアプリーチ

おお、これは簡単キレイですね。

アプリーチで作成したブログパーツは簡単キレイだが、AMPには非対応

上の状態で安心して記事を書いていたのですが、

「AMPテスト」を試してみる。

というのを見かけたので、下のサイトで記事をチェックしたところ、、、

AMPテスト - Google Search Console

有効なAMPページではありません

このように表示されました。

どうも、アプリーチで作成したブログパーツの画像の中に「height」がないようで。。。

AMP化したページで「アプリーチ」をエラーなく表示させるには、functions.phpをいじればよいようだが…

検索して調べたところ、いくつかのサイトでfunctions.phpに手を加えた解決方法が示されていました。

…ただ、最初に記しましたように、WordPress初心者でWing(AFFINGER5)を使用している私にとって、functions.phpをいじることは、まだハードルが高い。

下手をしてAFFINGER5が正常に機能しなくなるのが怖いことと、そこまでしてアプリのダウンロードバナーを設置したいわけではないので、この案はひとまず断念しました。

アプリのバッジを個別に作成する(その1)

次に、…と申しますか、もともと最初に参考にしていたブログ記事、

なぎそら様のブログ

に従って、iOSアプリ、Androidアプリのバッジを個別に作成することにしました。

App Storeは「iTunes Link Maker」で作成

詳しい作成の仕方は、上のなぎそら様のブログ記事を参照するとして。

バッジを使用するには、いろいろルールがあるようです。

マーケティングリソースとアイデンティティに関するガイドライン - App Store - Apple Developer

によれば、

アプリケーションを宣伝するあらゆるマーケティングコミュニケーションで、黒い推奨バッジを使用するようにしてください。黒いバッジの周囲にあるグレイのボーダーはバッジのアートワークの一部であり、変更は許可されていません。同じ場所で他のアプリケーションプラットフォームのバッジを併用する場合は、黒い推奨バッジを使用するようにしてください。その際は、App Storeのバッジを最初に配置するようにしてください

と記されています。

今回、Google Playのバッジと並べようとしているので、App Storeのバッジを最初に配置するようにしました。

ただ、WordPressにiTunes Link Makerで作成した埋め込みコードをそのままコピー&ペーストしても、

 

上のように消えてなくなるので、

<a href="ここに直リンクのURLを貼る"><img style="margin: 10px;" src="https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt="App Storeで入手" height="40" /></a>

の赤字の部分に「直リンクのURL」を貼り付けます。(ここではInstagramアプリの場合)

 <a href="https://itunes.apple.com/jp/app/instagram/id389801252?mt=8"><img style="margin: 10px;" src="https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt="App Storeで入手" height="40" /></a>

App Storeで入手

Google Playは「Google Play バッジ」で作成

同様に、上のなぎそら様のブログ記事を参照します。

こちらもバッジ作成のルールがあります。

  • Google Play バッジの大きさは、他のアプリストアのバッジと同じかそれ以上にする必要があります。

そこで、Google Playにて作成したいアプリのURL(ここではInstagramアプリ)をコピーし、Google Play バッジの「PlayストアURL」欄に貼り付けると埋め込みコードが表示されますが、これをそのままコピペすると、

Google Play で手に入れよう

さすがにこれでは大きすぎるので、ここでは以下の赤字のように、埋め込みコードにwidth="155" を追記します。

<a href="https://play.google.com/store/apps/details?id=com.instagram.android&amp;pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" alt="Google Play で手に入れよう" width="155" /></a>

Google Play で手に入れよう

修正したコードを横並びにして完成?!

<a href="https://itunes.apple.com/jp/app/instagram/id389801252?mt=8"><img style="margin: 10px;" src="https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt="App Storeで入手" height="40" /></a> <a href="https://play.google.com/store/apps/details?id=com.instagram.android&amp;pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" alt="Google Play で手に入れよう" width="155" /></a>

App Storeで入手 Google Play で手に入れよう

これで一件落着…と思って、再びAMPテストを行いましたが、

有効なAMPページではありません

という表示。(AMPテストの結果画像は、前回のブログ記事で実際に行った結果画像です。以下、同じ。)

どうも、App Storeのバッジは「width」、Google Playのバッジは「height」を設定していないのが、AMP設定の障害になっているようです。

App Store

App Storeのバッジ・サイズは、iTunes Link Makerの埋め込みコードに、

iTunes Link Maker

width: 135px; height: 40px(上図の赤線)と記されています。(なお、先程コピペした「直リンクのURL」は水色の部分です。)

そこで、先程のコードに以下の赤字をさらに追記します。

<a href="https://itunes.apple.com/jp/app/instagram/id389801252?mt=8"><img style="margin: 10px;" src="https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt="App Storeで入手" width="135" height="40" /></a>

Google Play

一方、Google Playのバッジ・サイズは、

ikuta naoki様のブログ

より、オリジナルの画像サイズはwidth: 646px , hight: 250pxということが分かりました。

先程、width: 155pxに設定したので、それに比例してheight: 60pxに設定し、以下の赤字のように追記します。

<a href="https://play.google.com/store/apps/details?id=com.instagram.android&amp;pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" alt="Google Play で手に入れよう" width="155" height="60" /></a>

App Store用のコードとGoogle Play用のコードをつなげて、バッジを横並びで表示

これらの再修正した2つのコードを先程と同様にそのままつなげることで、バッジを横並びにしたのが下です。(以下の例はInstagramアプリ)

<a href="https://itunes.apple.com/jp/app/instagram/id389801252?mt=8"><img style="margin: 10px;" src="https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt="App Storeで入手" width="135" height="40" /></a> <a href="https://play.google.com/store/apps/details?id=com.instagram.android&amp;pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" alt="Google Play で手に入れよう" width="155" height="60" /></a>

Instagram

App Storeで入手 Google Play で手に入れよう

AMPテストを行ったら、

有効なAMPページです

と表示されました。お疲れさまでした。

ここまでのまとめ

注意ポイント

  • AMPページに対応したバッジにするには、バッジのwidthとheightを両方設定する
  • WordPressでは、iTunes Link Makerで作成した埋め込みコードをそのままでは使えない

アプリのバッジを個別に作成する(その2)

iTunes Link Makerの埋め込みコードを利用してバッジを作成

ココがダメ

追記(2018/10/11):以下の方法では、AMPページではApp Storeのバッジが消えてしまっているので、しばらくは上記の(その1)の方法で対応することにします。

(その1)で終わってもよかったのですが、App Storeの方で公式の埋め込みコードをそのまま使用していないことが少し引っかかりました。

もし、今後iTunes Link Makerの様式に変化があった場合、それに対応できない可能性があります。

先に記したように、iTunes Link Makerで得られた埋め込みコードをそのままコピペしても、WordPressでは消えてしまいます。

その解決方法が、先程お示ししたikuta naoki様のブログ記事に記されていました。

コピーしたコードですが、そのまま張り付けるだけだと、何もないところにスタイルを指定しただけのコードになるので、WordPressの場合は自動整形機能により自動消去されてしまいます。テキストモードとビジュアルモードを切り替えるとコードが消去されます。

 それを防ぐために、ゼロ幅スペース  &#x200B;  を挿入することにより、テキストモードとビジュアルモードを切り替えてもバッジが表示されたままになります。

そこで、iTunes Link Makerで得られた埋め込みコードに、以下の赤字のように &#x200B; を加えました。

<a href="https://itunes.apple.com/jp/app/instagram/id389801252?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg) no-repeat;width:135px;height:40px;background-size:contain;">&#x200B;</a>

上のように、今度は消えずにバッジが現れました。

そこで、このコードの後に、

アプリのバッジを個別に作成する(その1)

で作った

Google Playのバッジ用コード

をつなげて完成!・・・

<a href="https://itunes.apple.com/jp/app/instagram/id389801252?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg) no-repeat;width:135px;height:40px;background-size:contain;">&#x200B;</a> <a href="https://play.google.com/store/apps/details?id=com.instagram.android&amp;pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" alt="Google Play で手に入れよう" width="155" height="60" /></a>

 Google Play で手に入れよう

・・・Google Playのバッジが浮いていますね(汗)

これは、App Storeのバッジの外側に余白(margin)を追加すれば良いのでは、と考えました。

App Store用のバッジ基準の中に、

グラフィックの基準
最小の余白はバッジの高さの4分の1です。この最小の余白の範囲内に、写真、タイポグラフィー、その他のグラフィック要素を入れないでください。

引用:マーケティングリソースとアイデンティティに関するガイドライン - App Store - Apple Developer

ともあったので、少し検討して、先程のApp Storeのバッジ用コードの部分を以下の赤字のように追記・修正しました。

<a href="https://itunes.apple.com/jp/app/instagram/id389801252?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg) no-repeat;width:135px;height:40px;background-size:contain;margin:10px;">&#x200B;</a> <a href="https://play.google.com/store/apps/details?id=com.instagram.android&amp;pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" alt="Google Play で手に入れよう" width="155" height="60" /></a>

 Google Play で手に入れよう

ちなみに、これを縦に表示する場合はApp StoreのコードとGoogle Playのコードの間に<br>を挿入します。

<a href="https://itunes.apple.com/jp/app/instagram/id389801252?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg) no-repeat;width:135px;height:40px;background-size:contain;margin:10px;">&#x200B;</a><br><a href="https://play.google.com/store/apps/details?id=com.instagram.android&amp;pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" alt="Google Play で手に入れよう" width="155" height="60" /></a>


Google Play で手に入れよう

縦表示にしてもほぼ同じサイズで、位置もまずまず合っているようですね。

AMPテストも問題なかったです。

有効なAMPページです

 

  • この記事を書いた人
  • 最新記事

ゆーじあむ

双極性感情障害を患ってから、メンタルバランスを保って楽しむためのあれこれを探究中。 海外古典ミステリとリラックマが大好き。愛媛県在住。

Pick Up

用意したもの 1

私のパソコンはMacBook Pro (13-inch, Mid 2012) で6年前の代物ですが、 常駐ソフトが多い状態で最新OSにアップグレードしてきたためか、非常に動作が鈍くなっていました。 そ ...

Windowsセットアップ01 2

前回の記事、 で、私のMacBook Pro (13-inch, Mid 2012) は内蔵HDDからSSDに換装されましたが、今回はこのMacに、Boot Campを使ってWindows 10をイン ...

テレビ 3

Clker-Free-Vector-Images / Pixabay 国際ドラマフェスティバル:東京ドラマアウォード この1年間で放送された番組で「世界に見せたい日本のドラマ」を選出・表彰する『東京ド ...

カササギ殺人事件(表紙) 4

構想15年、ミステリ界のトップ・ランナーによる圧倒的な傑作登場! (下巻オビより抜粋) 近年これほど「ここは原文では一体どうなっているのかを確認したい」と思ったミステリも珍しい。—— 千街晶之氏 いや ...

フルートと音符 5

10年ほど前まで、私はクラシック音楽に特に興味はありませんでした。 しかしながら、病気を患って家で寝込むことが多くなったとき、何げなく聞いていたラジオから流れていたクラシック音楽番組に、心が癒されまし ...

-パソコン・インターネット, 日記・ブログ
-, , , ,

Copyright© メンタルバランスカフェ-ゆーじあむ , 2018 All Rights Reserved.