iPhone 等で任意の Webclip アイコンを設定するブックマークレット

2010年10月1日

iPhone をはじめとする iOS デバイスでは、Web ページのブックマークをホーム画面に置くことができる (これを Webclip と呼ぶ) 。このとき、下記のような要素が head 要素にあれば、指定したアイコンで表示される (ない場合はページを縮小した画像が表示される) 。

<link rel="apple-touch-icon" href="(アイコンのURL)" />

しかし、多くのサイトではこの画像が設定されていないし、あったとしても気に入らない場合もある。

そこで、ユーザーが任意の画像を Webclip アイコンに設定するためのブックマークレットを作った。

(iPhone 等は、上の (iPhone 向け) のリンクをタップ後 (一見何も起こりません)、このページをブックマーク、そのあとブックマークの編集で、URLの「javascript:」の前を削除してください)

使い方は・・・

アイコンにしたい画像のURLをコピーしておく
アイコンを設定したいページを開く
上のブックマークレットを実行
画像の URL を貼り付けして OK をタップ
通常通りホーム画面へ追加

ただ、なぜか、iPhone 用のリンクをタップ後のこのページでは動作しません。ほかのページでも実行出来ない場合があるかも。原因わかりました。追記参照。

ちなみに、アイコンは、Iconfinder あたりで探すのがおすすめ。

なお、コードを見やすいように書き下したのがこちら。

(function(){
    u = prompt('Image URL');
    h = document.getElementsByTagName('head')[0];
    e = document.createElement('link');
    e.setAttribute('rel', 'apple-touch-icon');
    e.setAttribute('href', u);
    h.appendChild(e);
})()

link要素を追加してるだけですね。

追記 (2010-10-01)

このページでリンクタップ後に実行出来ない問題について、Mobile Safari のデバッグコンソールをオンにして、再現してみたところ、下記のようなエラーが。

JavaScript エラー:1行目Refused to execute a JavaScript script. Source code of script found within request.

実行しようとするスクリプトが URL 中に含まれてるとブロックされるようです。最近よくきく、クライアント側での XSS 対策というやつですね。これはたしかに有効かも。ということで、実行できないのは正しい動作で、別のページでは問題なく動くはず。