Symfoware

Symfowareについての考察blog

Cordova(コルドバ)チュートリアル13 連絡先APIの利用

Cordova(コルドバ)チュートリアル12 ロケーションAPIの利用
こちらの続きです。

動作は確認できませんでしたが、位置情報を取得する方法を学びました。

次のステップに進みます。
Module 13: Using the Contacts API




Module 13: Using the Contacts API



連絡先を取得するAPIの利用法を学びます。



1. 連絡先取得用のプラグインを追加します。


$ cordova plugin add org.apache.cordova.contacts





2. index.htmlのemployee-tplに連絡先を表示する領域を定義します。


  1. <li class="table-view-cell media">
  2.     <a hre="#" class="push-right add-contact-btn">
  3.         <span class="media-object pull-left"></span>
  4.         <div class="media-body">
  5.             Add to contacts
  6.         </div>
  7.     </a>
  8. </li>





3. EmployeeView.jsに連絡先クリック時のイベントを追加


  1. this.$el.on('click', '.add-contact-btn', this.addToContacts);






4. 同じくEmployeeView.jsに連絡先を取得する処理を記載します。


  1. this.addToContacts = function(event) {
  2.     event.preventDefault();
  3.     console.log('addToContacts');
  4.     if (!navigator.contacts) {
  5.         alert("Contacts API not supported", "Error");
  6.         return;
  7.     }
  8.     var contact = navigator.contacts.create();
  9.     contact.name = {givenName: employee.firstName, familyName: employee.lastName};
  10.     var phoneNumbers = [];
  11.     phoneNumbers[0] = new ContactField('work', employee.officePhone, false);
  12.     phoneNumbers[1] = new ContactField('mobile', employee.cellPhone, true);
  13.     contact.phoneNumbers = phoneNumbers;
  14.     contact.save();
  15.     return false;
  16. };






最終的にindex.htmlはこのようになりました。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  6.     
  7.     <link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
  8.     <link href="assets/css/styles.css" rel="stylesheet">
  9.     <link href="assets/css/pageslider.css" rel="stylesheet">
  10. </head>
  11. <body>
  12. <script id="home-tpl" type="text/template">
  13.     <header class="bar bar-nav">
  14.         <h1 class="title">Directory</h1>
  15.     </header>
  16.     <div class="bar bar-standard bar-header-secondary">
  17.         <input class='search-key' type="search"/>
  18.     </div>
  19.     <div class="content"></div>
  20. </script>
  21. <script id="employee-list-tpl" type="text/template">
  22.     <ul class="table-view">
  23.         {{#each this}}
  24.         <li class="table-view-cell media">
  25.          <a href="#employees/{{ id }}">
  26.              <img class="media-object pull-left" src="assets/pics/{{pic}}">
  27.              <div class="media-body">
  28.                  {{firstName}} {{lastName}}
  29.                  <p>{{title}}</p>
  30.              </div>
  31.          </a>
  32.         </li>
  33.         {{/each}}
  34.     </ul>
  35. </script>
  36. <!-- 社員詳細表示 -->
  37. <script id="employee-tpl" type="text/template">
  38. <header class="bar bar-nav">
  39.      <a class="btn btn-link btn-nav pull-left" href="#">
  40.          <span class="icon icon-left-nav"></span>
  41.      </a>
  42.      <h1 class="title">Employee</h1>
  43. </header>
  44. <div class="content">
  45.      <div class="card">
  46.          <ul class="table-view">
  47.              <li class="table-view-cell media">
  48.                  <img class="media-object pull-left emp-pic" src="assets/pics/{{pic}}">
  49.                  <div class="media-body">
  50.                      {{ firstName }} {{ lastName }}
  51.                      <p>{{ title }}</p>
  52.                  </div>
  53.              </li>
  54.              <li class="table-view-cell media">
  55.                  <a href="tel:{{ officePhone }}" class="push-right">
  56.                      <span class="media-object pull-left icon icon-call"></span>
  57.                      <div class="media-body">
  58.                          Call Office
  59.                          <p>{{ officePhone }}</p>
  60.                      </div>
  61.                  </a>
  62.              </li>
  63.              <li class="table-view-cell media">
  64.                  <a href="tel:{{ cellPhone }}" class="push-right">
  65.                      <span class="media-object pull-left icon icon-call"></span>
  66.                      <div class="media-body">
  67.                          Call Cell
  68.                          <p>{{ cellPhone }}</p>
  69.                      </div>
  70.                  </a>
  71.              </li>
  72.              <li class="table-view-cell media">
  73.                  <a href="sms:{{ cellPhone }}" class="push-right">
  74.                      <span class="media-object pull-left icon icon-sms"></span>
  75.                      <div class="media-body">
  76.                          SMS
  77.                          <p>{{ cellPhone }}</p>
  78.                      </div>
  79.                  </a>
  80.              </li>
  81.              <li class="table-view-cell media">
  82.                  <a href="mailto:{{ email }}" class="push-right">
  83.                      <span class="media-object pull-left icon icon-mail"></span>
  84.                      <div class="media-body">
  85.                          Email
  86.                          <p>{{ email }}</p>
  87.                      </div>
  88.                  </a>
  89.              </li>
  90.              <li class="table-view-cell media">
  91.                  <a hre="#" class="push-right add-location-btn">
  92.                      <span class="media-object pull-left"></span>
  93.                      <div class="media-body">
  94.                          Add location
  95.                      </div>
  96.                  </a>
  97.              </li>
  98. <!-- 2. 連絡先を表示する領域追加 -->
  99.              <li class="table-view-cell media">
  100.                  <a hre="#" class="push-right add-contact-btn">
  101.                      <span class="media-object pull-left"></span>
  102.                      <div class="media-body">
  103.                          Add to contacts
  104.                      </div>
  105.                  </a>
  106.              </li>
  107.          </ul>
  108.      </div>
  109. </div>
  110. </script>
  111. <script src="cordova.js"></script>
  112. <script src="lib/fastclick.js"></script>
  113. <script src="lib/jquery.js"></script>
  114. <script src="lib/router.js"></script>
  115. <script src="lib/pageslider.js"></script>
  116. <script src="js/services/memory/EmployeeService.js"></script>
  117. <script src="lib/handlebars.js"></script>
  118. <script src="js/EmployeeListView.js"></script>
  119. <script src="js/HomeView.js"></script>
  120. <script src="js/EmployeeView.js"></script>
  121. <script src="js/app.js"></script>
  122. </body>
  123. </html>





EmployeeView.jsは以下のとおり。


  1. var EmployeeView = function(employee) {
  2.     
  3.     
  4.     // 4. 連絡先取得本体
  5.     this.addToContacts = function(event) {
  6.         event.preventDefault();
  7.         console.log('addToContacts');
  8.         if (!navigator.contacts) {
  9.             alert("Contacts API not supported", "Error");
  10.             return;
  11.         }
  12.         var contact = navigator.contacts.create();
  13.         contact.name = {givenName: employee.firstName, familyName: employee.lastName};
  14.         var phoneNumbers = [];
  15.         phoneNumbers[0] = new ContactField('work', employee.officePhone, false);
  16.         phoneNumbers[1] = new ContactField('mobile', employee.cellPhone, true);
  17.         contact.phoneNumbers = phoneNumbers;
  18.         contact.save();
  19.         return false;
  20.     };
  21.     
  22.     this.addLocation = function(event) {
  23.      event.preventDefault();
  24.      navigator.geolocation.getCurrentPosition(
  25.          function(position) {
  26.              alert(position.coords.latitude + ',' + position.coords.longitude);
  27.          },
  28.          function() {
  29.              alert('Error getting location');
  30.          });
  31.      return false;
  32.     };
  33. this.initialize = function() {
  34.      this.$el = $('<div/>');
  35.      this.$el.on('click', '.add-location-btn', this.addLocation);
  36.     
  37.      // 3. 連絡先取得
  38.      this.$el.on('click', '.add-contact-btn', this.addToContacts);
  39. };
  40. this.render = function() {
  41.      this.$el.html(this.template(employee));
  42.      return this;
  43. };
  44. this.initialize();
  45. }




これも位置情報同様エミュレーターでは動作せず。
多分あってると思います。

566_01.png
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2015/02/22(日) 19:09:06|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Cordova(コルドバ)チュートリアル14 カメラAPIの利用 | ホーム | Cordova(コルドバ)チュートリアル12 ロケーションAPIの利用>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1651-2c584ef2
この記事にトラックバックする(FC2ブログユーザー)