まず編集を行う際に、Wiresharkでのパケットキャプチャを利用し、どの様な通信方法が行われているのかを確認する。今回はあらかじめキャプチャされていたデータを用いる。尚、パケットキャプチャの閲覧を行う際にNotepad++というアプリケーションを利用する。Notepad++を実行し、パケットキャプチャを張り付けた後に、言語＞J>JSONをクリックする事で、以下の図1の様に表示される。
 |
| 図1 notepad++図1 |
GET /dolphin/openSource/lab/module/00001,0,6は検査データを最新から過去6日分までの取得を行う指示である。OpenDolphinで過去6日分ごとしかデータを表示することが出来なかったのはこのためであろう。
図の左に表示されている+ボタンをクリックする事で対応するタグに格納されているデータの開閉を行うことが出来る為、どのタグにどういったデータが存在しているのかを容易に認識することが出来る。下記図2は21行目から始まる「items」のデータを閉じた図である。
 |
| 図2 notepad++図2 |
そして、もう一度+ボタンを押す事で、下記図3の様に再び「items」に格納されているデータの表示を行うことが出来る。
 |
| 図3 notepad++図3 |
データの格納場所が分かったところで、サンプルアプリの編集を行いたいのだが、OpenDolphinに接続するにはユーザIDとパスワードで認証を受ける必要がある。そのためには、図1から、HTTPヘッダにユーザIDとパスワードを設定すればよいことがわかる（4～5行目）。
ここでパスワードに設定した値であるが、MD5ハッシュ関数を用いてハッシュ値に変換している。これは、仮にハッシュ値に変換を行わずパスワードを送信した場合、パケットキャプチャを行うと筒抜けになってしまうためである。
実際に同じ数値に変換されるかどうかをＭＤ５ハッシュ計算ツールを用いて確認を行った。すると、下記図4の様に表示され、同じ値であることを確認することが出来た。
 |
| 図4 ハッシュ計算ツール図 |
まず、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 |
0 件のコメント:
コメントを投稿