こんにちは、システム本部の長野です。
主にモニプラ for Facebook(モニプラFB)の開発を担当しています。
少し前にアライド全体のブログでエビチカについてを書かせてもらいました。ぜひ御覧ください。
先日PhoneGapを触ってみたので、
備忘録がてらPhoneGapで電話帳にアクセスする方法を紹介します。
開発環境は MacOSX10.7.3, Xcode4.3.2, iOS5.1.1, PhoneGap1.6.0です。
いきなりですが、ソース全文です。解説は後述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <script type="text/javascript"charset="utf-8"src="cordova-1.6.0.js"></script> <script type="text/javascript" > var addressList = []; function onBodyLoad() { document.addEventListener("deviceready", onDeviceReady, false); //① } function onDeviceReady() { var options = new ContactFindOptions(); //② var fields = ["name", "emails"]; options.filter=""; options.multiple=true; navigator.contacts.find(fields, onSuccess, onError, options); } function onSuccess(contacts) { //③ for (var i=0; i<contacts.length; i++) { var data = {}; if(contacts[i].name){ if(contacts[i].name.givenName){ data.firstName = contacts[i].name.givenName; } if(contacts[i].name.familyName){ data.lastName = contacts[i].name.familyName; } } if(contacts[i].emails && contacts[i].emails.length > 0){ data.emailAddress = contacts[i].emails[0]["value"]; } if(data.emailAddress){ addressList.push(data); } } } function onError(contactError) { alert('onError!'); } </script> </head> <body onload="onBodyLoad()"> </body> </html> |
以下解説です。
|
1 |
document.addEventListener("deviceready", onDeviceReady, false); //① |
これはphoneGapの読み込みが完了したときに実行されるもので、
PhoneGapアプリを開発するときにはとりあえず入れておけば問題ないです。
http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html#deviceready
|
1 2 3 4 5 |
var options = new ContactFindOptions(); //② var fields = ["name", "emails"]; options.filter=""; options.multiple=true; navigator.contacts.find(fields, onSuccess, onError, options); |
電話帳からデータを取得するにはcontacts.findという関数を使います。
その際に取得したいフィールドを指定する必要があり、
上記ではname(名前)とemails(メールアドレス)を指定しています。
取得できるフィールドの一覧はこちらに詳しく書いています。
デバイスによって取得できないフィールドもあるので注意が必要です。
また、options.filterに値を入れるとフィルタをかける事ができます。
フィルタは指定したフィールドから部分一致で検索されます。
電話帳から複数のレコードを取得したいときは
|
1 |
options.multiple=true; |
を指定する必要があります。これを指定しないと1レコードしかとれません。
(これはデフォルトでfalseなのですが、trueでもいいと思います。)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function onSuccess(contacts) { //③ for (var i=0; i<contacts.length; i++) { var data = {}; if(contacts[i].name){ if(contacts[i].name.givenName){ data.firstName = contacts[i].name.givenName; } if(contacts[i].name.familyName){ data.lastName = contacts[i].name.familyName; } } if(contacts[i].emails && contacts[i].emails.length > 0){ data.emailAddress = contacts[i].emails[0]["value"]; } if(data.emailAddress){ addressList.push(data); } } } |
取得に成功するとレコードがセットされた配列が返ってきます。
今回は名前とメールアドレスだけを指定したので、nameプロパティとemailsプロパティが取得できます。
このプロパティ周りもデバイス依存が激しい部分なので、このあたりのマニュアルをよく読んでおくといいようです。
PhoneGapは普段書き慣れているJavaScriptでネイティブな部分に簡単にアクセスできるのでかなりとっつきやすかったです。また他にカメラへのアクセスなどもできるようなのでどこかで紹介したいと思います。
そしてアライドではスマフォアプリの開発に自信がある方を募集しています。
興味のある方はこちらからお願いします！
サービス開発や社内インフラ等を担当しています。 このブログではJavaScript周りのネタを中心に書いていきたいです。
