使用したもの(環境)
- cordova
- visualStudioCode
- windows10
- Android
チュートリアルを訳しながらやってみる
チュートリアルのページは下記。
Module 13: Using the Contacts API
前回のチュートリアル。
環境構築については別途まとめてあるので下記参照。
cordova&VSCodeで環境を構築するまでの右往左往メモ。
Module 13: Using the Contacts API
In this section, you use the Cordova Contacts API to provide the user with the ability to add an employee to the device's contact list.
このセクションでは、デバイスのコンタクトリストに従業員を加える機能を提供する、CordovaのContacts APIを使用していましょう。
The code below only works when running the application on your device as a Cordova app.
このコードはCordovaアプリケ^ションとしてデバイス上で動作しているときのみ動きます。
In other words, you can't test it in a browser on your computer.
言い換えると、PCのブラウザ上ではテストすることができません。
1. contacts プラグインを追加します。
cordova plugin add cordova-plugin-contacts
2. index.htmlでemployee templateに下記の項目を追加します。
<li class="table-view-cell media">
<a hre="#" class="push-right add-contact-btn">
<span class="media-object pull-left"></span>
<div class="media-body">
Add to contacts
</div>
</a>
</li>
3. EmployeeViewのinitializeメソッドに、下記コードを追加します。
this.$el.on('click', '.add-contact-btn', this.addToContacts);
4. EmployeeViewで、addToContacts という event handlerを定義します。
this.addToContacts = function(event) {
event.preventDefault();
console.log('addToContacts');
if (!navigator.contacts) {
alert("Contacts API not supported", "Error");
return;
}
var contact = navigator.contacts.create();
contact.name = {givenName: employee.firstName, familyName: employee.lastName};
var phoneNumbers = [];
phoneNumbers[0] = new ContactField('work', employee.officePhone, false);
phoneNumbers[1] = new ContactField('mobile', employee.cellPhone, true);
contact.phoneNumbers = phoneNumbers;
contact.save();
return false;
};
テスト前にちょっと解説。
ここのemployeeは、コンストラクタ関数EmployeeViewの引数のemployee。
app.jsでEmployeeViewがnewされるのは、
window.location.hash.substr(1)がemployees/:id(:idは従業員IDで数字)になるとき。
EmployeeViewがnewされるときに引数に渡すemployeeはservice.findByIdの結果なので、
結果的には従業員の一人分のデータになる。(変数の名前からわかるけど…)
即時関数を使われると普段Javaとか扱っている人は変数宣言が迷子になりがちなので注意。(私とか)
5. テストしてみましょう。(ブラウザ以外でテストしましょう。)
Add to Contactを押しているところが見にくいですが、最上部の通知バーに連絡先の通知が来ているので押したことがわかります。
初回ではないので確認が出ませんが、Add to Contactを押すと連絡先へのアクセス許可を求めるダイアログが出ます。(Android側で)
ポチッと押すとそれだけで連絡先に追加されます。(アラートも何も出ないので押した感が薄いですが…)
私物スマホの連絡先を晒すのもちょっとアレなので、連絡先に追加されたかのエビデンスは貼らない感じで…。