2018年10月30日火曜日

レーダーチャートの表示2

前回レーダーチャートの表示を行うことが出来たので、今回は実際の値を代入したグラフの描画を試みる。
  1. .controller('RaderChartController', ['$scope', 'Countries', function($scope, Countries) {
  2. var that = this;
  3. var itemNames = ["中性脂肪(TG)", "HDLコレステロール", "LDLコレステロール", "血糖", "HbA1c(JDS)", "GOT(AST)", "GPT(ALT)","ガンマ-GTP"];
  4. var labels = ["最新","前回","前々回"];
  5. var backgroundColors = ["rgba(153,255,51,0.4)","rgba(255,153,0,0.4)","rgba(0,153,255,0.4)"];
  6. var borderColors = ["rgba(153,255,51,1)","rgba(255,153,0,1)","rgba(0,153,255,1)"];
  7. that.ResultDataList = []
  8. Countries.get()
  9. .then(
  10. function(countries) {
  11. countries.list.forEach(function(element){
  12. that.ResultDataList.push(element);
  13. });
  14. }
  15. );
  16. $scope.tab.on('postchange', function() {
  17. //alert(JSON.stringify(that.ResultDataList[0],null,2));
  18. var i = 1;
  19. var datasets =[];
  20. that.ResultDataList.forEach(function(element){
  21. if(i<=3){
  22. var data=[0,0,0,0,0,0,0,0];
  23. element.items.forEach(function(item){
  24. var idx = itemNames.indexOf(item.itemName);
  25. if(idx>=0){
  26. //alert(idx+":"+item.itemName);
  27. data[idx] = item.value;
  28. }
  29. });
  30. // alert(JSON.stringify(data,null,2));
  31. datasets.push({
  32. 'label': labels[i-1],
  33. 'backgroundColor': backgroundColors[i-1],
  34. 'borderColor': borderColors[i-1],
  35. 'data': data
  36. });
  37. }
  38. i++;
  39. });
  40. //alert(JSON.stringify(datasets,null,2));
  41. //レーダーチャート
  42. var ctx = document.getElementById("pie-chart-area");
  43. var myChart = new Chart(ctx, {
  44. type: 'radar',
  45. data: {
  46. 'labels': itemNames,
  47. 'datasets':datasets
  48. }
  49. });
  50. });
  51. }])
3行目はレーダーチャートに表示する検査項目名のテーブルである。
4行目~6行目はレーダーチャートに描く3回分の検査のためのラベル、背景色、境界色のテーブルである。
まず、7行目で過去3回分の検査結果を格納するための配列ResultDataListの定義を行い、8行目~15行目で検査一覧を取得し、その一つ一つをResultDataListへプッシュしている。
16行目は、7~15行目の処理が非同期で行われるため、その処理が行われる前に17行目以降の処理が行われてしまうとデータがないままレーダーチャートを作成しようとするので、それを回避するため、タブがタップされた際に実行するようにする監視処理である。
その際、HTMLファイルのタブバーを定義しているons-tabbarタグに変数名 tab を定義しておく。
18行目はループ制御変数 i の定義である。これを使って過去3回分の検査を取り出す。
19行目は47行目でレーダーチャート描画関数に与えるパラメータとなるdatasetsというテーブルの定義である。
20行目はResultDataListに格納された過去の検査を一日分ずつ処理するものであり、
21行目から29行目はif文を使って過去3回分だけ該当する検査結果を取り出している。
今回表示したいレーダーチャートのデータは最新、前回、前々回の3回分であるから、繰り返す処理を先ほど定義したループ制御変数 i を用いて i が3以下のときにこの処理を繰り返すように制御している。
22行目は検査結果を格納するdataテーブルの定義をしており、レーダーチャートで扱うデータ数である8つの要素を0で初期化値している。
23~28行目はelement.items、つまり個々の検査項目に対する処理を行っている。
24行目では、当該検査項目が3行目に定義した検査項目名に一致しているかを判定するための処理を行っている。
ここで使っているindexOfというメソッドは、例えば var x = ['abc', 'def', 'ghi'] というテーブルがある場合、var idx = x.indexOf('abc') とすれば、idxの値は 0 になり、var idx = x.indeOf('ghi') とすれば idx の値は2になるといった感じで、テーブルに存在する値が何番目であるのかを返す関数である。また、テーブルに含まれていない場合は idx は-1となる。
3行目で定義している検査名テーブル itemNames に対してこのメソッドを使用することによって、item.itemNameが対象検査項目であるかどうかを判定し、25行目で idx が0以上であれば、27行目で22行目に定義した空のdataテーブルに検査値を代入している。
この様な処理を行う事で、dataテーブルに3行目に定義した検査項目名の順に検査値を設定することができる。
31行目~36行目ではこうして得られた1回分の検査情報をdatasetsテーブルにpushしている処理である。
  1. {
  2. label: 'apples',
  3. backgroundColor: "rgba(153,255,51,0.4)",
  4. borderColor: "rgba(153,255,51,1)",
  5. data: [12, 19, 3, 17, 28, 24, 7]
  6. }
上記の書式は、前回のブログで紹介したレーダーチャートのデータを記述する際の書式であるが、32行目~35行目ではこの書式に合わせて19行目で定義したdatasetsテーブルへと挿入している。
32行目のlabelは4行目のlabelsから、backgroundColorは5行目のbackgroundColorsから、borderColorは6行目のborderColorsから、
そしてdataは先ほど検査値を代入した22行目のdataからそれぞれ持ってきている。その際、配列の添え字が[i-1]となっているのは i は1から始まっているので、i のままだとテーブルの二つ目から使ってしまうことになるのでこのようにしている。
38行目で i の値に1を足し、再び21行目からの処理を i が3になるまで繰り返している。
最後にレーダーチャート描画関数に与えるパラメータを、46行目であれば3行目のitemNamesに、47行目であれば31行目のdatasetsに設定することで、
常に最新の3件のデータを表示するレーダーチャートを描画できる。
図1 レーダーチャート完成図

上図は実際に確認した結果であるが、データ通りに取得できていることが分かる。
しかし、このレーダーチャートには少々改善の余地がある。
まず、中性脂肪の値が112程度に対して、HbA1cは8.2程しかないにも拘わらず、レーダーチャートの座標のスケールが検査値の大きい検査項目に合わされているため、HbA1cは値が小さすぎて中心近くにプロットされてしまう。レーダーチャートはどの項目が突出して大きいとか小さいとかを可視化するためのものであるから、これでは、レーダーチャートにした意味がない。検査ごとに座標のスケールを変えることはできないだろうか。
また、基準値の範囲をレーダーチャート中に示すことができればより直観的に健康状態を把握できるのではないだろうか。

課題はまだまだ多く存在するが、レーダーチャートのデータ取得が行えるようになった所で本研究は一区切りとさせていただく。

2018年10月23日火曜日

卒業論文の構成

 卒業研究が終盤に差し掛かっているため、本日、同時に卒業論文の構成について考えた。
 論文の大きい流れを決め、その中を細かく書きまとめた(図1~3)。


図1.卒業論文の構成1

図2.卒業論文の構成2

図3.卒業論文の構成3

 大体の構成を決めることが出来た為、確認・修正を行ったのち、分担を決めて次に進めていきたいと思う。 
 

レーダーチャートの表示1

今回は関連した検査項目を視覚的に把握出来る様なレーダーチャートの実装を試みる。
まず、レーダーチャートを導入するにあたって、「chart.js」の実装が必要という事が分かった。
そこでこちらをhttps://press.monaca.io/atsushi/230参考にしてchart.jsの実装を行っていく。
まず、MONACAの設定タブからJS/CSSコンポーネントの追加と削除をクリックする。

図1JS/CSSコンポーネント検索画面
そして、上記図1の様に検索欄に「Chart」と入力を行う。その後表示されている「Chart.js」の追加をクリックする。
図2 追加をクリックした際のポップアップ

その後、上記図2の様なポップアップが表示されるのでインストールをクリックする。
図3 ファイル選択画面

インストールをクリックすると、上記図3の様なchart.js内で読み込みを行うファイルの選択を行う事が出来るので、
「components/chart.js/dist/Chart.min.js」にチェックを入れ、保存をする。
これでChart.jsの導入が完了したので、プログラムの修正を行っていく。
【HTML】
  1. <head>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
  3. 中略
  4. <body>
  5. <ons-template id="tab.html">
  6. <ons-page>
  7. <ons-tabbar>
  8. <ons-tab page="radarchart.html" label="レーダーチャート" icon="ion-ios-pie-outline">
  9. </ons-tab>
  10. </ons-tabbar>
  11. </ons-page>
  12. </ons-template>
  13. :
  14. 中略
  15. :
  16. <ons-template id="radarchart.html">
  17. <ons-page ng-controller="RaderChartController as raderchart">
  18. <ons-toolbar>
  19. <div class="center">レーダーチャート</div>
  20. </ons-toolbar>
  21. <div id="canvas-holder" style="width:100%">
  22. <h1>Bar chart</h1>
  23. <canvas id="pie-chart-area" width="300" height="300">
  24. </canvas>
  25. </div>
  26. </ons-page>
  27. </ons-template>
まず、2行目のheadに先ほど実装したchart.jsをCDN(Content Delivery Network)で取得する。
次に、bodyにレーダーチャートを表示するページの作成を行う。
7行目にレーダーチャートを表示するタブバーの定義を行い、
18行目にビューの作成、 19行目ではコントローラーの指定を行い対応付けを行う。
20~22行目はツールバーの記述、25行目ではグラフの書式設定を行っている。

【JavaScript】
  1. .controller('RaderChartController', ['$scope', 'Countries', function($scope, Countries) {
  2. var that = this;
  3. //レーダーチャート
  4. var ctx = document.getElementById("pie-chart-area");
  5. var myChart = new Chart(ctx, {
  6. type: 'radar',
  7. data: {
  8. labels: ["M", "T", "W", "T", "F", "S", "S"],
  9. datasets: [{
  10. label: 'apples',
  11. backgroundColor: "rgba(153,255,51,0.4)",
  12. borderColor: "rgba(153,255,51,1)",
  13. data: [12, 19, 3, 17, 28, 24, 7]
  14. }, {
  15. label: 'oranges',
  16. backgroundColor: "rgba(255,153,0,0.4)",
  17. borderColor: "rgba(255,153,0,1)",
  18. data: [30, 29, 5, 5, 20, 3, 10]
  19. }]
  20. }
  21. });
  22. }])
まず、1行目でコントローラの作成を行う。名称はHTMLで定義したRaderChartControllerにする。
3行目からはこちらhttps://www.webprofessional.jp/introduction-chart-js-2-0-six-examples/を参考にして
レーダーチャートの描く関数の記述である。

図4 レーダーチャート画面
HTMLとJavascriptの編集を終えた後、スマートフォンで確認をすると上記図4の様にレーダーチャートの記述が行う事が出来た。
次回はサンプルデータではなく、実際の検査データの抽出を行い、レーダーチャートに表示を行えるようにしたい。

2018年10月9日火曜日

患者基本情報の取得と画面に表示

前回、患者ID、氏名を患者基本情報画面に表示することが出来たので、今回は、患者ID、氏名以外の患者基本情報も画面に表示させれるよう、プログラムを修正していく。

まずはORCAの****のところをそれらしい患者データを入れていく。
図1のように患者データを入れた。
図1:ORCAの患者基本情報の画面
あとは、残りの患者基本情報を画面に表示させていく。
HTMLを図2のように修正した。


HTML
  1. <ons-page ng-controller="PatientController as patient">
  2.  
  3. <ons-toolbar>
  4. <div class="center">基本情報</div>
  5. </ons-toolbar>
  6.  
  7. <ons-list>
  8. <ons-list-header>
  9. <h1>個人情報</h1>
  10. </ons-list-header>
  11. </ons-list>
  12.  
  13. <div class="haikei">
  14. <ons-list-item>
  15. <ons-col width="30%"> <h6>氏名</h6> </ons-col>
  16. <ons-col><h4>{{ patient.WholeName }}</h4></ons-col>
  17. </ons-list-item>
  18. </div>
  19.  
  20. <div class="haikei2">
  21. <ons-list-item>
  22. <ons-col width="30%"> <h6>シメイ</h6> </ons-col>
  23. <ons-col><h4>{{ patient.WholeName_inKana }}</h4></ons-col>
  24. </ons-list-item>
  25. </div>
  26.  
  27. <div class="haikei">
  28. <ons-list-item>
  29. <ons-col width="30%"> <h6>患者ID</h6> </ons-col>
  30. <ons-col><h4>{{ patient.Patient_ID }}</h4></ons-col>
  31. </ons-list-item>
  32. </div>
  33.  
  34. <div class="haikei2">
  35. <ons-list-item>
  36. <ons-col width="30%"> <h6>性別</h6> </ons-col>
  37. <ons-col><h4>{{ patient.Sex }}</h4></ons-col>
  38. </ons-list-item>
  39. </div>
  40.  
  41. <div class="haikei">
  42. <ons-list-item>
  43. <ons-col width="30%"> <h6>生年月日</h6> </ons-col>
  44. <ons-col><h4>{{ patient.BirthDate }}</h4></ons-col>
  45. </ons-list-item>
  46. </div>
  47.  
  48. <div class="haikei2">
  49. <ons-list-item>
  50. <ons-col width="30%"> <h6>住所</h6> </ons-col>
  51. <ons-col><h4>{{ patient.WholeAddress1 }}</h4></ons-col>
  52. </ons-list-item>
  53. </div>
  54.  
  55.  
  56. <ons-list>
  57. <ons-list-header><h1>アレルギー等</h1></ons-list-header>
  58. </ons-list>
  59.  
  60. <div class="haikei3">
  61. <ons-list-item>
  62. <ons-col width="30%"> <h6>アレルギー</h6> </ons-col>
  63. <ons-col><h4>{{ patient.Allergy1 }}</h4></ons-col>
  64. </ons-list-item>
  65. </div>
  66.  
  67. <div class="haikei4">
  68. <ons-list-item>
  69. <ons-col width="30%"> <h6>感染症</h6> </ons-col>
  70. <ons-col><h4>{{ patient.Infection1 }}</h4></ons-col>
  71. </ons-list-item>
  72. </div>
  73.  
  74. <div class="haikei3">
  75. <ons-list-item>
  76. <ons-col width="30%"> <h6>禁忌</h6> </ons-col>
  77. <ons-col><h4>{{ patient.Contraindication1 }}</h4></ons-col>
  78. </ons-list-item>
  79. </div>
  80.  
  81.  
  82. <ons-list>
  83. <ons-list-header><h1>コメント</h1></ons-list-header>
  84. </ons-list>
  85.  
  86. <div class="haikei5">
  87. <ons-list-item>
  88. <ons-col width="30%"> <h6>コメント</h6> </ons-col>
  89. <ons-col><h4>{{ patient.Comment1 }}</h4></ons-col>
  90. </ons-list-item>
  91. </div>
  92.  
  93.  
  94. </ons-list>
  95. </ons-page>
                             図2:患者基本情報を画面に表示させるプログラム(HTML)

次に、javaを図3のように修正した。
JS
  1. Patient.get()
  2. .then(
  3. function(patient){
  4. that.Patient_ID = patient.Patient_ID;
  5. that.WholeName = patient.WholeName;
  6. that.BirthDate = patient.BirthDate;
  7. that.Sex = patient.Sex == '1' ? '男性' : '女性';
  8. that.WholeName_inKana = patient.WholeName_inKana;
  9. that.WholeAddress1 = patient.Home_Address_Information.WholeAddress1;
  10. that.Allergy1 = patient.Allergy1;
  11. that.Infection1 = patient.Infection1;
  12. that.Contraindication1 = patient.Contraindication1;
  13. that.Comment1 = patient.Comment1;
  14. }
  15. );
  16. }])
            図3:患者基本情報を画面に表示させるプログラム(java)

そしたら、図4、図5のように、図1の患者基本情報が画面に表示された。
(分かりやすいように色付け、グルーピングした)
図4:アプリの患者基本情報の画面1

図5:アプリの患者基本情報の画面2

これで、うまく患者ID、氏名以外も患者基本情報画面に表示させれるようにできた。
あとは、それぞれで作成したプログラムを合わせて、1つの完成形のアプリにしていきたい。

2018年10月2日火曜日

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

今回は、前回作成した日付のコンボボックスを変更した場合、対応した検査データのリストを表示するといった処理を行う。
考え方としては、that.sampleDateとthat.listの各検査のsampleDateが等しいときに対応した検査データを抽出してlistへ代入するといった感じだ。
この考え方であれば、createGroupの中で動作を行う方が好ましいので、先にCountries.get()内に記述されている検査項目を作成する
var list = countries.list[0]
that createGroup(list);

上記のプログラムの赤字部分を削除する。次に実際にcreateGroupの中へ記述を行っていく。
  1. this.createGroup = function(list){
  2. var list = [];
  3. that.list.forEach(function(element){
  4. if(that.sampleDate == element.sampleDate){
  5. list = element;
  6. }
  7. });
  8. :
  9. :
  10. 中略
  11. :
  12. :
  13. });
まず2行目でlistの定義並びに配列を空にしている。これは一度しか参照しないlistの値を初期化する為である。
3~7行目は条件式の記述である。もし、that.sampleDateとelement.sampleDateが同じであれば、listへ各項目を代入するといった処理である。
次に、that.listが変更された場合にこのプログラムが実行されるように、that.listを監視している$scope.$wacthの内部へ以下の様な記述を行う。
  1. $scope.$watch('countries.sampleDate', function() {
  2. that.createGroup();
  3. }
上記のプログラムは、countries.sampleDateの値が動いた場合、that.createGroupを実行するといったプログラムである。

これらの処理を行った後、アプリケーションの方で確認を行うと、
検査項目リスト自体は日付を変更すると対応したリストで作成するといった想定した動作を行ったのだが、「that.sampleDate undefined that.list.forEach」というエラーメッセージが表示されていた。
考えられる原因のひとつとして、前回記述したデフォルト値の設定である
  1. that.sampleDate=that.sampleDateList[0];
の位置が悪いのではないだろうかという事で、countriesget内で移動をさせたのだが、改善は見られなかった。
次に、countries.getとcreateGroup内でalertを発生させ、処理の順番がどの様になっているのかを確認した。
countries.getでは「代入しました」、createGroup内では「createGroupに入りました SampleDate値」をアラートさせた。
図1 アラート結果

アラート結果を見ると、上記図1のような流れになっていた。まずはじめにcreateGroupが実行されsampleDate値は空、2番目にcountries.getが実行、
3、4番目に再びcreateGroupが実行されており、sampleDate値は直近の物になっていた。

どうやらcountries.getよりも先にcreateGroupが実行されている為、この様なエラーメッセージが表示されているのだろう。
解決策として、sampleDateの値が空である場合はcreateGroupを実行させないといった処理を行えば良いのではないだろうか。
そこで、$scope.$watch内の記述を以下の様に書き換える。
  1. $scope.$watch('countries.sampleDate', function() {
  2. if(that.sampleDate){
  3. that.createGroup();
  4. }
この条件式は、「that.sampleDateに値があるならば、that.createGroupを実行する」といった条件式である。
上記の記述を行った後、確認を行うとcountries.getから先に実行され、先ほどのエラーメッセージが表示されることはなくなった。
が、アラートからもわかるようになぜか二回createGroupの呼び出しを行っていることがわかる。これはcountries.get内でもthat.creatGroupの呼び出しを行っている為である。
$scope.$watch上で実行している以上無意味な記述であるため、削除を行った。
図2 5/6の検査結果リスト
図3 5/5の検査リスト

これらの処理を行った後確認をすると、上記図2,3の様に日付を変更するたびに対応したデータの表示を行う事に成功した。

次回は関連した検査データごとのレーダーチャートの作成を目指したい。

2018年10月1日月曜日

患者基本情報作成①

今回では、患者基本情報で表示する項目とHTMLとCSSを使った実際の画面設計をした。


項目数は9項目で、
「氏名」、「氏名(フリガナ)」、「患者ID」、「性別」、「生年月日」、「住所」、「アレルギー」、「感染症」、「禁忌」

この項目に絞った。

HTMLでClassを指定すると共に、図1のように各項目を追加した。

  1. <div class="haikei">
  2. <ons-list-item>
  3. <ons-col width="30%"> <h6>氏名</h6> </ons-col>
  4. <ons-col>{{ patient.Patient_ID }}</ons-col>
  5. </ons-list-item>
図1 HTML 患者基本情報の項目追加

またデザインとしては、CSSでClass=haikeiのbackcolorを変更した。

  1. .haikei{
  2. background-color: #D7EEFF;
  3. }
図2 CSS 背景の色の変更

結果としては図3-図4のようになった、データはまだ取り込めていないが今後表示できるように取り組んで行きたいと考えている。


図3 患者基本情報の画面

図4 患者基本情報の画面
また文字のフォントや一行あたりの幅など調整していきたいと考えている。

2018年9月25日火曜日

②患者基本情報データの取得6

前回に引き続き、WebAPIを使って、ORCAから患者基本情報をとってこれるよう、プログラミングを行っていく。その際、認証情報をヘッダに書く必要がある。

まず、URLからデータを取得するためのサービスを作る。その名前を'Patient'にした。
すると、次のようなプログラムになる。
JS
  1. .service('Patient', ['$http', function($http) {
  2. this.get = function() {
  3. $http.defaults.headers.get = {
  4. 'Authorization' : 'Basic ' + window.btoa(g_user + ':' + g_passwd)
  5. };
  6. return $http.get('http://172.16.108.251:8000/api01rv2/patientgetv2?id=00001&format=json')
  7. .then(
  8. function(response) {
  9. return response.data.patientinfores.Patient_Information;
  10. },
  11. function(response) {
  12. alert('Error at Patient:' + JSON.stringify(response.data, null, 2));
  13. }
  14. );
  15. };
  16. }])
図1.サービス 'Patient'

g_userとg_passwdは自分の認証情報を代入して、教えてやらなければならないので、index.jsの1番最初に次のようなプログラムをうつ。
JS
  1. g_user = 'ormaster';
  2. g_passwd = '[ormasterのパスワード]';
図2.ORCAのユーザ名とパスワードの設定

次はモデルとビューの架け橋となるコントローラを作る。その名前を'PatientController'にした。すると、次のようなプログラムになる。
JS
  1. .controller('PatientController', ['$scope', 'Patient', function($scope, Patient) {
  2. var that = this;
  3. /* 患者情報の読み込み */
  4. Patient.get()
  5. .then(
  6. function(patient){
  7. that.Patient_ID = patient.Patient_ID;
  8. that.WholeName = patient.WholeName;
  9. that.BirthDate = patient.BirthDate;
  10. that.Sex = patient.Sex == '1' ? 'M' : 'F';
  11. }
  12. );
  13. }])
図3.コントローラ 'PatientController'

作成したPatientサービスをコントローラに注入して(1行目)、そのget()メソッドを使って患者情報を取得する(5行目)。取得した患者情報(患者ID、氏名、生年月日、性別)をコントローラのプロパティに設定し、ビュー(demographics.html)から参照できるようにした。なお、11行目は男性(patient.Sexが'1')なら'M'、女性(patient.Sexが'1'以外)なら'F'をthat.Sexに設定するコードである。
ビューではコントローラを経由して患者情報を出力する。

そして、図1と図3のプログラムを.serviceは.serviceが続いているところ、.controllerは.controllerが続いている、適切なところに挿入する。

こうしてモデル(Service)とコントローラを作成したわけであるが、ビュー(HTML)を作成しないとコントローラは動かないようである。そこで、ビュー(demographics.html)を次の図4のようにプログラミングして、患者基本情報を取得するようにする。
HTML
図4:demographics.htmlに書くプログラム

1行目でPatientControllerをpatientという変数名で参照して、9行目で患者IDをpatient.Patient_IDで、13行目で患者名をpatient.WholeNameを使って出力している


すると、図5のように、患者基本情報が取得された。
図5:患者基本情報が取得された基本情報の画面

alert(
'Success:' + JSON.stringify(response.data.patientinfores,null,2));と打って、うまく、すべての患者基本情報が取得されているのか見てみる。
すると、図6のようにうまく、すべての患者基本情報が取得されていることが分かった。
図6:alertした時の画面

AngularJSではデータを格納するモデルをサービスで、ビューをHTMLで、そして両者の橋渡しをコントローラを使って行っているのである。


次は、患者ID、氏名以外の項目も表示させられるよう、プログラムを修正していく。また、ORCAの患者データもそれらしい値を入力していく。

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

今回はメイン画面にて過去の検査結果が閲覧できるような処理を行う。

想定しているような処理は、図1の様な既にサンプルアプリに存在しているグラフ描画画面の年号選択の様なものである。検査日付を選択したら、対応したデータの表示を行いたい。
図1 グラフ画面での年号選択コンボボックス
以下は、サンプルアプリでどのように年の選択を行っているかを抜き出したものである。ビュー(HTML)とコントローラ(CountryController)の関係する部分を抜粋した。

HTML

  1. <ons-list class="year-select-container">
  2. <ons-list-item>
  3. <select
  4. ng-model="country.year"
  5. ng-options="year for year in country.years"
  6. class="text-input text-input--transparent"
  7. style="width: 100%; margin-top: 4px">
  8. </select>
  9. </ons-list-item>
  10. </ons-list>
これがhtmlの記述である。4行目、および5行目を書き換えれば応用が出来そうにみえる。
次に、「country.year」が何かを確認していく。

JS

  1. this.years = [];
  2. for (var i = 1950; i <= 2100; i++) {
  3. this.years.push('' + i);
  4. }
  5.  
  6. $scope.$watch('country.year', function() {
  7. that.getPopulation();
  8. });
上記のコードはCountryController内で記述されており、なお関係があるものだけを
抜粋したものである。
行目の$scope.$watch~は指定された値を監視し、その値が変化したら処理getPopulation()を行うといったものである。
これらの処理を行う事でコンボボックスの作成を行う事が出来ることが分かったところで、我々のアプリケーションの改造へ移る。まずは検査日付の選択が行えるコンボボックスの作成を試みる。

HTML

  1. <ons-list class="year-select-container">
  2. <ons-list-item>
  3. <select
  4. ng-model="countries.sampleDate"
  5. ng-options="sampleDate for sampleDate in countries.sampleDateList"
  6. class="text-input text-input--transparent"
  7. style="width: 100%; margin-top: 4px">
  8. </select>
  9. </ons-list-item>
  10. </ons-list>
上記HTMLはmain.html内に記述する。
検査日は「sampleDate」として定義されているため、ng-model,ng-optionsをそれぞれ置き換える。なお、ng-modelに指定した'countries.sampleDate'はコンボボックスにつけた変数名のようなもので、ng-optionsに指定した'countries.sampleDateList'は検査日のリストが格納されている。

JS

  1. that.sampleDateList = [];
  2. Countries.get()
  3. .then(
  4. function(countries) {
  5. countries.list.forEach(function(element){
  6. that.sampleDateList.push(element.sampleDate);
  7. });
  8. that.sampleDate=that.sampleDateList[0];
  9. // 直近の検査日の検査結果を変数 list に格納
  10. that.list = countries.list;
  11.  
  12. var list = countries.list[0];
  13. that.createGroup(list);
  14. }
  15. );
  16. $scope.$watch('countries.sampleDate', function() {
  17. //that.listからthat.list[i].sampleDate = that.sampleDateとなるthat.list[i]を取り出してthat.createGroupを呼び出す
  18. });
これは、CountriesController内で記述を行う。まず、1行目でsampleDateListの配列を空にする。
5~7行目ではsampleDateListに検査リストに含まれている検査日の流し込みを行っている。
また、これをアラートすると、以下の図2の様になり、抽出出来ていることが分かる。

図2 sampleDateListをアラートした図
8行目は、デフォルト値の設定である。この代入をしない場合、起動直後の状態だとコンボボックスが空欄になってしまう為、こちらを参考にしそれを防止した。
10行目の定義は、OpenDolphinから取得した検査データ一覧をメモリーに保存するといった処理である。
13行目は以前のブログで記述したグルーピング処理を関数化したcreateGroupの呼び出しである。
16行目からはSampleDateの監視を行うような処理であるが、まだ未完成である。
これらの修正を行い、アプリを確認すると、以下の図3の様にコンボボックスの作成を行う事が出来た。
図3 メイン画面での日付選択のコンボボックス

次回は17行目のコメントにも書いてあるような処理の記述を行い、過去の検査結果の表示を行いたい。

【Tips】

コントローラ内で定義したプロパティ(this.sampleDateなどthis.が付いたもの)は、ビュー(HTML)内ではコントローラへの参照オブジェクト(countriesなど)のプロパティとして参照できる(countries.sampleDate)。
ビュー内でこのプロパティが変更されるとコントローラ内のプロパティも変更され、逆にコントローラ内で設定したプロパティの値はビューへ反映される。
これと同じように、コントローラ内で定義したメソッド(this.createGroup = function(list){...})も、ビューから呼び出せるのだろうか?
普通の関数とコントローラのメソッドの違いは何だろうか?
$scope$watchはコントローラのプロパティを監視し、その値が変更されたときに指定した処理を実行する命令である。これを使ってモデル(HTML)とコントローラの間で連携を実現している。いわゆる.onChangeなどのイベントリスナーと等価なものであろう。
ただし、$scope$watchを使うのがAngularJSの流儀なのかもしれない。



2018年9月20日木曜日

②患者基本情報データの取得5

前回、ORCAから患者情報をとってこれたので、あとはスマホからWebAPIを送って、これと同じものを取ってこれるよう、認証情報をヘッダに書いてやればいいだけである。

認証情報は下記のプログラムを書いてみる。(g_user、g_passwdをそれぞれORCAのユーザ名、パスワードとする

  1. $http.defaults.headers.get = {
  2. 'Authorization' : 'Basic ' + window.btoa(g_user + ':' + g_passwd)
  3. };

残りのプログラミングをどう書けばいいのか分からないので、あるブログのこの記事の患者基本情報をところ、サイトサイト②を参考にして、プログラミングしてみた。

それぞれプログラミングしたのは以下の3枚である
図1:あるブログを参考にしたプログラム
図2:サイト①を参考にしたプログラム
図3:サイト②を参考にしたプログラム

どれも行ったが、いまだに認証画面が出てくるので、修正していって、うまく患者基本情報を取得していけるようにしていきたい。

【コメント】
認証のための下記のプログラムにおいて、g_userとg_passwdは変数です。文字列定数ではありません。
  1. $http.defaults.headers.get = {
  2. 'Authorization' : 'Basic ' + window.btoa(g_user + ':' + g_passwd)
  3. };
ですから前もってg_userとg_passwdにはORCAのユーザ('ormaster')とパスワードを代入しておく必要があります。
  1. g_user = 'ormaster';
  2. g_passwd = '[ormasterのパスワード]';
定数と変数の違いに注意してください。図1~3のいずれも定数と変数を混同しています(ormasterは変数ではありません)。

【AngularJSのプログラム作法】
AngilarJSでスマホアプリを開発するにはその作法に従う必要があります。
まず、URLからデータを取得する(いわゆるWebAPI)ためのサービスを作ります。その名前を'Patient'とすると次のようなプログラムになるでしょう。
  1. .service('Patient', ['$http', function($http) {
  2. this.get = function() {
  3. $http.defaults.headers.get = {
  4. 'Authorization' : 'Basic ' + window.btoa(g_user + ':' + g_passwd)
  5. };
  6. return $http.get('http://172.16.108.251:8000/api01rv2/patientgetv2?id=00001&format=json')
  7. .then(
  8. function(response) {
  9. return response.data.patientinfores.Patient_Information;
  10. },
  11. function(response) {
  12. alert('Error at Patient:' + JSON.stringify(response.data, null, 2));
  13. }
  14. );
  15. };
  16. }])
図1. サービス'Patient'

次にモデルとビューの懸け橋となるコントローラを作ります。その名前を'PatientController'とすると、プログラムは次のようになるでしょう。
  1. .controller('PatientController', ['$scope', 'Patient', function($scope, Patient) {
  2. var that = this;
  3.  
  4. /* 患者情報の読み込み */
  5. Patient.get()
  6. .then(
  7. function(patient){
  8. that.Patient_ID = patient.Patient_ID;
  9. that.WholeName = patient.WholeName;
  10. that.BirthDate = patient.BirthDate;
  11. that.Sex = patient.Sex == '1' ? 'M' : 'F';
  12. }
  13. );
  14. }])
図2. コントローラ'PatientController'

作成したPatientサービスをコントローラに注入して(1行目)、そのget()メソッドを使って患者情報を取得します(5行目)。取得した患者情報(患者ID、氏名、生年月日、性別)をコントローラのプロパティに設定し、ビュー(demographics.html)から参照できるようにします。
ビューではコントローラを経由して患者情報を出力します。
  1. <ons-page ng-controller="PatientController as patient">
  2. <ons-toolbar>
  3. <div class="center">Demographics</div>
  4. </ons-toolbar>
  5. <ons-list>
  6. <ons-list-header>基本情報</ons-list-header>
  7. <ons-list-item>
  8. <ons-col width="20%">患者ID</ons-col>
  9. <ons-col>{{ patient.Patient_ID }}</ons-col>
  10. </ons-list-item>
  11. <ons-list-item>
  12. <ons-col width="20%">氏名</ons-col>
  13. <ons-col>{{ patient.WholeName }}</ons-col>
  14. </ons-list-item>
  15. </ons-list>
  16. </ons-page>
図3. ビュー(demographics.html)

ここでは、1行目でPatientControllerをpatientという変数名で参照して、9行目で患者IDをpatient.Patient_IDで、13行目で患者名をpatient.WholeNameを使って出力しています。

このように、AngularJSではデータを格納するモデルをサービスで、ビューをHTMLで、そして両者の橋渡しをコントローラを使って行います。このことを念頭に置いてプログラムの設計を行う必要があります。

4検査結果表示について⑤

今回は前回グルーピングを行ったグループ名の項目が少々小さく、見づらい為、cssの編集を行っていく。
<ons-list-header>{{ group.groupName }}</ons-list-header>
まずhtmlの上記コードを下記の様にする
<ons-list-header class="group">{{ group.groupName }}</ons-list-header>
この処理はons-list-header にクラス属性を付与するといったものである。今回は名称をgroupとしている。
次にcssファイルに下記のコードを記述する。
  1. ons-list-header.group{
  2. font-size:30px;
  3. background-color: rgb(71, 228, 92);
  4. height: 35px;
  5. padding-top:3px;
  6. }
上記のコードは先ほど定義したクラスに対する詳細設定である。フォントサイズ、背景色、高さ、高さの調節等を行っている。
図1 CSSでグループ名を装飾した結果

これらの処理を行った後、アプリケーションにて確認すると上記図1の様にグループ名を見やすくすることが出来た。
次回は指定した日付に対応する配列要素を抽出するといったコードの記述を行っていきたい。

【コメント】
検査項目をグルーピングして表示する件についてはこれで完成ですね。
次へ進んでいきましょう。

2018年9月14日金曜日

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

前回のコメントを参考にしながら再び編集を試みた。
  1. function(countries) {
  2. var list = countries.list[0];
  3. that.list = [];
  4. list.items.forEach(function(element){
  5. var normalValue = element.normalValue.split(/-/);
  6. var lower = parseFloat(normalValue[0]);
  7. var upper = parseFloat(normalValue[1]);
  8. var bgColor;
  9. if(element.value >= lower && element.value <= upper){
  10. bgColor ="normal";}else{
  11. bgColor ="abnormal";
  12. }
  13. that.list.push(
  14. {
  15. itemName:element.itemName,
  16. value:Math.round(element.value *100) /100 ,
  17. unit:element.unit,
  18. bgColor:bgColor
  19. }
  20. );
  21. });
まず、上記のリスト配列を、下記のものに差し替える。
  1. function(countries) {
  2. // 直近の検査日の検査結果を変数 list に格納
  3. var list = countries.list[0];
  4. // 検査グループ配列を空配列に初期化
  5. that.group = [];
  6. // 個々の検査グループを格納するための一変数を null で初期化
  7. var group = null;
  8. // 検査結果項目配列 list.items の個々の要素 element に対してループ処理
  9. list.items.forEach(function(element){
  10. // elementが一番最初の検査結果項目の場合、groupを初期化する
  11. if(group == null) {
  12. group = {
  13. 'groupName': element.groupName,
  14. 'items': []
  15. };
  16. // 検査グループが変わったとき、groupを検査グループ配列に追加してからgroupを初期化する
  17. } else if(group.groupName != element.groupName){
  18. that.group.push(group);
  19. group = {
  20. 'groupName': element.groupName,
  21. 'items': []
  22. };
  23. }
  24. // 基準値を求めて normalValue 変数に格納する
  25. var normalValue = getNormalValueRange(element.normalValue);
  26. // 基準値と検査結果を比較して背景色を決める
  27. var bgColor;
  28. if(element.value >= normalValue.lower && element.value <= normalValue.upper){
  29. bgColor ="normal";}else{
  30. bgColor ="abnormal";
  31. }
  32. // グループに検査結果を追加する
  33. group.items.push(
  34. {
  35. 'itemName': element.itemName,
  36. 'value': round(element.value), // 四捨五入
  37. 'unit': element.unit,
  38. 'bgColor': bgColor,
  39. }
  40. );
  41. });
  42. // 最後のgroupを検査グループ配列に追加する
  43. if(group != null) {
  44. that.group.push(group);
  45. }
  46. }
  47. );
また、getNormalValueRange関数およびround関数の定義を以下の様に行った。
  1. /*
  2. 基準値の下限と上限を求める
  3. */
  4. function getNormalValueRange(normalValue) {
  5. var normalValue = normalValue.split(/-/);
  6. var lower = parseFloat(normalValue[0]);
  7. var upper = parseFloat(normalValue[1]);
  8. return {
  9. lower: lower,
  10. upper: upper,
  11. };
  12. }
  13.  
  14. /*
  15. 四捨五入(小数第3位)
  16. */
  17. function round(value) {
  18. return Math.round(value * 100) / 100;
  19. }
jsのグループ対応付けが完了したところで、次にHTMLの編集を行う。
  1. <ons-list>
  2. <ons-list-item class="{{country.bgColor}}" ng-click="countries.showCountry(country.itemName)" modifier="chevron" ng-repeat="country in countries.list | filter:query">
  3. <ons-col width="50%">{{ country.itemName }}</ons-col>
  4. <ons-col>{{country.value}}</ons-col>
  5. <ons-col>{{country.unit}}</ons-col>
  6. </ons-list-item>
  7. </ons-list>
HTMLのこの記述を、以前のブログのコメントに記載されていたこの形式に書き換えた。
  1. <ons-list ng-repeat="group in countries.group">
  2. <ons-list-header>{{ group.groupName }}</ons-list-header>
  3. <ons-list-item class="{{country.bgColor}}" ng-click="countries.showCountry(country.itemName)" modifier="chevron" ng-repeat="country in group.items | filter:query">
  4. <ons-col width="65%">{{ country.itemName }}</ons-col>
  5. <ons-col>{{ country.value }}{{ country.unit }}</ons-col>
  6. </ons-list-item>
  7. </ons-list>
上記の書き換えを行った後、スマートフォンで確認したところ、以下の図1の様な結果が表示された。
図1 グルーピング処理を行った後の画面

こうして、なんとかグループごとに検査項目の表示を行う事が出来た。
次回は過去の検査データの表示が行えるような処理を行っていきたい。

【コメント】
検査項目のグルーピングができました。過去の検査データは 配列countries.listの中に入っています。だから、3行目の
var list = countries.list[0];
で、指定した日付に対応する配列要素を取り出せばよいでしょう(この場合は先頭の配列要素を取り出しているので直近の検査結果になっています)。やってみてください。

その前に、図1に表示された検査グループ名称「生化学的検査」ですが、デフォルトの表示だと控えめすぎるので、もっと存在感を出した方が良いように思います。 例えばCARADA健診手帳のような画面を参考にしてCSSを使って画面をデザインしてはどうでしょう?

レーダーチャートの表示2

前回 レーダーチャートの表示を行うことが出来たので、今回は実際の値を代入したグラフの描画を試みる。 .controller('RaderChartController', ['$scope', 'Countries', funct...