異なる画面サイズでのOracle JET仮想DOMアプリケーションをテストします

はじめに

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

目的

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

前提条件

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

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

  1. ターミナル・ウィンドウで、JET-Virtual-DOM-appディレクトリに移動し、アプリケーションを実行します。

    npx ojet serve

    Oracle JETツールは、ブラウザで仮想DOMアプリケーションを実行します。

    レスポンシブ・レイアウトを使用するアプリケーション

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

Chromeブラウザのデバッガモードで、さまざまな画面サイズとデバイスでアプリをテストできます。異なるデバイスでアプリを使用すると、アプリのコンポーネントとコンテンツは、指定された画面のサイズに合わせて調整されます。たとえば、アクティビティ・コンテナ・コンテンツのテキスト配置は、小さい画面サイズ、およびアクティビティ・アイテム・コンテナのリスト・アイテムと色で変更されます。

  1. Google Chromeで、Ctrl+Shift+Iを押してChrome DevToolsを表示します。

    Google Chromeデバッガ有効

  2. ChromeのDevToolsツールバーで、デバイスツールバーボタンを切り替えをクリックしてデバイス・モードに切り替えます。

    デバイスモードのツールバーロケータ

  3. デバイス・モードのスクリーン・エミュレータで「ディメンション」ドロップダウン・メニューをクリックします。

    様々なビューポートが表示されます。

  4. ドロップダウン・メニューから、小さい画面サイズのピクセル7を選択し、画面エミュレータでアプリケーションを表示します。

    アクティビティ・コンテナで、コンテンツは右揃えです。「アクティビティ・アイテム・コンテナ」に、小画面および中画面のアイテムの略称リストが表示され、ヘッダーの「アクティビティ詳細」がヘッダーの「アクティビティ・アイテム」に置換されます。コンテナの色はライトシアンです。

    小さな画面サイズで表示されるアプリ

  5. 「ディメンション」ドロップダウン・メニューから、画面サイズが中程度のiPad Airを選択します。

    アクティビティ・コンテナでは、コンテンツは左揃えになります。「アクティビティ・アイテム・コンテナ」に、小画面および中画面のアイテムの略称リストが表示され、ヘッダーの「アクティビティ詳細」がヘッダーの「アクティビティ・アイテム」に置換されます。コンテナの色はライトシアンです。

    中程度の画面サイズで表示されるアプリ

  6. 「ディメンション」ドロップダウン・メニューから、画面サイズが大きい「ハブの最大ネスト」を選択します。

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

    大きな画面サイズで表示されるアプリ

  7. ChromeのDevToolsツールバーで、デバイスツールバーボタンを切り替えをクリックしてデバイス・モードを終了します。

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

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

次のステップ

このチュートリアルでは、仮想DOM Webアプリケーションの構築に関するこの学習パスのモジュールレスポンシブ・デザインを終了します。

「Oracle JETのマスター・ディテール・ビュー」モジュールで、学習パス「Oracle JET仮想DOMアプリケーションでのマスター・ビューの作成」の次のチュートリアルに進むことができます。

仮想DOM学習パスのメイン・ページに戻ると、仮想DOMアプリケーションの構築に関するすべてのモジュールにアクセスすることもできます。

その他の学習リソース

docs.oracle.com/learnで他のラボを確認するか、Oracle Learning YouTubeチャネルで無料のラーニング・コンテンツにアクセスしてください。また、education.oracle.com/learning-explorerにアクセスして、Oracle Learning Explorerになります。

製品ドキュメントについては、Oracle Help Centerを参照してください。