「AppHtmlブックマークレット・メーカー」で取得したダウンロードボタンをRetina対応させるCSS

iPhoneやMacアプリを紹介する時に「AppHtmlブックマークレット・メーカー」で作成したブックマークレットを使用しています。
ひとつだけ気になっていたのが、「App Storeからダウンロード」というボタンがiPhoneで見るとぼやけてしまうこと。実はCSSに1行加えるだけでRetinaディスプレイでもきれいに表示させることができます。

SVGファイルを呼び出して高解像度ディスプレイに対応させる

Retinaディスプレイに対応させる方法として、2倍の大きさのファイルを用意して、その半分のサイズで表示させるということがよく使われます。でも今回使用するのはSVGという形式のファイルです。

SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。via アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう | Webクリエイターボックス

このブックマークレットではPNGを表示させているんですが、Appleが用意しているサイズは135×40pxのみ。だからそのまま表示させるとぼやけてしまうんですね。

background:url()を上書きする

これはブックマークレットを使った時のボタンのHTMLです（改行しています）。注目するのはbackground:url()という部分。ここでITMS Link Makerから画像ファイル（PNG）を呼び出しています。
そこで「ITMS Link Maker」でリンクの作成をしてみるとPNGの他にSVGファイルも用意されているのが分かりました。

画像のリンク先が分かれば、あとはCSSを指定するだけです。

僕の場合はappDownloadButtonというクラス名のdivで囲んでいるのでこのようになります。なにもHTMLを指定していなかった場合はdivなりを付け加える必要があると思います。

ちなみにオリジナルのダウンロードボタンを表示させることは規約違反になりますので注意してください。

Retina対応したボタンを見比べる

左がPNGで右がSVGのダウンロードボタンです。にじんでいないのはもちろん、SVGファイルの方が余白があって、バランスがよく見えます。

このダウンロードボタンは日本語だけでなく、英語を含めた主要な言語が用意されています（リンク先の.zipファイルからダウンロードできます）。もちろん「ITMS Link Maker」からも取得できます

英語表記の方がバランスがいい気がするんですが、分かりやすさを考えると日本語表記の方がいいかもしれません。

CSSはこのようになります。変わっているのはja_jpがen_usになっているところです。

---

仕様の変更や障害などで表示されない恐れもあるので、できるひとはSVGファイルをサーバーにアップして表示させるというのも、ひとつの手だと思います。ただ、WordPressの場合はSVGファイルを使えるように設定やプラグインなどの導入が必要になります。

• 【SVGはもっと積極的に使っていきたい】SVGファイルがうまく表示されない場合はサーバーのMIME設定を確認しよう | 今村だけがよくわかるブログ
• WordPressでSVGを扱うための設定 | Inkscape@JP