> For the complete documentation index, see [llms.txt](https://ja.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ja.docs.monaca.io/products_guide/monaca_ide/build/build_pwa.md).

# PWA アプリのビルド

## ステップ 1 : アプリの設定

1. Monaca クラウド IDE のメニューから、`設定 → PWA アプリ設定` を選択します。
2. アプリに関する情報を入力します。

* アプリケーション情報

| 名前　　　　　　 | アプリ名を設定します。                                                                               |
| -------- | ----------------------------------------------------------------------------------------- |
| 短い名前     | フルネームを表示する十分な領域がない場所(ホーム画面など)で使用されます。                                                     |
| 説明       | アプリの一般的な説明を指定します。                                                                         |
| 言語       | `name`メンバーと `short_name` メンバーで使用する言語を指定します。                                               |
| テキストの向き  | テキストの書字方向を指定します。                                                                          |
| 適用範囲     | ウェブサイトのナビゲーション範囲を定義します。この設定により表示することができるウェブページを制限できます。範囲外にユーザーがアクセスした場合は、通常のWebページに遷移します。 |
| 開始URL    | アプリケーションを起動したときに読み込むURLです。                                                                |

![](/files/-MgdlylxYKVYnebV-oG2)

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

  | 表示　　　　　 | アプリケーションの表示モードを設定します。ネイティブアプリのように表示させるためデフォルトは、`standalone`に設定されています。 |
  | ------- | --------------------------------------------------------------------- |
  | 画面の向き   | 画面の表示向きを設定します。                                                        |
  | 背景色     | スプラッシュ画面の背景色として利用されます。                                                |
  | テーマカラー  | ステータスバーの色を設定します。                                                      |
* アプリアイコン

  アプリアイコンの設定ができます。1つの画像から各サイズのアイコンを自動生成します。設定したアイコンは、端末のホーム画面に表示されるアイコンやスプラッシュ画像に表示されるアイコンとして利用されます。

1. 設定後、`保存する` をクリックします。

## ステップ 2 : アプリのビルド

1. Monaca クラウド IDE のメニューから、`ビルド → PWA アプリのビルド`  を選択します。
2. 目的に応じたビルドの種類を選択して、`ビルドを開始する` ボタンをクリックします。&#x20;

![](/files/-MgdmAyPq_PhX_sjRwjY)

&#x20;   3\. ビルドが完了するまで、しばらく待ちます。ビルドが成功した場合には、次のような画面が表示されます。ビルドの完了後、ダウンロードやデプロイサービスでの配布ができます。&#x20;

![](/files/-MgdmF9R0qWQld4QkXd3)

参考ページ

* [Firebase への配信](/products_guide/monaca_ide/monaca_ci/firebase.md)
