機械翻訳について

B リリース19.0.0でのOracle JETアプリケーションの移行

Oracle JETツールを使用してOracle JETバージョン5.x.0以降でアプリケーションをスキャフォールドしていた場合、手動でアプリケーションをバージョン19.0.0に移行できます。

アプリケーションを移行する前に、Oracle JETのリリース・ノートで、コンポーネント、フレームワーク、またはアプリケーションに影響を及ぼす可能性のある、その他の変更について確認してください。

重要:

このプロセスはバージョン5.0.0以前のOracle JETリリースにはサポートされていません。

Oracle JETアプリケーションでAltaテーマを使用する場合は、Redwoodテーマの使用にできるだけ早く切り替えることをお薦めします。 Altaテーマについては、次のことに注意してください:

  • Altaテーマは、リリース10.0.0で非推奨となり、12.xリリースまでサポートされました。 Altaのみの問題については、バグ修正や新機能は提供されません。 すべてのAltaファイル(CSSおよびSCSS)は、Oracle JETのリリース21.0.0で削除されます。 Oracle JETのリリース・スケジュールの詳細は、Oracle JETのリリース・スケジュールについてを参照してください。
  • Oracle JETアプリケーションでAltaテーマを使用する方法を説明したコンテンツは、ドキュメントから削除されており、Oracle JETクックブックからも削除されています。
  • リリース18.0.0では、Oracle JETはnode-sassへの依存性をsass (Dart Sass)に置き換えました。 node-sassのサード・パーティ作成者はサポートしなくなりました。 AltaまたはAltaに基づくカスタム・テーマを引き続き使用する場合は、node-sassをインストールする必要があります。 node-sassのNode.jsバージョン・サポート・ポリシーなど、node-sassのインストール方法の詳細は、NPMレジストリのWebサイトのnode-sassページを参照してください。

Oracle JETアプリケーションの移行の準備

Oracle JETアプリケーション・ソースをバージョン9.x.0以降から最新バージョン19.0.0に移行するには、NPMパッケージをアップグレードし、テーマおよびライブラリの参照パスを更新して、path_mapping.jsonファイルを置き換える必要があります。 また、JETリリース9.0.0のプレビュー機能としてCSS変数を導入したoj-redwood-cssvars*.cssファイルへの参照を置き換えます。 CSS変数は、JETリリース10.0.0の本番機能でした。 最後に、ビルド時に必要なスクリプト・タグで自動的に置換されるスクリプト・インジェクタ・トークンをappDirRoot/src/index.htmlに含めます。

Oracle JETアプリケーションは、JETリリース18.0.0でOracle JETが導入したojet migrateコマンドを使用して移行できますが、移行タスクを開始する前に、移行前監査および次にリストしたその他の予備タスクを実行します。 これらのタスクが完了したら、Oracle CLI migrateコマンドを使用してアプリケーションを移行するか、この章の後続の項の説明に従ってアプリケーションを手動で移行します。

  1. 移行するOracle JETアプリケーションのバックアップ・コピーを作成します。

  2. Oracle JET CLIのグローバルにインストールされているすべてのインスタンスのアンインストール

    Windowsでは管理者として、MacintoshおよびLinuxシステムでは必要に応じてsudoを使用して、ターミナル・ウィンドウで次のコマンドを入力して、システムにojet-cliツール・パッケージのグローバルにインストールされているインスタンスがないことを確認します。

    1. [sudo] npm uninstall -g ojet-cli

      リリース3.2.0以前のOracle JET CLIは、パッケージのネームスペース名に"@oracle"を使用せずに公開されました。

    2. [sudo] npm uninstall -g @oracle/ojet-cli

      Oracle JET CLIの3.2.0以降のリリースは、パッケージのネームスペース名に"@oracle"を使用して公開されました。

  3. Node.jsのメンテナンスまたはアクティブな長期サポート(LTS)バージョンが必要です。 管理者としてターミナル・ウィンドウを開き、Node.jsのバージョンを確認します。 

    node -v

    Nodejsバージョンが、Nodejs.org Webサイトのリリースに関するページでメンテナンスまたはアクティブなLTSとしてリストされているバージョンよりも前の場合は、新しいLTSバージョンをダウンロードします。 Nodejs.org Webサイトに移動します。 「LTS Version (Recommended for Most Users)」の下で、ご使用のシステムに対応するインストーラをダウンロードします。 「ダウンロード」ダイアログ・ボックスでファイルのための場所を選択し、「保存」をクリックします。 ダウンロードしたインストーラを管理者として実行し、インストール・ウィザードのステップに従ってNode.jsをインストールします。

  4. 移行前にOracle JET監査フレームワーク(JAF)を使用してアプリケーションを監査することを強くお薦めします。 JAFで提供される組込み監査ルールは、非推奨のコンポーネントやAPIを含む無効な機能を特定して修正するのに役立ちます。 JETリリース19.0.0への移行を確実に成功させるために、細部に注意して監査結果を実装します。

    Windowsでは管理者として、MacintoshおよびLinuxシステムではsudoを使用して、ターミナル・ウィンドウで次のコマンドを入力します。 

    npm install -g @oracle/oraclejet-audit

    アプリケーション・ルートで、次のJAFコマンドを実行してアプリケーションの監査を初期化します。

    ojaf --init

    生成されたAppRootDir/oraclejafconfig.jsonファイルで、jetVerプロパティの値をアプリケーションの移行先のリリースに設定します。 たとえば、"jetVer": "19.0.0"です。

    次のコマンドを実行して、アプリケーションを監査し、監査で特定された問題を確認します。 

    ojaf

    JAFの詳細は、『Oracle JET Audit Frameworkの使用および拡張』のOracle JAFの初期化と監査の実行に関する項を参照してください。

  5. ターミナル・プロンプトで一時アプリケーションを作成し、移行中のアプリケーションにコピーするファイルを取得します。

    作成する一時アプリのタイプは、TypeScriptベースのMVVMアプリ、JavaScriptベースのMVVMアプリ、または仮想DOMベースのアプリのいずれであるかに関係なく、移行するアプリの種類によって異なります。

    • JavaScriptベースのMVVMアプリケーションの作成

      npx @oracle/ojet-cli create tempApp --template=navdrawer

    • TypeScriptベースのMVVMアプリケーションの作成

      npx @oracle/ojet-cli create tempApp --template=navdrawer --typescript

    • 仮想DOMアプリケーションの作成

      npx @oracle/ojet-cli create tempApp --template=basic --vdom

Oracle JET CLIを使用したアプリケーションの移行

Oracle JET CLIには、リリース13.0.0以降で作成され、Redwoodテーマ(またはRedwoodベースのカスタム・テーマ)を使用するOracle JETアプリケーションを現在のリリースに移行するmigrateコマンドが含まれています。

migrateコマンドは、アプリケーションのソースおよび構成ファイルを処理し、アプリケーションの移行に必要な変更を行います。 これには、移行元のOracle JETのバージョンがリリース13.0.0以上であることの検証が含まれます。 さらに、次の項目を更新および検証します。

  • oraclejetconfig.jsonファイル
  • path_mappings.jsonファイル
  • main.jsファイル
  • index.htmlファイル
  • scriptsディレクトリにあるフック・ファイル
  • Oracle Component Exchangeからのコンポーネント

リリース13.0.0より前に作成されたOracle JETアプリケーション、またはRedwoodテーマを使用しないアプリケーションの場合、これらのアプリケーションを手動で移行する方法の詳細は、後続の項を参照してください。

Oracle JET CLIを使用してアプリケーションを移行するには:

  1. Oracle JETアプリの移行の準備で説明されている準備タスクを確認して完了します。
  2. 移行するOracle JETアプリケーションのソースのバックアップ・コピーを作成します。
  3. アプリケーションの最上位ディレクトリで、package-lock.jsonファイルを削除します。
  4. ターミナル・ウィンドウで、アプリケーションの最上位ディレクトリに移動し、次のコマンドを入力してローカルのNPM依存性をアップグレードします:
    npm uninstall @oracle/oraclejet @oracle/oraclejet-core-pack @oracle/oraclejet-tooling @oracle/ojet-cli
npm install @oracle/oraclejet @oracle/oraclejet-core-pack --save
npm install @oracle/ojet-cli --save-dev

    これらのコマンドを実行した後、アプリケーションのpackage.jsonファイルを開き、移行先のOracle JETの19.0.0リリースのパッケージ・エントリおよびバージョン番号が含まれていることを確認します。 

    {
  "name": "...",
  . . .
  "dependencies": {
    "@oracle/oraclejet": "~19.0.0",
    "@oracle/oraclejet-core-pack": "~19.0.0"
  },
  "devDependencies": {
    "@oracle/ojet-cli": "~19.0.0",
    . . .
  },
  . . .
  5. 引き続きアプリケーションの最上位ディレクトリで、適切なコマンドを入力して、アプリケーションのpackage.jsonファイルに指定したローカルのNPM依存性をアップグレードします:

    • Oracle JETアプリケーションにコンポーネント交換からインストールされたコンポーネントが含まれている場合は、次のコマンドを使用してコンポーネントの依存性をアップグレードします:

      npx @oracle/ojet-cli restore

      このコマンドはnpm installをサブタスクとして起動するため、ローカルNPM依存性をアップグレードするためにnpm installコマンドを個別に実行する必要はありません。

    • npm install

  6. 適切なコマンドを入力して、アプリケーションをOracle JETの19.0.0リリースに移行します。

    • アプリケーションを移行し、デフォルト・テーマをredwoodに設定し、sassのバージョンを1.80.5に設定します。

      npx @oracle/ojet-cli migrate

    • アプリケーションでRedwoodベースのカスタム・テーマを使用する場合は、移行後のカスタム・テーマが引き続き使用されるように、--themeオプションを含めます。

      npx @oracle/ojet-cli migrate --theme=myRedwoodTheme

    • 使用可能なオプションのリストについては、アプリケーションの最上位ディレクトリのターミナル・プロンプトで次のコマンドを入力してください: npx @oracle/ojet-cli help migrate。

    Oracle JET CLIによってアプリケーションが移行されます。 ターミナル・ウィンドウに次のようなコンテンツが表示されます。Oracle JET CLIは、このコンテンツをアプリケーションの最上位ディレクトリにあるojet.migrate.logという名前のファイルに書き込みます。 

    Starting the migration process to JET version 19.0.0.
Validating JET version.
Validating JET version task finished.
. . 
Validating index.html file task finished.
Success: Migration process finished successfully!
  7. 移行をテストし、ルック・アンド・フィールを検証します。

    適切なオプションを指定してnpx @oracle/ojet-cli buildおよびnpx @oracle/ojet-cli serveを実行し、アプリケーションを作成および提供します。

Redwoodテーマのアプリケーションのリリース9.x.0以降からリリース19.0.0への移行

Oracle JETアプリケーション・ソースをバージョン9.x.0以降から最新バージョン19.0.0に移行するには、NPMパッケージをアップグレードし、テーマおよびライブラリの参照パスを更新して、path_mapping.jsonファイルを置き換える必要があります。 また、JETリリース9.0.0のプレビュー機能としてCSS変数を導入したoj-redwood-cssvars*.cssファイルへの参照を置き換えます。 CSS変数は、JETリリース10.0.0の本番機能でした。 最後に、ビルド時に必要なスクリプト・タグで自動的に置換されるスクリプト・インジェクタ・トークンをappDirRoot/src/index.htmlに含めます。

アプリケーションを移行するには:

  1. Oracle JETアプリの移行の準備で説明されている準備タスクを確認して完了します。
  2. アプリケーションの最上位ディレクトリで、package-lock.jsonファイルを削除します。
  3. ターミナル・ウィンドウで、アプリケーションの最上位ディレクトリに移動し、次のコマンドを入力してローカルのNPM依存性をアップグレードします:
    npm uninstall @oracle/oraclejet @oracle/oraclejet-core-pack @oracle/oraclejet-tooling @oracle/ojet-cli
npm install @oracle/oraclejet @oracle/oraclejet-core-pack --save
npm install @oracle/ojet-cli --save-dev

    これらのコマンドを実行した後、アプリケーションのルート・フォルダにあるpackage.jsonファイルを開き、Oracle JETの19.0.0リリースのパッケージ・エントリおよびバージョン番号が含まれていることを確認します。 

    {
  "name": "...",
  . . .
  "dependencies": {
    "@oracle/oraclejet": "~19.0.0",
    "@oracle/oraclejet-core-pack": "~19.0.0"
  },
  "devDependencies": {
    "@oracle/ojet-cli": "~19.0.0",
     . . .,
    "typescript": "5.8.3",
    . . .
  },
  . . .

    作成した一時アプリケーション(./tempApp/package.json)のエントリを確認して、Oracle JETのリリース19.0.0に、移行するアプリケーションで作成する必要がある新規または変更済のエントリが含まれていないことを確認します。

    ノート:

    Oracle JET JavaScriptベースのMVVMアプリケーションを移行する場合、"typescript": "5.8.3エントリは必要ありません。
  4. アプリケーションのルート・フォルダにあるoraclejetconfig.jsonファイルを開き、それにsassVerおよびdefaultThemeの次のプロパティおよび設定が含まれていることを確認します。

    次の例では、アプリケーションでRedwoodテーマが使用されるようにredwoodを指定します。 アプリケーションでカスタム・テーマを使用する場合は、カスタム・テーマの名前を指定します。 たとえば、"defaultTheme": "myCustomTheme",。 

    {
  "paths": {
    "source": {
	"common": "src",
	"web": "src-web",
	"javascript": "js",
	"typescript": "ts",
	"styles": "css",
	"themes": "themes"
    },
    "staging": {
	"web": "web",
	"hybrid": "hybrid",
	"themes": "staged-themes"
    }
  },
  "unversioned": true,
  "defaultBrowser": "chrome",
  "sassVer": "1.80.5",
  "defaultTheme": "redwood",
   "fontUrl": ". . .",
  "typescriptLibraries": "...",
  "jsdocLibraries": ". . .",
  "webpackLibraries": "...",
  "mochaTestingLibraries": "...",
  "jestTestingLibraries": "...",
  "architecture": "mvvm"
}

    アプリでTypeScript、Webpack、JSDocまたはテスト・ライブラリを使用する場合は、この移行の準備時に作成した一時アプリ(./tempApp/oraclejetconfig.json)のエントリを確認することで、これらの機能の*Librariesプロパティが最新であることを確認します。

  5. 一時アプリケーションからpath_mappings.jsonファイルをコピーして、Oracle JETライブラリの構成パスを更新し、Oracleライブラリの19.0.0バージョンを参照します。

    1. 移行しているアプリケーションの名前src/js/path_mapping.jsonをmigrating-path_mapping.jsonに変更します。

    2. tempApp/src/js/path_mapping.jsonを移行中のアプリケーションのsrc/jsディレクトリにコピーします。

    3. サードパーティ・ライブラリをアプリケーションに追加した場合は、path_mapping.jsonを編集するために開き、既存のエントリをコピーして必要に応じて変更し、migrating-path_mapping.jsonに表示される各ライブラリ用のエントリを追加します。 次のコード・サンプルは、my-libraryという名前のサードパーティ・ライブラリ用に行う追加内容を示しています。 

      "libs": {

    "my-library": {
      "cdn": "3rdparty",
      "cwd": "node_modules/my-library/build/output",
      "debug": {
        "src": "my-library.debug.js",
        "path": "libs/my-library/my-library.debug.js",
        "cdnPath": ""
      },
      "release": {
        "src": "my-library.js",
        "path": "libs/my-library/my-library.js",
        "cdnPath": ""
      }
    },
...
  6. 一時アプリケーションからコピーすることで、アプリケーション・スクリプト・テンプレートを更新します。

    1. tempApp/scripts/hooksディレクトリから移行中のアプリケーションのscripts/hooksディレクトリに新規スクリプト・テンプレート・ファイルをすべてコピーします。

    2. tempApp/scripts/hooksディレクトリにあるhooks.jsonスクリプト構成ファイルを、移行中のアプリケーションのscripts/hooksディレクトリにコピーします。 更新された構成ファイルによって、新しいスクリプト・テンプレート・ファイルと対応するビルド・システム・フック・ポイントが関連付けられ、Oracle JET CLIがスクリプトをコールできるようになります

  7. アプリケーションで、main.jsアプリケーション・ブートストラップ・ファイルを開き、次のコードが含まれていることを確認します。

    1. requirejs.config定義のpathsプロパティに、開始と終了の//injectorおよび//endinjectorコメントが含まれていることを確認します。 コメントが削除された場合は、次のようにrequirejs.config()定義に追加します。 

      requirejs.config(
  {
   baseUrl: 'js',

    paths:
    /* DO NOT MODIFY
    ** All paths are dynamicaly generated from the path_mappings.json file.
    ** Add any new library dependencies in path_mappings json file.
    */
    //injector:mainReleasePaths
    {
       ...no need to revise...
    }
    //endinjector 
   }
  );

      アプリケーションのビルドまたは提供時に、ツールでは、これらのinjectorコメントの内容に従って、main.jsにリリース固有のライブラリ・パスを挿入します。 前の移行ステップで更新されたpath_mapping.jsonファイルにより、このリリースにとって適切なライブラリ構成パスが、移行されるアプリケーションに含まれることが保証されます。

    2. main.jsファイルのapp.loadModule()に加えた変更が表示されることを確認します。

      JETリリース9.0.0以降、app.loadModule()は非推奨になり、main.jsから削除されましたが、ブートストラップ・コードは引き続き関数を使用することもできます(パスを変更する場合など)。 リリース9.x.0より前に作成されたアプリケーションの移行はloadModule()に依存するため、関数は移行されたmain.jsファイルに残る必要があり、移行されたappController.jsファイルにはloadModule()定義が含まれている必要があります。

      JETリリース9.0.0以降、作成した新しいアプリケーションでは、loadModule()の監視可能な依存性は、oj-module要素で使用する非推奨のojRouterのサポートに使用されなくなりました。 初期アプリケーション・テンプレートでは、CoreRouterを使用し、ModuleRouterAdapterを介してoj-moduleを操作するようになりました。

    3. プライベート関数_ojIsIE11がmain.jsアプリケーション・ブートストラップ・ファイルにある場合は、これを削除します。 この関数は、必要なポリフィルとOracle JETのES5バージョンにトランスパイルされたものをロードするために、アプリケーションがIE11 Webブラウザで実行されているかどうかを検出するために以前組み込まれていました。 JETリリース11.0.0以降、JETではIE11のサポートが削除され、IE11 WebブラウザでJETアプリケーションを実行するためのポリフィルおよびその他のリソースが配布されなくなります。 その結果、_ojIsIE11関数は目的を果たさないため、削除できます。 

      (function () {

   function _ojIsIE11() {
      var nAgt = navigator.userAgent;
      return nAgt.indexOf('MSIE') !== -1 || !!nAgt.match(/Trident.*rv:11./);
   };
   var _ojNeedsES5 = _ojIsIE11();

   requirejs.config(
     {
      ...
     }
   );
}());
  8. 次のコマンドを入力してアプリケーションの最上位ディレクトリに変更し、アプリケーションのpackage.jsonファイルで更新したローカルNPM依存性をアップグレードします:
    cd appDir
npm install
  9. アプリケーションのsrcディレクトリで、前のバージョンにハードコードされたすべての参照を置き換えます。
    1. CSSがRedwoodを参照している場合、または次のようなアイコン・フォントへの参照がsrc/index.htmlファイルに表示されます:
      <!-- This is the main css file for the default theme -->
 <!-- injector:theme -->
  <link rel="stylesheet" href="css/libs/oj/v9.0.0/redwood/oj-redwood-min.css" 
        type="text/css"/>
 <!-- endinjector -->

<!-- This contains icon fonts used by the starter template -->
  <link rel="stylesheet" id="uxiconFont" href="https://static.oracle.com . . .

      injector:themeおよびinjector:fontエントリのみが残るように、<link>タグを削除します: 

      <!-- This is the main css file for the default theme -->
 <!-- injector:theme -->
 <!-- endinjector -->

<!-- This contains icon fonts used by the starter template -->
 <!-- injector:font -->
 <!-- endinjector:font -->

    2. .htmlおよび.jsファイルに出現する可能性のある前のリリース・バージョンにハードコードされた参照を検索して、それらを現在のリリース・バージョンに置き換えます。

  10. src/index.htmlファイルに存在する場合は、次のスクリプト・タグを置き換えます:
    . . . 
    <script type="text/javascript" src="js/libs/require/require.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>

    次のスクリプト・タグ・インジェクタ・トークンを使用します:

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

    作成時に、これらのトークンは必要なスクリプト・タグに自動的に置き換えられます。 デバッグ・ビルド時に、トークンは、require.jsおよびmain.jsファイルをロードするスクリプト・タグに置き換えられます。 リリース・ビルド時に、トークンは、require.jsおよびbundle.jsファイルをロードするスクリプト・タグに置き換えられます。 リリース・ビルド時には使用されなくなるため、ビルドの最後にmain.jsファイルが削除されます。 つまり、アプリケーションでスクリプト・タグ・インジェクタ・トークンを使用しない場合は、main.jsではなくbundle.jsをロードするappRootDir/src/index.htmlファイルにスクリプト・タグを含める必要があります。

  11. 移行をテストし、ルック・アンド・フィールを検証します。

    1. 適切なオプションを指定してnpx @oracle/ojet-cli buildおよびnpx @oracle/ojet-cli serveを実行し、アプリケーションを作成および提供します。

      使用可能なオプションのリストについては、アプリケーションの最上位ディレクトリのターミナル・プロンプトで次のコマンドを入力してください: npx @oracle/ojet-cli help。

    2. アプリケーションがカスタム・テーマを使用している場合、前のリリースから現在のリリースに更新した後にカスタム・テーマを再コンパイルしないと、次のコンソール・エラー・メッセージが表示されることがあります:

      "Your CSS file is incompatible with this version of JET (19.0.0)"

    3. カスタム・テーマを新しいJETバージョンと互換にするには、npx @oracle/ojet-cli add sassを実行してSass処理を有効にします。

    4. 適切なオプションを指定してnpx @oracle/ojet-cli buildおよびnpx @oracle/ojet-cli serveを実行し、アプリケーションを作成および提供します。

      アプリケーションでカスタム・テーマが使用されている場合は、--themeオプションを含めてCSSを再コンパイルする必要があります: 
      npx @oracle/ojet-cli build [options] --theme=myTheme
      複数のカスタム・テーマを指定するには、次を使用します。
      npx @oracle/ojet-cli build [options] --theme=myTheme --themes=myTheme,myTheme1,myTheme2
  12. オプション: アプリケーションが正常に移行されたら、一時アプリケーションを削除し、移行されたアプリケーションから名前を変更したmigrating-path_mapping.jsonおよびmigrating-main.jsファイルを削除します。 問題が見つかった場合は、監査レポート用にJAF監査ツールを再実行できます。

RedwoodテーマCSSへの移行

Redwoodテーマは、アプリケーションのルック・アンド・フィールに関するOracle JET標準であり、アプリケーションをRedwoodテーマに移行するときに使用できます。

Altaテーマから移行する既存のアプリケーションがある場合は、JETリリース19.0.0に移行し、Oracle JETに付属するRedwood CSSで実行されるようにアプリケーションを構成できます。 アプリケーション・ソースの移行プロセスを完了すると、Redwood CSSディストリビューションを入手したことになります。

アプリケーションのAltaテーマをRedwoodテーマに移行するには、アプリケーション・レベルで変更を加える必要があります。 oraclejetconfig.jsonファイルを編集して、JETツールによるビルドにRedwoodまたはAlta CSSのどちらを使用するかを制御します。 設定を構成してアプリケーションをリビルドすると、アプリケーションのindex.htmlファイル内のスタイルシート・インジェクタで指定された適切なCSSがすべてのページで使用されます。

Redwoodテーマを新しいデフォルトとして設定し、アプリケーションを実行すると、アプリケーションのルック・アンド・フィールが大幅に変わっていることがわかります。 Redwoodテーマに適応させるには、新しいフォント、サイズおよびパターン用のアプリケーション・レイアウトを手動で更新する必要があります。

RedwoodテーマでサポートされているCSS変数は、JETリリース9.0.0のプレビュー機能としてoj-redwood-cssvars*.cssファイルに導入されました。 JETリリース10.0.0では、CSS変数は本番機能になり、oj-redwood*.cssファイルに含まれるようになりました。 移行したアプリケーションのoj-redwood-cssvars*.cssファイルへの参照をoj-redwood*.cssファイルへの参照に置き換えます。 Redwoodテーマを使用するようにアプリケーションを移行し、リリース10.0.0より前のJETリリースでCSS変数の使用を開始した場合は、この変更に注意してください。

始める前に:

  • Redwoodテーマに移行する前に、アプリケーション・ソース・ファイルの移行を完了します。 最初にAltaテーマを保持した状態で移行してから、Redwoodテーマに移行します。 こうすることで、Redwoodテーマでアプリケーションをテストし、必要であれば簡単にAltaテーマに戻すことができます。 詳細は、8.3.0より前のリリースからリリース19.0.0へのAltaテーマのアプリケーションの移行を参照してください。

  • カスタム・テーマを使用する場合、リリース・ノートのテーマの変更に関する項を確認し、カスタム・テーマを手動で更新します。

    Altaテーマでオーバーライドした可能性のあるSass変数は、RedwoodテーマのCSS変数に移行する必要があることに注意してください。 カスタム・テーマの移行の詳細は、「Oracle JETのCSS変数およびカスタム・テーマについて」を参照してください。

  • アプリケーションのイメージを確認し、非推奨のOracle JETフレームワーク・イメージ・ライブラリに属するイメージを、Oracle Apex Universal ThemeやFont Awesomeにあるイメージなどのパブリック・ドメイン・イメージに置き換える方法を検討してください。 Oracle JETフレームワーク・イメージ・クラスは、リリース9.0.0以降のJETクックブックに表示されなくなりました。

RedwoodテーマCSSに移行するには:

  1. Redwood CSSをロードするようにアプリケーションを構成します。

    <app_root>/oraclejetconfig.jsonファイルを編集し、defaultThemeプロパティをredwoodに変更します。 

    {
  "paths": { 
       ...
     }
   },
   "defaultBrowser": "chrome",
   "sassVer": "1.80.5",
   "defaultTheme": "redwood",
   "fontUrl": "...",
    ...,
   "architecture": "mvvm"
}

    これにより、oj-redwood-min.cssをアプリケーションのindex.htmlファイルのスタイルシート・リンクに挿入するように、JETツールが構成されます。

  2. 移行をテストし、ルック・アンド・フィールを検証します。

    適切なオプションを指定してnpx @oracle/ojet-cli buildおよびnpx @oracle/ojet-cli serveを実行し、アプリケーションを作成および提供します。

    使用可能なオプションのリストについては、アプリケーションの最上位ディレクトリのターミナル・プロンプトで次のコマンドを入力してください: npx @oracle/ojet-cli help。

    アプリケーションでカスタム・テーマが使用されている場合は、--themeオプションを含めてCSSを再生成する必要があります: 
    npx @oracle/ojet-cli build [options] --theme=myTheme
    複数のカスタム・テーマを指定するには、次を使用します。
    npx @oracle/ojet-cli build [options] --theme=myTheme --themes=myTheme,myTheme1,myTheme2

8.3.0より前のリリースからリリース19.0.0へのAltaテーマのアプリケーションの移行

Oracle JETアプリケーション・ソースをバージョン5.x.0からバージョン8.3.0を介して最新バージョン19.0.0に移行するには、NPMパッケージをアップグレードし、テーマおよびライブラリの参照パスを更新して、path_mapping.jsonファイルを置き換える必要があります。 また、oraclejetconfig.jsonファイルを更新して、JETリリース19.0.0でAlta CSSの使用を有効にする必要があります。 アプリケーション・ソースの移行が成功したことを確認した後にのみRedwood CSSテーマへの移行をお薦めします。 最後に、ビルド時に必要なスクリプト・タグで自動的に置換されるスクリプト・インジェクタ・トークンをappDirRoot/src/index.htmlに含めます。

アプリケーションを移行するには:

  1. Oracle JETアプリの移行の準備で説明されている準備タスクを確認して完了します。
  2. アプリケーションの最上位ディレクトリで、package-lock.jsonファイルを削除します。
  3. ターミナル・ウィンドウで、アプリケーションの最上位ディレクトリに移動し、次のコマンドを入力してローカルのNPM依存性をアップグレードします:
    npm uninstall @oracle/oraclejet @oracle/oraclejet-core-pack @oracle/oraclejet-tooling @oracle/ojet-cli
npm install @oracle/oraclejet @oracle/oraclejet-core-pack --save
npm install @oracle/ojet-cli --save-dev

    これらのコマンドを実行した後、アプリケーションのルート・フォルダにあるpackage.jsonファイルを開き、Oracle JETの19.0.0リリースのパッケージ・エントリおよびバージョン番号が含まれていることを確認します。 

    {
  "name": "...",
  . . .
  "dependencies": {
    "@oracle/oraclejet": "~19.0.0",
    "@oracle/oraclejet-core-pack": "~19.0.0"
  },
  "devDependencies": {
    "@oracle/ojet-cli": "~19.0.0",
     . . .,
    "typescript": "5.8.3",
    . . .
  },
  . . .

    作成した一時アプリケーション(./tempApp/package.json)のエントリを確認して、Oracle JETのリリース19.0.0に、移行するアプリケーションで作成する必要がある新規または変更済のエントリが含まれていないことを確認します。

    ノート:

    Oracle JET JavaScriptベースのMVVMアプリケーションを移行する場合、"typescript": "5.8.3エントリは必要ありません。
  4. アプリケーションのルート・フォルダにあるoraclejetconfig.jsonファイルを開き、それにsassVerおよびdefaultThemeプロパティの値が含まれていることを確認します。

    次の例では、アプリケーションでAltaテーマが使用されるようにaltaを指定します。

    ノート:

    Oracle JETでは、リリース18.0.0のnode-sassへの依存性をsass (Dart Sass)に置き換えました。 node-sassのサード・パーティ作成者はサポートしなくなりました。 AltaまたはAltaに基づくカスタム・テーマを引き続き使用する場合は、node-sassをインストールする必要があります。 node-sassのNode.jsバージョン・サポート・ポリシーなど、node-sassのインストール方法の詳細は、NPMレジストリのWebサイトのnode-sassページを参照してください。 sassVerプロパティの値としてインストールするnode-sassのバージョンを指定します。 
    {
  "paths": {
    "source": {
	"common": "src",
	"web": "src-web",
	"javascript": "js",
	"typescript": "ts",
	"styles": "css",
	"themes": "themes"
    },
    "staging": {
	"web": "web",
	"themes": "staged-themes"
    }
  },
  "unversioned": true,
  "defaultBrowser": "chrome",
  "sassVer": "...",
  "defaultTheme": "alta",
  "fontUrl": "...",
  "typescriptLibraries": "...",
  "jsdocLibraries": "...",
  "webpackLibraries": "...",
  "mochaTestingLibraries": "...",
  "jestTestingLibraries": "...",
  "architecture": "mvvm"
}

    "defaultTheme": "alta" 設定により、アプリケーションを移行して、Altaテーマを維持できます。 このプロパティは、後の移行プロセスでRedwoodテーマへの移行をサポートします。 アプリケーションでカスタム・テーマを使用する場合は、かわりにカスタム・テーマの名前を指定します。 たとえば、"defaultTheme": "myCustomTheme",

    アプリケーションでTypeScript、Webpackまたはテスト・ライブラリを使用する場合は、作成した一時アプリケーション(./tempApp/oraclejetconfig.json)のエントリを確認して、これらの機能の*Librariesプロパティが最新であることを確認します。

  5. 一時アプリケーションからpath_mappings.jsonファイルをコピーして、Oracle JETライブラリの構成パスを更新し、Oracleライブラリの19.0.0バージョンを参照します。

    1. 移行しているアプリケーションの名前src/js/path_mapping.jsonをmigrating-path_mapping.jsonに変更します。

    2. tempApp/src/js/path_mapping.jsonを移行中のアプリケーションのsrc/jsディレクトリにコピーします。

    3. サードパーティ・ライブラリをアプリケーションに追加した場合は、path_mapping.jsonを編集するために開き、既存のエントリをコピーして必要に応じて変更し、migrating-path_mapping.jsonに表示される各ライブラリ用のエントリを追加します。 次のコード・サンプルは、my-libraryという名前のサードパーティ・ライブラリ用に行う追加内容を示しています。 

      "libs": {

    "my-library": {
      "cdn": "3rdparty",
      "cwd": "node_modules/my-library/build/output",
      "debug": {
        "src": "my-library.debug.js",
        "path": "libs/my-library/my-library.debug.js",
        "cdnPath": ""
      },
      "release": {
        "src": "my-library.js",
        "path": "libs/my-library/my-library.js",
        "cdnPath": ""
      }
    },
...
  6. 一時アプリケーションからコピーすることで、アプリケーション・スクリプト・テンプレートを更新します。

    1. tempApp/scripts/hooksディレクトリから移行中のアプリケーションのscripts/hooksディレクトリに新規スクリプト・テンプレート・ファイルをすべてコピーします。

    2. tempApp/scripts/hooksディレクトリにあるhooks.jsonスクリプト構成ファイルを、移行中のアプリケーションのscripts/hooksディレクトリにコピーします。 更新された構成ファイルによって、新しいスクリプト・テンプレート・ファイルと対応するビルド・システム・フック・ポイントが関連付けられ、Oracle JET CLIがスクリプトをコールできるようになります

  7. アプリケーションで、main.jsアプリケーション・ブートストラップ・ファイルを開き、次のコードが含まれていることを確認します。

    1. requirejs.config定義のpathsプロパティに、開始と終了の//injectorおよび//endinjectorコメントが含まれていることを確認します。 コメントが削除された場合は、次のようにrequirejs.config()定義に追加します。 

      requirejs.config(
  {
    baseUrl: 'js',

    paths:
    /* DO NOT MODIFY
    ** All paths are dynamicaly generated from the path_mappings.json file.
    ** Add any new library dependencies in path_mappings json file.
    */
    //injector:mainReleasePaths
    {
       ...no need to revise...
    }
    //endinjector 
   }
);

      アプリケーションのビルドまたは提供時に、ツールでは、これらのinjectorコメントの内容に従って、main.jsにリリース固有のライブラリ・パスを挿入します。 前の移行ステップで更新されたpath_mapping.jsonファイルにより、このリリースにとって適切なライブラリ構成パスが、移行されるアプリケーションに含まれることが保証されます。

    2. main.jsファイルのapp.loadModule()に加えた変更が表示されることを確認します。

      JETリリース9.0.0以降、app.loadModule()は非推奨になり、main.jsから削除されましたが、ブートストラップ・コードは引き続き関数を使用することもできます(パスを変更する場合など)。 リリース9.x.0より前に作成されたアプリケーションの移行はloadModule()に依存するため、関数は移行されたmain.jsファイルに残る必要があり、移行されたappController.jsファイルにはloadModule()定義が含まれている必要があります。

      JETリリース9.0.0以降、作成した新しいアプリケーションでは、loadModule()の監視可能な依存性は、oj-module要素で使用する非推奨のojRouterのサポートに使用されなくなりました。 初期アプリケーション・テンプレートでは、CoreRouterを使用し、ModuleRouterAdapterを介してoj-moduleを操作するようになりました。

    3. プライベート関数_ojIsIE11がmain.jsアプリケーション・ブートストラップ・ファイルにある場合は、これを削除します。 この関数は、必要なポリフィルとOracle JETのES5バージョンにトランスパイルされたものをロードするために、アプリケーションがIE11 Webブラウザで実行されているかどうかを検出するために以前組み込まれていました。 JETリリース11.0.0以降、JETではIE11のサポートが削除され、IE11 WebブラウザでJETアプリケーションを実行するためのポリフィルおよびその他のリソースが配布されなくなります。 その結果、_ojIsIE11関数は目的を果たさないため、削除できます。 

      (function () {

   function _ojIsIE11() {
      var nAgt = navigator.userAgent;
      return nAgt.indexOf('MSIE') !== -1 || !!nAgt.match(/Trident.*rv:11./);
   };
   var _ojNeedsES5 = _ojIsIE11();

   requirejs.config(
     {
      ...
     }
   );
}());
  8. 次のコマンドを入力してアプリケーションの最上位ディレクトリに変更し、アプリケーションのpackage.jsonファイルで更新したローカルNPM依存性をアップグレードします:
    cd appDir
npm install
  9. アプリケーションのsrcディレクトリで、前のバージョンにハードコードされたすべての参照を置き換えます。

    1. src/index.htmlファイルを編集して、既存のCSS参照をバージョンv19.0.0に置き換えます。 

      <link rel="stylesheet" href="css/libs/oj/v19.0.0/alta/oj-alta-min.css" id="css" />

    2. .htmlおよび.jsファイルに出現する可能性のある前のリリース・バージョンにハードコードされた他の参照を検索して、それらを現在のリリース・バージョンに置き換えます。

  10. src/index.htmlファイルに存在する場合は、次のスクリプト・タグを置き換えます:
    . . . 
    <script type="text/javascript" src="js/libs/require/require.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>

    次のスクリプト・タグ・インジェクタ・トークンを使用します:

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

    作成時に、これらのトークンは必要なスクリプト・タグに自動的に置き換えられます。 デバッグ・ビルド時に、トークンは、require.jsおよびmain.jsファイルをロードするスクリプト・タグに置き換えられます。 リリース・ビルド時に、トークンは、require.jsおよびbundle.jsファイルをロードするスクリプト・タグに置き換えられます。 リリース・ビルド時には使用されなくなるため、ビルドの最後にmain.jsファイルが削除されます。 つまり、アプリケーションでスクリプト・タグ・インジェクタ・トークンを使用しない場合は、main.jsではなくbundle.jsをロードするappRootDir/src/index.htmlファイルにスクリプト・タグを含める必要があります。

  11. 移行をテストし、ルック・アンド・フィールを検証します。

    1. 適切なオプションを指定してnpx @oracle/ojet-cli buildおよびnpx @oracle/ojet-cli serveを実行し、アプリケーションを作成および提供します。

      使用可能なオプションのリストについては、アプリケーションの最上位ディレクトリのターミナル・プロンプトで次のコマンドを入力してください: npx @oracle/ojet-cli help。

    2. アプリケーションがカスタム・テーマを使用している場合、前のリリースから現在のリリースに更新した後にカスタム・テーマを再コンパイルしないと、次のコンソール・エラー・メッセージが表示されることがあります:

      "Your CSS file is incompatible with this version of JET (19.0.0)"

    3. カスタム・テーマを新しいJETバージョンと互換にするには、npx @oracle/ojet-cli add sassを実行してSass処理を有効にします。

    4. 適切なオプションを指定してnpx @oracle/ojet-cli buildおよびnpx @oracle/ojet-cli serveを実行し、アプリケーションを作成および提供します。

      使用可能なオプションのリストについては、アプリケーションの最上位ディレクトリのターミナル・プロンプトで次のコマンドを入力してください: npx @oracle/ojet-cli help。

      アプリケーションでカスタム・テーマが使用されている場合は、--themeオプションを含めてCSSを再コンパイルする必要があります: 
      npx @oracle/ojet-cli build [options] --theme=myTheme
      複数のカスタム・テーマを指定するには、次を使用します。
      npx @oracle/ojet-cli build [options] --theme=myTheme --themes=myTheme,myTheme1,myTheme2
  12. オプション: アプリケーションが正常に移行されたら、一時アプリケーションを削除し、移行されたアプリケーションから名前を変更したmigrating-path_mapping.jsonおよびmigrating-main.jsファイルを削除します。 問題が見つかった場合は、監査レポート用にJAF監査ツールを再実行できます。

アプリケーションを移行し、Altaテーマで実行されることを確認したら、「RedwoodテーマCSSへの移行」で説明するように、追加の別のプロセスに従ってRedwoodテーマに移行できます。