スマートフォンTweetこんにちは、志田です。今回は、弊社で開発しているスマートフォンプラットフォーム「Monaca」を使って、アドレス帳検索アプリを作ってみます。Monaca開発準備まずはMonacaで開発できる環境を整えましょう。弊社松田の記事を参考に、Monacaアカウントを取得、プロジェクトを作成しましょう。お手軽スマフォゲームアプリ開発そして、実機にMonacaデバッガをインストールしてください。今回のアプリはとても簡単な作りですが、このような作りのアプリにしたいと思います。検索フォームの下に、検索結果を表示まず、表示部分であるindex.htmlを編集しましょう。</body></html>上記のようなコードで、このようなアプリの見た目が完成しました。それでは、これから機能部分を実装していきます。$("#info").append("<p>アドレス帳に登録されていません。onLoadで指定されているとおり、main.jsのonLoad()が呼ばれます。onLoad()では、PhoneGapの読み込みを待機し、DeviceReady状態になるとonDeviceReady()が呼ばれています。onLoad()内で、console.log()という処理を行えば、デバッグログに文字列を残すことができます。onDeviceReady()では、処理の初期化などを行うと良いですね。index.htmlを見ると、検索ボタンを押すとsearch_user()を呼ぶようになっていることがわかります。検索オプションを作成します。検索オプションのフィルターに、入力文字列を使います。ここで指定された値でアドレス帳を検索します。検索結果に返してほしいフィールドを指定します。関するオブジェクト、電話番号を指定しています。アドレス帳から指定したフィールドを、指定したオプションで検索します。成功時はonSuccess、失敗時はonErrorに遷移します。options);}このように、検索オプションを指定して検索を行っています。成功時は、onSuccessにcontactsが引数として渡されます。検索結果の件数は、contacts.lengthで取得できます。$("#info").append("<p>アドレス帳に登録されていません。取得できたcontactsのぶんだけ、div#infoに表示していきます。}}コードを見ても分かるとおり、簡単なJavaScriptやjQueryで、contactsの検索ができます。アプリとしてインストールデバッグビルドを行えば、アプリとしてインストールすることができます。今回は、実機がAndroidなので、右上のメニューからAndroidをクリックし、「ビルド」を選択。下図のような画面が出ますので、「デバッグビルド」をクリックします。待つと、デバッグビルドが終了します。すると、Monacaデバッガからネットワークインストールすることができます。インストールが完了すると、端末にインストールされたネイティブアプリと同様に、起動・利用できるようになります。スプラッシュ画面が表示された後・・・アプリ起動!はじめの画面と見比べるとわかりますが、デバッガのメニューが表示されておらず、ネイティブアプリとして動いていることがわかります。APIを見てみようMonacaでアプリを開発するにあたり、いろいろなネイティブの機能を利用することができます。加速度センサー、カメラ、位置情報、ネットワーク、ストレージ...全て、簡単なJavaScript等で記述できます。機能を利用するためのAPIドキュメントはこちら。http://phonegap-fan.com/docs/Monacaでアプリ開発がもっと身近なものになると思います。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。