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

今回は、検査項目一覧を表示した際に、検査項目名だけでなく、検査値、単位の追加表示を試みる。まず、javascript上での編集を行う。

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

上記のコードは以前のブログで記述したcountries.list配列に検査名を格納する処理であるが、このコード6行目以降を下記の様に変更する。

list.items.forEach(function(element){
          that.list.push(
              {
                itemName:element.itemName,
                value:element.value,
                unit:element.unit
              }
            );

以前のブログで調べた検査―データ中にある検査名、検査値、単位それぞれに対応する値をpushメソッドを利用してthat.list配列の中に格納する。javascriptでは、この様なディクショナリ形式（連想配列）で関連する一塊のデータをまとめて記述できる。
次に、このままでは追加した検査値や単位がスクリーンには表示されないので、htmlの修正も行っていく。

<ons-list>
<ons-list-item ng-click="countries.showCountry(country)" modifier="chevron" 
ng-repeat="country in countries.list | filter:query">
{{ country }}
</ons-list-item>

4行目の{{country}}はcounties.listから取り出した要素データを表示するものだが、これを下記の様に書き換える。

{{ country.itemName }}
{{ country.value}}
{{ country.unit}}

この様にcountry.検査名(itemName),検査値(value),単位(unit)と記述することで、対応したデータを表示することが出来る。

図1 検査項目一覧画面

これらの変更を行う事で、上記図1の様に検査項目のほかに、検査値、単位を表示させることが出来る。しかし、このままの状態では少々見栄えがよくないので、先ほどのhtmlを下記のように書き換える。

<ons-col>{{ country.itemName }}</ons-col>
<ons-col>{{country.value}}</ons-col>
<ons-col>{{country.unit}}</ons-col>

<ons-col>はonsen-UI上で列を表示するタグである。

図2 ons-colタグで整形した検査項目一覧画面

上記はコードを書き換えた後の検査項目一覧画面である。先ほどの比較すると多少は見栄えがよくなってはいるが、まだ少し見栄えがよくない。そのため、再びhtml文を下記のように修正する。

<ons-col width="60%">{{ country.itemName }}</ons-col>
<ons-col>{{country.value}}</ons-col>
<ons-col>{{country.unit}}</ons-col>

1行目にwidthを記述することで幅の調節を行う事が出来る。

図3 width属性で幅の調整を行った検査項目一覧画面

これにより、上記の図3の様に見栄えを整えることが出来た。
次回は検査値が基準値より外れている場合、色を変えて表示するようにプログラムを修正する。その準備として今回は簡単にcssの記述を行っておく。

正常値の場合

<ons-list-item class="normal" ng-click="countries.showCountry(country.itemName)...

異常値の場合

<ons-list-item class="abnormal" ng-click="countries.showCountry(country.itemName)...

まず、htmlの「ons-list-item」タグへ「normal」「abnormal」というclassの値を設定する。
検査値が基準値の範囲内であれば「normal」、範囲外であれば「abnormal」として色の変更を行う。そのために，style.cssでnormal,abnormalの定義を行う。

.abnormal {
    background-color: #FF0000;
}

.normal{
   background-color: #FFFFFF;
}

上記の記述はそれぞれ「abnormal」であれば背景を赤、「normal」であれば背景を白にするといった定義である。
次回は，基準値から検査値が異常値かどうかを判定して，その結果から<ons-list-item>のclass属性に設定する値（normalまたはabnormal）を決定するプログラムを作成する。また、表示されている検査値の桁数があまりに長く見づらいため、表示は小数点以下2桁までにしたい。

---

中間報告会で受けた指摘と今後の方針

先日行われた中間報告会で「すでに類似したシステムは世にたくさん出ているが，それとこのシステムはいったいどこが違うのか」という質問を受けた。電子カルテシステムと直接つながっているPHR（個人健康記録）などカルテコ以外にそんなに例はないとは思うが，検査結果をグラフ表示するだけのアプリならどこにでも転がっているので，そのように思われてもしかたがないだろう。
そこで，今後，このシステムをどのように発展させていくかを考えてみた。

「医療情報学第5版医療情報システム編」のP74に次のような記載がある。

さらに健康志向の個人の増加に伴い，個人が常に携帯しているスマートフォンなどを利用して日々の運動量，心拍数，食事量，睡眠状態などの多種多様な項目を測定して管理できるアプリケーションが提供され始めている。

さらに

現段階では，これらのアプリケーションはスタンドアローンで動作しており，アプリケーション同士や特定健診システムや保健指導システムとの連携は取れていない。 しかし将来的には，アプリケーションが連動して日々健康指導を密に行うようなことが望まれる。このようなデータも含めた個人の生涯にわたる健康情報を管理し解析することで，個人に最適な快適で効果が高く効率的な健康指導が可能になると期待される。

と続く。
これをヒントに次のような機能を加えてはどうだろうか。

1. 医師や保健師が電子カルテに入力した保健指導の内容をスマホアプリに表示する。
2. 利用者の食事内容を写メで撮影して電子カルテ（または画像サーバ）へアップロードし，管理栄養士がそれを見て栄養指導する。
3. 食事内容を撮影した画像から食材や栄養素，カロリーなどを計算してくれるWebAPIを探して利用する。
4. 家庭用の体重計，血圧計，体温計などで計測したデータをスマホに自動取り込みするインターフェースがないか調べて，あれば利用する
5. 天気APIを利用して天気や気温・気圧を自動でスマホに蓄積する

プログラムの改良についてのTODOリスト

1. 検査項目一覧画面におけるグルーピング（例：生化学的検査）
2. 検査項目のヘルプ（Google検索へリンクするなど）
3. グラフの基準値の表示方法の工夫（色を付けるなど）
4. グラフ画面で他の検査項目を選択する機能
5. 患者基本属性（名前，生年月日など）の表示 
6. 「設定」「保健指導」などの機能を追加するためのユーザインターフェース（タブバー，スライディングメニュー）
7. Googleマップ（フィットネスクラブ）