iPhone用のWebアプリをつくろう【アイコン編】

Apple iPhone

みなさん、iPhone を買う作戦は立てましたか？会社を休んででも買いに行く人も多いだろうと思いますが、すでに並んでる人もいるみたいですね！

並んでる時間も長くなりそうだし、ここは Web アプリを作って公開するチャンスなんじゃないでしょうか？そして、せっかく作ったら iPhone 上でも目立ちたいですよね！
iPhone/iPod touch には気に入ったページを「ホーム画面に追加」する機能があって、パソコンのデスクトップのように使えるんですが、ここに表示されるイメージをカスタマイズする「link rel="apple-touch-icon"」という要素があります。

使用例は以下を参考にするといいと思います。必要なのは「link rel="apple-touch-icon"」の 1 行だけなんですが、このまま保存して試せるように他の要素もちゃんと書いておきますね。この HTML を iPhone で表示してホーム画面に追加すると、指定したイメージがアイコン化されます。自動的に iPhone 風のテカリが加わるので、元のイメージはのっぺりしてるほうがいいみたいですよ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=no">
<link rel="shortcut icon" type="image/jpeg" href="http://f.hatena.ne.jp/images/fotolife/t/tarchan/20080709/20080709003826.jpg">
<link rel="apple-touch-icon" type="image/jpeg" href="http://f.hatena.ne.jp/images/fotolife/t/tarchan/20080709/20080709003826.jpg">
<title>Touch Me!</title>
</head>
<body>
<h1>Apple Touch Icon サンプル</h1>
</body>
</html>

他のパラメータも iPhone に最適化したいときは以下のサイトを参考にするといいかも。