Oracle JET Webアプリケーションのデバッグ

イントロダクション

このチュートリアルでは、ブラウザ開発者ツールを使用してOracle JETアプリケーションをデバッグする方法について説明します。

ブラウザでのデバッグは、問題のあるコードをすばやく分離し、解決策をテストするのに役立ちます。すべてのブラウザには、HTML、Cascading Style Sheets (CSS)およびJavaScriptソースの表示や改訂などのタスクの実行に使用できる開発者ツールがあります。たとえば、Google Chrome WebブラウザでOracle JET Webアプリケーションを実行する場合、Google Chrome開発者ツール(Chrome DevTools)を使用して、各コンポーネントのページ・ソースおよびCSSスタイルを確認できます。

目的

このチュートリアルの完了時に、ブラウザでWeb開発者ツールを使用してOracle JET Webアプリケーションで正しくないコードを特定する方法、提供されたサンプル・プロジェクト・ファイルを変更し、その変更がブラウザでライブで行われていることを確認する方法を学習します。

前提条件

• JavaScriptランタイム、Node.jsおよび最新のOracle JETコマンドライン・インタフェースがインストールされたOracle JETアプリケーションを作成するために設定された開発環境
• Google Chromeがインストールされました
• JET_Web_ApplicationフォルダにOracle JET Webアプリケーションを作成できるように、この学習パスでの前のチュートリアルの完了
• JET_Web_Application/src/ts/viewsディレクトリにダウンロードされたdDashboard.htmlサンプル

タスク1: Webアプリケーションの実行

1. JET_Web_Application/src/ts/viewsディレクトリに移動し、dashboard.htmlファイルのバックアップ・コピーを作成し、提供されたdDashboard.htmlサンプル・ファイルを同じディレクトリにダウンロードします。

2. ターミナル・ウィンドウでOracle JETツール・サーバーのバッチ・ジョブが実行されている場合は、Ctrl+Cを押し、プロンプトが表示されたらyと入力してサーバー・バッチ・ジョブを終了します。サーバー・バッチ・ジョブでは、既存のアプリケーション・ファイルに行ったリビジョンのみが認識されます。新しいファイルを作成した後、Webアプリケーションを再度実行する必要があります。

3. ターミナル・ウィンドウで、JET_Web_Applicationディレクトリからアプリケーションを実行します。

   $ ojet serve
   

   ブラウザに、圧縮されたチャートのサンプルが表示されます。「チャートの選択」ドロップダウン・リストは機能しません。

   

   図app-open.pngの説明

4. デフォルトのブラウザがGoogle Chromeでない場合は、ブラウザを開いて、開いているページのアドレスを「Google Chrome URL address」フィールドにコピーします。

タスク2: Webアプリケーションのデバッグ

1. Google Chromeブラウザで、Ctrl+Shift+Iを押して「開発者ツール」ウィンドウを表示します。Chrome DevToolsはソース・コードを表示します。

2. 「要素」パネルで、oj-chartカスタムHTML要素が見つかるまで、ネストされたタグを展開します。oj-chartカスタムHTML要素のtype属性は、oj-select-singleカスタムHTML要素の値を使用するかわりに、barとしてハードコードされています。Chrome DevToolsの「スタイル」パネルで、チャート・コンポーネントの位置図の下の「チャート」コンポーネントのwidth属性が135ピクセルに設定されていることにも注意してください。

   

   図style-tab.pngの説明

   oj-chartカスタムHTML要素は、幅を135pxに設定し、チャート・コンポーネントがページで圧縮されたようにするHTML div要素に含まれています。そのため、チャート・コンポーネントは親コンテナから幅を継承し、スタイル幅の設定100%を無視します。

タスク3: Webアプリケーション・コードの修正

1. JET_Web_Application/src/ts/viewsディレクトリに移動し、エディタでdashboard.htmlファイルを開きます。

2. oj-chartカスタムHTML要素を検索します。チャート・タイプを[[val]]に変更し、タグの周囲にある<div>タグを削除します。

   . . .
   </oj-select-single>
   <oj-chart id="barChart" type="[[val]]" data="[[chartDataProvider]]" animation-on-display="auto" 
             animation-on-data-change="auto" hover-behavior="dim" style='width:100%;height:350px;'>
     <template slot="itemTemplate" data-oj-as="item">
   . . .
   

3. まだ存在しない場合は、appRootDir/src/css/app.cssファイルの末尾にスタイル・クラスchartStyleを追加します。

   .chartStyle {
      max-width:500px;
      width:100%;
      height:350px;
   }
   

4. style属性を、appRootDir/src/css/app.cssファイルのスタイル・プロパティを参照するclass属性に置き換えます。

   <oj-chart id="barChart" type="[[val]]" . . . style='width:100%;height:350px;'>
   

   次のようになります。

   <oj-chart id="barChart" type="[[val]]" . . . class="chartStyle">
   

   前述の例で示したインラインstyle属性を使用するのではなく、コンポーネントに適用するスタイルを別のCSSファイルに配置することをお薦めします。

5. 変更を確認するには、ファイルを保存し、Webアプリケーションのライブ更新出力をブラウザに表示します。

6. サンプル・ファイルを元のdashboard.htmlファイルに置き換えます。

7. 実行中のWebアプリケーションを表示するブラウザ・ウィンドウまたはタブを閉じます。

8. 端末ウィンドウでCtrl+Cを押し、プロンプトが表示されたらyと入力してOracle JETツール・バッチ・ジョブを終了します。

9. 次のチュートリアルのために、端末ウィンドウを開いたままにします。

その他の学習リソース

docs.oracle.com/learnの他のラボを調べるか、Oracle Learning YouTubeチャネルでさらに無料の学習コンテンツにアクセスします。さらに、education.oracle.com/learning-explorerにアクセスしてOracle Learning Explorerにします。

製品ドキュメントは、Oracleヘルプ・センターを参照してください。

---

タイトルおよび著作権情報

Debug an Oracle JET web app

F53108-01

February 2022

Copyright © 2022, Oracle and/or its affiliates.