MONACAサンプルアプリの編集7

今回は前回の続きとして、まず、グラフで基準値が一目でわかるように色を付ける改良を行っていく。

.controller('PopulationChartController', ['$scope', function($scope) {
  $scope.formatData = function() {
    if (!$scope.data) {
      return [];
    }
    //alert(JSON.stringify($scope.data,null,2));
    var total = [],
      males = [],
      females =[];
 
$scope.data.forEach(function(item){
  var strDate = item.sampleDate.replace(/ /g, ' 02:');
  var sampleDate = Date.parse(strDate.replace(/-/g, '/'));
  var value = parseFloat(item.value);
  var normalValue = item.normalValue.split(/-/);
  var lower = parseFloat(normalValue[0]);
  var upper = parseFloat(normalValue[1]);
  
   
 
      total.push({x: sampleDate, y: upper});
      males.push({x: sampleDate, y: value});
      females.push({x: sampleDate, y: lower});
    });
 
    return [
      {
        key: '上限',
        values: total
      },
      {
        key: '下限',
        values: females
      },
      {
        key: '検査結果',
        values: males
      }
    ];
  };

上記のグラフデータを作成しているプログラムの中の26行目にある「return」で配列を戻している箇所を以下のように、グラフで基準値が一目でわかるように、色を付けるプログラムを書き加えていく。

.controller('PopulationChartController', ['$scope', function($scope) {
  $scope.formatData = function() {
    if (!$scope.data) {
      return [];
    }
    //alert(JSON.stringify($scope.data,null,2));
    var total = [],
      males = [],
      females =[];
 
$scope.data.forEach(function(item){
  var strDate = item.sampleDate.replace(/ /g, ' 02:');
  var sampleDate = Date.parse(strDate.replace(/-/g, '/'));
  var value = parseFloat(item.value);
  var normalValue = item.normalValue.split(/-/);
  var lower = parseFloat(normalValue[0]);
  var upper = parseFloat(normalValue[1]);
  
   
 
      total.push({x: sampleDate, y: upper});
      males.push({x: sampleDate, y: value});
      females.push({x: sampleDate, y: lower});
    });
 
    return [
      {
        key: '上限',
        values: total,
        color: '#0000CC',
        area:true
      },
      {
        key: '下限',
        values: females,
        color: '#FF0000',
        area:true
      },
      {
        key: '検査結果',
        values: males,
        color: '#00FF00',
        strokeWidth:4
      }
    ];
  };

30行目と36行目と42行目にある、「color」は書き加えることで、グラフに色をつけることができる。それぞれ、上限、下限、検査結果にあった色を指定している。

図1 グラフに色を付けて表示した結果

図1のようにグラフに色付けされて、一目でわかりやすいように表示された。

また、43行目にある「strokeWidth」を書き加えることで、検査結果のグラフの線の太さを太くすることができ、31行目と37行目にある「area:true」を書き加えることで、エリアを０まで色付けすることができる。例えば、上限に書き加えれば、上限より下から０までのエリアが色付けされ、下限にも書き加えれば、下限より下から０までのエリアを色付けすることでできる。

図2 線の太さとエリアの色付けをして表示した結果

次に、アプリケーションタブバーの追加を行う。
onsen-uiではこのようにタブバーの定義を行う事ができる。

<ons-tabbar>
  <ons-tab label="Tab 1" icon="ion-***"active></ons-tab>
  <ons-tab label="Tab 2" icon="ion-***"></ons-tab>
</ons-tabbar>

上記のコーディングはタブバーの定義である。
「ons-tabbar」でタブバーの定義を行い、
「ons-tab～」からタブの追加を行う。　labelはタブアイコン直下に表示する名称であり、icon="ion-***"で表示したいアイコンの定義を行う。
尚、どの様なアイコンが使用できるかは、こちらを参考にするといいだろう。
また、「ons-tab」の属性に「active」を追加することで、そのページをデフォルトで表示することができる。
onsen-uiでのタブバーの定義方法が理解できたところで、実際プログラムに実装を行う。

<ons-navigator var="navi" page="tab.html"></ons-navigator>

まず、上記htmlの「ons-navigator」の直下に追加していく。また、ナビゲータがデフォルト表示する「page」をこれから定義する「tab.html」へ変更しておく

<ons-template id="tab.html">
        <ons-page>
          <ons-tabbar>
            <ons-tab page="main.html" label="メイン" icon="ion-home"active>
            </ons-tab>
            <ons-tab page="demographics.html" label="基本情報" icon="ion-person">
            </ons-tab>
            <ons-tab page="settings.html" label="設定" icon="ion-settings">
            </ons-tab>
          </ons-tabbar>
        </ons-page>
     </ons-template>

まず、1行目の「ons-template」でこのタブバーを「tab.html」として定義し、，2行目で「ons-page」の定義を行う。
また、タグの定義を行う際に開始タグと同時に終了タグの記載もしておくと効率が良い。
次に3行目でタブバーの定義を行う。4行目ではメイン画面（検査項目一覧）の表示、6行目では基本情報（利用者情報）、8行目では設定の定義を行い、タブとして追加した。
また、初めに表示される画面はメイン画面にしたい為、4行目には「active」を記載している。

図3 タブバーの追加を行った結果

これらの修正を行った後、アプリケーションの確認を行うと、上記図3のようにタブバーの表示を行うことができた。
しかし、メイン以外の基本情報、設定タブをタップしても、画面の変更が行われなかった。
これは何故というと、先ほどコーディングした際に定義した「demographics.html」と「settings.html」のファイルが存在しないためである。
そのため、次はこの二つのファイルの作成を行う。
まずMONACA左に表示されているツリーの「www」というディレクトリを右クリックする。その後、新規ファイル作成をクリックする。

図4MONACAアプリの新規ファイル作成画面

すると上記図4のような画面が表示されるので、画面に従って各htmlの追加を行う。また、追加したhtmlは「www」ディレクトリに格納されることを覚えておきたい。
作成したhtmlを表示してみると、予めHTMLのテンプレート（骨組み）が作成されているが、今回は使用しないため、すべて削除し、下記のプログラムを入力する。

<ons-page>
  <ons-toolbar>
    <div class="center">基本情報</div>
  </ons-toolbar>
</ons-page>

上記のプログラムを記入した後、スマホで確認をすると、

図5 基本情報タブをタップした結果

上記図5の様にタブ画面の切り替えを行う事が出来た。

次回は基本情報ページの充実を行いたいが、以前の患者データではアレルギー情報等が記入されていないため、アレルギーデータの格納場所が分からない。
その為、ORCA,またはOpenDolphin上で患者にアレルギー情報の記入を行い、再びWirashark等でパケットキャプチャを行い、アレルギーデータの格納場所の特定を行う。