アイコン｜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を開き、このブログでもなんでもいいので『ブックマークに追加』します。

タイトルを"アイコン変更"など自分がわかりやすい名前に変更して追加するとわかりやすいです。

追加した"アイコン変更"ブックマークを編集します。

アドレス(http～)を全て削除して、先ほどコピーしたコード(javascript～)をペーストします。

編集が完了したら、アイコン変更ブックマークレットの完成です。

2.SugarSyncに画像をアップロードする

まずSugarSyncのアカウントがない場合は取得してください。
アプリから簡単に作れます。

SugarSync

カテゴリ: 仕事効率化

222件の評価
価格: 無料

アイコン用の画像をパソコンやiPhoneからSugarSyncにアップロードします。
今回はiPhoneからSugarSyncのMagic Briefcaseフォルダへアップロードしました。

アップロードした画像を開き、右上のマークをタップして『リンクをクリップボードにコピー』します。

これがブックマークレットを使う時に必要な画像URLになります。

3.ブックマークレットを使う

まず『ホーム画面に追加』したいサイトをSafariで開きます。
サイトが表示されている状態でブックマークを開き、アイコン変更ブックマークレットを開きます。

アイコン画像URL欄に、コピーしておいたSugarSyncのリンクをペーストし、アイコンの光沢の有無を選択します。
PREVIEWボタンをタップするとアイコンの完成イメージが確認できます。
問題がなければNEXTボタンをタップ。

またプレビューが表示されますので、OKならそのページを『ホーム画面に追加』します。

タイトルを入力する画面にアイコンが表示されるまでしばらく時間がかかる場合があります。
確実に変わったのを確認してから『追加』ボタンを押してください。

ホーム画面にアイコンが追加されれば成功です☆

このブログ(iPhone ❤ laboo)は独自アイコンを設定していないので、お好きな画像で試してみてください。

独自アイコンが設定されたサイトやアプリへのアイコンを好きな画像にするには、アプリを使ってくださいね。

Touch Icon Creator

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

7件の評価
価格: ￥85

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

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

59件の評価
価格: ￥170

アイコンdeダイヤル - Iconizer

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

16件の評価
価格: ￥85

スポンサーサイト

COMMENT *6 /
TRACKBACK *0

iPhoneアイコン変更ブックマークレットの使い方

2012-01-08(12:51) /
Tips

以前の記事【iPhoneホーム画面のアイコン変更(ブックマークレット編)】で公開した自作ブックマークレット、詳しい使い方を書かないとなーと思っていたのですが…

アップス!!!さんで紹介して頂いてました！

あんなに大雑把な記事を細かく画像つきで説明して頂いて、本当にありがたいです。
今更気付いて何なんですが、ぜひ↓を読んで使ってみてください。

サイトをホーム画面に追加した時に好きな画像アイコンにする方法

人任せですみません(｡-人-｡)

COMMENT *0 /
TRACKBACK *0

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