2014年5月2日金曜日

Webクリップの設定。

オフィス狛 技術部です。

今回は、Webクリップ(apple-touch-icon.png)についてです。

先日、社内Webシステムのエラーログに、
File does not exist: apple-touch-icon.png
という内容が出力されていました。

"apple-touch-icon.png" はWebクリップといって、
スマホやタブレットでホーム画面にブックマークを表示する際のアイコンの事です。
社内システムではPCのみを対象としていたので、特に用意していませんでした。
オフィス狛のホームページではWebクリップは用意してあります。


上記はAndroid端末で見た場合ですが、左側がWebクリップを用意した場合で、
右側が用意していない場合です。



上記はios7の場合です。画像なしの場合は、サイトのキャプチャがアイコンになります。

設定方法ですが、Androidの事を考えないのであれば、
ドキュメントルートに "apple-touch-icon.png" という名前のファイルを置けばOKです。

Androidでは、以下の記述をhtmlファイルに追加する必要があります。(iosでも指定する事は可能)
<link href="apple-touch-icon.png" rel="apple-touch-icon"></link>
角丸処理は自動で行ってくれます。
rel の "apple-touch-icon" を "apple-touch-icon-precomposed" にすると、光沢無しの画像になりますが、
ios7からはフラットデザインになっている為、"apple-touch-icon"としても光沢処理は付かないようです。

ちなみに、
<meta name="apple-mobile-web-app-title" content="オフィス狛">
上記メタタグを追加する事で、アイコンの名称も設定する事ができます。(iosのみ)
日本語表記だと6文字が省略せずに表示されます。

Webクリップの画像サイズですが、
iOSヒューマンインターフェイスガイドラインによると、

iPhoneおよびiPod touchでは、次のサイズのアイコンを作成します。
  • 120×120ピクセル
  • 60×60ピクセル(標準解像度)

iPadでは、次のサイズのアイコンを作成します。
  • 152×152ピクセル
  • 76×76ピクセル(標準解像度)

との事です。
(昔は144pxとか114pxと言われていたけど変わった?)
画面サイズごとにリサイズされるので、一番大きい152pxで作成しておけば良いかと思います。

, ,

0 件のコメント:

コメントを投稿