Oracle JavaScript Extension Toolkit (JET)の開始

1 Oracle JavaScript Extension Toolkit (JET)の開始

Oracle JETは、Oracleおよびオープン・ソースのJavaScriptライブラリのコレクションであり、JavaScript、HTML5およびCSSに基づいたクライアント側のWebアプリケーションを、可能なかぎり単純かつ効率的に作成できるように設計されています。

Oracle JETの使用を開始する場合、JavaScript、HTMLおよびCSSの基礎以上の知識は必要ありません。開発者の多くは、Oracle JETを学習する過程でこれらの関連テクノロジを学習します。

Oracle JETは、次のアプリケーション・ニーズを満たすように設計されています:

既存ページへの双方向性の追加。
JavaScript、HTML5、CSSおよびレスポンシブ・デザインのベスト・プラクティスを使用した、新しいエンドツーエンドのクライアント側Webアプリケーションの作成。

Oracle JETビデオ・コレクションで、Oracle JETの概要を示すビデオをご覧ください。

Oracle JET Model-View-ViewModelアーキテクチャ

Oracle JETでは、Model-View-ViewModel (MVVM) アーキテクチャ・デザイン・パターンがサポートされます。

MVVMでは、Modelでアプリケーション・データが表され、Viewでデータが提示されます。ViewModelでは、Modelからビューにデータが公開され、アプリケーションの状態が保持されます。

図about_mvmm_arch.pngの説明

MVVMデザインをサポートするために、Oracle JETは、サード・パーティのライブラリとOracle提供のファイル、スクリプトおよびライブラリのコレクションを含む、モジュラ・フレームワーク上に構築されています。

図about_jet_arch.pngの説明

Viewレイヤーを実装するために、Oracle JETには、HTML5カスタム要素として実装されるUIコンポーネントのコレクションが用意されており、その範囲は基本的なボタンから、チャートやデータ・グリッドなどの高度なデータ視覚化コンポーネントまでにわたります。

Knockout.jsによってViewModelが実装され、ビュー・レイヤーとモデル・レイヤー間の双方向データ・バインディングが提供されます。

Oracle JETの機能

Oracle JETの機能は次のとおりです。

モデル・レイヤーとビュー・レイヤー両方に対するメッセージおよびイベント・サービス
UI要素およびコンポーネントの検証およびデータ・コンバータを提供する検証フレームワーク
ページネーションおよび仮想スクロールのパフォーマンス最適化に対するモデル・レイヤーでのキャッシュ・サービス
モデル・レイヤーで提供されるサービスのフィルタおよびソート
Representational State Transfer (REST)やWebSocketなど、Webサービスを介したデータ・ソースへの接続
Oracle JETのCoreRouterおよびoj-moduleコンポーネントを使用したURLおよびブラウザ履歴の管理
RESTサービスから取得したデータ・モデルに対する、OAuth 2.0を介した統合認可
RequireJSによって提供されるリソース管理
JSONベースのRESTサービスからのデータを表すRESTDataProvider API
JavaScriptロギング
ポップアップUI処理

Oracle JETビジュアル・コンポーネントの機能

Oracle JETビジュアル・コンポーネントには、次の機能および標準準拠が含まれています。

数値、通貨および日時フォーマットに関するOracle National Language Support (NLS)標準(i18n)への準拠
Oracle Redwoodテーマ・スタイル仕様をサポートし、Oracle Redwood Design Systemを実装する組込みテーマ適用
次を含むOracleソフトウェア・ローカリゼーション標準l10nのサポート:
- ローカライズされたリソース文字列の実行時の遅延ロード
- Oracle翻訳サービス・フォーマット
- 双方向ロケール(左から右、右から左)
Webコンテンツ・アクセシビリティ・ガイドライン(WCAG) 2.1。さらに、コンポーネントによって、高コントラストおよびキーボードのみの入力環境のサポートが提供されます。
タッチ、マウスおよびポインタ・イベントによる必要に応じたジェスチャ機能
Oracleテスト自動化ツールのサポート
レスポンシブ・レイアウト・フレームワーク

Oracle JETに組み込まれている機能

Oracle JETのzip配布には、Oracle JETライブラリとツールキットで使用されるすべてのサード・パーティ・ライブラリが含まれています。

具体的には、Oracle JETには次のファイルおよびライブラリが含まれています。

Redwoodテーマ用のCSSおよびCSSファイル
Oracle JETライブラリの縮小およびデバッグ・バージョン
データ視覚化ツール(DVT)のCSSおよびJavaScript
KnockoutおよびKnockoutのマッピング・ライブラリ
jQueryライブラリ
RequireJS、RequireJS textプラグイン、およびRequireJS CSSプラグイン
js-signals
es6-promise polyfill
Hammer.js

Oracle JETコンポーネントでは、ジェスチャ・サポートに対して内部的にHammer.jsが使用されます。Oracle JETコンポーネントまたはその関連DOMノードに追加しないでください。
Oracle JET dnd-polyfill HTML5のドラッグ・アンド・ドロップ・ポリフィル
proj4jsライブラリ
webcomponentsjs polyfill

Oracle JETで使用されるサード・パーティ・ライブラリ

Oracle JETの使用を開始する場合、JavaScript、HTMLおよびCSSの基礎以上の知識や、Oracle JETで使用されるサード・パーティのライブラリおよびテクノロジについて理解する必要はありません。実際、開発者の多くは、Oracle JETを学習する過程でこれらの関連テクノロジを学習します。

名前	説明	詳細情報
CSS	カスケーディング・スタイル・シート	http://www.w3.org/Style/CSS
HTML5	ハイパーテキスト・マークアップ言語5	http://www.w3.org/TR/html5
JavaScript	プログラミング言語	https://developer.mozilla.org/en-US/docs/Web/JavaScript/About_JavaScript
TypeScript	JavaScriptの型付きスーパーセットで、JET要素および非要素クラスのTypeScript APIに対する型チェックをサポートできます。	http://www.typescriptlang.org
jQuery	HTMLドキュメントの走査と操作、イベント処理、アニメーションおよびAjax用に設計されたJavaScriptライブラリ。jQueryには、ほとんどのブラウザ間で機能するAPIが含まれています。	http://jquery.com
Knockout	双方向データ・バインディングのサポートを提供するJavaScriptライブラリ	http://www.knockoutjs.com
RequireJS	ライブラリ参照およびリソースの遅延ロードの管理に使用されるJavaScriptファイルおよびモジュール・ローダー。RequireJSでは、非同期モジュール定義 (AMD) APIが実装されます。	RequireJS: http://www.requirejs.org AMD API: http://requirejs.org/docs/whyamd.html
SASS	SASS (Syntactically Awesome Style Sheets)によってCSS3が拡張され、変数、ネストされたルール、ミックスインおよびインライン・インポートを使用して、アプリケーションのテーマをカスタマイズできます。Oracle JETでは、SASSのSCSS (Sasy CSS)構文が使用されます。	http://www.sass-lang.com

Oracle JETツールを使用する場合は、次のテクノロジについても十分理解することをお薦めします。

名前	説明	詳細情報
Node.js	パッケージ管理のためにOracle JETで使用される、サーバー側Webアプリケーションの開発用のオープン・ソースのクロスプラットフォーム・ランタイム環境。Node.jsには`npm`コマンドライン・ツールが含まれています。	https://nodejs.org

Oracle JETの開発環境の作成

Oracle JETアプリケーションを開発する前に、使用する開発環境を決定できます。Oracle JETツールを使用してWebアプリケーションを開発する場合は、Oracle JETパッケージをインストールする必要があります。

開発エディタの選択

Oracle JETアプリケーションは、JavaScript (またはTypeScript)、HTML5およびCSS3をサポートするほとんどすべての統合開発環境(IDE)で開発できます。ただし、IDEはOracle JETアプリケーションの開発に不要であるため、任意のテキスト・エディタを使用してアプリケーションを開発できます。

IDEはOracle JETコマンドライン・ツールとともに使用できます。このツールでは、提供されているスタータ・テンプレートのいずれかを使用して、Webアプリケーションをスキャフォールドします。選択したIDEで、スキャフォールドしたアプリケーションの開発を進めるには、そのIDEでJETツールを使用して、作成されたプロジェクトを開きます。IDEでアプリケーション・ファイルに変更を保存した後、JETツールを使用し、JETアプリケーションをビルドして実行します。

エディタとしてMicrosoft Visual Studio Code (VS Code)を使用している場合は、Oracle JETコアのVisual Studio Code Extensionを追加して、Oracle JETアプリケーションの開発をサポートできます。具体的にはVS Code用のOracle JET拡張機能で以下が提供され、クライアント側のJavaScriptまたはTypeScript Webアプリケーションを作成する開発者の生産性が向上します:

JET APIおよびJETコンポーネント・メタデータに対するコード補完。
最もよく使用されるOracle JETコンポーネントのコード・スニペットと連携する機能。
Oracle JET監査レポートを実行してアプリケーションのソース(JavaScript、HTML、CSSおよびJSONファイル)を診断する機能。

JETコンポーネントでのこのようなカスタムHTMLデータのサポートは、HTMLファイルを編集するときに、VS CodeがOracle JETのタグと属性を使用してプロンプト表示することを意味します。Oracle JET HTMLタグの入力を開始すると、対応する選択肢のリストがドロップダウンに表示されます:

図vscode-jet-attributes.pngの説明

VS Codeに対するOracle JETサポートの詳細な例は、Visual Studio MarketplaceのOracle JET Core拡張機能のダウンロード・ページを参照してください。

Oracle JETツールのインストール

Oracle JETツールを使用してWebアプリケーションを開発する場合は、Node.jsおよびOracle JETコマンドライン・インタフェース(CLI) ojet-cliをインストールする必要があります。

Oracle JETツールを開発プラットフォームにすでにインストールしている場合は、Oracle JETでサポートされる最小バージョンを使用していることを確認し、必要に応じてアップグレードしてください。サポートされる最小バージョンのリストは、Oracle JETサポートを参照してください。

ノート:

Oracle JET CLIをインストールしない場合は、Node.jsパッケージ・ランナー(npx)を使用して、Oracle JETアプリケーションを作成および管理できます。

前提条件パッケージをインストールするには:

Node.jsのインストール

開発マシンにNode.jsをインストールします。

Webブラウザで、Node.jsダウンロード・ページからOSに適したインストーラをダウンロードしてインストールします。Oracle JETでは、最新のLTSバージョンをインストールすることをお薦めします。Node.jsは、macOS上で事前インストール済ですが、古いバージョンである可能性があるため、必要に応じて最新のLTSバージョンにアップグレードしてください。

インストールおよび設定の完了後、コマンド・プロンプトからnpmコマンドを入力して、インストールが成功したことを検証できます。たとえば、npm config listと入力して、Node.jsの構成設定を表示します。

コンピュータが、プロキシ・サーバーを使用する必要があるネットワーク(会社のネットワークなど)に接続されている場合は、npmインストールが正常に機能するように、次のコマンドを実行します。このタスクは、ネットワークでプロキシ・サーバーを使用する必要がある場合にのみ必要です。たとえば、自宅からインターネットに接続する場合は、このタスクを実行する必要がない可能性があります。

npm config set proxy http-proxy-server-URL:proxy-port
npm config set https-proxy https-proxy-server-URL:proxy-port

コマンドに完全なURLを含めます。たとえば:

npm config set proxy http://my.proxyserver.com:80
npm config set https-proxy http://my.proxyserver.com:80

Oracle JETコマンドライン・インタフェースのインストール

npmを使用して、Oracle JETコマンドライン・インタフェース(ojet-cli)をインストールします。

開発マシンのコマンド・プロンプトで、Windowsでは管理者として、またはMacintoshおよびLinuxシステムではsudoを使用して次のコマンドを入力します。
```
[sudo] npm install -g @oracle/ojet-cli
```
インストールが成功したことがはっきりわからない場合があります。インストールが成功したことを確認するには、ojet helpを入力します。使用可能なOracle JETコマンドが見つからない場合は、インストール・コマンドの出力をスクロールして、失敗の原因を探します。
- ネットワーク障害に関連するエラーを受信した場合は、必要に応じてプロキシを正しく設定したことを確認してください。
- npmのバージョンが古いというエラーを受信した場合は、次を入力してバージョンを更新してください: [sudo] npm install -g npm。
ojet --versionを使用してOracle JETバージョンを確認して、Oracle JETコマンドライン・インタフェースの現在のバージョンを表示することもできます。現在のバージョンが表示されない場合は、使用しているプラットフォーム用のnpm installコマンドを使用して再インストールしてください。

npx Node.jsパッケージ・ランナーの使用

開発コンピュータにOracle JET CLI NPMパッケージをインストールする場合は、Oracle JETアプリケーションを作成および管理するための代替手段としてnpx Node.jsパッケージ・ランナーを使用できます。

Oracle JET CLIのリリースの変更には、Oracle JET CLIを提供するNPMパッケージをアンインストールして再インストールする必要があるため、リリースを頻繁に変更する場合にもこの代替手段が役立つ可能性があります。

npxを使用するには、Node.jsをインストールし、グローバルにインストールされたOracle JET CLIのインスタンスをコンピュータからアンインストールする必要があります。グローバルにインストールされたパッケージをリストするには、ターミナル・ウィンドウでnpm list --depth=0 -gコマンドを実行します。グローバルにインストールされたOracle JET CLIのインスタンスをアンインストールするには、npm -g un @oracle/ojet-cliコマンドを実行します。

Node.jsをインストールしたら、npxおよび希望するOracle JET CLI NPMパッケージのバージョンと、適切なコマンドを使用できます。次の例は、様々なリリースのCLIを使用してOracle JETアプリケーションを作成してから、それらをローカル開発コンピュータで使用する方法を示しています。

// Create and serve an Oracle JET 12.0.0 app
$ npx @oracle/ojet-cli@12.0.0 create myJET12app --template=navdrawer
$ cd myJET12app
$ npx @oracle/ojet-cli@12.0.0 serve

// Create and serve an Oracle JET 16.0.0 app
$ npx @oracle/ojet-cli@16.0.0 create myJETapp --template=navdrawer
$ cd myJETapp
$ npx @oracle/ojet-cli@16.0.0 serve

前述の例に示されている構文(npx package command)に従って、すべてのOracle JET CLIコマンド(create、build、serve、strip、restoreなど)を使用できます。

npxパッケージ・ランナーは、必要なパッケージ(@oracle/ojet-cli@16.0.0など)をNPMレジストリからフェッチして実行します。パッケージは、次のWindowsコンピュータの例のような一時キャッシュ・ディレクトリにインストールされます:

C:\Users\JDOE\AppData\Roaming\npm-cache\_npx

前述の例に示したOracle JET CLIのリリース用のNPMパッケージは、コンピュータにインストールされません。これは、グローバルにインストールされたNPMパッケージをリストするコマンドを実行するとわかります:

$ npm list --depth=0 -g
C:\Users\JDOE\AppData\Roaming\npm
+-- json-server@0.16.3
+-- node-gyp@9.0.0
+-- typescript@4.2.3
`-- yarn@1.22.18

npxの詳細は、Node.jsのドキュメントを参照してください。Oracle JET CLIで提供されるコマンドの詳細は、「Webアプリケーション・ワークフローの理解」を参照してください。

Yarnパッケージ・マネージャ

Oracle JET CLIでは、Yarnパッケージ・マネージャの使用がサポートされています。

Oracle JETではデフォルトでnpmパッケージ・マネージャが使用されるため、Node.jsをインストールする必要があります。ただし、Yarnをインストールした場合は、Oracle JETコマンドを呼び出すときに--installer=yarnパラメータ・オプションを指定することで、デフォルトのnpmパッケージ・マネージャのかわりにYarnを使用できます。

--installer=yarnパラメータは、次のOracle JETコマンドで使用できます:

ojet create --installer=yarn
ojet build --installer=yarn
ojet serve --installer=yarn
ojet strip --installer=yarn

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

コマンドごとに--installer=yarnパラメータ・オプションを指定するかわりに、次のように"installer": "yarn"をOracle JETアプリケーションのoraclejetconfig.jsonファイルに追加します:

{
. . . 
  "generatorVersion": "16.0.0",
  "installer": "yarn"
}

これにより、Oracle JET CLIでYarnがOracle JETアプリケーションのデフォルトのパッケージ・マネージャとして使用されます。

Yarnパッケージ・マネージャのインストール方法などの詳細は、YarnのWebサイトを参照してください。

TypeScript開発用のOracle JETアプリケーションの構成

TypeScriptでOracle JETアプリケーションまたはOracle JET Webコンポーネントを構築する場合、Oracle JET NPMパッケージにバンドルされているTypeScriptの型定義がアプリケーション・プロジェクトに必要です。

NPMからOracle JETをインストールする場合、JETバンドルとともにバージョン5.3.2のTypeScriptの型定義がインストールされ、アプリケーション開発の際に使用できるようになります。TypeScriptを使用してアプリケーションの開発を開始するために、Oracle JETツールでは、デフォルトのES 6実装で、TypeScript開発用に最適化された様々なOracle JETスタータ・テンプレートを使用することで、アプリケーションのスキャフォールディングがサポートされます。詳細は、「Webアプリケーションのスキャフォールド」を参照してください。

アプリケーションをすでに作成しており、TypeScriptを使用した開発に切り替える場合は、Oracle JETツールを使用して、型定義とコンパイラ構成のサポートを追加できます。TypeScriptバージョン5.3.2を既存のアプリケーションに追加するには、アプリケーション・ルートからojet add typescriptを使用します。

ojet add typescript

TypeScriptサポートを既存のアプリケーションに追加すると、Oracle JETツールは、NPMインストールを使用してTypeScriptをローカルにインストールします。このツールは、アプリケーション・ルートにtsconfig.jsonコンパイラ構成ファイルも作成します。プロジェクト内でtsconfig.jsonファイルを再配置するには、oraclejetconfig.jsonファイルにオプションのpaths.source.tsconfigサブプロパティを設定します。「oraclejetconfig.jsonファイルのプロパティ」を参照してください。

TypeScriptで開発を開始すると、要素以外のクラス、ネームスペースおよびインタフェースとともに、Oracle JETカスタム要素用のTypeScript定義モジュールをインポートできます。たとえば、次のOracle JETアプリケーションで、oj-chart import文は要素のTypeScript APIに対する型チェックをサポートします。

図full_typescript_file.pngの説明

さらに、エディタではインポートされたモジュールの定義ファイルを利用して、型の情報を表示できます。

図typescript_popup.pngの説明

JETカスタム要素タイプの命名規則は、変更の過程にあることに注意してください。タイプ名は、JETコンポーネントのエクスポートされたインタフェースをインポートするためにTypeScriptプロジェクトに指定しますが、その名前は次の2つの命名規則のいずれかに従います:

componentName + Element (新しい接尾辞命名規則)

たとえば、oj-input-searchとoj-stream-listのタイプ名は、それぞれInputSearchElementとStreamListElementになります。

または
oj + componentName (まだ移行されていないコンポーネントのoj接頭辞命名規則)

たとえば、oj-chartおよびoj-tableは、引き続きoj接頭辞が付いた古いスタイルでタイプに名前が付けられるため、それぞれojChart、ojTableになります。

すべてのJETコンポーネント・インタフェースのタイプ名が、新しい標準である接尾辞命名規則に移行されるまで、一部のJETコア・コンポーネントは、古いoj接頭辞命名規則に従います(Element接尾辞は付きません)。TypeScriptプロジェクトに指定するタイプ名を確認するには、コンポーネントのAPIドキュメントでモジュールの使用に関する項を参照してください。

JETでのTypeScriptの使用の詳細は、Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンスのTypescriptにおけるJETの概要に関する項を参照してください。

Oracle JETスタータ・テンプレートの使用

Oracle JETスタータ・テンプレートには、コードをすぐに使用するために必要なものがすべて用意されています。それらを自分のアプリケーションの出発点として、また、JETコンポーネントとOracle JETアプリケーションの基本構造を理解するためのツールとして使用してください。

各テンプレートは、Oracle JETクックブックの例と連携するように設計されており、アプリケーション設計の現在のベスト・プラクティスに準拠しています。

Oracle JETビデオ・コレクションで、Oracle JETスタータ・テンプレートの使用方法を示すビデオを見ることもできます。

スタータ・テンプレートについて

スタータ・テンプレート・コレクションの各テンプレートは、モジュール式の開発用に構造化されたシングル・ページ・アプリケーションです。使用可能なスタータ・テンプレートのコレクションはJavaScriptまたはTypeScriptの開発をサポートしており、これはアプリケーションに追加するテンプレート・タイプに依存します。

すべてのアプリケーション・マークアップをindex.htmlファイルに格納するかわりに、アプリケーションで、oj-moduleコンポーネントを使用して、セクションのHTMLマークアップを含むビュー・テンプレートをバインドするか、セクション内で定義される任意のコンポーネントのviewModelを含むビュー・テンプレートとJavaScriptまたはTypeScriptファイルの両方をバインドします。

次のコードはWeb Nav Drawerスタータ・テンプレートのindex.htmlファイルの一部を示しており、oj-moduleコンポーネントの定義が強調表示されています。簡潔にするために、コードおよびコメントの大部分が省略されています。コメントに各セクションの目的が記述されており、アクセシビリティおよび使用上のヒントについては完全なソース・コードを確認する必要があります。

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>Oracle JET Starter Template - Web Nav Drawer</title>
       ... contents omitted
  </head>
  <body class="oj-web-applayout-body">

    ... contents omitted

     <oj-module role="main" class="oj-web-applayout-max-width oj-web-applayout-content" config="[[moduleAdapter.koObservableConfig]]">
     </oj-module>
     
     ... contents omitted

    <!-- This injects script tags for the main javascript files -->
		<!-- injector:scripts -->
		<!-- endinjector -->
  </body>
</html>

メイン・ページのコンテンツ領域では、Oracle JET oj-web-applayout-* CSSクラスを使用してレスポンシブ・レイアウトが管理されます。メイン・ページのコンテンツではHTML oj-module要素が使用され、そのロールは、利用しやすいようメインとして定義されます(role="main")。

oj-moduleコンポーネントのconfig.view属性によって、セクションでビュー・テンプレートのみ定義されていて、そのビューが既存のviewModelにバインドされることがOracle JETに通知されます。oj-module要素のconfig.view-model属性が定義されている場合は、アプリケーションによってconfig.view-model属性の値に対応する名前のviewModelとビュー・テンプレートの両方がロードされます。

この例のように、oj-module要素のviewおよびview-model属性が指定されていない場合、動作はconfig属性の定義で指定したパラメータに依存します。

前述の例のように、パラメータがOracle JETルーターのmoduleConfigオブジェクトである場合は、oj-moduleによって、ルーターの現在の状態に対応してviewModelスクリプトとビュー・テンプレートのコンテンツが自動的にロードされてレンダリングされます。

Web Nav Drawerスタータ・テンプレートでは、CoreRouterを使用して、ユーザーがアプリケーションのナビゲーション・アイテムのいずれかをクリックしたときのナビゲーションを管理します。ルートには、dashboard、incidents、customersおよびaboutがあります。たとえば、ユーザーが「インシデント」をクリックすると、メイン・コンテンツ領域が、incidentsビュー・テンプレート内のコンテンツを表示するように変わります。

図gs_qs_incidents.pngの説明
パラメータがviewModelの名前を含むKnockoutのobservableである場合は、アプリケーションによって、指定された名前のviewModelとビュー・テンプレートの両方がロードされます。

/js/viewsフォルダにはアプリケーションのビュー・テンプレートが含まれ、/js/viewModelsにはviewModelスクリプトが含まれています。次の図では、Web Nav Drawerスタータ・テンプレートのファイル構造を示します。

図gs_qs_file_structure.pngの説明

シングル・ページ・アプリケーション、oj-module、CoreRouterおよびKnockoutテンプレートの使用の詳細は、「シングルページ・アプリケーションの作成」を参照してください。

oj-web-applayout-* CSSクラスの詳細は、Webアプリケーションのパターンに関する項を参照してください。レスポンシブ・デザインの使用の詳細は、「レスポンシブ・アプリケーションの設計」を参照してください。

スタータ・テンプレートの変更について

スタータ・テンプレートはアプリケーション作成の開始点です。Oracle JETスタータ・テンプレートを変更して、カスタマイズされた開始点を使用できます。

スタータ・テンプレートは、Webアプリケーションのスキャフォールド時に作成するOracle JETアプリケーションから取得できます。スタータ・テンプレートをお好きなIDEにロードするか、zipファイルを開発フォルダに展開します。

ヒント:

コマンドライン・ツールを使用してアプリケーションをスキャフォールドした場合でも、Visual Studio CodeなどのIDEを編集に使用できます。たとえば、Visual Studio Codeで「File」→「Open Folder」を選択し、作成したアプリケーションが含まれるフォルダを選択します。必要に応じてアプリケーションを編集し、ターミナル・ウィンドウでツール・コマンドを使用して、アプリケーションをビルドおよび提供します。

テンプレートを変更するために、必要のないコンテンツを削除して新規コンテンツを追加できます。独自のコンテンツを追加するか、Oracle JETクックブックのサンプルのコンテンツを再利用できます。クックブックのサンプルからマークアップをコピーする場合は、必要なHTMLおよびサポートするJavaScriptをコピーします。

追加するコードには、コードのRequireJSモジュールの依存関係が含まれます。アプリケーションのmain.jsファイルには、アプリケーションに現在組み込まれているRequireJSモジュールのリストが含まれています。クックブックのサンプルを使用する場合は、追加する必要があるモジュールを決定するために、アプリケーションのmain.jsファイルのライブラリのリストをクックブックのサンプルのリストと比較できます。不足しているモジュールは、アプリケーションのJavaScriptファイルのdefine()関数に追加します。たとえば、クックブックからoj-input-date-timeコンポーネントを追加するには、ojs/ojdatetimepickerモジュールをdashboard.js viewModelファイルに追加する必要があります。まだ、これがdashboard.jsで定義されていないためです。

RequireJSモジュールについて理解し、クックブックのサンプルまたは独自のコードを追加するには、「Oracle JETのモジュール編成について」の表を参照してください。

コンテンツをそのロールを変更するセクションに追加する場合は、そのセクションに関連付けられているロールを必ず変更してください。Oracle JETでは、アクセシビリティ、特にWAI-ARIAランドマーク用にロール定義が使用されています。Oracle JETおよびアクセシビリティの詳細は、「アクセシブルなOracle JETアプリケーションの開発」を参照してください。

スタータ・テンプレートのコンテンツの変更

コンテンツを追加するには、更新するセクションの該当するビュー・テンプレートおよびViewModelスクリプト(存在する場合)を変更します。必要なRequireJSモジュールを、ViewModelを定義する関数とともにViewModelのdefine()定義に追加します。

次の例ではWeb Nav Drawerスタータ・テンプレートを使用していますが、どのスタータ・テンプレートでも同じプロセスを使用できます。

始める前に:

Oracle JETクックブックの日時ピッカーのデモを参照してください。このタスクでは、このサンプルのコードを使用します。

スタータ・テンプレートのコンテンツを変更するには:

アプリケーションのindex.htmlファイルで、変更するセクションのoj-module要素を探し、テンプレートとオプションのViewModelスクリプトを特定します。
Web Nav Drawerスタータ・テンプレートでは、oj-module要素はconfig属性を使用しています。次のコード・サンプルは、index.htmlのmainContent HTML oj-module定義を示しています。この定義では、moduleAdapter observable (ModuleAdapterClassオブジェクト)がkoObservableConfigフィールドから構成を取得します。
```
<oj-module role="main" class="oj-web-applayout-max-width oj-web-applayout-content"
           config="[[moduleAdapter.koObservableConfig]]">
</oj-module>
```
[[moduleAdapter.koObservableConfig]] observableの戻り値は、CoreRouterオブジェクトの現在の状態に設定されます。CoreRouterオブジェクトは、アプリケーションのappController.jsスクリプト内のdashboardの初期値を使用して定義されます。このスクリプトでは、空のpathの場合、次のnavData配列に示すように、ページが最初にロードされ、パスはまだ指定されていません。配列からrouterオブジェクトが作成され、moduleAdapter宣言に渡されます。
```
let navData = [
   { path: '', redirect: 'dashboard' },
   { path: 'dashboard', detail: { label: 'Dashboard', iconClass: 'oj-ux-ico-bar-chart' } },
   { path: 'incidents', detail: { label: 'Incidents', iconClass: 'oj-ux-ico-fire' } },
   { path: 'customers', detail: { label: 'Customers', iconClass: 'oj-ux-ico-contact-group' } },
   { path: 'about', detail: { label: 'About', iconClass: 'oj-ux-ico-information-s' } }
];

// Router setup
let router = new CoreRouter(navData, {
  urlAdapter: new UrlParamAdapter()
});
router.sync();

this.moduleAdapter = new ModuleRouterAdapter(router);
this.selection = new KnockoutRouterAdapter(router);
```
oj-navigation-list要素のナビゲーション・データ・プロバイダは、slice(1)関数を使用して、特に「空のパス」の大/小文字を処理するnavdata配列の最初のパス定義を削除することで、使用可能なnavDataルートを関連付けるArrayDataProviderオブジェクトとして作成されます。
```
// Setup the navDataProvider with the routes, excluding the first redirected route.
this.navDataProvider = new ArrayDataProvider(navData.slice(1), {keyAttributes: "path"});
```
スタータ・テンプレート(たとえばDashboard Content Area)を変更するには、dashboard.htmlとdashboard.jsを両方とも変更します。
ビュー・テンプレートを変更するには、必要のないコンテンツを削除し、新規コンテンツをビュー・テンプレート・ファイルに追加します。
たとえば、Oracle JETクックブック・サンプルを使用している場合は、前のステップで識別したビュー・テンプレート(dashboard.html)にマークアップをコピーできます。テンプレート内の<h1>Dashboard Content Area</h1>マークアップ以降をすべてサンプルのマークアップに置き換えます。

次のコードは、既存のコンテンツを日時ピッカーのデモのコンテンツの一部に置き換える場合の変更されたマークアップを示しています。
```
<div id="div1">
  <oj-label for="dateTime">Default</oj-label>
  <oj-input-date-time id="dateTime" value='{{value}}'>
  </oj-input-date-time>
          
<br/><br/>
          
  <span class="oj-label">Current component value is:</span>
  <span><oj-bind-text value="[[value]]"></oj-bind-text></span>
          
</div>
```
ViewModelを変更し、必要のないコンテンツを削除し、必要に応じて新規コンテンツを追加する方法は、次のとおりです。新規コンテンツで必要となる可能性のある追加のRequireJSモジュールを組み込みます。
アプリケーションのmain.jsファイルには、アプリケーションに現在組み込まれているRequireJSモジュールのリストが含まれています。ライブラリのリストとアプリケーションに必要なリストを比較し、不足しているモジュールをViewModelスクリプトのdefine()関数に追加します。たとえば、デモに示されているoj-input-date-time要素を使用し、IntlConverterUtilsネームスペースAPIを使用する場合は、ojs/ojdatetimepickerを追加し、ojs/ojconverterutils-i18nモジュールをdashboard.js ViewModelスクリプトに追加します。これは、まだdashboard.jsに定義されていないためです。

次のサンプルは、変更後のdashboard.jsファイルの一部を、変更箇所を太字で強調表示して示しています。
```
define(['knockout', 'ojs/ojconverterutils-i18n', 'ojs/ojknockout', 'ojs/ojdatetimepicker', 'ojs/ojlabel'
   ], function(ko, ConverterUtilsI18n) {
   /**
    * The view model for the main content view template
    */
  function DashboardViewModel() {
    var self = this;
    self.value = ko.observable(ConverterUtilsI18n.IntlConverterUtils.dateToLocalIso(new Date(2020, 0, 1)));
  }

  return DashboardViewModel;
});
```
ノート:
この例では、コード・セクション全体をコピーしてはいません。クックブックでは、必要なライブラリを1つのブートストラップ・ファイルにロードして使用するために、require()コールが使用されています。貼り付けるスタータ・テンプレートでは、define()を使用して、アプリケーションの他の部分で使用できるRequireJSモジュールを作成します。
アプリケーションに対してモジュールまたはテンプレートを追加、変更または削除する場合は、必要に応じてmain.js RequireJSブートストラップ・ファイルとappController.jsファイルを変更します。
appController.jsファイルには、ユーザーがいずれかのナビゲーション・アイテムをクリックしたときに反応するイベント・ハンドラも含まれています。変更内容に応じて、このメソッドも変更する必要がある場合があります。
お好きなブラウザで変更を確認します。

次の図は、oj-input-date-timeをその現在値で示す新しい「Dashboard Content Area」コンテンツを含む、Web Nav Drawerスタータ・テンプレートの実行時の表示内容を示しています。

図gs_quickstart_runtime.pngの説明

Oracle JETクックブックの使用

Oracle JETクックブックは、アプリケーションの開発時に使用する貴重なリソースです。これには、各JETコンポーネントの実装と、1つ以上のJETコンポーネントを使用して一般的な使用パターンを実装する方法を示すサンプルが含まれています。

各Oracle JETクックブック・デモには、簡単な概要、デモ実装が含まれており、実装に従って、デモの実装方法を説明するタブ(Info、demo.HTMLなど)には、ソースHTML、JavaScript/TypeScriptおよびCSSとJSON (該当する場合)が示されます。

クックブックを効果的に使用すると、開発タスクが容易になります。たとえば、クックブックから独自のアプリケーションにコードをコピーしたり、ブラウザでコードを直接変更し、「変更の適用」をクリックしてブラウザで変更をプレビューしたりできます。

APIドキュメント: デモで使用されるコンポーネントのAPIドキュメントに移動します。
(「設定」ボタン): ブラウザでデモ・コードのテーマ、フォント・サイズ、読取り方向およびデバッグ・モードを変更できる追加のコントロールが表示されます。これらの変更は、デモ実装をレンダリングするブラウザの一部にのみ影響します。
JS/TS: JavaScriptまたはTypeScriptでデモ実装を表示するには、このボタンを切り替えます。
変更の適用: ブラウザでデモのHTMLおよびJS/TSを編集し、「変更の適用」をクリックして変更内容をブラウザに表示できます。これは、属性値の変更時などに動作またはコンポーネントをテストする場合に便利です。

Oracle CDNおよびOracle JETライブラリを使用したアプリケーション起動の最適化

Oracleコンテンツ配信ネットワーク(CDN)およびCDNでサポートされるOracle JETディストリビューションを使用することにより、アプリケーションの起動時のネットワーク負荷を最小限に抑えるようにOracle JETアプリケーションを構成できます。

様々な地理的場所からアプリケーションにアクセスするユーザーを本番アプリケーションでサポートしている場合、Oracle JETの必須ライブラリとモジュールのロード元としてOracle CDNにアクセスするようにOracle JETアプリケーションを構成することにより、パフォーマンスを大幅に最適化できます。Oracleでは、特定のOracle JETリリースに固有のライブラリとモジュールが格納されたCDNを保持しています。各リリースのCDNサポートは、Oracle JETツールが特定のリリースのこれらのファイルをアプリケーションのローカルsrcフォルダにコピーすることもサポートしているのと似ています。どちらの場合も、適切なライブラリとモジュールへのアクセスはアプリケーション開発者向けに自動化されています。アプリケーションを構成して、アプリケーションがどこからライブラリやモジュールをロードするかを決定します。

アプリケーションの作成後、アプリケーションはデフォルトで、必要なライブラリとモジュールをローカルのsrcフォルダからをロードするように構成されています。これにより、ネットワーク・アクセスを必要とせずにアプリケーションを作成できます。その後、ステージング環境でのテストや本番環境への移行の準備ができたら、CDNサーバー・レプリケーションを使用するようにOracle JETアプリケーションを構成して、ユーザーがブラウザ・セッションを開始してアプリケーションにアクセスすると発生するネットワーク負荷を軽減できます。ユーザーがブラウザでアプリケーションを最初に起動する際、Oracle CDNによって、ユーザーの地理的な場所に最も近い分散サーバーを使用してアプリケーションに必要なサード・パーティ・ライブラリとOracle JETモジュールがユーザーのブラウザに配信されます。

CDNからロードするようにアプリケーションを構成すると、アプリケーションのsrcフォルダからロードするよりも、次の利点があります:

CDN配布サーバーからロードされると、必須ライブラリとモジュールは、ユーザーが同じブラウザ・セッションで実行する可能性のある他のアプリケーションでも使用できます。
OracleがCDN上で保持しているバンドル構成ファイルを使用して、バンドルされたライブラリとモジュールをロードするオプションが有効になります。バンドル構成ファイルでは、最もよくアクセスされるライブラリとモジュールをリリース固有のコンテンツ・パッケージにグループ化し、アプリケーションにバンドルとして配布できるようにします。

ヒント:

Oracleでは各リリースの構成が保持されるため、Oracle CDNのバンドル構成を参照するようにアプリケーションを構成することをお薦めします。アプリケーションに現在のバンドル構成を参照させることにより、サポートされるライブラリとモジュールの最新バージョンを使用してアプリケーションを実行できます。このバンドル・ロード処理の最適化を有効にする方法の詳細は、「Oracle CDN最適化のためのアプリケーションの構成について」を参照してください。