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

今回は、前回編集を行っていく中で見つけた「検査一覧画面に表示される検査値を小数点第3位で四捨五入をする」、「検査値が基準値外の場合、背景色を変更する」といった二点の課題に対して改良を行っていく。

検査値を小数点第3位で四捨五入を行う。

検査値の表示を行った際、データの桁数があまりにも長く、見づらかったため小数点第3位で四捨五入を行い、小数点以下2桁まで表示する。

Countries.get()
    .then(
      function(countries) {
        var list = countries.list[0];
        that.list = [];
        list.items.forEach(function(element){
          that.list.push(
              {
                itemName:element.itemName,
                value:element.value,
                unit:element.unit
              }
            );
        });
      }
    );

これは、前回コーディングしたプログラムである。10行目が、検査結果を連想記憶に設定しているところであるが、これを以下のように書き換える。

value:Math.round(element.value *100) /100

Math.roundは、javascriptで四捨五入を行うときに使う関数であるが，この関数は小数点以下1桁目を四捨五入して整数を返す関数である。小数点以下3桁目を四捨五入するために，まず検査値を100倍にし、それをMath.round関数を使って四捨五入する。その結果を100で割ると、小数点以下3桁目を四捨五入した結果が得られる。
例として、9.785という値があるとする。このままMath.round関数を用いると小数点を四捨五入し、10になってしまう。これでは整数でしか表示を行う事が出来ないため、まず数字を100倍し、978.5にする。その後、Math.round関数を用いて四捨五入を行うと、979となる。ここでこの値を100で割ると9.79となり、実質的に小数点第3位で四捨五入を行った形になる。

図1　検査結果を小数点以下第2位まで表示した結果

この修正を行った後，MONACAアプリを起動すると、上記図1の様に検査値を小数点第2位まで表示することができた。

検査値が基準値外の場合、背景色を変更する。

前回、検査結果が基準値外の値であれば、スタイルシートを使って背景色を変更するために「normal」や「abnormal」というクラスの定義を行った。今回は，検査結果の値に応じてons-list-itemタグにクラス属性の値を設定する機能の実装を試みる。

Countries.get()
    .then(
      function(countries) {
        var list = countries.list[0];
        that.list = [];
        list.items.forEach(function(element){
          that.list.push(
              {
                itemName:element.itemName,
                value:Math.round(element.value *100) /100
                unit:element.unit
              }
            );
        });
      }
    );

まず先ほども修正した上記javascriptのプログラムを以下のように書き換える。

Countries.get()
    .then(
      function(countries) {
        var list = countries.list[0];
          that.list = [];
          list.items.forEach(function(element){
          var normalValue =  element.normalValue.split(/-/);
          var lower = parseFloat(normalValue[0]);
          var upper = parseFloat(normalValue[1]);
          var bgColor;
          if(element.value >= lower && element.value <= upper){
            bgColor ="normal";
          }else{
            bgColor ="abnormal";
          }
          that.list.push(
              {
                itemName:element.itemName,
                value:Math.round(element.value *100) /100 ,
                unit:element.unit,
                bgColor:bgColor
              }
            );
        });
      }
    );

まず、条件判定を行うにあたって、基準値から上限・下限の取りだしを行う必要があるのだが、これは以前のブログに書いたプログラムを流用し、7~9行目のように記入する。尚、7行目に関しては、今回検査データはelementに格納されているため、element.normalValueへ変更した。次に、10行目に背景を表すクラス属性を格納する変数を「bgColor」として定義する。そして、11行目~15行目にif文を使って条件判断を記述する。内容は「検査値(element.value)が下限値(lower)以上かつ、上限値(upper)以下であれば正常(normal),そうでなければ異常(abnormal)」といったものである。最後に、that.list.pushで追加する連想配列の21行目にbgColor:bgColorと記載することで、クラス属性を表すbgColorの設定を行った。

<ons-list>
              <ons-list-item class="{{country.bgColor}}"  
                ng-click="countries.showCountry(country.itemName)" modifier="chevron" 
                ng-repeat="country in countries.list | filter:query">
                <ons-col width="50%">{{ country.itemName }}</ons-col>
                <ons-col>{{country.value}}</ons-col>
                <ons-col>{{country.unit}}</ons-col>
              </ons-list-item>
            </ons-list>

そしてhtmlの2行目にある「ons-list-item」タグに「class="{{country.bgColor}}" 」を記述することで、javascriptで設定したクラス属性値（"normal"または"abnormal"）を設定することができる。

図2検査結果一覧画面で異常値に色を付けた結果

これらの編集を行うことで、上記図2のように基準値外の値が含まれている場合、背景を赤くすることができた。

次回は，グラフで基準値が一目でわかるように色を付ける改良を行う。また，ユーザの基本情報を表示する機能，検査項目をグルーピングする機能，タブバーで画面を切り替える機能についてどのようにしたら実現できるか考える。