1. MVVMアーキテクチャを使用したOracle JETアプリケーションの開発
  2. Webアプリケーション・ワークフローの理解

2 Webアプリケーションのワークフローの理解

Oracle JETによるクライアント側Webアプリケーションの開発は、任意の開発環境、および開発プロセスを簡単にするためのスタータ・テンプレートを使用して、単純かつ効率的になるように設計されています。

Oracle JETでは、コマンドライン・インタフェースからWebアプリケーションを作成できます:

  • CLIを使用して最初のOracle JET Webアプリケーションを作成する前に、前提条件パッケージをインストールする必要があります(まだインストールしていない場合)。詳細は、「Oracle JETツールのインストール」を参照してください。

  • 次に、Oracle JETコマンドライン・インタフェース・パッケージ(ojet-cli)を使用して、空白テンプレートまたは必要に応じて変更可能な事前構成済の完全なアプリケーションのいずれかを含むWebアプリケーションをスキャフォールドします。

  • アプリケーションをスキャフォールドしたら、ojet-cliを使用してアプリケーションをビルドし、それをローカルWebブラウザに提供して、デプロイメントの準備ができたパッケージを作成できます。

Webアプリケーションの同一HTMLドキュメントにコンポーネントを追加する場合に、Oracle JETの複数のバージョンを使用しないでください。Oracle JETでは、同じWebページで複数のバージョンのOracle JETコンポーネントを実行することをサポートしていません。

Webアプリケーションのスキャフォールド

Oracle JETコマンドライン・インタフェース(CLI)を使用して、空白テンプレートを含むアプリケーション、または基本レイアウトやナビゲーション・バー、ナビゲーション・ドロワーで事前構成されたスタータ・テンプレートを含むアプリケーションをスキャフォールドします。各スタータ・テンプレートは、レスポンシブWebアプリケーション向けに最適化されています。また、スタータ・テンプレートは、TypeScriptでアプリケーションを作成する場合にTypeScript開発をサポートします。スキャフォールドした後、必要に応じてアプリケーションを変更できます。

CLIを使用して最初のOracle JET Webアプリケーションを作成する前に、前提条件パッケージをインストールする必要もあります(まだインストールしていない場合)。詳細は、「Oracle JETツールのインストール」を参照してください。

Oracle JET Webアプリケーションをスキャフォールドするには:
  1. コマンド・プロンプトで、オプション引数を指定してojet createを入力し、Oracle JETアプリケーションおよびスキャフォールディングを作成します。
    ojet create [directory]
            [--template={template-name:[web]|template-url|template-file}] 
            [--typescript]
            [--use-global-tooling]
            [--help]

    ヒント:

    ターミナル・プロンプトでojet helpと入力して、Oracle JET CLIのその他のヘルプを取得することができます。

    たとえば、次のコマンドはWebバージョンのnavbarテンプレートを使用して、my-web-appディレクトリにWebアプリケーションを作成します: 

    ojet create my-web-app --template=navbar

    同じスタータ・テンプレートを使用するが、TypeScriptバージョン5.3.2の開発をサポートするWebアプリケーションをスキャフォールドするには、--typescript引数をコマンドに追加します: 

    ojet create my-web-app --template=navbar --typescript

    アプリケーション・ディレクトリにローカルにインストールするのではなく、グローバルにインストールされた@oracle/oraclejet-toolingを使用するWebアプリケーションをスキャフォールドするには、次のコマンドを入力します: 

    ojet create my-web-app --use-global-tooling
  2. 確認されるまで待ちます。

    スキャフォールディングが完了するまでに、少し時間がかかる場合があります。成功すると、コンソールに次のように表示されます:

    Oracle JET: Your app is ready! Change to your new app directory my-web-app and try ojet build and serve...
  3. 開発環境で、アプリケーションのコードを更新します。

    ヒント:

    スキャフォールディング時に空白テンプレートを選択した場合も、同じプロセスに従ってクックブックのサンプルまたはその他のコンテンツをアプリケーションに追加できます。ただし、適切なビュー・テンプレートまたはviewModelスクリプトはユーザーが作成する必要があります。

Webアプリケーションのojet createコマンド・オプションについて

Oracle JET Webアプリケーションおよびスキャフォールディングを作成するには、オプション引数を指定してojet createを使用します。

次の表では、使用可能なojet createコマンドのオプションを説明し、その使用例を示します。

オプション 説明

directory

アプリケーションの場所。指定しない場合、アプリケーションは現在のディレクトリに作成されます。ディレクトリがまだ存在しない場合は、スキャフォールド中に作成されます。

template

アプリケーションに使用するテンプレート。次のいずれかを指定します。

  • template-name

    事前定義テンプレート。blank、basic、navbarまたはnavdrawerを入力します。指定しない場合は、blankにデフォルト設定されます。

  • template-URL

    圧縮されたアプリケーションの名前を含むzipファイルのURL: http://path-to-app/app-name.zip。

  • template-file

    圧縮されたアプリケーションの名前を含むローカル・ファイル・システムのzipファイルへのパス: "path-to-app/app-name.zip"。たとえば: 
    --template="C:\Users\SomeUser\app.zip"
--template="/home/users/SomeUser/app.zip"
--template="~/projects/app.zip"

    srcフォルダがzipファイルに存在する場合、すべてのコンテンツはアプリケーションのsrcディレクトリ内に配置されますが、scriptフォルダはルートに残されます。srcフォルダが存在しない場合、zipファイルのコンテンツは新しいアプリケーションのルートに配置されます。

use-global-tooling

指定しない場合、Oracle JET CLIによりOracle JETツールがappRootDir/node_modules/@oracleにインストールされ、次の開発依存関係がアプリケーションのpackage.jsonファイルに現れます。 

"devDependencies": {
    "@oracle/oraclejet-tooling": "https://.../ojet-dev-local/oracle-oraclejet-tooling-16.0.0.tgz"
  },

異なるバージョンのJET (11.0.0、10.1.0など)を使用するJETアプリケーションを操作する場合は、JETツールをアプリケーションでローカルにインストールすることをお薦めします。

ojet create my-web-app --use-global-toolingを使用してアプリケーションをスキャフォールドする場合、スキャフォールドされたアプリケーションではグローバルにインストールされたツールが使用されます。Windowsコンピュータでは、グローバルにインストールされたツールは、C:\Users\...\AppData\Roaming\npm\node_modules\@oracle\ojet-cli\node_modules\@oracle\oraclejet-toolingのようなディレクトリにあります。

webpack

Webpackを使用するアプリケーションをスキャフォールドする場合は、--webpackを指定します。「Oracle JETアプリケーション開発でのWebpackの使用」を参照してください。

installer デフォルトのノード・パッケージ・マネージャ(npm)ではなくYarnパッケージ・マネージャを使用してアプリケーションをスキャフォールドする場合は、--installer=yarnを指定します。「Yarnパッケージ・マネージャ」を参照してください。

help

使用方法やオプションなど、ojet createコマンドのマニュアル・ページが表示されます: ojet create --help。

Webアプリケーションのスキャフォールディングについて

スキャフォールディングは、Oracle JETコマンドライン・インタフェース(CLI)で使用するプロセスで、空白テンプレートを含むアプリケーション、または基本レイアウトやナビゲーション・バー、ナビゲーション・ドロワーで事前構成されたテンプレートを含むアプリケーションを作成します。事前構成された各テンプレートは、レスポンシブWebアプリケーション向けに最適化されています。スキャフォールドした後、必要に応じてアプリケーションを変更できます。

次の図に、事前構成済スタータ・テンプレートの違いを示します。空白テンプレートにはindex.htmlファイルが含まれますが、UI機能は含まれません。basic:webテンプレートは空白テンプレートに似ていますが、画面サイズが変更されたときに表示を調整するレスポンシブ・スタイルが追加されます。navbar:webおよびnavdrawer:webテンプレートは、サンプル・コンテンツを含んでいます。また、レイアウト、ナビゲーションおよびスタイルのベスト・プラクティスに従ったものになっており、これらは必要に応じて変更することもできます。

gs_web_templates.pngの説明が続きます
図gs_web_templates.pngの説明

スキャフォールディング後、次のタスクを実行してアプリケーションをカスタマイズできます:

Webアプリケーションのファイル構造について

Oracle JETスキャフォールディング・プロセスでは、アプリケーションの必要に応じて変更するファイルとフォルダが作成されます。

新規アプリケーションのディレクトリ構造は、次の図で示すようになります。

gs_web_directory.jpgの説明が続きます
図gs_web_directory.jpgの説明

アプリケーション・フォルダには、アプリケーションおよび構成ファイルが含まれており、独自のアプリケーションに対して必要に応じて変更します。

ディレクトリまたはファイル 説明

node_modules

ツールで使用されるNode.jsモジュールが含まれます。

scripts

テンプレート・フック・スクリプトが含まれ、これらを変更してアプリケーションの新しいビルド・ステップと処理ステップを定義できます。「Webアプリケーション・ツールのワークフローのカスタマイズ」を参照してください

src

アプリケーションのサイト・ルート。アプリケーション・ファイルが含まれています。これらは独自のアプリケーションの必要に応じて変更でき、ソース・コントロールにコミットする必要があります。

コンテンツは、選択したテンプレートによって様々です。各テンプレートには、空白のテンプレートでも、index.htmlファイルとmain.js RequireJSブートストラップ・ファイルが含まれます。

その他のテンプレートには、ビュー・テンプレートおよびコンテンツが事前に移入されたviewModelスクリプトが含まれる場合があります。たとえば、作成時にnavbarテンプレートを指定した場合、js/viewsおよびjs/viewModelsフォルダには、ナビゲーションにnav barを使用するWebアプリケーション用のテンプレートおよびスクリプトが含まれます。

.gitignore

GITリポジトリを使用してアプリケーション・ソースをチェックインする場合に無視するアプリケーション・フォルダのルールを定義します。GITリポジトリを使用しないユーザーはojet stripを使用して、Oracle JETによって常に再生成されるコンテンツをチェックインしないようにできます。このファイルは、ojet stripコマンドが依存しているため、削除できません。

oraclejetconfig.json

デフォルトのソースおよびステージング・ファイル・パスが含まれ、アプリケーションのファイル構造を変更する必要がある場合に変更できます。

package.json

npm依存性とプロジェクト・メタデータを定義します。

スキャフォールディング後、次のタスクを実行してアプリケーションをカスタマイズできます:

Webアプリケーションのファイル構造の変更

デフォルトの構造がニーズを満たさない場合は、スキャフォールドされたアプリケーションのファイル構造を変更できます。

アプリケーションの最上位ディレクトリにあるoraclejetconfig.jsonには、変更可能な、デフォルトのソースおよびステージング・ファイル・パスが含まれています。 

{
  "paths": {
    "source": {
      "common": "src",
      "web": "src-web",
      "hybrid": "src-hybrid",
      "javascript": "js",
      "typescript": "ts",
      "styles": "css",
      "themes": "themes"
    },
    "staging": {
      "web": "web",
      "hybrid": "hybrid",
      "themes": "themes"
    }
  },
  "defaultBrowser": "chrome",
  "sassVer": "8.0.0",
  "defaultTheme": "redwood",
  "architecture": "mvvm",
  "generatorVersion": "16.0.0"
}

architectureプロパティの値など、oraclejetconfig.jsonファイルのその他のエントリは、アプリケーション・アーキテクチャに適した方法でアプリケーション・ソースを処理するためにOracle JETツールで使用されます。このプロパティの値は変更しないでください。

Webアプリケーションのファイル構造を変更するには:

  1. アプリケーションの最上位ディレクトリで、編集のためにoraclejetconfig.jsonを開きます。
  2. oraclejetconfig.jsonで、必要に応じてパスを変更し、ファイルを保存します。

    たとえば、デフォルトのstylesパスをcssからapp-cssに変更する場合は、oraclejetconfig.jsonで次の行を編集します。 

    "styles": "app-css"
  3. アプリケーションに必要な場合はディレクトリの名前を変更します。必ず、oraclejetconfig.jsonにリストされているパスのみを変更するようにします。
    たとえば、oraclejetconfig.json内でstylesをapp-cssに変更した場合は、アプリケーションのcssディレクトリをapp-cssに変更します。
  4. 変更したパスを参照するために必要な場合は、アプリケーション・ファイルを更新します。

    たとえば、アプリケーションのCSSへのパスをapp-cssに変更した場合は、アプリケーションのindex.html内でリンクを適切に更新します。 

    <link rel="icon" href="app-css/images/favicon.ico" type="image/x-icon" />

    <!-- This is the main css file for the default theme -->
    <!-- injector:theme -->
    <link rel="stylesheet" href="app-css/libs/oj/v16.0.0/redwood/oj-redwood-min.css" type="text/css"/>
    <!-- endinjector -->
  5. コマンド・プロンプトで、アプリケーションのルート・ディレクトリから、アプリケーションをビルドして新しいパスを使用します。
    ojet build

WebアプリケーションへのプログレッシブWebアプリケーション・サポートの追加

JET Webアプリケーションにアクセスするデバイスでネイティブのようなモバイル・アプリケーションのエクスペリエンスをユーザーに提供する場合は、JET WebアプリケーションにプログレッシブWebアプリケーション(PWA)サポートを追加します。

ojet add pwaコマンドを使用して、サービス・ワーカー・スクリプトとWebマニフェストの両方をJET Webアプリケーションに追加します。これらのアーティファクトをカスタマイズして、PWAとしてアクセスした場合のJET Webアプリケーションの動作を決定できます。

PWAサポートをWebアプリケーションに追加するには:
  1. ターミナル・プロンプトで、アプリケーションの最上位ディレクトリから次のコマンドを入力して、JET WebアプリケーションにPWAサポートを追加します:
    ojet add pwa

コマンドを実行すると、Oracle JETツールによってJET Webアプリケーションに次の変更が加えられます:

  • 次の2つのファイルをアプリケーションのsrcフォルダに追加します:
    • manifest.json

      このファイルは、JET WebアプリケーションでのPWAサポートと、ユーザーのデスクトップまたはモバイル・デバイスにインストールされた場合の動作をブラウザに示します。このファイルを使用して、ユーザーのデバイスに表示するアプリケーション名とデバイス固有のアイコンを指定します。このファイルで指定できるプロパティの詳細は、Webアプリケーション・マニフェストの追加に関するページを参照してください。

    • sw.js

      これは、ブラウザがバックグラウンドで実行するサービス・ワーカー・スクリプトです。このファイルを使用して、PWAサービス・ワーカーがインストールされている場合にユーザーのデバイスにキャッシュする、JETアプリケーションからの追加リソースを指定します。デフォルトでは、JETはキャッシュする次のリソースを指定します:

      const resourcesToCache = [
  'index.html',
  'manifest.json',
  'js/',
  'css/'
];
  • マニフェスト・ファイルおよびサービス・ワーカー・スクリプトをJET Webアプリケーションの./src/index.htmlファイルに登録します:
    <html lang="en-us">
  <head>
  ...
  <link rel="manifest" href="manifest.json">
</head>
...
<script type="text/javascript">
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js').then(function(registration) { 
      // Registration was successful 
      console.log('myPWAapp ServiceWorker registration successful with scope: ', registration.scope); 
    }).catch(function(err) {
    // registration failed 
      console.log('myPWAapp ServiceWorker registration failed: ', err);
    });
  }
</script>
</body>

この変更により、Android端末などのモバイル・デバイスのユーザーは、ChromeブラウザでURLからJET Webアプリケーションにアクセスし、端末のホーム画面にアプリケーションを追加した後は、端末上の他のアプリケーションと同様に起動できるようになります。PWAに対するブラウザとプラットフォームのサポートは統一されていないことに注意してください。最適なエクスペリエンスを確保するには、PWA対応のJET Webアプリケーションをユーザーのターゲット・プラットフォーム(Android、iOSなど)およびブラウザ(Chrome、Safariなど)でテストします。

PWA対応のJET Webアプリケーションおよびサービス・ワーカーにはHTTPSが必要です。PWA対応のJET Webアプリケーションをデプロイする本番環境では、アプリケーションがHTTPSを介して提供されます。開発中にJET WebアプリケーションをHTTPS対応サーバーに提供する場合は、「自己署名証明書を使用したHTTPSサーバーでのWebアプリケーションの処理」を参照してください。

Webアプリケーションのビルド

Oracle JETコマンドライン・インタフェース(CLI)を使用して、ブラウザに提供する前に、Webアプリケーションの開発バージョンを作成します。このステップはオプションです。

アプリケーションのルート・ディレクトリに移動し、ojet buildコマンドを使用してアプリケーションをビルドします。 

ojet build [--cssvars=enabled|disabled 
            --theme=themename
            --themes=theme1,theme2,...
            --sass]

ヒント:

ターミナル・プロンプトでojet helpと入力して、特定のOracle JET CLIオプションに関するヘルプを取得することができます。
コマンドは完了に時間がかかることがあります。成功すると、次のメッセージが表示されます。 
Done.

また、このコマンドは、ビルドされたコンテンツを含むWebフォルダをアプリケーションのルートに作成します。

ノート:

また、--releaseオプションを指定してojet buildコマンドを使用すると、アプリケーションのリリース対応バージョンをビルドすることもできます。詳細は、「Webアプリケーションのパッケージ化」を参照してください。

Webアプリケーションのojet buildコマンド・オプションについて

ブラウザに提供する前にWebアプリケーションの開発バージョンを作成するには、オプション引数を指定してojet buildコマンドを使用します。

次の表では、使用可能なオプションを説明し、その使用例を示します。

オプション 説明

--theme

アプリケーションに使用するテーマ。テーマのデフォルトはredwoodです。

また、「Oracle JETのCSS変数およびカスタム・テーマについて」で説明しているように、別のthemenameをカスタム・テーマとして入力することもできます。

--themes

カンマで区切られた、アプリケーションに含むテーマ。

前述のとおりに--themeフラグを指定しない場合は、Oracle JETにより、デフォルト・テーマとして、--themesで指定した最初の要素が使用されます。

--cssvars

「Oracle JETのCSS変数およびカスタム・テーマについて」の説明に従って、CSS変数をオーバーライドしてRedwoodテーマをカスタマイズする際に、CSSカスタム・プロパティの使用をサポートするCSSファイルにRedwoodテーマを挿入します。

--sass

Sassコンパイルを管理します。Sassを追加して--themeまたは--themesオプションを指定すると、Sassコンパイルがデフォルトで実行され、--sass=falseまたは--no-sassを使用すると、Sassコンパイルをオフにすることができます。

Sassを追加し、themeオプションを指定しない場合、Sassコンパイルはデフォルトでは発生せず、有効にするには--sass=trueまたは--sassを指定する必要があります。

Webアプリケーションの提供

ojet serveを使用して、テストおよびデバッグのためにWebアプリケーションをローカルWebサーバーで実行します。デフォルトで、アプリケーション・コードに加えた変更がブラウザに即時に反映されるOracle JETライブ・リロード・オプションが有効です。

ターミナル・プロンプトからWebアプリケーションを実行するには:
  1. ターミナル・プロンプトで、アプリケーションのルート・ディレクトリに移動し、オプションの引数を指定してojet serveコマンドを使用し、アプリケーションを起動します。
    ojet serve [--server-port=server-port-number --livereload-port=live-reload-port-number
            --livereload
            --sass
            --build
            --cssvars=enabled|disabled
            --theme=themename --themes=theme1,theme2,...
            --server-only
           ]
    たとえば、次のコマンドは、デフォルトのWebブラウザでライブ・リロードを有効にしてアプリケーションを起動します。
    ojet serve
  2. srcフォルダで必要なコード変更を行うと、--no-livereloadフラグを設定しないかぎり、ブラウザが自動的に更新されて変更が反映されます。

    アプリケーションの実行中は、ターミナル・ウィンドウが開いたままになり、監視タスクがアプリケーションの変更を待機しています。たとえば、src/js/views/dashboard.htmlのコンテンツを変更すると、監視タスクによって、次に示すようにWindowsデスクトップ上のターミナルで変更が反映されます。 

    Starting watcher...
Listening on port 35729...
Server ready: http://localhost:8000
Watching files....
Watcher: sass is ready...
Watcher: sourceFiles is ready...
Watcher: themes is ready...
Changed: c:\web-app-navbar\src\js\views\dashboard.html
Page reloaded resume watching...
  3. プロセスを終了するには、アプリケーションを閉じて、ターミナル・プロンプトで[Ctrl]キーを押しながら[C]キーを押します。プロセスを終了するには、[Ctrl]キーを押しながら[C]キーを押す操作を数回実行する必要がある場合があります。

ojet serveコマンドは、特定のプラットフォームおよびカスタム・テーマでアプリケーションを実行するために使用できる様々なオプションの引数をサポートします。また、JETアプリケーションの開発が終了したら、--releaseオプションを指定したojet serveコマンドを使用し、アプリケーションのリリース対応バージョンを提供します。「Webアプリケーションのパッケージ化」を参照してください。

サポートされているojet serveオプションの詳細なヘルプを表示するには、ターミナル・プロンプトでojet serve --helpと入力します。

ojet serveコマンド・オプションとExpressミドルウェア関数について

ojet serveを使用して、テストおよびデバッグのためにWebアプリケーションをローカルWebサーバーで実行します。

次の表では、使用可能なojet serveのオプションを説明し、その使用例を示します。

Oracle JETツールでは、Node.js Webアプリケーション・フレームワークであるExpressを使用して、ojet serveの実行時にWebアプリケーションを設定およびホストします。すぐに使用できるojet serveオプションが要件を満たしていない場合は、Express構成オプションを追加するか、Oracle JETのbefore_serve.jsフック・ポイントにExpressミドルウェア関数を記述できます。Express構成オプションを追加する方法を示す例は、「自己署名証明書を使用したHTTPSサーバーでのWebアプリケーションの処理」を参照してください。

before_serveフック・ポイントは、既存のミドルウェアを置換するか、既存のミドルウェアの前にミドルウェア関数を追加するかを決定するオプションを提供します。通常、Webアプリケーションを提供した後もライブ・リロードが引き続き機能するようにする場合は、記述するミドルウェア関数(preMiddleware)を付加します。ライブ・リロードは、Oracle JETツールが使用する最初のミドルウェアです。ライブ・リロードなどの後続のミドルウェア関数をExpressインスタンスで起動する場合は、記述するミドルウェア関数の引数としてnext関数を使用する必要があります。要約すると、次のいずれかの引数を使用して、Expressミドルウェア関数を実行するタイミングを決定します:

  • preMiddleware: デフォルトのOracle JETツール・ミドルウェアの前に実行します。デフォルトのOracle JETツール・ミドルウェアは、connect-livereload、serve-staticおよびserve-indexで構成され、この順序で実行されます。
  • postMiddleware: デフォルトのOracle JETツール・ミドルウェアの後に実行します。
  • middleware: デフォルトのOracle JETツール・ミドルウェアを置き換えます。ミドルウェアの実行順序を厳密に制御する必要がある場合に使用します。Oracle JETツールによって以前に追加されたすべてのデフォルト・ミドルウェアを再定義する必要があります。
オプション 説明

server-port

サーバーのポート番号。値を指定しない場合は、デフォルトで8000に設定されます。

livereload-port

ライブ・リロード・ポート番号。値を指定しない場合は、デフォルトで35729に設定されます。

livereload

ライブ・リロード機能を有効にします。ライブ・リロードはデフォルトで有効になっています(--livereload=true)。

ライブ・リロード機能を無効にするには、--livereload=falseまたは--no-livereloadを使用します。

ライブ・リロードの無効化が役立つのは、IDEで作業していて、更新したアプリケーションのロードにそのIDEのメカニズムを使用する場合です。

また、oraclejetconfig.jsonファイルのwatchIntervalプロパティの値を構成して、ライブ・リロード機能でOracle JETプロジェクトの更新をポーリングする間隔を構成することもできます。デフォルト値は1000ミリ秒です。

build

アプリケーションを提供する前に作成します。デフォルトでは、アプリケーションは提供する前に作成されます(--build=true)。

アプリケーションがすでに作成されており、提供のみ行う場合は、--build=falseまたは--no-buildを使用して作成を抑制します。

theme

アプリケーションに使用するテーマ。テーマのデフォルトはredwoodです。

themes

カンマで区切られた、アプリケーションに使用するテーマ。

前述のとおりに--themeフラグを指定しない場合は、Oracle JETにより、デフォルト・テーマとして、--themesで指定した最初の要素が使用されます。そうでない場合は、Oracle JETにより、--themeで指定したテーマを使用してアプリケーションが提供されます。

server-only

ブラウザに提供するときのようにアプリケーションが提供されますが、ブラウザは起動されません。このオプションは、クラウドベースの開発環境で開発マシンに提供されたアプリケーションにブラウザをアタッチできるようにするために使用します。

自己署名証明書を使用したHTTPSサーバーでのWebアプリケーションの処理

Webアプリケーションが、Oracle JETのojet serveコマンドで使用されるデフォルトのHTTPサーバーではなく、HTTPSサーバーで処理されるよう、JET CLIツールをカスタマイズできます。

これは、たとえば開発環境を、Webアプリケーションが最終的にデプロイされる本番環境により近いものにする場合に行います。本番環境にデプロイされたWebアプリケーションへのリクエストは、SSL対応のHTTPサーバー(HTTPS)で処理されます。

この動作を実装するには、Webアプリケーション・ディレクトリに証明書をインストールする必要があります。また、次の操作を行うためには、before_serve.jsフックを構成する必要があります:

  • 処理対象のWebアプリケーションをホストするExpressのインスタンスを作成する。

  • 作成したExpressインスタンスでHTTPSを設定する。HTTPSプロトコルを指定し、アプリケーション・ディレクトリに配置した自己署名証明書の場所を特定して、パスワードを指定します。
  • 変更したExpressインスタンスおよびSSL対応サーバーをJETツールに渡し、ojet serveがOracle JETツールによって用意された、すぐに使用可能なミドルウェア構成ではなく、ユーザーのミドルウェア構成を使用するようにする。
  • WebアプリケーションがHTTPSサーバーで処理されるときにライブ・リロードが機能するよう、ライブ・リロード・サーバーのインスタンスも作成し、SSLを使用するよう構成する。

認証局が発行した証明書を使用できない場合は、独自の証明書(自己署名証明書)を作成できます。OpenSSL、Macのキーチェーン・アクセス、Java Development Kitのkeytoolユーティリティなどのツールを使用して、このタスクを実行できます。たとえば、Git for Windowsに付属のGit Bashシェルを使用して、次のコマンドを実行し、OpenSSLツールで自己署名証明書を作成できます:

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

使用する自己署名証明書を取得したら、アプリケーションのディレクトリにインストールします。たとえば、前のコマンドで生成された2つのファイルをアプリケーションのルート・ディレクトリに配置します:

...
.gitignore
cert.pem
key.pem
node_modules
...

アプリケーションに自己署名証明書をインストールしたら、before_serveフック・ポイントのスクリプトを構成します。これを行うには、エディタでAppRootDir/scripts/hooks/before_serve.jsを開き、次の構成例のコメントに従って構成します。 


'use strict';

module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
    console.log("Running before_serve hook.");

    // Create an instance of Express, the Node.js web app framework that Oracle 
    // JET tooling uses to host the web apps that you serve using ojet serve
    const express = require("express");

    // Set up HTTPS 
    const fs = require("fs");
    const https = require("https");
    
    // Specify the self-signed certificates. In our example, these files exist 
    // in the root directory of our project.
    const key = fs.readFileSync("./key.pem");
    const cert = fs.readFileSync("./cert.pem");
    // If the self-signed certificate that you created or use requires a 
    // password, specify it here:
    const passphrase = "1234";

    const app = express();

    // Pass the modified Express instance and the SSL-enabled server to the Oracle JET tooling
    configObj['express'] = app;
    configObj['urlPrefix'] = 'https';
    configObj['server'] = https.createServer({
      key: key,
      cert: cert,
      passphrase: passphrase
    }, app);

    // Enable the Oracle JET live reload option using its default port number so that
    // any changes you make to app code are immediately reflected in the browser after you
    // serve it
    const tinylr = require("tiny-lr");
    const lrPort = "35729";

    // Configure the live reload server to also use SSL
    configObj["liveReloadServer"] = tinylr({ lrPort, key, cert, passphrase });

    resolve(configObj);
  });
};

この構成ステップが完了したら、Webアプリケーションのビルドや処理で普段実行する一連のコマンド(ojet buildやojet serveなど)を実行します。使用している証明書は、認証局が発行した証明書ではなく自己署名証明書であるため、Webアプリケーションへの初回アクセス時には、Webアプリケーションへのアクセスに使用するブラウザに警告が表示されます。警告を確認し、Webアプリケーションへのアクセスを許可するオプションをクリックします。たとえば、Google Chromeでは、Webアプリケーションがhttps://localhost:8000/で処理される場合、「詳細設定」、「localhostにアクセスする(安全ではありません)」の順にクリックします。

ブラウザでWebアプリケーションが開くと、HTTPSプロトコルが使用されていることがわかり、認証局からの証明書を使用していないため、接続が安全ではないことを示すインジケータが表示されています。また、証明書情報を表示して、作成した自己署名証明書であることを確認することも可能です。Google Chromeで、「保護されていない通信」、「証明書」の順にクリックして証明書情報を表示します。

httpsserver.pngの説明が続きます
図httpsserver.pngの説明

before_serveフック・ポイントは、Oracle JETアプリケーションのツール・ワークフローのカスタマイズに使用できる一連のスクリプト・フック・ポイントの1つです。「Webアプリケーション・ツールのワークフローのカスタマイズ」を参照してください。

パスベースのルーティングを使用したWebアプリケーションの処理

Oracle JETアプリケーションでは、デフォルトでパラメータベースのルーティングが使用されます。いくつかの変更をすると、かわりにパスベースのルーティングを使用できます。

パラメータ・ベースのルーティングでは、ユーザーのブラウザに表示されるURLがわかりにくい場合や覚えにくい場合があります。たとえば、navbarテンプレートを使用するJETアプリケーションでは、ローカルで処理された場合、次のURLがブラウザに表示されます:

  • http://localhost:8000/?ojr=dashboard
  • http://localhost:8000/?ojr=incidents

一方、同じアプリケーションでも、パスベースのルーティングを使用するよう構成されている場合は、アプリケーションで「ダッシュボード」または「インシデント」ページが表示される際、次のURLが使用されます:

  • http://localhost:8000/dashboard
  • http://localhost:8000/incidents

この動作を実装するには、クライアントからページに対するリクエストを受信した場合は、リクエストの処理前にURLを書き換えるよう、JETアプリケーションを構成する必要があります。具体的には、次のことを行う必要があります:

  • アプリケーションがパラメータとして処理されるベースURLを取得するUrlPathAdapterクラスのインスタンスを作成し、アプリケーションがパスベースのルーティングを使用するようappController.jsファイルを更新します。
  • 次の操作を行うために、before_serve.jsフックを構成します:
    • Express関数を記述して、リクエストされたURLのパスを調べます。一般的なファイル拡張子(.js、.tsなど)に対するリクエストの場合、そのリクエストはExpressインスタンスによって処理されますが、その他のリクエストはアプリケーションのindex.htmlファイルに渡され、JETのCoreRouterで管理されます。
    • Oracle JETツールで使用されるデフォルトのミドルウェア(ライブ・リロードなど)の前に新しいExpressミドルウェア関数が起動されるように、before_serve.jsフック・ポイントのconfigObj['preMiddleware']オプションを使用して記述するExpressミドルウェア関数を起動します。

アプリケーションがパスベースのルーティングを使用するようappController.jsファイルを更新するには、エディタでAppRootDir/src/js/appController.jsを開き、次の構成例のコメントの説明に従って構成します。 


// Replace the entries that the JET tooling generates for 'ojs/ojurlparamadapter' and UrlParamAdapter 
// with entries for 'ojs/ojurlpathadapter' and UrlPathAdapter
define(... 'ojs/ojurlpathadapter', 'ojs/ojarraydataprovider', 'ojs/ojknockouttemplateutils', 'ojs/ojmodule-element', 'ojs/ojknockout'],
  function(... UrlPathAdapter, ArrayDataProvider, KnockoutTemplateUtils) {   
....
let baseUrl = "/";
       let router = new CoreRouter(navData, {
        urlAdapter: new UrlPathAdapter(baseUrl)
      });
      router.sync();
....

before_serveフック・ポイントのスクリプトを構成するには、エディタでAppRootDir/scripts/hooks/before_serve.jsを開き、次の構成例のコメントに従って構成します。 


'use strict';

module.exports = function (configObj) {

    /* Write an Express middleware function to inspect the path of the requested 
    URL. If the request is for any of the extensions (js, ts, and so on), 
    the Express instance handles these requests while other requests are
    passed to the app’s index.html file for the JET CoreRouter to manage. 
    */
  function urlRewriteMiddleware(req, res, next) {
    const matchStaticFiles = req.url.match(/\/(js|css)\/.*/);
    req.url = matchStaticFiles ? matchStaticFiles[0] : '/index.html';
    next();
  }
  return new Promise((resolve, reject) => {
    /* Call the Express middleware function that inspects the URL to rewrite 
       and prepend it to JET’s default middleware so that other options provided 
       by JET’s default middleware, such as live reload continue to work. 
    */	    	
    configObj['preMiddleware'] = [urlRewriteMiddleware]
    resolve(configObj);
  });
};

Webアプリケーション・ツールのワークフローのカスタマイズ

Oracle JETツールで定義されているフック・ポイントを使用すると、ツールのワークフローで実行する新しいステップを定義する場合に、ユーザー記述のスクリプト・コードを使用して、JETビルド・プロセスと提供プロセスの動作をカスタマイズできます。

アプリケーションの作成時、Oracle JETツールによって/scripts/hooksアプリケーション・サブフォルダにスクリプト・テンプレートが生成されます。Oracle JETツールのワークフローをカスタマイズするには、ビルド・プロセスと提供プロセス中に特定のフック・ポイントでツールに実行させる必要があるスクリプト・コードを使用して、生成済のテンプレートを編集します。カスタム・フック・ポイント・スクリプトが作成されていない場合、Oracle JETツールはスクリプト・テンプレートを無視して、ビルド・プロセスと提供プロセスのデフォルトのワークフローを実行します。

ビルド・プロセスまたは提供プロセスのワークフローをカスタマイズするには、特定のフック・ポイントの名前が付いた生成済のスクリプト・テンプレートを編集します。たとえば、ツールのビルド・プロセスの開始時にスクリプトをトリガーするには、ビルドが開始される前にトリガーされるフック・ポイントの名前が付いたbefore_build.jsスクリプトを編集します。そのフックポイントの名前はbefore_buildです。

したがって、Oracle JETツールのワークフローで実行するビルド・プロセスと提供プロセスをカスタマイズする場合、ユーザーはカスタマイズ・スクリプトを記述する前に次の詳細情報を把握している必要があります。

  • カスタマイズするOracle JETのビルド・モードまたは提供モード:

    • デバッグ — アプリケーションのビルド時または提供時のデフォルト・モードで、ビルドされたアプリケーションのソース・コードが生成されます。

    • リリース — --releaseオプションを指定してアプリケーションをビルドする場合のモードで、リリース対応アプリケーションの縮小されたバンドル・コードが生成されます。

  • カスタマイズをトリガーする適切なフック・ポイント。

  • カスタマイズするデフォルトのフック・スクリプト・テンプレートの場所。

Webアプリケーションのスクリプト・フック・ポイントについて

Oracle JETのフック・システムでは様々なスクリプト・トリガー・ポイント(フック・ポイントとも呼ばれる)が定義されており、これを使用して各種コマンドライン・インタフェース・プロセスでの作成、ビルド、提供、パッケージ化およびリストア・ワークフローをカスタマイズできます。カスタマイズは、スクリプト・ファイルと、特定のフック・ポイントに対してトリガーするスクリプト・コードに依存します。

次の表は、フック・ポイントおよびフック・ポイントがOracle JETツールの作成、ビルド、提供およびリストア・プロセスでサポートしているワークフローのカスタマイズを示しています。特に記載がないかぎり、ビルドおよび提供プロセスのフック・ポイントはデバッグ・モードとリリース・モードの両方をサポートします。

フック・ポイント サポートされるツール・プロセス 説明

after_app_create

作成

このフック・ポイントは、ツールによってアプリケーション作成プロセスが終結された直後に、デフォルト名after_app_create.jsのスクリプトをトリガーします。

after_app_restore

リストア

このフック・ポイントは、ツールによってアプリケーション・リストア・プロセスが終結された直後に、デフォルト名after_app_restore.jsのスクリプトをトリガーします。

before_build

ビルド

このフック・ポイントは、ツールによってビルド・プロセスが開始される直前に、デフォルト名before_build.jsのスクリプトをトリガーします。

before_release_build

ビルド(リリース・モードのみ)

このフック・ポイントは、縮小化ステップとRequirejsのバンドル・ステップが発生する前に、デフォルト名before_release_build.jsのスクリプトをトリガーします。

before_app_typescript

ビルド/提供

このフック・ポイントは、ビルド・プロセスまたは提供プロセスのステップが発生した後で、アプリケーションがトランスパイルされる前に、デフォルト名before_app_typescript.jsのスクリプトをトリガーします。このフックを使用して、アプリケーションのtsconfig.jsonコンパイラ構成ファイルで定義されるTypeScriptコンパイラ・オプションを更新、追加または削除します。フック・システムは、変更済のtsconfigオブジェクトへの参照をTypeScriptコンパイラに渡します。このフック・ポイントに対するスクリプトは、TypeScriptアプリケーションでのみ使用できます。

after_app_typescript

ビルド/提供

このフック・ポイントは、ビルド・プロセスまたは提供プロセスのステップが発生した後で、before_app_typescriptフック・ポイントの実行直後にデフォルト名after_app_typescript.jsのスクリプトをトリガーします。このフックは、生成された.jsx出力のbabelを使用したコンパイルなど、さらに処理が必要なアプリケーションのエントリ・ポイントを提供します。このフック・ポイントに対するスクリプトは、TypeScriptアプリケーションでのみ使用できます。

before_component_typescript

ビルド/提供

このフック・ポイントは、ビルド・プロセスまたは提供プロセスのステップが発生した後で、コンポーネントがトランスパイルされる前に、デフォルト名before_component_typescript.jsのスクリプトをトリガーします。このフックを使用して、アプリケーションのtsconfig.jsonコンパイラ構成ファイルで定義されるTypeScriptコンパイラ・オプションを更新、追加または削除します。フック・システムは、変更済のtsconfigオブジェクトへの参照をTypeScriptコンパイラに渡します。このフック・ポイントに対するスクリプトは、TypeScriptアプリケーションでのみ使用できます。

after_component_typescript

ビルド/提供

このフック・ポイントは、ビルド・プロセスまたは提供プロセスのステップが発生した後で、before_component_typescriptフック・ポイントの実行直後にデフォルト名after_component_typescript.jsのスクリプトをトリガーします。このフックは、生成された.jsx出力のbabelを使用したコンパイルなど、さらに処理が必要なアプリケーションのエントリ・ポイントを提供します。このフック・ポイントに対するスクリプトは、TypeScriptアプリケーションでのみ使用できます。

before_injection

ビルド/提供

このフック・ポイントは、ツールによってビルド前のプロセスが終結された後で、CSSテーマをアプリケーションに挿入するタスクが実行される前に、デフォルト名before_injection.jsのスクリプトをトリガーします。つまり、このフック・ポイントは、ビルドのmain.js/index.html/themeインジェクション・プロセスをカスタマイズするためのエントリ・ポイントを提供します。

before_optimize

ビルド/提供(リリース・モードのみ)

このフック・ポイントは、リリース・モードのビルド/提供プロセスによってコンテンツが縮小される前に、デフォルト名before_optimize.jsのスクリプトをトリガーします。

before_component_optimize

ビルド/提供

このフック・ポイントは、ビルド/提供プロセスによってコンテンツが縮小される前に、デフォルト名before_component_optimize.jsのスクリプトをトリガーします。このフック・ポイントのスクリプトを使用して、特にWebコンポーネントを定義するプロジェクトのビルド・プロセスを変更できます。

after_build

ビルド

このフック・ポイントは、ツールによってビルド・プロセスが終結された直後に、デフォルト名after_build.jsのスクリプトをトリガーします。

after_component_create

ビルド

このフック・ポイントは、ツールによってWebコンポーネント作成プロセスが終結された直後に、デフォルト名after_component_create.jsのスクリプトをトリガーします。このフック・ポイントのスクリプトを使用して、特にWebコンポーネントを定義するプロジェクトのビルド・プロセスを変更できます。

after_component_build

ビルド(デバッグ・モードのみ)

このフック・ポイントは、ツールによってWebコンポーネントのビルド・プロセスが終結された直後に、デフォルト名after_component_build.jsのスクリプトをトリガーします。このフック・ポイントのスクリプトを使用して、特にWebコンポーネントを定義するプロジェクトのビルド・プロセスを変更できます。

before_serve

提供

このフック・ポイントは、Web提供プロセスがアプリケーションに接続して監視する前に、デフォルト名before_serve.jsのスクリプトをトリガーします。

after_serve

提供

このフック・ポイントは、すべてのビルド・プロセス・ステップが完了し、ツールによってアプリケーションが提供された後に、デフォルト名after_serve.jsのスクリプトをトリガーします。

before_watch

提供

このフック・ポイントは、ツールがアプリケーションを提供した後で、ツールがアプリケーションの変更を監視し始める前に、デフォルト名before_watch.jsのスクリプトをトリガーします。

after_watch

提供

このフック・ポイントは、ツールが監視を始めて、アプリケーションの変更を検出した後で、デフォルト名after_watch.jsのスクリプトをトリガーします。

after_component_package パッケージ このフック・ポイントは、ツールによってコンポーネントのパッケージ化プロセスが終結された直後に、デフォルト名after_component_package.jsのスクリプトをトリガーします。
before_component_package パッケージ このフック・ポイントは、ツールによってコンポーネントのパッケージ化プロセスが開始される直前に、デフォルト名before_component_package.jsのスクリプトをトリガーします。

スクリプト・フック・ポイントのプロセス・フローについて

Oracle JETのフック・システムでは様々なスクリプト・トリガー・ポイント(フック・ポイントとも呼ばれる)が定義されており、これを使用して各種コマンドライン・インタフェース・プロセスでの作成、ビルド、提供およびリストア・ワークフローをカスタマイズできます。

次の図は、作成プロセスのスクリプト・フック・ポイント・フローを示しています。

この図は、アプリケーションおよびコンポーネントの作成プロセスのフック・ポイントを示しています。

次の図は、ビルド・プロセスのスクリプト・フック・ポイント・フローを示しています。

この図は、アプリケーションおよびコンポーネントのビルド・プロセスのフック・ポイントを示しています。

次の図は、提供およびリストア・プロセスのスクリプト・フック・ポイント・フローを示しています。

この図は、アプリケーションおよびコンポーネントの提供およびリストア・プロセスのフック・ポイントを示しています。

hooksサブフォルダの場所の変更

アプリケーションの作成時、Oracle JETツールによって/scripts/hooksアプリケーション・サブフォルダにスクリプト・テンプレートが生成されます。開発作業では、たとえば、チーム開発に対応する場合など、フック・スクリプトを共通の場所に再配置することが必要になる場合があります。

デフォルトでは、スクリプト・パスが指定されている生成済のJSONファイル(hooks.json)を使用して、フック・システムがhooksサブフォルダ内のスクリプトを検索します。ツールがフック・ポイントに到達すると、hooks.jsonファイルを使用して検出された対応するスクリプトが実行されます。フック・スクリプトを共通の場所に再配置する場合は、次の例に示すように、hooks.jsonファイルを編集して、再配置したフック・スクリプトの新しい場所を指定する必要があります。 

{
    "description": "OJET-CLI hooks configuration file",
    "hooks": {
        "after_app_create": "scripts/hooks/after_app_create.js",
	...
        "after_serve": "http://example.com/cdn/common/scripts/hooks/after_serve.js "
    }
}

Webアプリケーションのフック・スクリプトの作成

フック・ポイント・スクリプトを作成して、Webアプリケーションの新しいコマンドライン・インタフェース・プロセス・ステップを定義できます。フック・スクリプトを作成するには、ツールのビルドおよび提供ワークフローで特定のフック・ポイントに関連付けられたフック・スクリプト・テンプレートを編集します。

Oracle JETのフック・システムでは様々なスクリプト・トリガー・ポイント(フック・ポイントとも呼ばれる)が定義されており、これを使用して各種ビルド・モードと提供モードでのビルドおよび提供ワークフローをカスタマイズできます。カスタマイズは、スクリプト・ファイルと、特定のフック・ポイントに対してトリガーするスクリプト・コードに依存します。スクリプト・コードを使用して変更する生成済のスクリプト・テンプレートには、対応するフック・ポイントの名前が付いています。

ビルド・プロセスまたは提供プロセスのワークフローをカスタマイズするには、特定のフック・ポイントの名前が付いた生成済のスクリプト・テンプレートを編集します。たとえば、ツールのビルド・プロセスの開始時にスクリプトをトリガーするには、ビルドが開始される前にトリガーされるフック・ポイントの名前が付いたbefore_build.jsスクリプトを編集します。そのフックポイントの名前はbefore_buildです。

基本的な例は、before_optimizeフックを使用した単純なカスタマイズを示しており、これにより、太字で表示されたRequireJSプロパティを制御して、アプリケーションのバンドル構成を変更できます。 

requirejs.config(
{
  baseUrl: "web/js",
  name: "main-temp",
  paths: {
  // injector:mainReleasePaths
    "knockout":"libs/knockout/knockout-3.x.x.debug",
    "jquery":"libs/jquery/jquery-3.x.x",
    "jqueryui-amd":"libs/jquery/jqueryui-amd-1.x.x",
     ...
  }
  // endinjector
  out: "web/js/main.js"
}
...

このフック・ポイントのスクリプトでは、次に示すようにbefore_optimizeスクリプト・テンプレートに1行追加できます。このカスタマイズ・スクリプト・ファイルを使用してデフォルトの場所にアプリケーションをビルドすると、ツールによって、requirejs.out()をコールする前にスクリプトがトリガーされ、outプロパティ設定がカスタム・ディレクトリ・パスに変更されます。その結果、アプリケーション生成のmain.jsは、デフォルトのweb/js/main.jsの場所ではなく、指定されたディレクトリに作成されます。 

module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
    console.log("Running before_optimize hook.");
    configObj.requirejs.out = 'myweb/js/main.js';
    resolve(configObj);
  });
};

パラメータとして多くのスクリプト・フック・ポイントに渡されるconfigObjの定義に関する詳細情報を取得するには、ビルド関連のフック・ポイントのいずれかで次の変更を行い、ojet buildを実行します。たとえば、before_build.jsフック・ポイントは次のように変更できます: 

module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
  	console.log("Running before_build hook.", configObj);
  	resolve(configObj);
   });
};

ojet buildコマンドを実行するコンソールには、configObjでカスタマイズできる使用可能なオプションが表示されます。 

Cleaning staging path.
Running before_build hook {
  buildType: 'dev',
  opts: {
    stagingPath: 'web',
    injectPaths: {
      startTag: '// injector:mainReleasePaths',
. . .

他の場所で、configObjを使用してフック・ポイントをカスタマイズする方法を示した例を参照してください。たとえば、すぐに使用できるojet serveオプションが要件を満たしていない場合は、Express構成オプションを追加したり、before_serve.jsフック・ポイントにExpressミドルウェア関数を記述します。「自己署名証明書を使用したHTTPSサーバーでのWebアプリケーションの処理」および「パスベースのルーティングを使用したWebアプリケーションの処理」を参照してください。

ヒント:

アプリケーション・パス・マッピングを変更する場合は、常にpath_mappings.jsonファイルを編集することをお薦めします。例外は、アプリケーションのランタイム・パス・マッピングをバンドル・プロセスで使用されるマッピングとは異なるものにする場合で、before_optimizeフック・スクリプトを使用してrequirejs.configのpathsプロパティを変更できます。

次の例は、after_buildフックを使用したより複雑なビルドのカスタマイズを示しています。このフック・スクリプトは、ビルド完了後のカスタマイズ・タスクを追加します。 

'use strict’;

const fs = require('fs');
const archiver = require('archiver');

module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
   console.log("Running after_build hook.");

    //Set up the archive
    const output = fs.createWriteStream('my-archive.war');
    const archive = archiver('zip');

    //Callbacks for the archiver
    output.on('close', () => {
      console.log('Files were successfully archived.');
      resolve();
    });
  
    archive.on('warning', (error) => {
      console.warn(error);
    });
  
    archive.on('error', (error) => {
      reject(error);
    });
  
    //Archive the web folder and close the file
    archive.pipe(output);
    archive.directory('web', false);
    archive.finalize();
  });
};

この例では、アプリケーションの作成時に生成されたデフォルト・フォルダ内にスクリプト・テンプレートが存在することを想定しています。アプリケーションをZIPファイルにパッケージ化することが目的です。パッケージ化はアプリケーションのビルド・プロセスが完了した後で発生するため、このスクリプトはafter_buildフック・ポイントに対してトリガーされます。このフック・ポイントに対して、変更済のスクリプト・テンプレートafter_build.jsにアプリケーションをZIP形式で圧縮するスクリプト・コードが挿入され、また、.jsファイルはデフォルトの場所にあるため、フック・システムの構成を変更する必要はありません。

ヒント:

Oracle JETツールでは、フック・ポイントが実行された時間をビルドおよび提供プロセスのメッセージ・ログに報告します。コンソールでこのログを調べると、ツールのワークフローを把握して、フック・ポイント・スクリプトがトリガーされるタイミングを正確に測ることができます。

Webアプリケーションのフック・スクリプトへの引数の引渡し

Webアプリケーションのビルドまたは提供時に、コマンドライン・インタフェースからフック・スクリプトに追加の値を渡すことができます。作成したフック・スクリプトはこれらの値を使用して、webフォルダのコンテンツからアーカイブ・ファイルを作成するなどのワークフロー・アクションを実行できます。

Oracle JETのコマンドライン・インタフェースに--user-optionsフラグを追加して、Webアプリケーションのビルドまたは提供時にフック・システムに対してユーザー入力を定義できます。--user-optionsフラグは、buildまたはserveコマンドに追加して、次のように空白で区切られた1つ以上の文字列値を引数として使用できます。
ojet build --user-options="some string1" "some string2" "some stringx"
たとえば、ビルドの終了後にビルド出力のコピーをアーカイブするフック・スクリプトを記述できます。開発者は、Oracle JETコマンドラインで--user-optionsフラグを使用して、アーカイブ・ファイル名に設定されているユーザー定義パラメータarchive-fileを渡すことができます。
ojet build web --user-options="archive-file=deploy.zip"
フラグが追加され、適切な入力が渡されると、フック・スクリプト・コードは、プロジェクトのルートの/deployディレクトリにZIPファイルを書き込むことができます。次の例は、after_buildフックを使用したこのビルドのカスタマイズを示しています。このスクリプト・コードでは、NodeJS関数のfs.createWriteStream()をコールして、ビルドの終了後にアプリケーションを確実にアーカイブするため、ユーザー定義のarchive-fileフラグの値に対するユーザー入力を解析します。このフック・スクリプトの例では、コマンドライン・インタフェースからユーザー入力を行い、それを処理してビルド・ワークフローのカスタマイズを行います。 
'use strict';
const fs = require('fs');
const archiver = require('archiver');
const path = require('path');

module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
    console.log("Running after_build hook.");

    //Check to see if the user set the flag 
    //In this case we're only expecting one possible user defined
    //argument so the parsing can be simple
    const options = configObj.userOptions;
    if (options){
      const userArgs = options.split('=');
      if (userArgs.length > 1 && userArgs[0] === 'archive-file'){
        const deployRoot = 'deploy';
        const outputArchive = path.join(deployRoot,userArgs[1]);

        //Ensure the output folder exists
        if (!fs.existsSync(deployRoot)) {
          fs.mkdirSync(deployRoot);
        }

        //Set up the archive
        const output = fs.createWriteStream(outputArchive);
        const archive = archiver('zip');

        //callbacks for the archiver
        output.on('close', () => {
          console.log(`Archive file ${outputArchive} successfully created.`);
          resolve();
        });

        archive.on('error', (error) => {
          console.error(`Error creating archive ${outputArchive}`);
          reject(error);
        });

        //Archive the web folder and close the file
        archive.pipe(output);
        archive.directory('web', false);
        archive.finalize();
      }
      else {
        //Unexpected input - fail with information message
        reject(`Unexpected flags in user-options: ${options}`);
      }
    }
    else {
  	//nothing to do
  	resolve();
    }
  });
};

Oracle JETアプリケーション開発でのWebpackの使用

Webpackを使用して、Oracle JETアプリケーションおよびビルド・タスクとサービス・タスクを管理できます。

Webpackを使用する場合、Oracle JETは、Oracle JETプロジェクトのソース・ファイルをビルドして提供する責任をWebpackに渡します。Webpackの使用を決定する前に、Webコンポーネントのビルド、パッケージ化または公開が必要なOracle JETアプリケーションでWebpackを使用することはできないことに注意してください。

Oracle JETアプリケーションでWebpackを使用する場合、次のコマンド例に示すように、プロジェクトのスキャフォールド時にコマンドライン引数として指定できます:

ojet create <app-name> --template=basic --webpack

Webpackを使用してアプリケーションをビルドおよび提供するには、それぞれojet buildおよびojet serveを実行するのみです。ojet serve --releaseコマンドは使用できません。ローカル開発環境からリリース・ビルドを実行するには、ojet build --releaseコマンドを使用して、/webフォルダから任意の静的サーバー(http-serverなど)を使用します。

Webpackを既存のOracle JETアプリケーションに追加するには、Oracle JETプロジェクトのルート・ディレクトリから次のコマンドを実行します:

ojet add webpack

Webpackを使用するOracle JETプロジェクトのファイルおよびディレクトリは、--webpack引数を指定せずに生成されたアプリケーションのプロジェクトとは異なります。次の表に、--webpack引数を使用した場合の違いを示します。

オプション 説明

ojet.config.js

このファイルは、Oracle JETのデフォルトのWebパック構成を管理します。このファイルとその構成方法の詳細は、「Oracle JETのデフォルトWebpack構成の構成」を参照してください。

tsconfig.json

Webpackを使用せずにアプリケーションに対して生成されたtsconfig.jsonと対照的に、esModuleInteropおよびresolveJsonModuleフラグはtrueに設定されます。esModuleInteropフラグにより、アプリケーションはすべてのモジュール・タイプのデフォルト・インポートを標準化できます。import * as <importName> from "path/to/import"などのコールは、import <importName> from "path/to/import"と記述する必要があります。resolveJsonModuleフラグにより、アプリケーションはJSONファイルを直接インポートできます。JSONファイルのインポートを解決するためのWebpackの自動サポートと組み合せることで、Oracle JETアプリケーションでJSONファイルを消費するために、RequireJs text!プラグインの後にJSON.parseを使用する必要がありません。

このトピックの冒頭で述べたように、Webコンポーネントをビルド、パッケージ化または公開するOracle JETプロジェクト、またはJETテーマを使用する必要があるプロジェクトでWebpackを使用することはできません。つまり、Oracle JET CLIから次のコマンドを使用できないということです:

  • ojet build (component|pack)
  • ojet package (component|pack)
  • ojet publish (component|pack)

もう1つの注意点は、開発モード(デフォルト)でOracle JETアプリケーションを提供すると、Oracle JETアプリケーションはメモリーからスタイルをロードし、ブラウザのHTMLの<styles>タグにスタイルが表示されることです。一方、リリース・モードでビルド(ojet build --release)したOracle JETアプリケーションを提供する場合、スタイルはHTMLファイルに含まれるCSSファイル・リンクから取得されます。次のイメージでは、開発モードおよびリリース・モード・インスタンスで実行されるOracle JETアプリケーション・インスタンスを使用し、ブラウザの開発者ツールを使用して様々なエントリを確認できます。


開発およびリリース・モードでのCSS参照

Oracle JETのデフォルトWebpack構成の構成

Oracle JET CLIによって生成されるデフォルトのWebpack構成は、ojet.config.jsファイルのwebpack関数を使用して構成できます。

webpack関数は、Oracle JETビルド・コンテキスト(context)およびWebpack構成(config)を持つオブジェクトを受け取ります。Webpackを開発モードとリリース・モードのどちらで実行するかを示すbuildTypeプロパティに注意してください。Oracle JETによって生成されるデフォルトのWebpack構成であるconfigについては、必要に応じてカスタマイズできます。

ojet.config.jsファイルのデフォルト・オプションを表示するには、次の例に示すように、コンソール・ログ文をojet.config.jsファイルに追加します。 

. . .
webpack: ({ context, config }) => {
  if (context.buildType === "release") {
    // update config with release / production options
  } else {
    // Print out the default webpack configuration options 
    // as a JSON string
    console.log(JSON.stringify(config));
    // Or let your terminal console determine how to 
    // present the configuration
    console.log(config);
  }
. . .

さらに、次のコマンドを使用してOracle JETプロジェクトを作成し、ターミナル・コンソールでデフォルト構成をレンダリングします:

ojet build

ヒント:

Visual Studio CodeでJSON形式のファイルを作成し、端末から返された構成に対して、より読みやすい形式でデフォルト構成を表示します。

開発モードで構築されたOracle JETアプリケーションのデフォルトのWebpack構成には、次のトップレベル・ノードが含まれます。

{
  "entry": { },
  "output": { },
  "module": {},
  "resolve": {},
  "resolveLoader": {    },
  "plugins": [],
  "mode": "development",
  "devServer": { }
}

変更するOracle JETのデフォルトWebpack構成の構成設定を特定したら、ojet.config.jsファイルに代替値を追加します。次の例は、Webpackを使用して開発モードでOracle JETアプリケーションを提供する場合にポート番号を変更する方法を示しています。 

module.exports = {

  webpack: ({ context, config }) => {
    if (context.buildType === 'release') {
      // update config with release / production options
    } else {

      // update config with development options. In the following example, we specify
      // a different server port number to the default of 8000
      config.devServer.port = 3000;
	
     // Print out the default webpack configuration options as a JSON string
     console.log(JSON.stringify(config));
     // Or let your terminal console determine how to present the configuration
     console.log(config);
    }
    return config;
  }
};