【Phonegap/Cordova 入門04】BootstrapとjQueryでAjaxする住所検索アプリを作る

Phonegap/Cordova

みなさん、こんにちは！

前回は、Phonegapを使用してHello, Worldを表示する+αの簡素なアプリを作りましたね。
(前回の記事はこちら⇒【Phonegap/Cordova 入門03】ボタン押下でHello,Worldするアプリを作る)
しかし、アプリというには少し簡素すぎますよね…
機能的にも、ボタンを押してただ文字を表示するだけでは、何の意味もないアプリです。

そこで、今回からは、見た目にも多少気を配って、かつ、アプリとして成り立つように、それっぽい機能を実装したアプリを作りましょう。

今回のお題は、「郵便番号から住所を検索するアプリ」です。

おっと。前回から比べるとなんだか大分グレードアップした感じですね。はい。
また、Webアプリでよく使用されているフレームワーク&ライブラリである、BootstrapとjQueryも使用して、Phonegapの特徴であるHTML+CSS+Javascriptによる開発のメリットも体感しましょう。
そうです。自由なデザイン編集と、無数の既存ライブラリ/フレームワークを使用できる、という点ですね。メリットというのは。

はい。では、早速コーディングしていきましょう！

まずは、今まで同様、プロジェクトを作ります。もちろん、前回のhello_worldプロジェクトの中身を改修するのでもokです。そして、/www/index.htmlを編集します。

【/www/index.html】

[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" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
   
 
  <style>
   body{
    font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", ‘メイリオ’ , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   }
   .contents{
    width: 90%;
    margin: auto;
   }
   .jumbotron{
    width: 100%;
    border-radius: 8px;
    
    padding-left: 12px;
   }
  </style>

  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/searchAddress.js"></script>
 
  <title>郵便番号検索</title>
 
  </head>
  <body>
   
    <div class="contents">

      <div class="jumbotron">
        <h1>郵便番号検索</h1>
        <p>ハイフンなし7桁の郵便番号を入力し、検索ボタンを押してしてください</p>
        <input type="text" id="zipno" />
        <button class="btn btn-primary" onclick="searchAddressFromZipno()"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>Search</button>
      </div>
    
      <div id="result"></div>

　　</div>

</body>
</html>

[/html]

まずは、17行目で、jQueryをインクルードしています。もちろんローカルに配置してもいいのですが、今回はCDNを利用します。
次に、19,20行目で、Bootstrapをインクルードしています。こちらもCDNです。
23～37行目は、styleを定義しています。本来は、styleに関する所は、.cssとして/www/css の中にまとめて配置するべきでしょうが、今回はそんなに記述も多くないので、.htmlの中に記述してしまいました。はい。
40行目で、jsファイルをインクルードしています。jsファイルはお好きに名付けてください。

49行目～56行目がメイン部分です。
49行目、class=”jumbotron” の箇所は、Bootstrapのjumbotronを使用したいので与えています。まんまですね。
52行目で検索対象となる郵便番号の入力を受け付けるinput要素を配置しています。
53行目で検索処理を実行します。関数名はsearchAddressFromZipnoとしています。お好みで変更してください。

また、せっかくBootstrapを使用しているので、ボタンにclass=”btn btn-primary”を与えてBootstrapのボタンの見た目に変更しています。
併せて、検索アイコンが出ていた方がより見た目に良いので、glyphiconを使用して、検索の虫眼鏡マークを表示しています。

タイトルに大げさに書いてしまいましたが、Bootstrapを使用しているのは、Jumbotronと、ボタンのスタイル変更、ボタンにアイコン表示、位しか使用していませんでしたね…

次に、ボタン押下後の処理を記述するため、/www/js 以下に searchAddress.js というファイルを作成し、ここにボタン押下時のイベントを記述します。

【/www/js/searchAddress.js】

[javascript] // 取得データの描画を行う
function drawData2result(data){
    jQuery("#result").css("opacity", 0.0).css("font-size", "100%"); // 一旦可視性を0に

    if(data.results){ // 取得データに対象のプロパティが存在するか
        var div_st = "<div>";
        var div_ed = "</div>";
        var res = "";

        for(var i = 0; i < data.results.length; i++){ // 一応順番を担保するために
            var d = data.results[i];
            res += div_st;
            res += d.address1 + " " + d.address2 + " " + d.address3;
            res += div_ed;
        }

        jQuery("#result").html(res); // 結果をDOMに反映
    }

    jQuery("#result").animate({
        opacity: 1.0
    }, 1000);
}

// 住所検索を行う
function searchAddressFromZipno(){
    var zip_no = document.getElementById("zipno").value;
    if(zip_no && (zip_no.match(/[0-9]{7}/) != null)) {
        // 規定の入力がされていれば

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

        // 住所検索APIにrequestを発行
         jQuery.ajax({
            type: "GET",
            url: "http://zipcloud.ibsnet.co.jp/api/search",
            dataType: "jsonp",
            jsonpCallback: "myCallback",
            data: params,
            success: function (data) {
                console.log("ajax success!!");
                drawData2result(data); // 画面に結果を表示する
                return;
            },
            error: function (data) {
                alert("ajax error occured!!)");
            }
        });
    }
    else{
        alert("7桁の数字を入力してください");
    }
}

[/javascript]

はい。前回と比べると、jsファイルも大分賑やかになってきましたね。
ざっと解説しますと、まず、index.htmlでボタンのonclickにsearchAddressFromZipnoという関数を指定したので、それを27行目～55行目で定義しています。
28行目でinput要素に入力された値を取得、29行目で取得値の検証(数字7桁であること)を行っています。
33行目で、取得値をAjaxパラメータとして渡す予定のparamsオブジェクトにセットしています。
36行目～50行目で、郵便番号→住所検索を行ってくれる、zipcloudが提供して下さっているAPIをAjaxでキックしています。
Phonegapだと、クロスドメイン制約は無い(はず)なので、jsonpでなくても良いのですが、折角APIの方がjsonp対応だったので、Ajaxリクエストをjsonpにしています。
jsonpですので、40行目でコールバック名をセットします。
あとは通常のAjaxと同様、Success, Error時の挙動を記述します。

42行目で、Ajaxが成功した場合の処理が記述されており、44行目で取得データを画面に反映するための関数、drawData2resultをコールしています。

drawData2result関数は、2行目～24行目で定義されています。
やっている内容は、取得データから必要情報を抜き出し(今回の例でいくとaddress1~3)、画面に反映させる処理を行っています。

と、ここまで記述したら、前回同様、ブラウザにて動作確認を行います。

エラーが無ければ、今度は実機で確認を行います。手順は前回に詳しく書いてありますので、ご確認下さい。

Screenshot_2016-07-20-01-12-49

実機ではこのように表示されます。問題なく表示されましたでしょうか？

今回の記事をまとめると、

  • PhonegapはHTML+CSS+Javascript の開発なので、既存のライブラリ/フレームワークがそのまま流用できる

はい。今回は以上です！

 

次の記事はこちら⇒【Phonegap/Cordova 入門05】データをストレージに保存する

Youtubeでもレブル250/グラディウス400/GN125の情報を発信してます！ (登録してもらえると超喜びます!!)
最新情報をチェックしよう！

Phonegap/Cordovaの最新記事8件