Oracle JET Webアプリケーションを様々な画面サイズでテストします。

イントロダクション

レスポンシブ・レイアウトは、様々なデバイスにわたって様々な画面サイズに合わせて調整されます。Google Chrome WebブラウザでOracle JET Webアプリケーションを実行する場合、Google Chrome開発者ツール(Chrome DevTools)で選択した様々な画面サイズでWebアプリケーションの応答性をテストできます。

目的

このチュートリアルでは、開発されたOracle JET Webアプリケーションのレスポンシブ・デザインを様々な画面サイズでテストします。

前提条件

JavaScriptランタイム、Node.jsおよび最新のOracle JETコマンドライン・インタフェースがインストールされたOracle JETアプリケーションを作成するために設定された開発環境
Oracle JET開発者クックブックへのアクセス
JET_Web_Applicationフォルダが作成されるように、この学習パスの前のチュートリアルの完了

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

Oracle JET Webアプリケーションにはレスポンシブ・レイアウトおよびコンポーネントがあり、様々なWebブラウザで実行できます。このチュートリアルでは、ChromeブラウザとDevToolsを使用して、様々な画面サイズでアプリケーションを表示します。

ターミナル・ウィンドウで、JET_Web_Applicationディレクトリに移動し、アプリケーションを実行します。
```
$ ojet serve
```
Oracle JETツールは、Google ChromeでWebアプリケーションを実行します。

図final-app.pngの説明

タスク2:画面サイズの変更

Google Chromeブラウザのデバッガ・モードで、様々な画面サイズおよびデバイスについてWebアプリケーションの応答性をテストできます。別のデバイスでアプリケーションを実行すると、選択した画面サイズに対してWebアプリケーションのコンテンツが表示され、テキストの配置は画面サイズに基づきます。

Google Chromeで、Ctrl+Shift+Iを押してChromeのDevToolsウィンドウを表示します。

図chrome-debmode.pngの説明
Chrome DevToolsツールバーで、をクリックしてデバイス・モードに切り替えます。

図device-mode-lens.pngの説明
デバイス・モードの画面エミュレータから、アプリケーションをテストする特定のデバイスまたは画面サイズを選択します。

図viewport.pngの説明
「ピクセル5」を選択します。

「アクティビティ」コンテナでは、コンテンツは画面の最後に配置されます。「アクティビティ・アイテム」コンテナに、小画面と中画面のリスト・アイテムが表示されます。

図small-screen.pngの説明
iPad Airを選択します。

「アクティビティ」コンテナでは、コンテンツは左揃えになります。「アクティビティ・アイテム」コンテナに、小画面と中画面のリスト・アイテムが表示されます。「アクティビティ・アイテム」コンテナでは、パディングが適用されます。

図medium-screen.pngの説明
「ハブの最大ネスト」を選択します。

「アクティビティ」コンテナでは、コンテンツは左揃えになります。「アクティビティ・アイテム」コンテナに、大画面と大画面のリスト・アイテムが表示されます。

図large-screen.pngの説明
Chrome DevToolsツールバーで、をクリックしてデバイス・モードを終了します。
実行中のWebアプリケーションを表示するブラウザ・ウィンドウまたはタブを閉じます。
端末ウィンドウでCtrl+Cを押し、プロンプトが表示されたらyと入力してOracle JETツール・バッチ・ジョブを終了します。

その他の学習リソース

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

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

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

Test the Oracle JET web application on different screen sizes

F53151-01

February 2022