5.6.3 プログレッシブWebアプリケーションの作成(PWA)

プログレッシブWebアプリケーション(PWA)の機能および要件について学習します。

• プログレッシブWebアプリケーションのサポートについて
  プログレッシブWebアプリケーション(PWA)は、高速で応答性が高く、ホーム画面にインストール可能で信頼性が高く(オンラインまたはオフライン)、魅力的になるように(プッシュ通知のサポートの提供)設計されています。
• プログレッシブWebアプリケーションの作成
  アプリケーションの作成ウィザードを実行し、「プログレッシブWebアプリケーションのインストール」機能を有効にして、プログレッシブWebアプリケーションを作成します。
• プログレッシブWebアプリケーション属性の構成
  アプリケーション定義を編集して、プログレッシブWebアプリケーション属性を構成します。

5.6.3.1 プログレッシブWebアプリケーションのサポートについて

プログレッシブWebアプリケーション(PWA)は、高速で応答性が高く、ホーム画面にインストール可能で信頼性が高く(オンラインまたはオフライン)、魅力的になるように(プッシュ通知のサポートの提供)設計されています。

プログレッシブWebアプリケーションを有効にするには、保護されたHTTPS環境またはlocalhost上でOracle APEXアプリケーションを提供する必要があります。保護されていない環境を使用している場合、PWA機能はレンダリングされません

プログレッシブWebアプリケーションを作成するには、アプリケーションの作成ウィザードを実行し、「プログレッシブWebアプリケーションのインストール」機能を有効にします。

プログレッシブWebアプリケーションのインストールを有効にすると、次のことが可能になります:

• プログレッシブWebアプリケーション(PWA)としてアプリケーションをインストールする機能を追加します。

• アプリケーション内に、新しいナビゲーション・バー・エントリ「アプリケーションのインストール」を追加します

• ユーザーがオフラインでネットワークをリクエストできない場合に、カスタマイズ可能なオフライン・ページを提供します。「翻訳が必要なプログレッシブWebアプリケーション(PWA)メッセージ」を参照してください。

• モバイル・デバイスでのページ・ロード速度を最適化します。静的ファイル(APEXコア・ファイルおよびアプリケーション・ファイル)の新しいブラウザ・キャッシュ・アーキテクチャを使用して、ページ・ロードのレンダリング時間を短縮します。

5.6.3.2 プログレッシブWebアプリケーションの作成

アプリケーションの作成ウィザードを実行し、「プログレッシブWebアプリケーションのインストール」機能を有効にして、プログレッシブWebアプリケーションを作成します。

ヒント:

モバイル用レポートおよびフォームを含めるには、アプリケーションを作成してページを追加します。「モバイル環境用に最適化されたレポートおよびフォーム」を参照してください。

プログレッシブWebアプリケーションを作成するには:

1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. 「作成」ボタンをクリックします。
3. 「新規アプリケーション」をクリックします。

   アプリケーションの作成ページが表示されます。

4. 「名前」で、開発者がアプリケーションを識別するための名前を入力します。
5. 「外観」で、デフォルトを受け入れるか「外観の設定」をクリックして変更します。

   「外観」ダイアログでは、次を構成します。

   • テーマ・スタイル - アプリケーションの表示に使用するデフォルトのテーマ・スタイルを選択します。

     ヒント:

     スタイルは、事前定義された別のスタイルに変更するか、生成後に変更できます。スタイルを変更するには、アプリケーションを実行して開発者ツールバーの「テーマ・ローラー」をクリックします。

   • ナビゲーション - ナビゲーション・メニューのタイプを選択します。

   • アプリケーション・アイコン - 「新規アイコンの選択」をクリックしてアイコンを変更します。選択内容は、アプリケーションのホームページに表示されます。

   • 「変更の保存」をクリックします。

6. ページを追加するには、「ページの追加」をクリックし、目的のページ・タイプを選択します。ユーザー・インタフェースは、選択したページ・タイプによって異なります。

   ヒント:

   ページの作成ウィザードでは、多数のモバイル用レポートとフォームの作成がサポートされています。「モバイル環境用に最適化されたレポートおよびフォーム」を参照してください。

   作成したページは、「ページ」の下に表示されます。

   
   図create_app_wiz_b.pngの説明

   既存のページを次のように編集できます。

   • ページの順序を変更します。ページがアプリケーションで表示される順序を変更するには、「ドラッグしてページの並替え」アイコンをクリックしたまま、リスト内の新しい位置にドラッグ・アンド・ドロップします。

     ホームページは常に最初に表示され、順序は変更できません。管理ページの場合は、ページの順序によって、管理ページの「アプリケーション管理」リストに表示される順序が決まります。

   • ページを編集します。ページを編集するには、「編集」をクリックします。ダイアログで属性を編集し、「変更の保存」をクリックします。

   • ページを削除します。ページを削除するには、「編集」をクリックし、「削除」をクリックします。

7. 「機能」で、アプリケーションに含める機能を選択します。プログレッシブWebアプリケーションを作成するには、「プログレッシブWebアプリケーションのインストール」を選択します。
   
   図create_app_wiz_c.pngの説明

   「機能」は、アプリケーション・レベルの機能を提供し、アプリケーションごとに1回のみ追加できます。さらに学習するには、ヘルプを参照してください。すべての機能を選択するには、「すべてをチェック」をクリックします。

8. 「設定」で、次のステップを実行します。
   1. アプリケーションID: アプリケーションの一意の数値識別子を入力します。このフィールドには、自動的に生成された識別子がデフォルトで含まれています。3000から9000の範囲のアプリケーションIDは、Oracle APEXの内部使用向けに予約されています。
   2. スキーマ: このアプリケーションで使用するデータベース・オブジェクトを格納するデータベース・スキーマを選択します。各アプリケーションは、すべてのSQLを特定のデータベース・スキーマとして解析することで、権限を取得します。
   3. 言語: アプリケーションで使用されるプライマリ言語。プライマリ言語を変更するには、「言語の選択」アイコンをクリックします。
   4. 認証: アプリケーションに対するユーザーの認証方法を選択します。
   5. 詳細設定: 「詳細設定」の横にあるアイコンをクリックして、アプリケーション定義の設定、プリファレンスとセキュリティおよびグローバリゼーション属性を編集します。さらに学習するには、ヘルプを参照してください。
   6. ユーザー・インタフェースのデフォルト値: アイコンをクリックして、このアプリケーションにユーザー・インタフェースのデフォルト値を適用します。
9. 「アプリケーションの作成」をクリックします。
10. 次のトピックの説明に従って、プログレッシブWebアプリケーション属性を構成します。

5.6.3.3 プログレッシブWebアプリケーション属性の構成

アプリケーション定義を編集して、プログレッシブWebアプリケーション属性を構成します。

ノート:

プログレッシブWebアプリケーション属性を構成する前に、アプリケーションの作成ウィザードを実行し、前述のトピックの説明に従って「プログレッシブWebアプリケーションのインストール」機能を有効にすることで、新しいアプリケーションを作成します。

プログレッシブWebアプリケーション属性を構成するには:

1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。
3. 「アプリケーション定義の編集」ページにナビゲートします。アプリケーションのホームページから、「アプリケーション定義の編集」ページに、次の2つの方法でアクセスできます。
   • 「共有コンポーネント」からの場合:

     1. 「共有コンポーネント」をクリックします。

     2. 「アプリケーション・ロジック」で、「アプリケーション定義属性」をクリックします。

   • 「アプリケーション・プロパティの編集」ボタンを使用します。

     1. アプリケーション名の右側にある「アプリケーション・プロパティの編集」をクリックします。

     2. 「定義」タブをクリックします(選択されていない場合)。

4. 「プログレッシブWebアプリケーション」で属性を編集します。
   1. プログレッシブWebアプリケーションの有効化 - このオプションを有効にします。
   2. インストール可能 - このオプションを有効にします。
   3. アプリケーションの説明 - アプリケーションの動作を説明する説明を入力します。このオプションは、アプリケーションのインストールを求めるプロンプトが表示された場合に、ユーザーに詳細情報を提供します。
   4. 表示 - アプリケーションの表示モードを選択します。オプションは次のとおりです。

      • 全画面

      • スタンドアロン

      • 最小のUI

      • ブラウザ

      ノート: 一部のデバイスおよびブラウザではこの属性が無視されます。APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します。

   5. 画面の向き - このプログレッシブWebアプリケーションを使用するときに優先される画面の向きを選択します。このオプションは主にモバイル・デバイスに適用されます。

      ノート: 一部のデバイスおよびブラウザではこの属性が無視されます。APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します。

   6. テーマ・カラー - アプリケーションのデフォルトのテーマ・カラーを定義します。

      この属性は、オペレーティング・システムがアプリケーションを表示する方法に影響します(たとえば、Androidのタスク・スイッチャの場合、このテーマ・カラーで囲まれます)。

      ノート: 一部のデバイスおよびブラウザではこの属性が無視されます。APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します。

   7. バックグラウンド・カラー - バックグラウンド・カラーを選択します。

      バックグラウンド・カラーは、スタイルシートがロードされる前にアプリケーションに表示するプレースホルダのバックグラウンド・カラーを定義します。したがって、バックグラウンド・カラーは、Webアプリケーションの起動とアプリケーション・コンテンツのロードのスムーズな移行のために、テーマ本体のバックグラウンド・カラーと一致する必要があります。

      ノート: 一部のデバイスおよびブラウザではこの属性が無視されます。APEXでは、プログレッシブWebアプリケーションを適切に処理するデバイスにのみこの情報を中継します。

   8. アイコンURL - このアイコンは、モバイル・デバイスまたはデスクトップのホーム画面で、他のアプリケーションのリストの中で使用したり、WebアプリケーションをOSのタスク・スイッチャやシステム・プリファレンスと統合したりするために使用することもできます。

      アイコンは、*.pngまたは*.svgファイルである必要があります。アイコンが*.pngファイルの場合、推奨サイズは512x512ピクセルです。

   9. カスタム・マニフェスト - Webアプリケーション・マニフェスト・ファイルの追加のJSONプロパティを格納するために使用されます。ここで見つかったプロパティは、既存のプロパティをオーバーライドするか、新しいプロパティを追加することで、前述の宣言オプションを拡張するために使用されます。

      カスタム・マニフェストの構築の詳細は、Webアプリケーション・マニフェストの仕様(https://www.w3.org/TR/appmanifest/)を参照してください。

5. 「変更の適用」をクリックします。