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

前回、前々回とMONACAのサンプルアプリのソースコードの解読を行い、おおまかではあるがある程度の構造を把握することが出来たので、今回は実際にサンプルアプリの編集を行う。
まず編集を行う際に、Wiresharkでのパケットキャプチャを利用し、どの様な通信方法が行われているのかを確認する。今回はあらかじめキャプチャされていたデータを用いる。尚、パケットキャプチャの閲覧を行う際にNotepad++というアプリケーションを利用する。Notepad++を実行し、パケットキャプチャを張り付けた後に、言語＞J>JSONをクリックする事で、以下の図1の様に表示される。

図1 notepad++図1

1行目の

GET /dolphin/openSource/lab/module/00001,0,6

は検査データを最新から過去6日分までの取得を行う指示である。OpenDolphinで過去6日分ごとしかデータを表示することが出来なかったのはこのためであろう。
図の左に表示されている+ボタンをクリックする事で対応するタグに格納されているデータの開閉を行うことが出来る為、どのタグにどういったデータが存在しているのかを容易に認識することが出来る。下記図2は21行目から始まる「items」のデータを閉じた図である。

図2 notepad++図2

そして、もう一度+ボタンを押す事で、下記図3の様に再び「items」に格納されているデータの表示を行うことが出来る。

図3 notepad++図3

ここで、見覚えのあるデータ群の閲覧を行うことが出来、検査データは「items」の中に格納されていることを理解することが出来た。
データの格納場所が分かったところで、サンプルアプリの編集を行いたいのだが、OpenDolphinに接続するにはユーザIDとパスワードで認証を受ける必要がある。そのためには、図1から、HTTPヘッダにユーザIDとパスワードを設定すればよいことがわかる（4～5行目）。
ここでパスワードに設定した値であるが、MD5ハッシュ関数を用いてハッシュ値に変換している。これは、仮にハッシュ値に変換を行わずパスワードを送信した場合、パケットキャプチャを行うと筒抜けになってしまうためである。
実際に同じ数値に変換されるかどうかをＭＤ５ハッシュ計算ツールを用いて確認を行った。すると、下記図4の様に表示され、同じ値であることを確認することが出来た。

図4 ハッシュ計算ツール図

ユーザIDとパスワードの記述方法について概ね理解することが出来たので、いよいよMONACAのサンプルアプリの編集を行う。尚、名前を「Onsen World Poplation」から「Open Dolphin Client」へ変更した。
まず、index.jsの「angular.module('app', ['onsen'])」の直下に

.config(['$httpProvider',function($httpProvider){  
  $httpProvider.defaults.headers.common.password='6f8e646f95af8e79096477e877245664';
  $httpProvider.defaults.headers.common.userName='1.3.6.1.4.1.9414.70.1:W3415020';
}])

を追加する。これは「$httpProvider」というAngularJS組み込みサービスを用いたものである。このサービスは同じくAngularJSの組み込みサービスである「$http」のデフォルトの動作を変更するために用いるサービスである。ここでは、「headers」属性を使って、HTTPリクエストのヘッダーにパスワードとユーザネームを書き込む処理を行っている。
これで、ヘッダへ設定すべき認証情報の書き込み処理は完了した。
次に、

.service('Countries', ['$http', function($http) {
  this.get = function() {
    return $http.get('countries.json')
      .then(
        function(response) {
          return response.data.countries;
        }
      );
  };
}])

これは国一覧のデータを取得し、リストへ送るサービスであるが、これを

.service('Countries', ['$http', function($http) {
  this.get = function() {
    return $http.get('http://172.16.108.251:8080/dolphin/openSource/lab/module/00001,0,6')
      .then(
        function(response) {
          alert(JSON.stringify(response.data.list[0],null,2));
          return response.data;
        }
      );
  };
}])

の様に書き換える。
1行目はサービスの宣言で、「Countries」はサービス名、次の配列内の最初の要素「$http」はこのサービスで使用する組み込みサービスで、次のfunctionがこのサービスのコンストラクタである。3行目の$http.getは引数に指定したOpenDolphinのURLから検査データの取得を行う。ここで指定するURLは図1の1行目に示されているものと、6行目のHost～に示されているIPアドレスを結合したものである。6行目では、OpenDolphinから取得したデータの内容を確認するためポップアップしている。また、確認のためだけに膨大なデータを出力するのは無駄であるため、list[0]として、最新の検査データのみを出力する。なお、JSON.stringify関数はJavascriptオブジェクトをJSON形式の文字列に変換する関数でである。
実際にスマートフォンアプリの方で確認したところ、図５の様に表示され、無事にデータの取得が行えていることを確認することが出来た。

図5　スマートフォンアプリ図1

次に、国名一覧を各検査項目名一覧に変更する。

Countries.get()
    .then(
      function(countries) {
        that.list = countries;
      }
    );

上記は、取得した国名をリストに送るといったコードであるが、これを下記のコードに書き換える。

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

まず、4行目の記述で、ローカル変数「list」に「countries.list」に格納されている検査データのうち最新のものを代入し、5行目で、検査一覧を格納する属性「that.list」を空配列に初期化する。
そして6~7行目は、検査目「itemName」をそのリストの要素に追加するコードである。
このコードを保存し、スマートフォンアプリで確認すると下記の図6の様になり、無事に検査一覧を表示させることが出来た。

図6　スマートフォンアプリ図2