(cache)iPhoneホーム画面のアイコン変更(ブックマークレット編)

iPhoneホーム画面のアイコン変更(ブックマークレット編)

2011-12-14(07:27) /
Tips

(2012.4.21更新)
プレビュー機能を追加したバージョンの詳しい解説記事を書きました。
iPhoneアイコン変更ブックマークレット(プレビュー版)＋SugarSyncの使い方

***

Safariのブックマーク機能『ホーム画面に追加』を使うと、1タップでウェブサイトが開けるショートカットアイコンをホーム画面に置くことができます。
Webclipとかいう機能らしいです。
iOS5はURLスキームに対応しているので設定画面やアプリへのショートカットも作れます。

ただこのWebclip、デフォルトではそのページのスクリーンショットがアイコンになるんですよね。
それを好きな画像に変更するブックマークレットです。
ただdocument.writeでアイコン設定されたページを書き出してるだけ。

ちなみにSafariからはiPhone上のアルバムが参照できないので、画像をサーバーに上げるなりしてURLを指定する必要があります。
Dropbox等使うと画像のリンクをコピーできるので便利。

下記リンクをタップした後『ブックマークに追加』
　ここをタップ
　　　↓
登録したブックマークを編集
・URLのjavascript:より前(#まで)を削除。
・タイトルをわかりやすい名前に変更。

もしくは適当なページをブックマークしてURLを追記のコードに書き換え。

上記の準備ができたら

ホーム画面に追加したいウェブサイトを開く
　　↓
準備したブックマークを開く
　　↓
画像のURLを入力・光沢の有り無しを選択してNEXT

　　↓
希望の画像が表示されていたら『ホーム画面に追加』

　　↓

※サイト側でアイコン画像が指定されている場合は使えません。
作ったアイコンからサイトにアクセスすると指定された画像に戻ってしまいます。
そういう時は素直にTouch Icon Creatorなど下に紹介したアプリを使ってください。
アプリ使うとワンクッション入るのが気になるけど仕方がない。。。

Touch Icon Creator

カテゴリ: ユーティリティ

7件の評価
価格: ￥85

aHomeIcon - ホームスクリーンアイコン作成アプリ

カテゴリ: ユーティリティ

59件の評価
価格: ￥170

アイコンdeダイヤル - Iconizer

カテゴリ: ライフスタイル

16件の評価
価格: ￥85

ブックマークの編集で下記コードをコピー＆URL欄にペースト

javascript:document.write("<!DOCTYPE%20HTML><html><head><meta%20charset=\"utf-8\"><script%20type=\"text/javascript\">function%20func(){var%20icon=\"\";if(document.forms[0].elements[2].checked){icon=\"-precomposed\";}var%20url=document.forms[0].elements[0].value;document.write('<!DOCTYPE%20HTML><html><head><meta%20charset=\"utf-8\"><link%20rel=\"apple-touch-icon'+icon+'\"%20href=\"'+url+'\"></head><body>このページを【ホーム画面に追加】<br><br>アイコン画像<br><img%20src=\"'+url+'\"><br><br><input%20type=\"button\"%20value=\"BACK\"%20onclick=\"location.reload()\"></body></html>');}</script></head><body><form%20id=\"f1\">アイコン画像URL<br><input%20name=\"url\"%20type=\"url\"%20required><br><input%20name=\"pre\"%20type=\"radio\"%20value=\"1\"%20checked>光沢　<input%20type=\"radio\"%20name=\"pre\"%20value=\"2\">非光沢<br><br><input%20type=\"button\"%20onClick=\"func();\"%20value=\"NEXT\"></form></body></html>");document.close();

関連記事