スマホのブックマークアイコン用画像を指定する方法

スマホのブックマークアイコン用画像を指定する方法
■ 店頭より得で、予約しやすいオンラインショップ。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE

スマートフォンでWEBページを閲覧する時、iPhoneであれば、かなりの確率でSafariブラウザを利用すると思いますが、毎回立ち上げるページであれば、ホーム画面にアプリのようなアイコンとして置いてあると便利だという事は知る人ぞ知る機能だと思います。

ホーム画面にブックマークをセットする手順

1. 画面下部のボタンをタッチ。

image06

2. ホーム画面に追加をタッチ。

image04

3. 自由に名前を付けて登録できます。

image05

4. 見事、ホーム画面にアイコンがセットされました。

image08

簡単な操作で、アクセス効率アップです。

タッチアイコンを自由に設定する方法

今回はショーケース・ティービーのWEBページで操作した所、WEBサイトにセットされているファビコンがアイコンとして登録されてしまいました。

実はこれを任意画像でセットするlinkタグもあるのです。

サイト主であれば、柔軟に画像を登録できるのであれば、設定を行わない手はないという事ですね。

やり方はものすごく簡単な方法で実現できます。

このタグをheadタグ内に記述するだけなんですね。

このままだと3D効果(光っているエフェクトと影)がつくのでフラットデザインにしたい場合は

とします。

しかも、この方法はAndroidも対応できるので、めちゃくちゃ便利です。

「apple-touch-icon」という名称から、iPhoneしか対応していないかと思ってたんですが、Android(GalaxyS3で検証)でもセットできたので、標準機能という事で理解できました。

「たくさん画像を作るの面倒だよ」という方は iconifierのサイトに152×152ピクセルのPNG画像をセットすれば全部自動で作ってくれます。

注意点

色々なサイトに書かれている、apple-touch-icon機能の注意点として、画像の設置場所にBasic認証が掛かっていると、画像が正常に取得できないのですが、僕が調べた所もう一つ注意点がありました。

それは

「URL指定の場合http://とhttps://の違いに注意」

ということです。

注意点としては、http://***/というサイトであれば、画像のURLはhttpでアクセスする必要があり、通常httpサイトでhttpsなどのjsやcssを読み込む際はエラーにはならず問題なく読み込まれるのですが、この機能における画像だけは、ポート番号をあわせる必要があるようです。

ご注意ください。

アクセス解析の流用

この機能が使われたかどうかは現時点では、知るすべがありません。
ユーザーが任意にホーム画面に設置するため、設置履歴が残らないというのが欠点かもしれません。

ただ、画像のアクセス履歴を解析して、ホーム画面への設置情報をロギングすると、アイコンの成果が終えるかもしれませんね。

また、ページ内でランダムに出し分けることでA/Bテストなども行えてもしかするとこれってマーケティング・リサーチ向きなんではないか?と考えてしまいました。

どこかで似たようなサービスがあったような気がしますが、気が向けばそういうサービスを作ってみたいと思います。

■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE
がお得です。