back
Contactによる連絡先情報へのアクセス (5/5)
■より詳しい連絡先データの新規作成
では、連絡先であるContactオブジェクトの構造がわかったところで、先ほど作成した連絡先作成のプログラムを修正し、もう少し詳しい情報を作成できるようにしてみましょう。
今回は、表示名、ファーストネーム、メールアドレス、電話番号といった項目の入力フィールドを用意しました。これで連絡先の基本的な値をまとめて設定することができるようになります。
ここでは、まず入力されたフィールドの値をひと通り変数などに取り出した後、navigator.contacts.createメソッドで、ひとまずdisplayNameだけを持ったContactオブジェクトを作成しています（別に全部の値をまとめてnewしてもいいのですが、今回はわかりやすくするため個別のオブジェクト作成を１つずつ行うようにしてあります）。ContactNameの作成は、
基本的なオブジェクトの生成がわかれば、Contactを作成するのはそれほど難しくはありません。自分のアプリ内から連絡先の情報が使えると、ソーシャルなアプリなどにいろいろ利用できそうですね！
今回は、表示名、ファーストネーム、メールアドレス、電話番号といった項目の入力フィールドを用意しました。これで連絡先の基本的な値をまとめて設定することができるようになります。
ここでは、まず入力されたフィールドの値をひと通り変数などに取り出した後、navigator.contacts.createメソッドで、ひとまずdisplayNameだけを持ったContactオブジェクトを作成しています（別に全部の値をまとめてnewしてもいいのですが、今回はわかりやすくするため個別のオブジェクト作成を１つずつ行うようにしてあります）。ContactNameの作成は、
var names = new ContactName();このように、new ContactNameでオブジェクトを生成した後、それぞれのプロパティに値を設定しています。またContactFieldの作成は、
names.givinName = name;
names.familyName = "";
contact.name = names;
contact.emails = [new ContactField('home', mail, false)];
contact.phoneNumbers = [new ContactField('home', tel, false)];このように、type、value、prefの各要素の値をそのまま引数に指定してnew ContactFieldしています。emailsやphoneNumbersは、ContactFieldの配列ですから、作成したオブジェクト１つだけを持つ配列にして設定しておきます。基本的なオブジェクトの生成がわかれば、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 dname = document.getElementById('dname').value;
var name = document.getElementById('name').value;
var mail = document.getElementById('mail').value;
var tel = document.getElementById('tel').value;
var opt = {'displayName':dname};
var contact = navigator.contacts.create(opt);
var names = new ContactName();
names.givinName = name;
names.familyName = "";
contact.name = names;
contact.emails = [new ContactField('home', mail, false)];
contact.phoneNumbers = [new ContactField('home', tel, false)];
contact.save();
alert('「' + dname + '」のアカウントを作成しました。');
}
</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>
<label for="dname">DISPLAY NAME:</label>
<input type="text" id="dname">
<label for="name">NAME:</label>
<input type="text" id="name">
<label for="mail">MAIL:</label>
<input type="text" id="mail">
<label for="tel">TEL:</label>
<input type="text" id="tel">
<button onclick="doAction();">Create</button>
</div>
</div>
</body>
</html>
| << 前へ |