当サイトのリンクにはアフィリエイト広告が含まれています

エラー対策に!アプリーチのダウンロードボタンの変更方法。

豆知識 By シェフ

エラーが当たり前?のAMP。アプリーチを使ってアプリを紹介している記事もエラーが発生していました。

確認してみると、エラーメッセージは「画像の高さの指定がない」ことで、該当箇所はiTunes、Play Storeの「ダウンロードボタン」でした。

本来は1記事ずつコードを貼り直すんですが、WordPressでサイト運営している方であれば、プラグイン「Search Regex」を使えば簡単に対処できるので、そのやり方をご紹介します。

対処後は、ダウンロードボタンがキレイになるので、AMPに対応させていない方もぜひお試しあれ!

(終わった後はプラグインを削除できるので、プラグイン嫌いの方もご安心ください:D)

URLの変換方法

修正内容は、「ダウンロードボタンのURL変更」で、過去に生成したコードのダウンロードボタンURLを最新のURLに変更します。

まずは、プラグイン「Search Regex」をインストールし、有効化します。

「ツール」の中にそのプラグインがあるので起動し、変換前と変換後のURLをそれぞれ入力。(URLのリストは後述)

Search patternが変換前のURL、Replace patternが変換後のURLです。それ以外の設定を変更する必要はありません。

 

URLをそれぞれ入力したら、一度「Replace」ボタンをクリック。URLがどのように変換されるか、対象の記事が一覧表示されるので、ざっと確認します。

問題なければ、そのまま「Replace & Save」ボタンをクリック。対象の記事すべてのURLが一括変換されます。

変換前後のURL一覧

変換後のURLは、iTunesとPlay Storeが1つずつ。変換前のURLは複数あり、ここで紹介されている以外のURLもあると思います。

iTunes

iTunesのダウンロードボタンを変換するために必要なURLはこちら。1つずつ変換しましょう。

変換前

  • http://mama-hack.com/app-reach/img/Nx40xitune_en.png.pagespeed.ic.5AMuW7mXJ7.png
  • https://nabettu.github.io/appreach/img/itune_en.png
  • http://mama-hack.com/app-reach/img/itune_en.png

変換後

https://nabettu.github.io/appreach/img/itune_ja.svg

Play Store

Play Storeのダウンロードボタンを変換するために必要なURLはこちら。1つずつ変換しましょう。

変換前

  • http://mama-hack.com/app-reach/img/Nx40xgplay_en.png.pagespeed.ic.yRhH7NWbbG.png
  • http://mama-hack.com/app-reach/img/gplay_en.png
  • https://nabettu.github.io/appreach/img/gplay_en.png

変換後

https://nabettu.github.io/appreach/img/gplay_ja.png

まとめ

エラーが出ないように、AMPページを生成する段階で正規表現でコードを変えると思いますが、アプリーチに関しては、今回ご紹介したように、元ページのコードも変更するのが良いと思います。

ダウンロードボタンもキレイになりますし、高さの指定もされているので、AMPに対応させるのが比較的簡単なので。(アプリアイコンは別の話ですが)

以上、ご参考までに!(`・ω・´)ゞ


カテゴリー:豆知識

シェフ

このサイト「Fantastech」を運営している人