ホームに追加できるようにするためにやったこと

やったのはこんな感じ。

1. Nuxt.jsでSPAのWebサービスを作る
2. ファビコンなどをfavicon generatorで一括生成
3. 一括生成したファイルをstatic配下に配置
4. 一括生成したファイルに含まれるmanifest.jsonをちょっと修正

簡単!! ( ﾟдﾟ)!

4.の修正についても、アプリ名とかを設定しただけ〜

ファビコンを生成する

favicon generatorを使うだけですが、
こんな感じで使ってます。

1.「画像ファイルを選択」に元ファイルをアップロード

画像は推奨の700x700ピクセルで用意。

2.「ファビコン一括生成」で一括生成

3.「ファビコンダウンロード」でダウンロード

これだけで必要な画像が一括で生成できますヽ(=´▽`=)ﾉ
ダウンロードしたファイルを見るとこんな感じ。

このファイルをNuxtのstaticに配置すればいい感じに(´ω｀)

manifest.jsonを修正する

ダウンロードしたファイルに入っているmanifest.jsonを修正していく。
生成されたmanifest.jsonはこんな感じ。

{
  "name": "",
  "short_name": "",
  "description": "",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#fff",
  "orientation": "any",
  "icons": [
    // ... 略
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

設定した内容はこんな感じ。

{
  "name": "積読ハウマッチ",
  "short_name": "積読ハウマッチ",
  "description": "買った本を読まずに積んでおく「積読」、全部でいくらか知っていますか？「積読ハウマッチ」は積んである本の総額がわかる書籍管理サービスです。",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#776f59",
  "orientation": "portrait",
  "icons": [
    // ... 略
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

変更点としては、このあたり!

• name、short_name、descriptionを設定
• background_colorで、スプラッシュの背景色を設定
• theme_colorで、ステータスバーの色を設定
• orientationで画面を縦に固定するよう設定

これだけ変えれば、冒頭の動画みたいな感じにできます(´ω｀)

注意!! iPhoneとAndroidでアイコンを変えたほうがいいかも...

iPhoneで丸いアイコンを使うと、微妙な感じ...

積読ハウマッチでは、iPhoneとAndroidで別のアイコンを設定してます！
iPhone用の元アイコン画像はこんな感じ〜

それぞれの設定項目についてのまとめ

それぞれについて、簡単にまとめてみた。元ネタはこちら。

name、 short_name、 description

• name ... アプリのリストなどで利用されるアプリ名
• short_name ... ホームスクリーンで利用されるアプリ名
• description ... アプリの説明

background_color、theme_color

• background_color ... 起動時のスプラッシュ画面の背景色
• theme_color ... 画面の上にあるステータスバーの色

orientation

画面の向きを設定。設定値としては、こんな感じ。

• "portrait" ... 縦向き。固定
• "portrait-primary" ... 縦長の端末で縦向き表示。固定
• "portrait-secondary" ... 横長の端末で縦向き表示。固定
• "landscape" ... 横向き。固定
• "landscape-primary" ... 横長の端末で横向き表示。固定
• "landscape-secondary" ... 縦長が正面の端末で表示。固定
• "any" ... 縦と横、全ての向きに回転

portraitやlandscapeは、それぞれの-primaryと-secondaryを同時に指定。

display

表示モードの設定。設定値としては、こんな感じ。

• "standalone" ... アプリっぽい感じで表示
• "fullscreen" ... フルスクリーンで表示
• "minimal-ui" ... 最小限のUI要素が表示
• "browser"... 規定の設定。従来のブラウザータブまたは新しいウィンドウで開きます。

start_url

ユーザーがアプリケーションを起動したときに読み込むURL。通常はインデックスページ。
なお、これはマニフェストのURLからの相対URLである必要があります。

icons

アプリのアイコン画像の配列を指定。サイズとか、ファイルタイプとか。

"icons": [
    // ... 略
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]

related_applications

今回は使ってないですが、インストール可能なネイティブアプリへの
URLとかも設定できるもできるらしい...!!

"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]

おわりに

Nuxt.js(SPA)でWebサービスを作るとmanifest.jsonを置いておくだけで、
簡単にホームに追加できるようになります(´ω｀)
画像の生成も便利なサービスがあるので、お手軽♪

これらを使って作ってるのは、こちら〜
積読総額ランキングや人気の本などもあるので、よかったらあそんでもらえれば!!

積んでる本の総額がわかる読書管理サービス
『積読ハウマッチ』

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで〜

参考にしたサイト様

• ウェブアプリマニフェスト | MDN
• 様々なファビコンを一括生成。favicon generator