Panda Noir

JavaScript の限界を究めるブログです。

iPhoneで「ホーム画面に追加」するときのアイコンを好きな画像にする方法

iPhoneでホーム画面に追加をすると、対応していないサイトは、サムネイルで表示されますよね?あれをなんとかしたいと思い、チャレンジしてみました。

過程

まず、ブックマークレットから<link rel="apple-touch-icon" href="">を<head>に書き込む方法を思いつきました。そこで、次のようにjavascriptでやってみました。

javascript:document.getElementsByTagName("head").innerHTML+='<link rel="apple-touch-icon" href="">'

これで、headに書き込めて解決!とおもいきや、セキュリティの関係?か、だめでした。もう、ほかに方法もおもいつかなくて諦めかけていました。しかし、document.headなるものがあることにたどりついたのです!どうやらそれは、headタグを指すらしいので、試しに書き換えてみました。

javascript:document.head.innerHTML+='<link rel="apple-touch-icon" href="">'

なんでgetElementsByTagName("head")がだめでheadがOKなのかよくわかりませんが、これで通りました。javascriptはやはり奥が深いですね。

使い方

まず、適当なサイトをブックマークします。例えばここ
pic1.PNG
次に、編集をおして、先ほど追加したブックマークをクリックします。したの画面になればOKです(上の写真とはややちがいます)。
pic2.PNG
そしたら、javascript:document.head.innerHTML+='<link rel="apple-touch-icon" href="">'のhref=""の部分にアイコンにしたい画像のurlをいれます。著作権は個人で使う範囲ならあまり関係ないと思うので、Googleなどで検索して、引っ張ってくるのがいいと思います。hrefにはhref="http://xxx.yyy.zzz"のように書いてください。
pic3.PNG
最後にブックマークの名前をiconとか好きな名前にして完了です。
pic4.PNG
この方法は、すべてのサイトに有効化はわかりません。 使い方は、ブックマークをクリックすればOKです。

終わりに

いかがでしたでしょうか?いままでサムネイル画像で寂しかった(?)ホーム画面をこれでかざってみてはいかがでしょうか?