Monaca入門：Onsen UI＋AngularJSで作るハイブリッドモバイルアプリ（5）
AngularJSの方法でMonacaアプリを作ってみよう（中編）
―バス停の座標データを取得するアプリ―
Monacaアプリ開発実践編の第2弾。Web APIを使ってバス停の座標データを取得するアプリの作成手順を解説する。
今回は、前回の内容を踏まえて、「路線毎のバス停の座標データ」ページで説明されているWeb APIを使ってバス停の座標データ（緯度と経度）を取得してみよう。
バス停の座標データを取得する
路線番号データの取得は前回のアプリ開発ですでに済んでいるので、以下では座標データの取得に注目できるように、路線番号は決め打ちにする。
要求のURLには「http://tutujibus.com/busstopLookup.php」とパラメーターのrosenidとcallbackを使用する。この要求に対して、応答は、busstop配列に、{"id":"バス停番号","name":"バス停の名前","latitude":緯度,"longitude":経度}というプロパティと値を持ったオブジェクトが、バス停の数分だけ入れられて返される。
プロジェクトの作成
プロジェクトは前と同様［Onsen UI最小限のテンプレート］から作成する。index.htmlを書き換える要領も前回通りで、AngularJS仕様に置き換える。
page1.html ― コントローラー名の指定と、データの表示
プロジェクトのpage1.htmlファイルには、次のHTMLコードを記述する。
|
<ons-page ng-controller="MainController">
<ons-toolbar>
<div class="center">バス停の座標</div>
</ons-toolbar>
<ons-button should-spin={{isSpin}} ng-click="getBusstopLocation(1)">バス停の座標取得</ons-button>
<table>
<tr ng-repeat="busstop in busstopdata">
<td>{{busstop.id}}</td>
<td>{{busstop.name}}</td>
<td>{{busstop.latitude}}</td>
<td>{{busstop.longitude}}</td>
</tr>
</table>
</ons-page>
|
コントローラーの名前は「MainController」で、取得したデータからは、これも前回と同様、ng-repeatディレクティブを<tr>内で使って、idプロパティやnameプロパティ、緯度（latitude）・経度（longitude）の値をダイナミックに書き出す。
<ons-button>はOnsen UIのボタン用コンポーネントで、ng-click属性に呼び出したい関数呼び出しを文字列（String）で指定すると、タップ時にその呼び出しが実行できる。ここではこのコントローラーのスコープにあるgetBusstopLocation()関数に引数として「1」を渡して呼び出している。この引数は路線番号を表す。「1」は「中央線」に該当し、これを「2」に変更すると「鯖江南線」のバス停データが得られるようにする（「決め打ち」といったのは、この引数のことだ）。
また<ons-button>のshould-spin属性と、その値{{isSpin}}にも注目してほしい。should-spinはボタンに円が回転するスピンアニメーションを付けるかどうかを示す属性で、「true」を指定するとスピンアニメーションが表示され（ボタンのテキストは消える）、「false」でアニメーションが終了する。この機能は例えば、データの取得開始前と取得中、取得完了という状態変化の表現に利用できる。
index.htmlのJavaScript ― サービスの作成と、サービスを使用するコントローラーの作成
JavaScriptではまず、バス停のデータを提供するサービス（BusstopService）を作成する。要領は前のRosenIDServiceのときと同じだが、要求にはrosenidを加える必要がある。
|
// 停留所データを提供するBusstopServiceサービス
app.factory('BusstopService', ['$http', function($http){
var busstopService = {};
// 停留所データを要求し、成功したら引数で渡されたcallback関数を呼び出す
busstopService.getBusstop = function(rosenid, callback){
$http.jsonp('http://tutujibus.com/busstopLookup.php?rosenid='+ rosenid +'&callback=JSON_CALLBACK')
.success(function(data){
callback(data);
});
};
return busstopService;
}]);
|
※「var app = angular.module('myApp', ['onsen']);」の下に追記する。
このサービスのgetBusstop()関数は次のように、引数にrosenidとコールバック関数を渡して使用する。
|
BusstopService.getBusstop( rosenid, function(data){
// コールバック関数の実行内容
});
|
最後に、コントローラー（MainController）を記述する。要領はこれも前と同じだ。BusstopServiceを利用するので、それをコントローラーに注入する。
|
// $scopeとBusstopServiceを注入してMainControllerの機能を定義
app.controller('MainController',['$scope', 'BusstopService', function($scope, BusstopService){
// 停留所データ用プロパティ
$scope.busstopdata = null;
// ボタンのスピンアニメーション用プロパティ
$scope.isSpin = false;
// ボタンのタップで呼び出される
$scope.getBusstopLocation = function(rosenid){
// スピンアニメーション開始
$scope.isSpin = true;
// BusstopServiceのgetBusstop()に、路線IDと
// データ取得成功後に呼び出されるコールバック関数を渡して呼び出す
BusstopService.getBusstop( rosenid, function(data){
// busstopdataプロパティに停留所データを割り当てる
$scope.busstopdata = data.busstop;
// スピンアニメーション停止
$scope.isSpin = false;
});
}
}]);
|
※先ほどの「バス停データを提供するサービス（index.html）」コードの下に追記する。
BusstopServiceサービスのgetBusstop()関数には、ボタンのタップから渡されるrosenidとコールバック関数を渡している。
コールバック関数は今の場合、function(data){ から}までの部分で、スコープのbusstopdataプロパティへのバス停データの割り当てと、スコープのisSpinプロパティの「false」設定を行っている。これらのプロパティの代入によって、page1.html上のテーブル（＝<table>要素）にバス停のデータが書き込まれ、ボタンのスピンアニメーションが停止する。
ボタンのスピンアニメーションについていうと、アプリの起動時にはこのコントローラーのスコープのisSpinプロパティが「false」に設定されるので、page1.htmlのshould-spin={{isSpin}}は「should-spin=false」になり、アニメーションは実行されない。ボタンのタップ時にはスコープのgetBusstopLocation()関数が呼び出され、ここでスコープのisSpinプロパティを「true」に設定しているので、スピンアニメーションがスタートする。そして応答が返ってきたときに呼び出されるコールバック関数ではisSpinを「false」に戻しているので、アニメーションは停止する。
ファイルを保存してデバッガーからアプリを実行すると、図4-4に示す結果が得られる。
この図の左はアプリの起動時の画面で、真ん中はボタンをタップして要求を送信し、応答を待っている画面（ボタンにスピンアニメーションが表示されている）、右が応答のデータを表示した画面だ。このアプリではボタンのタップでgetBusstopLocation()関数を呼び出すときに路線番号を決め打ちしているが、この関数に渡す引数を変更することで、別の路線のバス停のid値や名前、緯度経度の値が得られる。
【コラム】AngularJSでGoogle Mapsを利用する方法
AngularJSはGoogle Mapsと提供元が同じだけあって、AngularJSにGoogle Mapsを組み込むときに利用できる「Angular Google Maps」というGoogle Maps用のディレクティブのセットが公開されている。Angular Google Mapsと、このアプリで得られたバス停の緯度経度情報を組み合わせると、図4-5に示すような地図アプリが作成できる。
■
次回（連載最終回）は、前回と今回の内容を踏まえて、路線名を選択して時刻表を表示するアプリを作成する。
※以下では、本稿の前後を合わせて5回分（第2回～第6回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
2. Monacaで作る、初めてのOnsen UIアプリ
新規作成した“初めてのOnsen UIアプリ”プロジェクトの各ファイルをAngularJS流に書き換える。そのアプリをデバッグビルドし、デバイスに実際にインストールする。
3. Onsen UIの舞台裏で働くAngularJSの世界
AngularJS流のデータ／コントローラー／表示の実装方法と、AngularJSのディレクティブによるHTML要素の操作方法、データの追加、AngularJS機能のサービスについて解説する。
4. AngularJSの方法でMonacaアプリを作ってみよう（前編）
実践的なMonacaアプリ開発の一例として、オープンデータのWebサービスを使ったアプリの作成方法を説明する。Monacaアプリ開発実践編の第1弾。
5. 【現在、表示中】≫ AngularJSの方法でMonacaアプリを作ってみよう（中編）
Monacaアプリ開発実践編の第2弾。Web APIを使ってバス停の座標データを取得するアプリの作成手順を解説する。
