前回は、MonacaクラウドIDEのメニューからMonacaプロジェクトに設定が行われる項目について、iOSアプリ設定の説明を行いました。今回は、PWAアプリ設定について説明していきたいと思います。

今回の説明の対象は、Cordova 13用のMonacaプロジェクトになります。

PWAアプリ設定

PWAアプリ設定画面からMonacaプロジェクトに設定を行う項目は、以下になります。設定は、Monacaプロジェクトのmanifest.jsonに設定されます。

アプリケーション情報
- 名前
- 短い名前
- 説明
- 言語
- テキストの向き
- 適用範囲
- 開始URL
アプリケーションの表示設定
- 表示
- 画面の向き
- 背景色
- テーマカラー
アプリアイコン

アプリケーション情報

名前

名前に設定された値は、nameキーの値として設定されます。PWAのフルネームとして使用されます。

例："name": "PWA App"

短い名前

短い名前に設定された値は、short_nameキーの値として設定されます。PWAの短縮名として使用されます。

例："short_name": "PWA App"

説明

説明に設定された値は、descriptionキーの値として設定されます。PWAの機能等の説明するために使用します。

例："description": "This is a PWA Minimum Template"

言語

言語に設定された値は、langキーの値として設定されます。PWAの表示言語を指定します。

例："lang": "en"

言語は、以下から選択できます。

en：英語
ja：日本語
de：ドイツ語
es：スペイン語
fr：フランス語
it：イタリア語
pt：ポルトガル語
zh-CN：中国語（簡体字）
ko：韓国語

テキストの向き

テキストの向きに設定された値は、dirキーの値として設定されます。PWAの表示言語を指定します。

例："dir": "ltr"

テキストの向きは、以下から選択できます。

Auto
Left-to-Right
Right-to-Left

適用範囲

適用範囲に設定された値は、scopeキーの値として設定されます。PWAの最上位のURLパスを指定します。

例："scope": "./"

開始URL

開始URLに設定された値は、start_urlキーの値として設定されます。PWAを起動した際に開くURLを指定します。

例："start_url": "index.html"

アプリケーションの表示設定

表示

表示に設定された値は、displayキーの値として設定されます。PWAの推奨表示モードを指定します。

例："display": "standalone"

表示は、以下から選択できます。

Fullscreen
Standalone
Minimal UI
Browser

画面の向き

画面の向きに設定された値は、orientationキーの値として設定されます。PWAの既定の表示方向を指定します。

例："orientation": "any"

画面の向きは、以下から選択できます。

any
Natural
Portrait
Portrait Primary
Portrait Secondary
Landscape
Landscape Primary
Landscape Secondary

背景色

背景色に設定された値は、background_colorキーの値として設定されます。PWAを起動した際に、スタイルシートが読み込まれる前に表示される背景色を指定します。

例："background_color": "#00629d"

テーマカラー

テーマカラーに設定された値は、theme_colorキーの値として設定されます。PWAのユーザーインターフェイス（UI）の既定色を指定します。

例："theme_color": "#00629d"

アプリアイコン

アプリアイコンに設定された値は、iconsキーの配列の値として設定されます。配列の値には、以下が設定されます。

src：アイコン画像のパス
sizes：アイコン画像サイズ
type：アイコン画像タイプ

"icons": [
    {
        "src": "images/icons/icon-48x48.png",
        "sizes": "48x48",
        "type": "image/png"
    },
    {
        "src": "images/icons/icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
    },
    {
        "src": "images/icons/icon-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
    },
    {
        "src": "images/icons/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
    },
    {
        "src": "images/icons/icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
    },
    {
        "src": "images/icons/icon-152x152.png",
        "sizes": "152x152",
        "type": "image/png"
    },
    {
        "src": "images/icons/icon-168x168.png",
        "sizes": "168x168",
        "type": "image/png"
    },
    {
        "src": "images/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "images/icons/icon-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
    }
  ]

おわりに

今回は、PWAアプリ設定画面からMonacaプロジェクトに設定を行う項目について説明しました。今回説明したmanifest.jsonの設定も、Monaca独自の設定ではなく、PWAを構築するための設定ファイルになります。今回紹介した設定については、以下もあわせて確認してみてください。

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

次回は、Windowsアプリ設定画面からMonacaプロジェクトに設定を行う項目について説明していきたいと思います。

Monacaプロジェクトを理解しよう（PWAアプリ設定編）