Contactによる連絡先情報へのアクセス (2/5)

■連絡先を取得し内容を表示する

では、実際にfindを使って連絡先の検索を行なってみましょう。下のリスト欄に簡単なサンプルを用意しました。index.htmlをこのように書き換えて実行してみましょう。

このアプリでは、検索テキストを記入するフィールドと「Find」ボタンが用意されています。フィールドに検索したい名前を入力し、ボタンを押すと、そのテキストを表示名に含む項目を探し、その表示名を表示します。

ここでは、まずContactFindOptionsオブジェクトを作成し、そのfilterを設定します。

var opt = new ContactFindOptions();
opt.filter = fstr;

続いて、連絡先から取り出すフィールド名を配列で用意します。今回は「displayName」を取り出しています。

var flds = ["displayName"];

フィールド名の詳細については、Contactオブジェクトについてもう少し詳しく説明するときに改めて触れますので、とりあえず今は「これで表示名が得られる」ということだけわかっていれば十分でしょう。

var contact = navigator.contacts.find(flds,onSuccess,onError,opt);

最後に、用意した値を引数にまとめてfindメソッドを呼び出します。これで、データの取得に成功すればonSuccessが呼び出されます。このonSuccess関数では、引数に渡されるcontacts変数から必要な情報を取り出し、結果を表示させています。

alert("find: " + contacts.length + " contacts.");

まず、配列のlengthを取得し、検索されたデータの件数を表示しています。これはわかりますね。続いて繰り返しを使い、検索されたデータの表示名をテキストにまとめていきます。

var res = "<ol>";
for (var i=0; i < contacts.length; i++) {
    res += '<li>' + contacts[i].displayName + '</li>';
}

繰り返しで配列からcontacts[i]というようにオブジェクトを取得し、そのdisplayNameプロパティの値を取り出してテキストにまとめています。このように、取り出したContactオブジェクトのプロパティを取得して、得られた連絡先の情報を利用する、これが連絡先検索の基本的な処理になるでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
	src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="phonegap-1.4.1.js"></script>
<script type="text/javascript">

function doAction(){
	var fstr = document.getElementById('input').value;
	var opt = new ContactFindOptions();
	opt.filter = fstr;
	var flds = ["displayName"];
	var contact = navigator.contacts.find(flds,onSuccess,onError,opt);
}

function onSuccess(contacts) {
	alert("find: " + contacts.length + " contacts.");
	var res = "<ol>";
	for (var i=0; i < contacts.length; i++) {
		res += '<li>' + contacts[i].displayName + '</li>';
	}
	document.getElementById('msg').innerHTML = res;
}

function onError() {
	alert('Error');
}
</script>

</head>
<body onload="onLoad();">
	<!-- home page -->
	<div id="home" data-role="page">
		<div data-role="header">
			<h1>Sample</h1>
		</div>
		<div data-role="content">
			<h2>Sample Page</h2>
			<div id="msg"></div>
			<input type="text" id="input">
			<button onclick="doAction();">Find</button>
		</div>
	</div>
</body>
</html>

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail