Nuxt.js(SPA)のWebサービスにmanifest.jsonを置くだけでホームに追加できるようになった

開発中の[積読ハウマッチ](https://tsundoku.site)、ホームに追加できるんです(*´ω｀*)
といっても、Nuxt.js(SPA)で作ったWebサービスにmanifest.jsonを置いておくだけ。
manifest.jsonについてちょっと調べたので、その備忘録。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E7%A9%8D%E8%AA%AD%E3%83%8F%E3%82%A6%E3%83%9E%E3%83%83%E3%83%81?src=hash&amp;ref_src=twsrc%5Etfw">#積読ハウマッチ</a> ...ホームに追加できるんです(*´ω｀*)<br>アイコンも用意したんです(*´ω｀*)<br>ステータスバーの色も変わるんです(*´ω｀*) <a href="https://t.co/czRfFqk8S7">pic.twitter.com/czRfFqk8S7</a></p>&mdash; めもらば@公式 (@MemoryLoverz) <a href="https://twitter.com/MemoryLoverz/status/1162665471445032960?ref_src=twsrc%5Etfw">August 17, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


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

やったのはこんな感じ。

1. Nuxt.jsでSPAのWebサービスを作る
2. ファビコンなどを[favicon generator](https://ao-system.net/favicongenerator/)で一括生成
3. 一括生成したファイルを`static`配下に配置
4. 一括生成したファイルに含まれる`manifest.json`をちょっと修正

簡単!! ( ﾟдﾟ)!  
4.の修正についても、アプリ名とかを設定しただけ〜

## ファビコンを生成する

[favicon generator](https://ao-system.net/favicongenerator/)を使うだけですが、
こんな感じで使ってます。

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/76ac9193-0e2a-f3b5-d6fb-6d391e918542.png" width="60%" />

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/7a943621-ebb5-2aff-917f-133f5a217f08.png" width="50%" />

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/2021a5b5-2025-3617-83c2-897a508bfd51.png" width="50%" />

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

<img width="50%" alt="スクリーンショット 2019-08-21 16.27.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/ac9d5ba5-a404-5e27-c8d7-2f75d1846b6f.png">

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

## manifest.jsonを修正する

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

```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"
    }
  ]
}
```

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

```json
{
  "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で丸いアイコンを使うと、微妙な感じ...

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/1a852297-2feb-4b4b-ca93-3417ca28266a.png" width="50%" />

[積読ハウマッチ](https://tsundoku.site)では、iPhoneとAndroidで別のアイコンを設定してます！
iPhone用の元アイコン画像はこんな感じ〜

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/9f82acf4-9926-fe9a-ffa6-1a31c771c758.png" width="50%" />




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

それぞれについて、簡単にまとめてみた。元ネタは[こちら]([ウェブアプリマニフェスト | MDN](https://developer.mozilla.org/ja/docs/Web/Manifest))。

#### `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"`... 規定の設定。従来のブラウザータブまたは新しいウィンドウで開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/fa8fee8e-f243-da93-9ad6-fcd4374dc35b.png" width="50%" />


#### `start_url`

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

#### `icons`

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

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

#### `related_applications`

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

```json
"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を置いておくだけで、
簡単にホームに追加できるようになります(*´ω｀*)
画像の生成も便利なサービスがあるので、お手軽♪

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

積んでる本の総額がわかる読書管理サービス
『[積読ハウマッチ](https://tsundoku.site)』

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="25%"/>

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


# 参考にしたサイト様
- [ウェブアプリマニフェスト | MDN](https://developer.mozilla.org/ja/docs/Web/Manifest)
- [様々なファビコンを一括生成。favicon generator](https://ao-system.net/favicongenerator/)