Oracle OpenWorld 2016ハンズオン・ラボ

前提条件

構築するもの

このラボでは、まずOracle JET NavDrawerスターター・テンプレートを試してから、2つのData Visualization Chartコンポーネントを追加します。この2つのコンポーネントを関連付けて、Associated Viewsを使用します。グラフにカーソルを合わせると、強調表示された値が両方のグラフに同時に表示されます。完成したページは、次の図のようになります。

セットアップ手順

Oracle JETスターター・テンプレートの使用

Oracle JET NavDrawerスターター・テンプレートを生成するには、次のコマンドライン構文を使用します。

yo oraclejet <projectname> --template=navdrawer

Oracle JET CLIツールのセットアップ方法について詳しくは、Oracle JETの開発者ガイドを参照してください。

スターター・テンプレートの構造の概要

1. テンプレート・アプリケーションのファイル構造は、次の図1のようになります。各ページのHTMLテンプレートが /js/views ディレクトリに格納され、対応するJavaScriptファイルが/js/viewModelsディレクトリに格納されています。
   
   
   図1：ファイル構造
   
   
   
2. index.htmlファイルを確認すると、プロジェクトがOracle JET ojModule機能を使用してどのようにテンプレートをアプリケーションのさまざまな部分にロードするかが分かります。
   
   
   図2：index.html
   

3. ブラウザでアプリケーション（index.htmlファイル）を実行して、NavDrawerスターター・テンプレートのデフォルトのルック・アンド・フィールを確認できます。

   アプリケーションの実行

   JavaScriptアプリケーションをファイル・システムから実行する場合、すべてのブラウザが同じように動作するわけではありません。Firefoxではindex.htmlファイルをファイル・システムから直接実行できますが、ChromeとSafariではエラーが発生します。ChromeまたはSafariで実行するには、ファイルを何らかのWebサーバーから実行する必要があります。HOLマシンで軽量のWebサーバーを起動して実行する手順については、前述の「セットアップ手順」を参照してください。

   
   
   
4. すべてのOracle JETスターター・テンプレートが応答可能な状態にセットアップされます。ブレーク・ポイントは、デスクトップ（1024ピクセル以上）、iPad横向き、iPad縦向き、および電話（768ピクセル以下）で設定されています。ブラウザ・ウィンドウのサイズを変更して、アプリケーションの各セクションのさまざまな動作を確認します。図3～6は、デバイス・サイズごとにアプリケーションがどのように表示されるかを示しています。
   
   
   図3：デスクトップ・レイアウト
   
   
   
   図4：モバイル・レイアウト
   
   
   
   図5：ドローワを伴ったモバイル
   
   
   

基本レイアウトのセットアップ

このハンズオン・ラボでは、スターター・テンプレートのDashboardコンテンツ・ページにコンテンツを追加します。必要に応じて、後で個別にテンプレートの他のページを使用できます。

Oracle JETには、CSS3 Flexboxと連携して機能するCSSヘルパー・クラスのコレクションが用意されています。これらのクラスを使用すると、表示されるデバイスのサイズに応答するように、ページをすばやくセットアップできます。ページの基本レイアウトをセットアップするには、次の手順を実行します。

1. エディタでdashboard.htmlファイルを開きます。このファイルは/js/viewsフォルダにあります。
2. <h3>ページ・タイトルの下に、次のDOM構造を追加します。
   

   <div class="oj-flex oj-flex-items-pad">
    <div class="oj-flex-item">
   
    </div>
    <div class="oj-flex-item">
   
    </div>
   </div>
    

CSS3 Flexboxの操作の詳細については、CSS-Tricks.comがよい参考になります。

1つ目のOracle JETグラフの追加

引き続きdashboard.htmlファイルを使用して、2つのData Visualizationコンポーネントのうち1つ目のコンポーネントを追加します。Oracle JETのCookbookページからHTMLコードをコピー します。

1. Cookbookのコンテンツをエディタにコピーする

   1. Cookbookページのコンテンツをいくつかコピーしてdashboard.htmlファイルに貼り付けます。
   2. エディタで、/js/viewsフォルダのdashboard.htmlファ イルを開きます。
   3. エディタで、/js/viewModelsフォルダの対応するJavaScriptモジュール（dashboard.js）も開きます。エディタに2つのファイルが開いた状態になります。まず、dashboard.htmlファイルを使用します。
   4. CookbookページのHTML Editorセクションに表示されているすべてのHTMLコードをコピーします（HTML Editorでの選択については、次の図6を参照）。
      
      
      図6：Cookbookからの棒グラフの選択
      
      
   5. dashboard.htmlファイルで、コピーしたHTMLコードを、上記の手順で作成した1つ目のoj-flex-item <div>要素内に貼り付けます。

   6. この時点で、dashboard.htmlファイルは次の図7のようになります。
      
      
      図7：Cookbookから新しいコンテンツを貼り付けたdashboard.html
      
      

   7. 1つ目のグラフをページに追加しました。2つ目のグラフに移ります。Bubble Chart Cookbookページに移動し、このページか らHTMLをコピーして、今回は2つ目のoj-flex-item <div>要素に貼り付けます。HTMLの選択については、次の図8を参照してください。
      
      
      図8：Cookbookからのバブル・チャートの選択
      
      
   8. 両方のグラフをdashboard.htmlファイルに貼り付けると、ファイルは次の図9のようになります。
      
      
      図9：新しいコンテンツを貼り付けたdashboard html
      
      

2. JavaScriptを使用する

   1. Knockout.jsベースのアプリケーションを使用する場合、ViewModelを使用してビュー（HTMLページ）内のデータに接続します。その際、JavaScriptをいくつか使用することで、モデル（データ）を操作し、ページに表示する特定の値を設定します。Knockout.jsでは双方向バインディングを使用できるため、モデル内の要素を変更してビューを自動的に更新できます。このタイプのアプリケーション・アーキテクチャはModel - View - ViewModel（MVVM）と呼ばれます。
   2. Bar Chart CookbookページのJS Editorセクションを確認します。以下の図10を参照してください。
   3. この例では、次の2つを使用できます。
      1. このページで使用するコンポーネント・モジュールへの参照。Chartコンポーネントの場合、この参照はojs/ojchartで す。
      2. ViewModelのコンテンツ（この例では、ChartModel()と いう名前）。対象となるコンテンツは、定義barSeries、barSeriesValue、barGroups、 barGroupsValueです。
         
         

         Knockout.jsのobservable

         "observable"または"observableArray"は、Knockout.jsで使用される特別なタイプの双方向バインディング変数です。UIまたはJavaScript ViewModelで値が変更されると、observableへの他の参照も自動的に更新されます

         
         図10：Bar Chart CookbookページのJS Editorセクション
         
         

   4. これらの両方のセクションのコードを、dashboard.jsファイルの対応するセクションに追加します（次の図11の白い部分。次の手順で実行するクリーンアップも表示）。
      ojs/ojchart行をdefine()メソッドの最後に追加し、ArrayおよびKnockoutのobservableArray定義をこのファイルのさらに下側にあるDashboardViewModel関数に追 加します。
   5. 新しいモジュール参照をdefine()メソッドの真中ではなく最後に追加していることを確認します。
      
      
      図11：棒グラフが追加されたdashboard.js
      
      
   6. バブル・チャートのJavaScriptに対して、同じコピー/貼付けを繰り返します。ojchartモジュールは1回しか必要ないため、コピーする必要はありません。棒グラフで行ったように、Arrayおよび2つのKnockout observable定義のみコピーします。

   AMDモジュールの使用

   上記の画像例10と11では、コード・セクション全体はコピーしていません。Cookbook では、1つのページ内の必要なライブラリを単にロードして使用するには、"require"コールを使用します。貼付け先のスターター・テンプレート・ページはAMDモジュールであるため、アプリケーションの他の部分でも使用できるモジュールを作成するには、"define"を使用します。

   
   
   

3. クリーンアップを少し実行する

   • dashboard.htmlファイルで、両方のグラフ定義からorientationオプションとstackオプションを削除します。削除すると、ファイルは上記の図9のようにな ります。

4. プロジェクトを実行する

   • ブラウザでアプリケーション（index.htmlファイル）を実行して、2つのグラフを並べて表示できます。これらのグラフは、Oracle Altaテーマを使用するように自動的にスタイル設定されます。グラフ項目にカーソルを合わせると、その値を目立たせるように他の項目の表示が抑制されます。

すべてを統合する

1. 2つのタイプのグラフが表示されています。それぞれのグラフは適切に表示されていますが、この2つのグラフを統合します。
2. dashboard.jsファイルを確認すると、各グラフのデータセットの系列名が同じになっています。このデータセットを配列として定義して、コンポーネントの各データ定義でこのデータセットを参照できます。以下の コードをコピーしてDashboardViewModel関数内のvar self = this;行 の下に追加します。
   

    // Categories
    var categories = ["Initial", "Qualification", "Meeting", "Proposal", "Close"]; 
   
    

3. 次に、以下のコードを使用してchartSeries配列とbubbleSeries配列の両方を更新します。

   /* chart data */
   var barSeries = [{name: categories[0], items:[42, 34]},
    {name: categories[1], items:[55, 30]},
    {name: categories[2], items:[36, 50]},
    {name: categories[3], items:[22, 46]},
    {name: categories[4], items:[22, 46]}]; 
    

   /* chart data */
   var bubbleSeries = [{name: categories[0], items:[{x:15, y:25, z:5}, {x:25, y:30, z:12}, {x:25, y:45, z:12}]},
    {name: categories[1], items:[{x:15, y:15, z:8}, {x:20, y:35, z:14}, {x:40, y:55, z:35}]},
    {name: categories[2], items:[{x:10, y:10, z:8}, {x:18, y:55, z:10}, {x:40, y:50, z:18}]},
    {name: categories[3], items:[{x:8, y:20, z:6}, {x:11, y:30, z:8}, {x:30, y:40, z:15}]},
    {name: categories[4], items:[{x:4, y:17, z:2}, {x:35, y:10, z:15}, {x:22, y:22, z:13}]}]; 
    

4. この時点でコードを実行できます。引き続き2つのグラフが表示されますが、新しい系列名になっています。
5. 最後に、Associated Viewsと呼ばれる機能を使用して2つのグラフを関連付けます。
   1. 引き続きdashboard.jsファイルを使用して、次のコード行をカテゴリ配列定義の下に追加します。

      self.highlightedCategoriesValue = ko.observableArray([]); 
       

   2. dashboard.htmlファイルで、次のオプションを両方のグラフ定義ブロックに追加します。

      highlightedCategories: highlightedCategoriesValue 
       

6. 変更を保存して、ページを実行します。片方のグラフ内の値にカーソルを合わせると、両方のグラフでその系列が強調表示され、他の系列はすべて表示が抑制されます。

7. 次の手順を実行します。

   ojChartsのAssociated Views機能を使用すると、Knockoutの双方向バインディングを利用できます。両方のグラフのhighlightedCategories:オプションを同じknockout observableArrayにバインドすると、片方のグラフの強調表示に対する変更がもう片方のグラフに伝播されます。グラフ項目にカーソルを合わせると、そのグラフのhighlightedCategoriesオプションの値が更新されます。このオプションはKnockout observableArrayにバインドされているため、このobservableArrayにバインドされている他のDOM要素に値が変更されたことを通知するイベントが送信され、他のDOM要素でも一致するように値が更新されます。

8. このHOLでここまで終了し、まだ時間がある場合は、強調表示のオプションで行ったように、両方のグラフにhiddenCategories:オプションとhideAndShowBehavior:オプションを追加して、dashboard.jsファイルにhiddenCategoriesValueを定義してみます。すべて適切に機能している場合は、いずれかのグラフの凡例項目をクリックすると、やや異なる表示が示されます。

次のステップ

この短時間のハンズオン・ラボで、Oracle JETに関してすべてを学習したわけではありません。インターネットで公開されているさまざまなリソースを参照し、Oracle JETについて詳しく確認することをお勧めします。Oracle JETのWebサイトの下部に、YouTube、Twitter、開発者ガイド、コミュニティ・ディスカッション・フォーラムなどの他のさまざまなリソースへのリンクが掲載されています。

これらのリソースを参照いただき、

コーディングにお役立てください。

---

関連記事

• Learn Knockout.js
• Learning jQuery
• Learning advanced JavaScript
• Understanding RequireJS
• W3Schools のCSSチュートリアル
• The Best way to learn CSS