WEBZINNE

website-buildingのサムネイル

ウェブサイト構築

ウェブアプリマニフェスト(manifest.json)の設定項目まとめ

WEBZINNEトピックス編集部のアイコンWEBZINNEトピックス編集部

公開日:2020年5月26日

ウェブアプリマニフェスト(manifest.json)の設定項目をまとめました。PWAアプリなど、ケースごとのオススメ設定もピックアップしています。

ウェブアプリマニフェスト(manifest.json)の項目一覧

ウェブアプリマニフェスト(manifest.json)の基本的な設定項目は下記の通りになっています。

キーバリュー説明必須優先
background_colorCSSカラーサイトのCSSが読み込まれるまでの背景カラー-★★★
categories文字列W3CのWebサイトカテゴリに合わせた値-
description文字列サイトの説明文。-★★★
dirauto
ltr
rtl
manifestの文字の読む方向-
displayfullscreen
standalone
minimal-ui
minimal-ui
ブラウザの推奨表示モード。PWAでは表示モードの指定-★★★
iarc_rating_id文字列IARCの推奨年齢認証コード-
icons配列アイコンファイルの指定★★★
lang文字列Webサイトの表示言語指定-
name文字列Webサイトの名前★★★
orientationany
natural
landscape
landscape-primary
landscape-secondary
portrait
portrait-primary
portrait-secondary
Webサイトのデフォルトの画面向き-★★
prefer_related_applicationstrue or falserelated_applicationsで設定したアプリで開くことを推奨するか-★★
related_applications配列Webサイトの代替となるネイティブアプリの指定-★★
scope文字列ナビゲーションの制限。指定することでパスがスコープされる-
screenshots配列PWAのショーケース向けのスクリーンショット-★★
short_name文字列Webサイトの名前の短縮版。アプリやショートカットを見やすくできる-★★★
start_url文字列ショートカットなどから起動した時のデフォルトパス-★★
theme_colorCSSカラー対応OSでテーマカラーを設定する-★★

各項目の詳細な説明は下記のページをどうぞ。

ウェブアプリマニフェスト | MDN

ケースごとのオススメ設定項目

ブログ / ホームページ向けのマニフェスト

オンライン前提のブログやホームページであれば、最低限のマニフェスト設定があればOKでしょう。

必須項目プラス、Webサイトをブックマークしてもらった時のことを考慮した項目を設定するのがオススメです。

キーバリュー説明必須優先
background_colorCSSカラーサイトのCSSが読み込まれるまでの背景カラー-★★★
description文字列サイトの説明文。-★★★
icons配列アイコンファイルの指定★★★
name文字列Webサイトの名前★★★
scope文字列ナビゲーションの制限。指定することでパスがスコープされる-
theme_colorCSSカラー対応OSでテーマカラーを設定する-★★

アプリがあるホームページ

もし、iOSやAndroidなどのネイティブアプリも公開しているのであれば、マニフェストの基本をベースに「related_applications」関連を追加すると良いでしょう。

キーバリュー説明必須優先
background_colorCSSカラーサイトのCSSが読み込まれるまでの背景カラー-★★★
description文字列サイトの説明文。-★★★
icons配列アイコンファイルの指定★★★
name文字列Webサイトの名前★★★
scope文字列ナビゲーションの制限。指定することでパスがスコープされる-
theme_colorCSSカラー対応OSでテーマカラーを設定する-★★
prefer_related_applicationstrue or falserelated_applicationsで設定したアプリで開くことを推奨するか-★★
related_applications配列Webサイトの代替となるネイティブアプリの指定-★★

PWA(プログレッシブ・ウェブ・アプリ)

Service Workerを内包するPWAの場合は、必須項目がグッと増えます。

特に、ネイティブアプリと同列で使われることを考えると、ブラウザ関連のほとんど全ての項目は設定しておきましょう。

キーバリュー説明必須優先
background_colorCSSカラーサイトのCSSが読み込まれるまでの背景カラー-★★★
description文字列サイトの説明文。-★★★
dirauto
ltr
rtl
manifestの文字の読む方向-
displayfullscreen
standalone
minimal-ui
minimal-ui
ブラウザの推奨表示モード。PWAでは表示モードの指定-★★★
icons配列アイコンファイルの指定★★★
name文字列Webサイトの名前★★★
orientationany
natural
landscape
landscape-primary
landscape-secondary
portrait
portrait-primary
portrait-secondary
Webサイトのデフォルトの画面向き-★★
short_name文字列Webサイトの名前の短縮版。アプリやショートカットを見やすくできる-★★★
start_url文字列ショートカットなどから起動した時のデフォルトパス-★★
theme_colorCSSカラー対応OSでテーマカラーを設定する-★★

なお、これ以外にもPWAアプリのための「share_target」という項目もあります。

share_targetを登録することで、OSネイティブのシェア・ダイアログにPWAを表示させることができるので、PWA側に受け取る機能があるのであれば、設定しておきましょう。

PWAアプリをOSのシェアダイアログの一覧に登録させてデータをシェアする方法


ウェブアプリマニフェスト(manifest.json)の設定項目まとめとケースごとのおすすめ設定をみてきました。

しっかり設定することで、ブックマークやホームに追加してもらう時のイメージがかなり変わってくるので、ぜひ設定してみてください。

「ウェブサイト構築」の記事