2011年11月7日

Monacaで作ろう　簡単スマフォアプリ！

asial

Pocket

こんにちは、志田です。
今回は、弊社で開発しているスマートフォンプラットフォーム「Monaca」を使って、アドレス帳検索アプリを作ってみます。

1. Monaca開発準備

まずはMonacaで開発できる環境を整えましょう。
弊社松田の記事を参考に、Monacaアカウントを取得、プロジェクトを作成しましょう。
Monaca + enchant.js でお手軽スマフォゲームアプリ開発

そして、実機にMonacaデバッガをインストールしてください。
http://docs.monaca.mobi/manual/debugger/

2. 表示部分　index.htmlの編集

今回のアプリはとても簡単な作りですが、このような作りのアプリにしたいと思います。
(1) 入力フォームに検索したい文字列を入力する
(2) 携帯のアドレス帳を検索する
(3) 検索フォームの下に、検索結果を表示

まず、表示部分であるindex.htmlを編集しましょう。


<!DOCTYPE HTML>
<html>
  <head>
    
    <meta name="viewport" content="initial-scale = 1, user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>PhoneGap</title>
    <link rel="stylesheet" href="css/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/jquery.mobile-1.0b2.css" type="text/css" media="screen" title="no title" charset="utf-8">
        
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0b2.js"></script>
        
    {% if Device.Platform == Android %}<script type="text/javascript" charset="utf-8" src="js/phonegap.0.9.5.1_android.js"></script>{% endif %}
    {% if Device.Platform == IOS %}<script type="text/javascript" charset="utf-8" src="js/phonegap.0.9.5.1_ios.js"></script>{% endif %}
    <script type="text/javascript" charset="utf-8" src="js/main.js"></script>  
                
  </head>
    
  <body onload="onLoad();" data-role="page" data-theme="c">
    <div data-role="header" data-theme="b"><h1>アドレス帳検索</h1></div>
        
    <div data-role="content" data-theme="b">
      <input type="text" id="search">
      <input type="button" value="Search!" onClick="search_user()">
            
      <div id="info">
      </div>        
    </div>
    <div data-role="footer" data-theme="b">
      <div>Powered by Monaca</div>
    </div>
  </body>
</html>

上記のようなコードで、このようなアプリの見た目が完成しました。

それでは、これから機能部分を実装していきます。

3. 機能部分　main.jsの実装


// PhoneGapの読み込みを待機
//
function onLoad() {
  console.log("logging start");
  document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap準備完了
//
function onDeviceReady() {
  $("#info").append("<p>アドレス帳からユーザを検索します</p>");
}
//ボタンを押すとアドレス帳を検索
//
function search_user() {
  var options = new ContactFindOptions();
  options.filter = document.getElementById('search').value;
  var fields = ["displayName", "name", "phoneNumbers"];
  navigator.service.contacts.find(fields, onSuccess, onError, options);
}
//エラー
//
function onError() {
  alert("エラー発生");
}
//検索結果
//
function onSuccess(contacts) {
  $("#info").empty();
  $("#info").append('<p>「<span style="font-weight:bold; color: orangered;">' + $("#search").val() + '</span>」の検索結果</p>');
  if (contacts.length == 0) {
    $("#info").append("<p>アドレス帳に登録されていません。</p>");
  }
    
  for (i=0; i<contacts.length; i++){
    var name = '';
    if (contacts[i].name.formatted != null) {
      name = contacts[i].name.formatted;
    } else {
      if (contacts[i].name.familyName != null)
        name = name + contacts[i].name.familyName;
      if (contacts[i].name.givenName != null)
        name = name + contacts[i].name.givenName;
      }
      var string = '';
      string = "<p>" + name + "</p>";
      for (j=0; j<contacts[i].phoneNumbers.length; j++) {
        string = string + "<p> &nbsp; &nbsp;" + contacts[i].phoneNumbers[j].value + "</p>";
      }
        
      if (contacts.length -1 != i)
        string = string + "<hr />";
      $("#info").append(string);
  }
}

まず、index.htmlのbody onLoadで指定されているとおり、main.jsのonLoad()が呼ばれます。
onLoad()では、PhoneGapの読み込みを待機し、DeviceReady状態になるとonDeviceReady()が呼ばれています。

onLoad()内で、console.log()という処理を行えば、デバッグログに文字列を残すことができます。
onDeviceReady()では、処理の初期化などを行うと良いですね。

index.htmlを見ると、検索ボタンを押すとsearch_user()を呼ぶようになっていることがわかります。
main.jsのsearch_user()で何をしているかというと・・・


function search_user() {
  // 検索オプションを作成します。
  var options = new ContactFindOptions();
  // 検索オプションのフィルターに、入力文字列を使います。
  // ここで指定された値でアドレス帳を検索します。
  options.filter = document.getElementById('search').value;
  // 検索結果に返してほしいフィールドを指定します。
  // この例だと、連絡先名称、個人名に関するオブジェクト、電話番号を指定しています。
  var fields = ["displayName", "name", "phoneNumbers"];
  // アドレス帳から指定したフィールドを、指定したオプションで検索します。
  // 成功時はonSuccess、失敗時はonErrorに遷移します。
  navigator.service.contacts.find(fields, onSuccess, onError, options);
}

このように、検索オプションを指定して検索を行っています。
さて、検索が成功した後はどうしているかというと・・・


// 成功時は、onSuccessにcontactsが引数として渡されます。
function onSuccess(contacts) {
  // まず、div#infoの中身を空にします
  $("#info").empty();
  $("#info").append('<p>「<span style="font-weight:bold; color: orangered;">' + $("#search").val() + '</span>」の検索結果</p>');
  // 検索結果の件数は、contacts.lengthで取得できます。
  if (contacts.length == 0) {
    $("#info").append("<p>アドレス帳に登録されていません。</p>");
  }
    
  // 取得できたcontactsのぶんだけ、div#infoに表示していきます。
  for (i=0; i<contacts.length; i++){
    var name = '';
    // 連絡先のフルネーム：formatted
    if (contacts[i].name.formatted != null) {
      name = contacts[i].name.formatted;
    } else {
      if (contacts[i].name.familyName != null)
        name = name + contacts[i].name.familyName;
      if (contacts[i].name.givenName != null)
        name = name + contacts[i].name.givenName;
    }
    var string = '';
    string = "<p>" + name + "</p>";
    // 登録されている電話番号を全部表示
    for (j=0; j<contacts[i].phoneNumbers.length; j++) {
      string = string + "<p> &nbsp; &nbsp;" + contacts[i].phoneNumbers[j].value + "</p>";
    }
        
    // 区切りのhr
    if (contacts.length -1 != i)
      string = string + "<hr />";
    // div#infoに追加
    $("#info").append(string);
  }
}