「ホーム画面に追加」したときのアイコンを設定するには？
iPhoneのホーム画面に以下のようなURLショートカットアイコンを表示できることを知ってましたか？
今回はこのURLショートカットアイコンをホーム画面に追加する方法と、サイト制作者がこのアイコンを指定する方法について紹介したいと思います。
関連記事：
そもそもこのアイコンは何？
このホーム画面上のアイコンは、iPhoneやiPod touchなどのSafariで見たサイトへのショートカットなのです。Safariのブックマークではなく「ホーム画面に追加」すると、このアイコンがホーム画面上に追加されます。僕自身iPhoneをそれなりに長いこと使っているんですが、この機能はつい先日知りました。mixiがスマートフォンに対応したというニュースを見て、iPhoneで mixiTouchにアクセスして気づいたのです。ホーム画面にショートカット・アイコンを追加する方法は次のとおりです。
1.まず、サイトを開きます。
2.「+」ボタンを押します。
3.「ホーム画面に追加」を選択します。
4.タイトルを確認します。
5.追加完了です。
ホーム画面への追加は簡単です。
サイト制作者はどうやってアイコンを指定するの？
さてそれでは、サイト制作者はどうやってこのアイコンを指定するのでしょうか？サイト制作者がアイコンを指定していない状態でユーザーがホーム画面の追加を行った場合は、次のようにサイトキャプチャがそのままアイコンになってしまいます。
せっかく作ったスマートフォンに対応したサイトなら、細かい所までケアしたいものです。このアイコンの指定方法、実は簡単です。headタグ内に以下を追加して、アイコン用の画像を用意するだけで指定できます。
<link rel="apple-touch-icon" href="画像パス" />アイコン画像の仕様については以下にまとめておきます。
| 項目 | 説明 |
|---|---|
| アイコン画像 サイズ | 57×57ピクセル （但し、正方形であれば57ピクセル以上でも可） |
| アイコン画像 フォーマット | gif,jpg,png,bmpいずれも可 |
ちなみにアイコン画像は勝手に「つや出し効果」と「角丸」にしてアイコンっぽくしてくれるので、画像を作成するときはその辺は気にしないで大丈夫です。
角丸は防げないですが、もし勝手な効果をつけたくない場合はapple-touch-iconをapple-touch-icon-precomposedとすれば良いです。あとアイコンのタイトルはtitleタグの内容がデフォルトで適用されます。以下が今回作成した画像。
今回色々と試している中でわかったのですが、一度ホーム画面にサイトキャプチャで登録されてしまった場合も、アイコン画像を設定し直したサイトに再度アクセスすることで以下のようにホーム画面のアイコンは設定した画像に変わります。そのため、初めは設定していなかった場合でも、後で修正すればちゃんと各ユーザーのiPhone上に反映されるので安心です。
これで細部までこだわったスマートフォンサイト制作の役に立てばと思います。
ちょっと宣伝：シンメトリック製品のスマートフォン対応について
今回mixiがmixiTouchとしてスマートフォン向けのサイトを作成したのですが、これは今後の爆発的なスマートフォンの普及を想定してのことでしょう。まー、潤沢な開発資金と運用資金があればPC、携帯、スマートフォンって３つバラバラなものを作成管理していくのがベストだと思います。でも正直なところ、たいていの案件では、モバイルに割り当てられる予算はあまり多くないでしょう。かと言って、今後のことを考えるとスマートフォンにも対応しないわけにもいかない感じだと思います。
そこで今回宣伝したいのが、シンメトリックが提唱しているスマートフォン対応です。簡単に説明してしまうと、スマートフォンに合わせた画像の大きさや配置でサイトを作って、それを通常の携帯でも見せればいいじゃん！という考えです。そして、それを実現するのがラウンドアバウトという携帯コンテンツ変換エンジンです。興味があれば是非見てみてください。
参考サイト：Safari Web Content Guide
関連記事：