iOS safari:ホームアイコン

今回もwebデザイニングの2011.11月号のスマートフォン向けの記事をもとに勉強していきます。
 
スマートフォンのブラウザではブックマークだけでなくホームボタンにリンクアイコンを配置する
ことができます。このときホーム画面に表示されるのが「ホームアイコン」です。
ホームアイコンはhead領域にlinkタグで設定します。
 

・光沢処理の有無

今回、仮作成したホームアイコン用の画像(114×144)はこちら。光沢をいれたデザインに
しました。まずは最小限の設定だけでサンプルで確認しましょう。ソースには下記の通り。
ホームアイコンの設定(最小設定)をしたサンプル

<link rel="apple-touch-icon" href="../images/home114.png" />

 
キャプチャ画像を紹介する前に、もう1つ別の設定を紹介します。iPhone/iPod/iPadでは
ホームアイコンを作成すると自動で光沢処理がかかります。この処理はAndroidではされません。
そのためiPhoneとAndroidでは同じ画像を利用しても異なる表示となってしまいます。
 
この問題を解決するため、iOS3以降のiPhoneでは以下の様に記載することで光沢処理を外すことが
できるようになりました。
ホームアイコンの光沢加工をしない設定にしたサンプル

<link rel="apple-touch-icon-precomposed" href="../images/home114.png" />

 
この設定にしてホームアイコンを設定すれば、iPhoneでもAndroidでも同じようにホームアイコンを
表示することが可能となります。以下のキャプチャ画像で、どのように表示が変わるかを確認して
おきましょう。
 

左側のアイコンが光沢処理をされたものです。元からのハイライトと、光沢処理のハイライトが
重なって2重になっていることが確認できます。右は光沢処理がない(precomposed)サンプルで
ハイライトは重なっていません。
 
 
 

・アイコンの解像度

iPhone4以前のホームアイコンのサイズは「57×57」retinaディスプレイを搭載したiPhone4では
面積比4倍の「114×114」となっています。解像度が異なっても自動的に拡大表示されるので
「57×57」のアイコンだけでも問題ないのですが、アップルではiOS4.2以降で利用できる
sizes属性を追加し、機種によって異なるアイコンを表示できるようにしました。
 
構文はwebデザイニングの記事にある通りなのですが、記事では最後にsizes設定していないlinkタグ
があり、cssを知っている方は不安になると思います。cssの設定などでは、同じ設定がある場合は
後の設定になりますから、これでは全ての機種でhome.pngが選択されるのではないか?と….。
 
しかし、これには根拠があるようで以下の参考サイトを確認するとiPhoneでのアイコン設定は
最初の設定が有効になるそうです(この性質を利用してAndroidとiPhoneでアイコンを変えることも
できるそうです)。
iPhone と Android の apple-touch-icon の違い
 
念のため確認しておきましょう。確認用のサンプルには以下の順番でアイコンを設定しました、
これを私のiPod Touchがどの様に判断するか…。
アイコンの採用順番を確認するサンプル1

<link rel="apple-touch-icon" href="../images/home_A.png" />
<link rel="apple-touch-icon-precomposed" href="../images/home_B.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../images/home_C.png" />

 
結果は予想とは異なり、一番最後のhome_C.pngが選択されました…。
ですが、これは各アイコンの条件が異なるため、このようになったとも考えられます。
ということで次は以下の様に全く同じ条件で設定しました。
アイコンの採用順番を確認するサンプル2

<link rel="apple-touch-icon" href="../images/home_A.png" />
<link rel="apple-touch-icon" href="../images/home_B.png" />
<link rel="apple-touch-icon" href="../images/home_C.png" />

 
上記の設定では予想通り最初のhome_A.pngが選択されました。他にも色々検証して
以下の様なルールになっているのを確認しました(Androidの方は予想です)。

ホームアイコンの優先順位
 
iPhoneの場合
1,sizes設定が有効な場合(iOS4.2以降)は、その解像度にあったアイコンが選択される
2,sizes設定が無効で、precomposedが有効な場合は(iOS3〜IOS4.2未満)そのアイコン
 が選択されるprecomposedを設定したアイコンが選択される。
3,iOS3未満ではsizesやprecomposedを利用していない設定が選択される。
4,同じ設定が重複している場合は最初の設定が選択される。

Androidの場合
・precomposedの設定の有無にかかわらず光沢処理れない。
・アイコンのサイズは機種によって異なる

 
ということでwebデザイニングの記事の順番で問題ないことが確認できました。
ただし、これではprecomposedに対応していないiOS2以前のものには対応できないので、
私は以下の様にしてみました。

途中にprecomposed設定に対応していないiOS2以前用のアイコンを追加しています
(home.pngには光沢処理していません)。Androidは最後の行が選択されると思うのですが、
検証できていないのでAndroid携帯を購入後、確認したいと思います。

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../images/home114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../images/home72.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../images/home57.png" />
<link rel="apple-touch-icon" href="../images/home.png" />
<link rel="apple-touch-icon-precomposed" href="../images/home57.png" />

アイコンの設定(最終案)
 
 
いろいろ時間をかけて検証しましたが、スマートフォン用のサイトを確認すると上記のような
細かい設定はほとんどされておらず、最小限の設定が1行のあるか、設定されてないかでした…。
確かにホームにまで置いておきたいページはあまり無い気がします。
 
サンプルとして銀行系のホームアイコン
みずほ銀行
三井住友銀行
 
 

・Androidのことも考えると

上記でまとまったようにも感じますが、Androidのケースを考えるともう少し考えたくなります。
厄介なのは、Androidが現状sizesに対応しておらず、そのうえ機種によってサイズが異なり
さらにアイコンサイズを任意で変更可能なアプリや機種が存在することです。
 
iPhoneもAndroidも自分の環境に合わせてアイコンをリサイズしてくれます。ですから
上記銀行のアイコンは57×57のものしか有りませんが、retinaディスプレイの私のiPodでも
4倍にリサイズされます(リサイズされなかったら1/4の小さなアイコンになるでしょう)。
 
これを踏まえアイコンは114×114で作成し、最小設定のアイコン指定だけで良い気がします。
つまり最初に学んだ以下のコードです。

<link rel="apple-touch-icon" href="../images/home114.png" />

 
ただしアイコンのデザインは光沢処理をいれません。
各環境に任せます(iPhoneでは光沢処理され、Androidでは光沢処理されない)。
retinaディスプレ以外ではリサイズされますが、縮小リサイズなので画像の劣化はあまり
ないはずです。解像度がまちまちのAndroidケータイでも機種に合わせてリサイズされます。
ただしアイコンをデザインするときに注意しましょう。リサイズによる劣化が目立つ
ストライプ系のデザインは避けるべきです。ホームに配置されることを期待するwebアプリ以外
ではこの設定で充分なのではないでしょうか。
 
 
おしまい
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


6 − 四 =


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>