Monacaで作ろう 簡単スマフォアプリ！
こんにちは、志田です。
今回は、弊社で開発しているスマートフォンプ ラットフォーム「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> " + 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> " + contacts[i].phoneNumbers[j].value + "</p>";
}
// 区切りのhr
if (contacts.length -1 != i)
string = string + "<hr />";
// div#infoに追加
$("#info").append(string);
}
}
コードを見ても分かるとおり、簡単なJavaScriptやjQueryで、contactsの検索ができます。
4. アプリとしてインストール
デバッグビルドを行えば、アプリとしてインストールすることができます。
今回は、実機がAndroidなので、右上のメニューからAndroidをクリックし、「ビルド」を選択。
下図のような画面が出ますので、「デバッグビルド」をクリックします。
少し待つと、デバッグビルドが終了します。
そうすると、Monacaデバッガからネットワークインストールすることができます。
インストールが完了すると、端末にインストールされたネイティブアプリと同様に、起動・利用できるようになります。
スプラッシュ画面が表示された後・・・
アプリ起動！
はじめの画面と見比べるとわかりますが、デバッガのメニューが表示されておらず、ネイティブアプリとして動いていることがわかります。
まずはAPIを見てみよう
Monacaでアプリを開発するにあたり、いろいろなネイティブの機能を利用することができます。
加速度センサー、カメラ、位置情報、ネットワーク、ストレージ…
全て、簡単なJavaScript等で記述できます。
機能を利用するためのAPIドキュメントはこちら。
http://phonegap-fan.com/docs/
Monacaでアプリ開発がもっと身近なものになると思います。
みなさんも、楽しいアプリを作ってみてください♪
