JavaScriptテクノロジ

18 JavaScriptテクノロジ

Oracle Content Managementのコンポーネントおよびテーマを開発する場合は、任意のJavaScriptテクノロジ・スタックを選択できます。 Oracle Content Managementで提供されるサンプルは、基本的なテンプレート作成用のMustacheを備えたvanilla JavaScriptに基づいていますが、特定のJavaScriptテクノロジを選択する必要はありません。

カスタム・コンポーネントのロード

Oracle Content Management Site Builderを使用する場合は、カスタム・コンポーネントおよびセクション・レイアウトを動的にページにロードする必要があります。これにより、サイト・コントリビュータは、ページまたはセクション・レイアウトをページに追加、削除および配置できます。これをサポートするには、各カスタム・コンポーネントは、コンポーネントをページにブートストラップするレンダ・ファイルを実装する必要があります。

コンポーネントは自己完結型であり、任意のテーマ内で機能することも、テーマ・アセット内のJavaScriptファイルのサポートに依存することもできます。カスタム・コンポーネントがテーマ・アセットに依存している場合は、そのテーマに基づくサイトでのみ機能します。このようなコンポーネントは、テーマに基づくサイトでのみ使用できるように、「テーマ・コンポーネント」としてマークできます。

コンポーネントの動的なロード

カスタム・コンポーネントをページに動的にロードするには、JavaScriptモジュールまたはレガシー使用法RequireJSを使用してコンポーネントを構築する必要があります。コンポーネントがJavaScriptモジュールを使用して構築されている場合、Oracle Content Managementは次を使用してコンポーネントをロードします:

import(".../componentName/assets/render.mjs").then((Component) => {...});

コンポーネントがRequireJSを使用して構築されている場合、Oracle Content Managementは次を使用してコンポーネントをロードします:

require([".../componentName/assets/render"], function (Component) {...});

テクノロジを区別するために、コンポーネント・ロードにJavaScriptモジュールを使用するコンポーネントは、render.mjsなどの.mjs拡張子を使用し、RequireJSを引き続き使用するコンポーネントは".js"を使用します。

ノート:

JavaScriptモジュールの使用は、Internet Explorerではサポートされていません。 Oracle Content Managementサイトで引き続きInternet Explorerのサポートが必要な場合は、コンポーネント開発にRequireJSを引き続き使用する必要があります。

サイト内のコンポーネントのデフォルト包含

Oracle Content Managementサイトの作成に使用されるテンプレートが、デフォルトのJavaScriptテクノロジとしてJavaScriptモジュールを使用するように設定されている場合、render.mjsというファイルを使用して、サイトで使用されるカスタム・コンポーネントを動的にロードします。かわりに、サイトの作成に使用されるテンプレートがデフォルトのJavaScriptテクノロジとしてRequireJSを使用するように設定されている場合は、render.jsというファイルを使用して、サイトで使用されるカスタム・コンポーネントを動的にロードします。

デフォルト設定を変更するには、Oracle Content Managementサイト・ページでサイトを選択し、「プロパティ」をクリックしてサイド・パネルを開きます。パネルの「プロパティ」タブでデフォルトとして使用するJavaScriptテクノロジを選択します。

何らかの理由で、レンダラがカスタム・コンポーネントをロードするためのデフォルト・オプションを見つけられない場合、コンソールでこれを確認し、代替ファイルを使用してコンポーネントのロードを試みます。これにより、下位互換性を確保でき、RequireJSからJavaScriptモジュールへの移行に役立ちます。

ノート:

コンポーネントは、render.jsファイルとrender.mjsファイルの両方を持つことができ、サイトのデフォルトのJavaScriptテクノロジ設定に関係なく機能できます。通常、render.jsファイルは、render.mjsファイルをロードする単純な汎用ラッパーです。

RequireJS機能の代替方法

RequireJSには、JavaScriptモジュールにはない追加の機能が用意されています。たとえば、RequireJSを使用すると、APIコールを介してOracle Content Managementで公開されているJQueryやMustacheなどのスコープ付きテクノロジにアクセスできます。 CSSやテキストなどのJavaScript以外のリソース・ローダーを利用することもできます。

JavaScriptモジュールの使用時にこの追加機能をサポートするために、SCSRenderAPIが拡張されました。

// To access scoped resources
SCSRenderAPI.getJQuery();
SCSRenderAPI.getMustache();
 
// To load non-JavaScript resources
SCSRenderAPI.importCSS(".../css/design.css").then(...)
SCSRenderAPI.importText(".../template.html").then(...)

コンテンツ・レイアウトをヘッドレス・モードで使用する場合、APIコールは情報を提供し、ContentSDKを活用する必要があります。

ノート:

これらの機能の実装は、ECMA標準に対するwebブラウザのサポートに基づいて更新されます。たとえば、JavaScriptモジュールなどのスタイル・シートをインポートします。

ネイティブではないJavaScriptテクノロジ

JavaScriptテクノロジ・スタックの一部の選択肢には、ブラウザで実行する前に追加の処理が必要です。たとえば、カスタム・コンポーネントでJSXまたはTypeScriptを使用する場合、開発者がネイティブJavaScriptを使用するコンポーネントのバージョンを作成する独自のビルド・ステップを含んでいないかぎり、ランタイム環境でBabelJSなどのトレーラを使用する必要があります。

Oracle Content Managementには、Babelを含めたり、これらのネイティブでないJavaScriptテクノロジの追加サポートを提供したりせず、結果となるJavaScriptがページ内でどのように実行されるかをデシジョンするのは開発者のみです。

ランタイム最適化

サイト・ページにコンポーネントを動的に追加すると、サイトのコントリビュータに、ページを設計するためのカスタム・エクスペリエンスが提供されます。ただし、実行時にページをできるかぎり高速に実行できます。

これをサポートするために、Oracle Content Managementには、カスタム・コンポーネントおよびテーマの開発者がコンポーネントの最終HTMLおよびCSSを生成し、ページに直接挿入して、ページをレンダリングしてすぐに使用できるようにするための「コンパイル・ステップ」が用意されています。

実行時にカスタム・コンポーネントに対して追加のJavaScriptを実行する必要がない場合があります。ただし、コンポーネントに対話型要素がある場合は、ページのレンダリング後にコールできるハイドレート・オプションがカスタム・コンポーネントに対して使用できます。

コンパイル時のコンポーネントのデフォルト包含

コンパイル・ステップは、コンポーネント・アセット・フォルダ内のcompile.mjsファイルを検索するNodeJSアプリケーションとして実行されます。ファイルが検出されると、ファイルがロードされ、コンポーネント内でcompile()ファンクションの実行が試行されます。ファイルが見つからない場合は、かわりにcompile.jsファイルをロードして使用します。

NodeJSは、コンポーネント・ロードに履歴にCommonJSを使用しています。 render.jsおよびrender.mjsファイルを含めることができる方法と同様に、レガシー・コンポーネントのCommonJSおよびJavaScriptモジュールによるロード用のcompile.mjsファイルで使用されるcompile.jsファイルがあります。

JavaScriptモジュールはブラウザとNodeJSの両方でサポートされているため、.mjsファイルで標準化すると、render.mjs実装とcompile.mjs実装間で共通コードを簡単に共有できます。