2012年04月｜iPhone ❤ laboo

iPhoneアイコン変更ブックマークレット(プレビュー版)＋SugarSyncの使い方

2012-04-21(23:26) /
Tips

お久しぶりです。@karin8774です。

以前書いた【iPhoneホーム画面のアイコン変更(ブックマークレット編)】のブックマークレットを、ちょこちょこいじったりプレビュー機能を付けてみました。

で、久々に使ってみようと思ったらDropboxで用意した画像が使えない。。。
原因はDropboxアプリで作成した画像のリンクにワンクッション入るようになったせいです。
方法がないわけではありませんが面倒なので、Dropboxと同じオンラインストレージサービスのSugarSyncを使ってみました。

前回の説明は大雑把すぎたので、ブックマークレット＋SugarSyncの使い方を詳しく解説してみようと思います。

はじめに

このブックマークレットは、Safariのブックマーク機能『ホーム画面に追加』でサイトを追加した時のアイコンを好きな画像にするためのものです。
脱獄なしでできます。

ホーム画面に追加した時に、アイコンがスクリーンショットになるサイトでしか使えません。
AppleやGoogleなど多くの企業サイトはアイコン画像を指定してあるので使えません。

手順は以下のような感じです。

1.ブックマークレットを用意する※初回のみ
2.アイコンに使いたい画像をSugarSyncにアップロードする(画像URLの取得)
3.ホーム画面に追加したいサイトを開いてブックマークレットを実行

※全てiPhoneでの作業になります。

ではここから個別に説明していきたいと思います。

1.ブックマークレットを用意する

まず下記をタップしてコードを表示し、丸ごとコピー。

コードを表示／非表示

javascript:var%20html='<!DOCTYPE%20HTML><html><head><meta%20charset="utf-8"><meta%20name="viewport"%20content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">',prev='<div%20id="prv"%20style="width:57px;height:57px;border-radius:12px;background:no-repeat%20center;background-size:cover;overflow:hidden;display:none;">',gls='<img%20src="http://db.tt/ctZiKTkm"%20width="57"%20id="gls">';document.write(html+"<script%20type=\"text/javascript\">var%20url=document.f1.url.value;function%20preview(u){var%20prv=document.getElementById(\"prv\").style;prv.display=\"block\";prv.backgroundImage=\"url(\"+u+\")\";};function%20gloss(v){document.getElementById(\"gls\").style.visibility=v;};function%20func(){var%20icon=\"\";if(document.f1.pre[1].checked){icon=\"-precomposed\";gls=\"\";}var%20url=document.f1.url.value;document.write(html+'<link%20rel=\"apple-touch-icon'+icon+'\"%20href=\"'+url+'\"></head><body>このページを【ホーム画面に追加】<br><br>プレビュー<br>'+prev+gls+'</div><br><br><input%20type=\"button\"%20value=\"BACK\"%20onclick=\"location.reload()\"></body></html>');preview(url);document.close();}</script></head><body><form%20name=\"f1\"%20onSubmit=\"func();return%20false;\">アイコン画像URL<br><input%20name=\"url\"%20type=\"url\"%20required><br><br><input%20name=\"pre\"%20type=\"radio\"%20value=\"1\"%20checked%20onclick=\"gloss('visible');\">光沢　<input%20type=\"radio\"%20name=\"pre\"%20value=\"2\"%20onclick=\"gloss('hidden');\">非光沢<br>"+prev+gls+"</div><br><br><input%20type=\"button\"%20value=\"PREVIEW\"%20onclick=\"preview(document.f1.url.value);\">　<input%20type=\"submit\"%20value=\"NEXT\"></form></body></html>");document.close();

コピーしたらSafariを開き、このブログでもなんでもいいので『ブックマークに追加』します。