前回の続き。というか疲れてきた。
App Store アイコン付きリンクメーカー (作りかけ)
前回までに調べた手順を使って「App Store アイコン付きリンクメーカー」を作ろうとしてみた。
Apple が公開しているiTunes リンクメーカーに倣って、アプリを検索するだけでアイコン付きのリンクを生成できる Web サービス……になるはずだった。検索するとこまではできた。HTML5 Canvas を使って角丸も実現。
が、HTML を生成するにあたって、角丸適用後のアイコンをどうやって埋め込むかが問題になった。
最初は、表示に使っている Canvas から画像データを取り出せばいいよね! と思ったんだけど、別ドメイン (この場合 Apple のサーバ) から取得した画像を Canvas 上に描画すると、以降その Canvas からは画像データがエクスポートできなくなるらしい。具体的には、toDataURL() を呼ぶと例外が発生する。
次に考えたのは、元の画像ファイルはそのまま使って CSS で角丸にする方法だけど、思ったよりめんどくさそう。-webkit-border-radius を使えば Safari と Chrome は楽勝なんだけど、Firefox では border="0" の画像に対して -moz-border-radius を使うと角丸になってくれない。
となると、サーバ側のアプリで角丸画像を生成しないといけなさそう。やだなー。せっかくここまで HTML と JavaScript だけで動いてるんだしなぁ。
