④検査結果表示について1

検査項目をわかりやすく提示出来るようなプログラムの修正を試みる。
まず、検査項目一覧についてだが、現在は検査名がそのまま表示されているだけで、パット見何がどの検査なのかをいまいち把握しづらい。
そこで、生化学的検査、血液学的検査といった検査グループ名でグルーピングを行い、直感的にどの検査なのかを把握できるようにしていきたい。

that.list.push(
              {
                itemName:element.itemName,
                value:Math.round(element.value *100) /100 ,
                unit:element.unit,
                bgColor:bgColor
              }
            );

上記のコードはjavascriptで記述している検査項目一覧画面を表示するプログラムであるが、
この文章に以下の様な条件を付与する。

if(element.groupName == "抽出したい検査グループ名"){
          that.list.push(
              {
                itemName:element.itemName,
                value:Math.round(element.value *100) /100 ,
                unit:element.unit,
                bgColor:bgColor
              }
            )};

まず行目に条件式としてif文を定義する。「element.groupName」とは
OpenDolphinに格納されている検査グループ名を指している。
そして、 ＝＝　"抽出したい検査グループ名"と定義することで、
検査グループ名が抽出したいものと同様の値が含まれているデータをリストに表示するといった処理が可能になる。
例えば抽出したい検査グループ名を"血液学的検査"とすれば、血液学検査に含まれている検査項目名のみを表示させる事が出来る。

図1 血液学的検査のみを抽出した結果

上記図1は実際に条件式を「血液学的検査」として抽出を行った図である。
しかし、このプログラムを用いた抽出では検査グループ名を一つしか抽出できないため、目的であるグルーピングはこの様な修正では表現する事が少々難しい為、何か別の方策を講じる必要があるだろう。
プログラム全体の構成を大きく変更すれば不可能ではないのかもしれないが、非常に手間がかかる為、スマートな解決策はないだろうか。

---

【コメント】

なかなか良いところに目を付けましたね。ただし、ブログにも書いている通り、この方法だと特定の検査グループしか表示できません。では、どうすればいいのでしょうか？
こういう場合は、階層構造を考えます。現在のプログラムでは、OpenDolphinサーバから取得した検査項目を CountriesController コントローラのlist配列に「ベタで」保存しているだけです。したがってグループが違う検査項目も同列に扱ってしまいます。そこで、これに階層構造を導入します。まず、検査グループがあって、その下にその検査グループに属する検査項目を格納するのです。こんな感じです。

group = [
  {
    'groupName': '生化学的検査',
    'items': [
      {
        'itemName': '総ビリルビン',
        'value': '0.4',
        'unit': 'mg/dL',
        'backgroundColor': 'normal',
      },
      {
        'itemName': '直接ビリルビン',
        'value': '0.1',
        'unit': 'mg/dL',
        'backgroundColor': 'normal',
      },
      ・
      ・
      ・
    ]
  },
  ・
  ・
  ・
  {
    'groupName': '血液学的検査',
    'items': [
      {
        'itemName': 'ＨｂＡ１ｃ（ＪＤＳ）',
        'value': '5.73',
        'unit': '%',
        'backgroundColor': 'normal',
      },
      {
        'itemName': '血小板',
        'value': '17.96',
        'unit': 'ﾏﾝ/mm^3',
        'backgroundColor': 'normal',
      },
      ・
      ・
      ・
    ]
  },
  ・
  ・
  ・
]

このJavascriptオブジェクトを見ると、group属性が検査グループの配列になっています。各グループには、検査グループ名を格納するためのgroupName属性と、その検査グループに属する検査項目を格納するitems属性があります。さらに、items属性は配列になっており、その属性には検査項目名を表すitemName属性、検査値を表すvalue属性、その単位を表すunit属性、そして異常値を表すbackgroundColor属性があります。実は、このitems配列が、現在のプログラムにおけるlist配列に対応しているのです。

こうして、検査結果情報を［グループ］→［検査項目］のような階層構造にすることができました。 次に、この検査結果情報を「階層的に」アプリの検査結果一覧画面に表示することを考えます。そのために使うのが<ons-list>タグです。<ons-list>タグの中にはリストの見出しを表す<ons-list-header>タグを書くことができます。ここに検査グループ名を書きます。その後に<ons-list-item>タグを使って検査項目を書きます。これを必要な検査グループの数だけ繰り返します。次のようなイメージになります。

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

このHTMLが示すように、このリスト表示は階層的になっています。一つは ons-list タグにつけられたAngularJSの ng-repeat 属性です。CountriesControllerコントローラの属性group （これは検査グループの配列）から一つずつ検査グループを取り出して一覧を作っていきます。その一覧には、ons-list-headerタグによって検査グループ名が表示され、その下にons-list-itemタグによってその検査グループに属するすべての検査項目が表示されます。

こうして作成した検査一覧画面は次のようになります。

図2 検査項目を階層的に表示した検査結果一覧画面

先頭の「生化学的検査」が<ons-list-header>タグを使って表示した検査グループ名で、その下にこの検査グループに属する検査項目の一覧が表示されています。

図3　検査項目を階層的に表示した検査結果画面（その2）

これは、検査一覧画面を「血液学的検査」までスクロールさせたものです。このように、検査グループの分かれ目に検査グループ名称を表示することができます。