iPhone Tips: 今更だけどWebclip

今更なんだけど、iPhoneのWebクリップ機能について。
要するにブックマークみたいなモンだけど、ちゃんとiPhone仕様のアイコンが画面にできあがるのが面白くてハマった。

Safariでサイトを見ている時に画面下のこのアイコン をタップ → ホーム画面に追加 で簡単にそのサイトのアイコンが追加される。
アプリのアイコンと同様、好きな場所に動かしたり他のアイコンとグループでまとめたりできる。Safariのブックマークを開かなくても簡単にサイトにアクセスできるので便利♪
アイコンを保存するときにこのようにアイコンの下に表示される名前を編集できる。このブログの場合、 « :: monologue :: » だと字数が多くて切れてしまうので頭の部分の::を取ってみた。

iPhoneやiPodに対応したアイコンがないサイトだとそのページのキャプチャ画面がアイコンになる。それではちょっと味気ないので、せっかくだからちゃんとアイコンを作ってみた。

作り方はいたって簡単。
アイコンにしたい画像を57ピクセルx57ピクセル以上の正方形のpngに編集してサイトのいちばん下に « apple-touch-icon.png »という名前で置いて、ヘッダーに次のコードを追加するだけ。

わざわざジェネレーターのサイトでアイコンを作らなくても、勝手にiPhone仕様で表示してくれるのがうれしい。

…というワケで、こんなアイコンがホーム画面にできた♪
ちゃんと角が丸くなってテカっている（笑）背景画像が濃い色だとわかりにくいけど、うっすら影もついている。

アプリのアイコンのような縁はつかないけれど、それでアプリとWebクリップの区別がつきやすくなるのかな。
ちなみに57ピクセルというのはiPhone 3Gのサイズだそうで、iPhone 4は114ピクセル。iPadは72×72ピクセルだそうだ。（iPhone 4のアイコンの方がiPadのより高いピクセル数！？）
ひとつのアイコンですべてのデバイスできれいに表示させるには144ピクセルがおすすめだそう。（参考: iPhone / iPadのサイズ別 Webクリップアイコンの作り方 ）
ブログやサイトを持ってる方はぜひお試しを♪