【Phonegap/Cordova + Onsen UI 03】住所検索アプリをOnsenUI+Angular.jsに書き換える

みなさん、こんにちは!

前回Onsen UI使用の準備まで行いました。
(前回の記事はこちら⇒【Phonegap/Cordova + Onsen UI 02】Onsen UI を導入する(手動で配置))
ですので、今回はOnsenを使用したアプリをとりあえず作っていきましょう!

お題は、いつか作った住所検索アプリとしましょう。
全部書き換えるのは大変なので、とりあえずは、検索機能のみの再現を目指しましょう。

Onsen UIの説明で書きましたが、Onsenは裏方でAngular.jsを使用しています。ですので、セオリーに則ってAngularで実装していきましょう。

Onsenでの実装、ということで、まずはOnsenの今回使用するコンポーネント、というか、ディレクティブについて説明します。

  • ons-page
    1つのページを定義する時にこのディレクティブを使用します。
  • ons-button
    Buttonを配置する時に使用します。
    クリックイベントを付与したい場合は、onclickではなく、Angularのng-click属性を使用します。

とりあえずは、上記2つだけを使用します。
これを踏まえて、いつかの住所検索アプリのHTMLを下記のように修正します。修正、というか、全然違うので別プロジェクトを作ってもよいと思います。

<html>

 <!-- ----------------------------------------

 住所検索のためのAPIは、zipcloud さんのAPIを使用しています
 URL: http://zipcloud.ibsnet.co.jp/

 ---------------------------------------- -->

 <head>
 <meta charset="utf-8" />
 <meta name="format-detection" content="telephone=no" />
 <meta name="msapplication-tap-highlight" content="no" />
 <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

 <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
 <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

 <!--<script src="lib/onsen/js/angular/angular.js"></script>-->
 <script src="lib/onsen/js/onsenui_all.min.js"></script>

 <script src="jquery/jquery-1.11.3.min.js"></script>

 <script src="js/mainController.js"></script>
 <script src="js/searchAddress.js"></script>

 <style>
 ons-page{
 font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "MS Pゴシック", "MS PGothic", sans-serif !important;
 }
 </style>

 <script type="text/javascript" src="cordova.js"></script>

 <script type="text/javascript" src="js/storageManager.js"></script>

 <title>郵便番号検索</title>

 </head>
 <body>
 <ons-page ng-controller="MainController">

 <h2>住所検索</h2>

 <input id="input_zipno" type="text" ng-model="zipno" />

 <ons-button ng-click="searchAddress()">search</ons-button>
 
 <div class="result">
 <p>
 {{got_zipno}}
 </p>
 <p>
 {{got_address}}
 </p>
 </div>

 </ons-page>
 </body>
</html>

まずは、前回準備したOnsenUI関連ファイルをインクルードしていきます。17,18でcssを、20行目でjsファイルをインクルードします。24,25行目ではこれから作成するjsファイルのインクルード行です。

40~57行目がページ定義部分です。前述のons-pageを使用しており、Angular.jsのコントローラをng-controllerで指定しています。

46行目は、ボタン押下で検索実行するので、そのイベントをng-click属性に与えています。

正直、全然Onsen UIを使ってる感はないですね。すみません。

さて、今度は、ons-pageに与えたコントローラを実装するjsファイルを作成します。

{
  'use strict';
  var module = ons.bootstrap("ONSEN_01_APP", ['onsen']);

  module.controller("MainController", function ($scope, $http) {

    $scope.zipno = "";
    $scope.got_zipno = "";
    $scope.got_address = "";

    // 住所検索を行う
    $scope.searchAddress = function(){

      var zip_no = $scope.zipno;

      // 入力チェック
      if(zip_no && (zip_no.match(/[0-9]{7}/) != null)) {

        var params = {};
        params["zipcode"] = zip_no;
        params["callback"] = "JSON_CALLBACK";

        // angularのhttpサービスでjsonp
        $http.jsonp(
          "http://zipcloud.ibsnet.co.jp/api/search", 
        {
          params: params
        }
        ).success(function(data){
          // successコールバック
          if(!data.results){
            alert("情報が見つかりませんでした...");
            return;
          }

          var address_info = data.results[0];

          $scope.got_zipno = address_info.zipcode;
          $scope.got_address = address_info.address1 + " " + address_info.address2 + " " + address_info.address3;

        }).error(function(){
          alert("エラーが発生しました");
        });

      }
      else{
        alert("7桁の数字を入力してください");
      }
    }
  });

}

ons-pageにMainControllerを与えていたので、上記jsにてコントローラを定義しています。
メソッドとしては、住所検索の機能を用意する必要があるので、12行目でsearchAddressを定義しています。htmlでは46行目と対応します。

24行目で、$http.jsonpにてJSONPリクエストを発行しています。以前作成した住所検索アプリでは、jQuery.ajaxを使用していましたが、その代わりです。折角Angularを使用しているので、$httpサービスを利用しました。

29行目で、リクエスト成功時のコールバックが実行されます。必要情報を抜き出し、画面にバインドしているgot_zipno, got_addressに値をセットしています。(38, 39行目)

これでhtml, jsの作成は完了です。これで実行すると、簡素な画面にinputテキストボックスと、ボタンが表示され、郵便番号入力後、住所が表示される、という動作が確認できると思います。

実機確認すると、こんな感じになります。

Screenshot_2016-08-16-00-23-04

今回の内容では、Onsen UIのメリットをあまり体感できていないとおもいます…次回以降は、もっとOnsenらしいコードにしていこうと思います。

以上です!

 

次の記事はこちら⇒【Phonegap/Cordova + Onsen UI 04】ng-repeatを使用してリストデータを表示する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です