本日はたまたま仕事がお休みということもあり、App Store の画像 URL 変更への対策を検討中の @toshiya240 です。
検討した方式に自信がないので、詳しい方のコメントがいただければと思い、 対策案をご説明させていただきたく。
問題/課題
追記: 他のエントリを読まなくてもわかるように、問題および課題を記載します。
AppHtml* が出力する HTML には App Store 上の画像へのリンクがあり、 この URL は外部に向けて公開されているものではないので変更される可能性がある。 App Store 上の画像の URL が変更された結果、過去に生成したアプリリンクでリンク切れが発生する。
AppHtml* についてはこちら
App Store 上の画像の URL が変更された際に、AppHtml* の出力する HTML を変更することで暫定的な対処はできるが、過去に生成したものは別途修正する必要がある。
暫定対処についてはこちら
まずは対策を施したアプリリンクをご覧ください
MyScripts 1.5 (￥350)
カテゴリ: 仕事効率化, ユーティリティ
販売元: Unit Kay - Takeyoshi Nakayama（サイズ: 2.0 MB）
全てのバージョンの評価: 4.5
（11件の評価）
iPhone/iPadの両方に対応
塊魂モバイル 1.1.4 (￥600)
カテゴリ: ゲーム, エンターテインメント, パズル, アクション
販売元: Namco Networks America Inc. Games - Namco Networks America Inc. Games（サイズ: 98.3 MB）
全てのバージョンの評価: 4.0（2,037件の評価）
Game Center対応
MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more. 3.5.3 (￥3,450)
カテゴリ: ソーシャルネットワーキング, 仕事効率化
販売元: Red Sweater Software - Red Sweater Software（サイズ: 6.2 MB）
全てのバージョンの評価: 4.0（3件の評価）
対策の仕組み
ストアリソースは CSS で適用する
ストアリソースの URL が変更された場合は、CSS で指定している URL を変更すれば、 過去に生成したアプリリンクにも反映することができる、というアイデアです。
詳細は以下の通りです。
まず、HTML でストアリソースに該当する部分(星やユニバーサル対応)を、 サイズが 1x1 の透過PNG画像とし、class でどのリソースか指定します。
HTTP 通信を削減するため、透過画像は data スキームで埋め込みます。データサイズは増えますが。
そして、ブログのテンプレートに以下の CSS を適用します。
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: 11px !important;
height: 11px !important;
margin-right: 2px !important;
background: url(http://r.mzstatic.com/htmlResources/1043/web-storefront/images/rating_star.png) 0 0 no-repeat !important;
}
img.half {
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: 6px !important;
background: url(http://r.mzstatic.com/htmlResources/1043/web-storefront/images/rating_star_half.png) 0 0 no-repeat !important;
}
img.fat-binary-badge {
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: 14px !important;
height: 14px !important;
background: url(http://r.mzstatic.com/htmlResources/1043/web-storefront/images/fat-binary-badge-web.png) 0 0 no-repeat !important;
}
img.gc-badge {
border: none !important;
padding: 0 !important;
margin: 0 !important;
text-indent: -9999px !important;
height: 30px !important;
width: 120px !important;
background: url(http://r.mzstatic.com/htmlResources/1043/web-storefront/images/gc_badge.png) 100% no-repeat !important;
}
span.gc-label {
display: none;
}
RSS 上ではストアリソースは表示されない
RSS 上では CSS が適用されないため、ストアリソースは表示されません。
ですので、サイズが 1x1 の透過画像が表示されることになります。 つまり、少しスペースが空きます。これは許容できるのではないかと考えています。
追記: RSS リーダ上では data スキームで指定した画像が正常に表示されないようです。 RSS フィードの購読画面で確認して問題ないと判断したのですが甘かったようです(^o^;
CSS が適用されない場合でもアプリの情報が確認できるようにするため、 アプリの評価や Game Center 対応などは文字列を出力するようにします。
Game Center 対応有無については、CSS が適用された場合に文字列と画像で情報が重複するため、 CSS で文字列を非表示にします。
HTML/CSS って難しい
非置換インライン要素は width や height の指定が無効である、とか知りませんでした。 「非置換インライン要素」って始めて知りました。
「こうしたほうがよいよ」などありましたら @toshiya240 までお知らせいただければ嬉しいです。
0 コメント:
コメントを投稿