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

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

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

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

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

それぞれプログラミングしたのは以下の3枚である

図1：あるブログを参考にしたプログラム

図2：サイト①を参考にしたプログラム

図3：サイト②を参考にしたプログラム

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

---

【コメント】
認証のための下記のプログラムにおいて、g_userとg_passwdは変数です。文字列定数ではありません。

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

ですから前もってg_userとg_passwdにはORCAのユーザ（'ormaster'）とパスワードを代入しておく必要があります。

g_user = 'ormaster';
g_passwd = '[ormasterのパスワード]';

定数と変数の違いに注意してください。図1~3のいずれも定数と変数を混同しています（ormasterは変数ではありません）。

---

【AngularJSのプログラム作法】
AngilarJSでスマホアプリを開発するにはその作法に従う必要があります。
まず、URLからデータを取得する（いわゆるWebAPI）ためのサービスを作ります。その名前を'Patient'とすると次のようなプログラムになるでしょう。

.service('Patient', ['$http', function($http) {
  this.get = function() {
    $http.defaults.headers.get = {
      'Authorization' : 'Basic ' + window.btoa(g_user + ':' + g_passwd)
    };
    return $http.get('http://172.16.108.251:8000/api01rv2/patientgetv2?id=00001&format=json')
      .then(
        function(response) {  
          return response.data.patientinfores.Patient_Information;
        },
        function(response) {  
          alert('Error at Patient:' + JSON.stringify(response.data, null, 2));
        }
      );
  };
}])

図1. サービス'Patient'

次にモデルとビューの懸け橋となるコントローラを作ります。その名前を'PatientController'とすると、プログラムは次のようになるでしょう。

.controller('PatientController', ['$scope', 'Patient', function($scope, Patient) {
  var that = this;
 
  /* 患者情報の読み込み */
  Patient.get()
    .then(
      function(patient){
        that.Patient_ID = patient.Patient_ID;
        that.WholeName = patient.WholeName;
        that.BirthDate = patient.BirthDate;
        that.Sex = patient.Sex == '1' ? 'M' : 'F';
      }  
    );
}])

図2. コントローラ'PatientController'

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

<ons-page ng-controller="PatientController as patient">
  <ons-toolbar>
    <div class="center">Demographics</div>
  </ons-toolbar>
  <ons-list>
    <ons-list-header>基本情報</ons-list-header>
    <ons-list-item>
      <ons-col width="20%">患者ID</ons-col>
      <ons-col>{{ patient.Patient_ID }}</ons-col>
    </ons-list-item>
    <ons-list-item>
      <ons-col width="20%">氏名</ons-col>
      <ons-col>{{ patient.WholeName }}</ons-col>
    </ons-list-item>
  </ons-list>
</ons-page>

図3． ビュー（demographics.html）

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

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