Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(5)

Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(5)

AngularJSの方法でMonacaアプリを作ってみよう(中編)
―バス停の座標データを取得するアプリ―

2014年12月3日 改訂 (初版:2013/11/26)

Monacaアプリ開発実践編の第2弾。Web APIを使ってバス停の座標データを取得するアプリの作成手順を解説する。

ヒム・カンパニー 永井 勝則
  • このエントリーをはてなブックマークに追加

 今回は、前回の内容を踏まえて、「路線毎のバス停の座標データ」ページで説明されているWeb APIを使ってバス停の座標データ(緯度と経度)を取得してみよう。

バス停の座標データを取得する

 路線番号データの取得は前回のアプリ開発ですでに済んでいるので、以下では座標データの取得に注目できるように、路線番号は決め打ちにする。

 要求のURLには「http://tutujibus.com/busstopLookup.php」とパラメーターのrosenidcallbackを使用する。この要求に対して、応答は、busstop配列に、{"id":"バス停番号","name":"バス停の名前","latitude":緯度,"longitude":経度}というプロパティと値を持ったオブジェクトが、バス停の数分だけ入れられて返される。

プロジェクトの作成

 プロジェクトは前と同様[Onsen UI最小限のテンプレート]から作成する。index.htmlを書き換える要領も前回通りで、AngularJS仕様に置き換える。

page1.html ― コントローラー名の指定と、データの表示

 プロジェクトのpage1.htmlファイルには、次の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)を指定し、そのスコープに割り当てられたデータをページ上に表示するHTMLソース(page1.html)

 コントローラーの名前は「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を加える必要がある。

JavaScript
// 停留所データを提供する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;
}]);
バス停データを提供するサービス(index.html)

「var app = angular.module('myApp', ['onsen']);」の下に追記する。

 このサービスのgetBusstop()関数は次のように、引数にrosenidとコールバック関数を渡して使用する。

JavaScript
BusstopService.getBusstop( rosenid, function(data){
  // コールバック関数の実行内容
});
getBusstop()関数の使い方

 最後に、コントローラー(MainController)を記述する。要領はこれも前と同じだ。BusstopServiceを利用するので、それをコントローラーに注入する。

JavaScript
// $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)

先ほどの「バス停データを提供するサービス(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に示す結果が得られる。

図4-4 バス停の名前と緯度経度が得られた

 この図の左はアプリの起動時の画面で、真ん中はボタンをタップして要求を送信し、応答を待っている画面(ボタンにスピンアニメーションが表示されている)、右が応答のデータを表示した画面だ。このアプリではボタンのタップでgetBusstopLocation()関数を呼び出すときに路線番号を決め打ちしているが、この関数に渡す引数を変更することで、別の路線のバス停のid値や名前、緯度経度の値が得られる。

【コラム】AngularJSでGoogle Mapsを利用する方法

 AngularJSはGoogle Mapsと提供元が同じだけあって、AngularJSにGoogle Mapsを組み込むときに利用できる「Angular Google Maps」というGoogle Maps用のディレクティブのセットが公開されている。Angular Google Mapsと、このアプリで得られたバス停の緯度経度情報を組み合わせると、図4-5に示すような地図アプリが作成できる。

図4-5 バス停の緯度経度を使って地図上にバス停をアイコンで表示した

 次回(連載最終回)は、前回と今回の内容を踏まえて、路線名を選択して時刻表を表示するアプリを作成する。

※以下では、本稿の前後を合わせて5回分(第2回~第6回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(5)
2. Monacaで作る、初めてのOnsen UIアプリ

新規作成した“初めてのOnsen UIアプリ”プロジェクトの各ファイルをAngularJS流に書き換える。そのアプリをデバッグビルドし、デバイスに実際にインストールする。

Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(5)
3. Onsen UIの舞台裏で働くAngularJSの世界

AngularJS流のデータ/コントローラー/表示の実装方法と、AngularJSのディレクティブによるHTML要素の操作方法、データの追加、AngularJS機能のサービスについて解説する。

Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(5)
4. AngularJSの方法でMonacaアプリを作ってみよう(前編)

実践的なMonacaアプリ開発の一例として、オープンデータのWebサービスを使ったアプリの作成方法を説明する。Monacaアプリ開発実践編の第1弾。

Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(5)
5. 【現在、表示中】≫ AngularJSの方法でMonacaアプリを作ってみよう(中編)

Monacaアプリ開発実践編の第2弾。Web APIを使ってバス停の座標データを取得するアプリの作成手順を解説する。

Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(5)
6. AngularJSの方法でMonacaアプリを作ってみよう(後編)

Monacaアプリ開発実践編の第3弾(連載最終回)。路線名を選択して、時刻表を表示するアプリの作成方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!