Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
バックエンド(プログラミング)
タグ :
Tech
Monaca
Android
iOS
スマートフォン
こんにちは、志田です。
今回は、弊社で開発しているスマートフォンプラットフォーム「Monaca」を使って、アドレス帳検索アプリを作ってみます。


1. Monaca開発準備



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

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

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



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

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

  1. <!DOCTYPE HTML>
  2. <html>
  3.   <head>
  4.     
  5.     <meta name="viewport" content="initial-scale = 1, user-scalable=no" />
  6.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  7.     <title>PhoneGap</title>
  8.     <link rel="stylesheet" href="css/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
  9.     <link rel="stylesheet" href="css/jquery.mobile-1.0b2.css" type="text/css" media="screen" title="no title" charset="utf-8">
  10.         
  11.     <script type="text/javascript" charset="utf-8" src="js/jquery-1.6.2.min.js"></script>
  12.     <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0b2.js"></script>
  13.         
  14.     {% if Device.Platform == Android %}<script type="text/javascript" charset="utf-8" src="js/phonegap.0.9.5.1_android.js"></script>{% endif %}
  15.     {% if Device.Platform == IOS %}<script type="text/javascript" charset="utf-8" src="js/phonegap.0.9.5.1_ios.js"></script>{% endif %}
  16.     <script type="text/javascript" charset="utf-8" src="js/main.js"></script>  
  17.                 
  18.   </head>
  19.     
  20.   <body onload="onLoad();" data-role="page" data-theme="c">
  21.     <div data-role="header" data-theme="b"><h1>アドレス帳検索</h1></div>
  22.         
  23.     <div data-role="content" data-theme="b">
  24.       <input type="text" id="search">
  25.       <input type="button" value="Search!" onClick="search_user()">
  26.             
  27.       <div id="info">
  28.       </div>        
  29.     </div>
  30.     <div data-role="footer" data-theme="b">
  31.       <div>Powered by Monaca</div>
  32.     </div>
  33.   </body>
  34. </html>

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


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

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



  1. // PhoneGapの読み込みを待機
  2. //
  3. function onLoad() {
  4.   console.log("logging start");
  5.   document.addEventListener("deviceready", onDeviceReady, false);
  6. }
  7. // PhoneGap準備完了
  8. //
  9. function onDeviceReady() {
  10.   $("#info").append("<p>アドレス帳からユーザを検索します</p>");
  11. }
  12. //ボタンを押すとアドレス帳を検索
  13. //
  14. function search_user() {
  15.   var options = new ContactFindOptions();
  16.   options.filter = document.getElementById('search').value;
  17.   var fields = ["displayName", "name", "phoneNumbers"];
  18.   navigator.service.contacts.find(fields, onSuccess, onError, options);
  19. }
  20. //エラー
  21. //
  22. function onError() {
  23.   alert("エラー発生");
  24. }
  25. //検索結果
  26. //
  27. function onSuccess(contacts) {
  28.   $("#info").empty();
  29.   $("#info").append('<p>「<span style="font-weight:bold; color: orangered;">' + $("#search").val() + '</span>」の検索結果</p>');
  30.   if (contacts.length == 0) {
  31.     $("#info").append("<p>アドレス帳に登録されていません。</p>");
  32.   }
  33.     
  34.   for (i=0; i i++){
  35.     var name = '';
  36.     if (contacts[i].name.formatted != null) {
  37.       name = contacts[i].name.formatted;
  38.     } else {
  39.       if (contacts[i].name.familyName != null)
  40.         name = name + contacts[i].name.familyName;
  41.       if (contacts[i].name.givenName != null)
  42.         name = name + contacts[i].name.givenName;
  43.       }
  44.       var string = '';
  45.       string = "<p>" + name + "</p>";
  46.       for (j=0; j j++) {
  47.         string = string + "<p>  " + contacts[i].phoneNumbers[j].value + "</p>";
  48.       }
  49.         
  50.       if (contacts.length -1 != i)
  51.         string = string + "<hr />";
  52.       $("#info").append(string);
  53.   }
  54. }

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

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

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

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

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

  1. // 成功時は、onSuccessにcontactsが引数として渡されます。
  2. function onSuccess(contacts) {
  3.   // まず、div#infoの中身を空にします
  4.   $("#info").empty();
  5.   $("#info").append('<p>「<span style="font-weight:bold; color: orangered;">' + $("#search").val() + '</span>」の検索結果</p>');
  6.   // 検索結果の件数は、contacts.lengthで取得できます。
  7.   if (contacts.length == 0) {
  8.     $("#info").append("<p>アドレス帳に登録されていません。</p>");
  9.   }
  10.     
  11.   // 取得できたcontactsのぶんだけ、div#infoに表示していきます。
  12.   for (i=0; i i++){
  13.     var name = '';
  14.     // 連絡先のフルネーム:formatted
  15.     if (contacts[i].name.formatted != null) {
  16.       name = contacts[i].name.formatted;
  17.     } else {
  18.       if (contacts[i].name.familyName != null)
  19.         name = name + contacts[i].name.familyName;
  20.       if (contacts[i].name.givenName != null)
  21.         name = name + contacts[i].name.givenName;
  22.     }
  23.     var string = '';
  24.     string = "<p>" + name + "</p>";
  25.     // 登録されている電話番号を全部表示
  26.     for (j=0; j j++) {
  27.       string = string + "<p>  " + contacts[i].phoneNumbers[j].value + "</p>";
  28.     }
  29.         
  30.     // 区切りのhr
  31.     if (contacts.length -1 != i)
  32.       string = string + "<hr />";
  33.     // div#infoに追加
  34.     $("#info").append(string);
  35.   }
  36. }

コードを見ても分かるとおり、簡単なJavaScriptやjQueryで、contactsの検索ができます。



4. アプリとしてインストール



デバッグビルドを行えば、アプリとしてインストールすることができます。
今回は、実機がAndroidなので、右上のメニューからAndroidをクリックし、「ビルド」を選択。
下図のような画面が出ますので、「デバッグビルド」をクリックします。



少し待つと、デバッグビルドが終了します。
そうすると、Monacaデバッガからネットワークインストールすることができます。



インストールが完了すると、端末にインストールされたネイティブアプリと同様に、起動・利用できるようになります。

スプラッシュ画面が表示された後・・・


アプリ起動!


はじめの画面と見比べるとわかりますが、デバッガのメニューが表示されておらず、ネイティブアプリとして動いていることがわかります。

まずはAPIを見てみよう



Monacaでアプリを開発するにあたり、いろいろなネイティブの機能を利用することができます。
加速度センサー、カメラ、位置情報、ネットワーク、ストレージ…
全て、簡単なJavaScript等で記述できます。

機能を利用するためのAPIドキュメントはこちら。
http://phonegap-fan.com/docs/

Monacaでアプリ開発がもっと身近なものになると思います。
みなさんも、楽しいアプリを作ってみてください♪