AppHtmlで出力したHTMLのApp Storeバッジアイコン画像が崩れて表示されて困っている方向けにまとめてみます。参考になれば幸いです。
この原因はWordPressなどのTwitterリンク自動化スクリプトが原因と考えられます。functions.phpに自分で追記したり、あるいはTweetプラグイン等を導入した場合です。
新しいAppHtmlおよびAppHtmlWebが生成するApp StoreのバッジアイコンはApple公式のiTMS Link Makerに準拠しています。つまり公式ツールでも同じ症状が発生します。
Twitterリンク自動生成スクリプトは @ をTwitterアカウントと認識して自動的に”https://twitter.com/アカウント名”へのリンクに書き換える機能です。これはこれで便利なのですが、上記のように @media をTwitterアカウントと誤認してしまう思わぬ弊害もあるわけです。
対策１：@の後ろにスペースを入れる
functions.phpに直接書いたスクリプトやプラグインによってはこれだけで有効な手段です。これで有効であればHTMLを貼り付ける都度、 @ の後ろにスペースを入れてもよいでしょう。
|
1 |
@ media only screen{background-image:url(http://linkmaker.itunes.apple.com/htmlResources/assets/ja_jp//images/web/linkmaker/badge_appstore-lrg.svg);} |
対策２：@ 以降を削除する
プラグイン等によっては @ の後ろにスペースを入れても効果がないものもあります。正規表現がしっかりし過ぎていてスペースだけでは回避できないわけです。そんなときには @ 以降を削除するのも有効な手段です。
正直 @ の後ろ側の意味がよく分かりません。通常はMedia Queriesを使う場合、Screen widthやOrientationを指定しますが、ここでは何も指定されておらず、画像は通常あまりお目に掛からないsvg（Scalable Vector Graphic） 画像です。記憶ではIE8以下ではサポートされていないはずです。
対策３：Twitterリンク自動生成プラグイン等を外す
個人的にはあまりお勧めできないですが、こうしたプラグインを外す方法もあります。ただし @hondamarlboro のように過去記事に含まれるTwitterアカウントが全てリンクなしの状態に戻ります。
手作業でTwitterアカウントへのリンク形式を作ってもいいですが、今後、またリンク自動生成スクリプトを入れた場合に思わぬ表示がされることがありますので注意しましょう。
対策４：AppHtmlテンプレートを自作する
貼り付ける都度、削除するのも面倒です。AppHtml/Webに含まれるテンプレートは冒頭の通りiTMS Link Makerと同じHTMLを出力するようになっていますので、テンプレート指定時に予約語の${badgeL}や${badgeS}を使わずにバッジアイコン部分にHTMLを直接書いてやる方法もあります。
${badgeS}は以下の通りです。
|
1 |
<a href="${url}" target="itunes_store" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/htmlResources/assets//images/web/linkmaker/badge_appstore-sm.png) no-repeat;width:61px;height:15px;"></a> |
${badgeL}は以下の通りです。
|
1 |
<a href="${url}" target="itunes_store" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/htmlResources/assets/ja_jp//images/web/linkmaker/badge_appstore-lrg.png) no-repeat;width:135px;height:40px;"></a> |
AppHtml/Webのデフォルトテンプレートに含まれる${badgeL}や${badgeS}を上記のHTMLに差し替えます。@ が含まれていないので表示崩れは起こりようがありません。
AppHtmlへのリンク
ブックマークレット ⇒ AppHtmlブックマークレット・メーカー
Webツール ⇒ AppHtmlWeb