iscle [イズクル] - あなたの生活に役立つネタを!

スマホサイトをアプリのように!「ホーム画面に追加」等を実装する方法

竹中文人
執筆者:
[最終更新日]2016/02/05
[カテゴリ]Web・IT

「ホーム画面に追加」等を実装

モバイル(スマートフォン)に最適化サイトが多くなりましたね。モバイル対応していないサイトが多い時は、モバイル対応していることでライバルサイトにも差を付けられていたかもしれません。しかしモバイル対応が一般的になればその差はありません。

さてここでライバルサイトに差を付ける方法をご紹介したいと思います。どのようなことができるかと言うと・・・

  1. ユーザーがWebサイトに訪れた時、ホーム画面に追加することを促すバナーを表示させる
  2. ホーム画面に追加された時のアイコンを変更する
  3. URLバーを隠してアプリのような見た目にする
  4. URLバーとステータスバーの色を変える

1.ホーム画面に追加バナー

“1”のホーム画面に追加することを促すバナーとはこのような感じです。特定の条件を満たしたユーザーがサイトにアクセスした時に表示させることが可能です。
to-home

その条件は下記のようなものがあると Google Developers Japan のページに記載があります。ネックなのはサイトがHTTPS(SSL化)でないとダメなところでしょうか。

  • ユーザーがウェブサイトを 1 週間以内に 2 回訪問
  • Web Manifest が存在する
  • Service Worker を使っている
  • HTTPS でサーブされている

もしSSL化をご検討中であれば下記もご覧ください。

2.アイコンを変更する

“2”のアイコンを変更するというのは、“1”によってホーム画面に追加された際に、アプリのアイコンのように画像を変更する事が可能です。
アイコン

3.アプリのような見た目にする

“1”によってホーム画面に追加されたアイコンからWebサイトを開くと、URLバーを隠した状態で表示されます。ですから、よりアプリのような見た目になります。
to-home03
※URLバーが消えるのはアイコンから開いた時のみです。

4.URLバーとステータスバーの色を変える

これはホーム画面に追加したアイコンから起動した時だけでなく、ブラウザ観覧時でも適用されます。通常は色がグレーですが、これを自由に変更することが可能です。
to-home04

スポンサーリンク

実装するための手順

アイコン画像

まずはホーム画面に追加した時に表示するアイコン画像を用意します。当サイトiscleであれば、このような画像を用意しました(2016/2/4現在)。
launcher-icon-3x

大きさは 144px × 144px のものがあれば大丈夫です。ファイル形式は「png」がお勧めです。

「manifest.json」ファイルを作成する

「manifest.json」という名前のファイルを作成し、下記の内容を記入してください。

{
 "lang": "ja",
 "name": "webapp name",
 "short_name": "webapp name",
 "icons": [{
 "src": "/app-icon.png",
 "sizes": "144x144",
 "type": "image/png"
 }],
 "start_url": "https://example.com/",
 "display": "standalone"
}

修正箇所は下記の通りです。

name サイトの名前
short_name 短いバージョンのサイト名
src アイコン画像のURL
start_url トップページのURL

作成ができたらサーバーにアップしてください。

head 内にコード追加

モバイルサイトの head タグ内に下記コードを追加してください。URLは上記で作成・アップした「manifest.json」に変更してください。

<link rel="manifest" href="/manifest.json">

ここまでで “1”~“3” の実装ができます。

URLバーの色を変える

これはAndroid 5.0 以降でないと色が変わりませんが、実装はとても簡単です。下記コードを head タグ内に追加するだけ!色はご自身の好みで変えてください。

<meta name="theme-color" content="#db5945">

今回ご紹介した方法は、全てのブラウザやOSで適用されるものではありません。とりわけChromeであれば確認ができます。