Web App Manifest入門 第1回 マニフェストファイルの構造

Web App Manifestは、PWAを実現する際に使われる技術のひとつです。まずはその構造とメンバを紹介します。

カテゴリー
JavaScript
ブラウザAPI

発行

著者 矢倉 眞隆 フロントエンド・エンジニア
Web App Manifest入門 シリーズの記事一覧

PWAとその機能

PWA（Progressive Web Apps：プログレッシブウェブアプリ）という言葉を聞いたことがある方も増えてきたのではないかと思います。PWAのこれといった定義はありませんが、いくつかの新しい技術を使って、ネイティブアプリのような機能を持ったWebアプリを実現したものをそう呼びます。

「ネイティブアプリのような機能」も、なかなかふんわりとしていますが、以下の機能が挙げられることが多いでしょう。

  • インストール（ホーム画面に追加）できる
  • オフラインやネット接続が不安定な状態で開いても使える
  • プッシュ通知が送られてくる

ただ、このシリーズはPWAそのものについて紹介するものではありません。このシリーズで取り上げるのは、Web App Manifestと呼ばれるものです。

先ほど「いくつかの新しい技術を使って」と述べましたが、PWAには複数の技術が関わります。なかでも代表的なものにService Workerがあります。CodeGridでもすでに取り上げている、PWAの中核技術です。

このシリーズで解説するWeb App Manifestも、PWAを実現する際に使われる技術のひとつです。

Web App Manifestとは

Web App Manifestは、Webアプリのタイトルやアイコンなどについてまとめたファイルです。

このファイルがどこで使われるかというと、主にWebアプリのインストール時です。PWAの特徴のところで「インストールできる」と述べました。気に入ったWebアプリがPWAの場合、それをインストールすると、アプリ一覧もしくはホーム画面に追加されます。このときに、Web App Manifestに書かれているアプリの名前やアイコンのURLが使われるわけです。

機能としてはHTMLのmeta要素、特にOGP（Open Graph Protocol）に書いてある情報と似ています。Web App Manifestはそれらの情報を、外部ファイルにしたようなものと考えるとわかりやすいでしょうか。

Web App Manifestの構造

Web App Manifestは、アプリに関する情報をJSON形式でまとめたファイルです（以下、「マニフェストファイル」と呼びます）。CodeGridは残念ながらPWAにはなってないのですが、PWA化したとすると、マニフェストファイルは次のようになるでしょう。

CodeGridのマニフェストファイル（予想）

{
  "name": "CodeGrid — フロントエンドに関わる人々のガイド",
  "short_name": "CodeGrid",
  "theme_color": "#000",
  "icons": [
    {
      "src": "icon/icon.png",
      "sizes": "192x192"
    }
  ]
}

記述する項目については後で取り上げますが、それぞれが何をしているか、おおよその検討がつくのではないでしょうか。

マニフェストファイルの文字エンコーディングはUTF-8で記述します。また、拡張子は.webmanifestで、MIMEタイプはtext/webappmanifestが推奨*されています。

*注：JSONファイルでも動作に問題はないけれど

拡張子とMIMEタイプについては推奨されているだけで、application/jsonで送られる.jsonファイルでも動作に問題はありません。ではなぜ推奨の設定があるかというと、専用の拡張子やMIMEタイプであれば、キャッシュなどのサーバー上の設定を、他のJSONファイルと分けて設定しやすくできるというねらいからです。

マニフェストファイルをアプリと結びつける

中に記述するものの詳細の前に、マニフェストファイルをWebアプリに結びつける方法を紹介します。マニフェストファイルとアプリは別のファイルですから、当然ながら関連付けないといけません。

マニフェストファイルは、HTMLのlink要素を使ってWebアプリと関連付けます。

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

rel="manifest"を指定したlink要素で、マニフェストファイルの場所をリンクすればOKです。

マニフェストファイルを置く場所は、後述するstart_urlと同一オリジンの範囲内であれば問題ありません。

マニフェストのメンバ紹介

マニフェストファイルの例で、記述する項目（メンバ）を少しお見せしました。Web App Manifest仕様では、執筆時点で20個近くものメンバが定義されています。すべてではありませんが、どのようなメンバがあるかを紹介します。

name

アプリの名前を記述します。ここで指定される名前が基本的に使われますが、状況によっては次に紹介するshort_nameが使われます。

short_name

アプリの短い名前を記述します。「短い名前」とは何かというと、ホーム画面やアプリ一覧画面などの表示領域が限られているときに使われる名前です。

たとえば、「CodeGrid — フロントエンドに関わる人々のガイド」は、アプリ一覧にはとうてい収まらないでしょう。「CodeGrid」であればかろうじて収まりそうです。

short_nameに文字数の制限はありません。しかし、ホーム画面やアプリ一覧の文字数を見るのに、英数では10文字程度、日本語であれば5文字程度がいいのではないかと筆者は思っています。場合によってはブランド名を短縮するなどの思い切り*も必要でしょう。

*注：短縮の思い切り

たとえば、CodeGridが素晴らしい支払いサービス「CodeGridペイメント」を新しく発表したとしましょう。しかしこの文字数では、ホーム画面などでは「CodeGridペ…」などと表示されてしまいそうです。こんなときには、ブランド名である「CodeGrid」でさえも短縮し、「CGペイ」などにするのがおそらくよいでしょう。ブランディングはアイコンに任せればよいのですから。

lang

langに指定するのは、アプリで使われている言語です。形式は言語タグで指定します。通常はアプリのHTMLに指定されているlang属性と同じ値が使われるでしょう。CodeGridは日本語で書かれているので、jaになります。

言語は1つしか指定できません。複数の言語でWebアプリが提供されている場合は、サーバー側で言語・地域の判定をし、それに応じて言語・地域別のマニフェストファイルを出し分けるとよいとされています。

start_url

start_urlには、インストールされたWebアプリを立ち上げたときに開くURLを指定します。Webアプリのディレクトリ構成にもよりますが、ルートやディレクトリのルートを指定するのが多くなりそうです。

{
  "start_url": "/"
}

指定するURLは、マニフェストファイルのURLと同一オリジン*でないといけません。ですので、別のサーバーにマニフェストだけを置いたりといったことはできません。

*注：オリジン

オリジンや同一オリジンの詳細はa要素の連載で簡単に取り上げたので、そちらをお読みください。

start_urlにパラメータを与え、アクセス解析ツールと結びつければ、PWAからのアクセスも計測もできるでしょう。

{
  "start_url": "/?source=pwa"
}

しかし、個別のIDを与えてのトラッキングなどは控えるべきです。ブラウザ側もstart_urlを無視する実装などが認められているので、「このアドレスだからPWAだ」と一概には言えない場合もあるでしょう。

icons

iconsには、アプリのアイコンを指定します。アイコンは、大きさや画像フォーマットごとに複数指定できます。

{
  "icons": [
    {
      "src": "icon/icon-192.png",
      "sizes": "192x192"
    },
    {
      "src": "icon/icon.svg",
      "sizes": "192x192 256x256 512x512",
      "type": "image/svg+xml"
    },
    {
      "src": "icon/icon-192.webp",
      "sizes": "192x192",
      "type": "image/webp"
    }
  ]
}

srcはimg要素のsrc属性と同じように、画像のURLを指定します。

sizesには、192x192のように、縦と横の大きさをxでつなげたものを、空白区切りで複数指定できます。

typeは、画像のMIMEタイプを指定します。基本的にはPNGやJPEGでよいでしょうが、容量や色表現の都合で、WebPやHEIFなど新しいフォーマットを使いたい場合などは、そのMIMEタイプを合わせて指定します。

アイコンはホーム画面やアプリ一覧で使われるほか、一部のブラウザではスタート時にも使われます。これについては次回以降に説明します。

theme_color

theme_colorには、アプリのブランドカラーとなるような色を指定します。CodeGridであれば黒ですので、#000でしょうか。

{
  "theme_color": "#000"
}

background_color

background_colorには、サイトで使われている背景色を指定します。

{
  "background_color": "#fff"
}

一体なんの意味があるのだろうと不思議に思う方もいるかもしれません。background_colorはアイコンやtheme_colorと併せて、ホーム画面からのスタート時に使われるプロパティです。次回以降に詳しく紹介します。

display

displayは、インストールされたアプリを立ち上げる際に使われる、ブラウザの表示モードを指定するメンバです。仕様では、4つの値が定義されています。

値 表示モード
browser 通常のブラウザが立ち上がって、その中で表示
standalone ネイティブアプリのように、アプリ固有のウインドウで表示
minimal-ui アプリ内ブラウザのように、一部のブラウザUIをもった形で表示
fullscreen ブラウザのツールバーや、スマートフォンでは画面上部のステータスバーもなしの状態で表示

デフォルトはbrowserになります。また、それぞれのモードがサポートされない環境では、別のモードにフォールバックされます。仕様では、「fullscreen→standalone→minimal-ui→browser」の順でフォールバックすると記されています。

その他のメンバとフォールバック

Web App Manifest仕様には他にもメンバが定義されているのですが、今回紹介したものが主に使われるメンバかと思います。マニフェストファイルに仕様として必須とされているメンバはありません。しかし、ブラウザのUI実装によっては、「これが必要」とするものがあります。

なお、マニフェストに書かれていない情報については、Webアプリのインストール時に、そのページのHTML（meta要素など）から情報を得てもよいとされています。

まとめ

今回はPWAの構成技術のひとつであるWeb App Manifestについて、その形式や書き方、メンバのいくつかを紹介しました。

マニフェストファイルについては紹介しましたが、それがどのように使われるのか、言葉ではわかりにくい概念もあります。次回はアイコンなどがどのように使われるのかを紹介します。

Twitter GitHub
運営会社