SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Apache Cordovaで本格スマホアプリに挑戦しよう

連絡先データにアクセスするプラグインを使う

Apache Cordovaで本格スマホアプリに挑戦しよう 第11回


データの更新(追加・変更)

 データを追加する場合のサンプルコードはリスト6のようになります。

リスト6 新たに連絡先データを登録する(www/js/controllers/ContactController.jsの抜粋)
// (1)Contactオブジェクトを作成
var item = navigator.contacts.create({
    "displayName": $scope.model.displayName
});

// (2)氏名データを作成
item.name = new ContactName(
    $scope.model.familyName + " " + $scope.model.givenName,
    $scope.model.familyName,
    $scope.model.givenName);

// (3)メールアドレスを指定
var emails = [];
emails[0] = new ContactField('other', $scope.model.email);
item.emails = emails;

// (4)電話番号を指定
var phoneNumbers = [];
phoneNumbers[0] = new ContactField('mobile', $scope.model.phone);
item.phoneNumbers = phoneNumbers;

// (5)連絡先データを端末に保存
item.save(function () {
        // : (登録成功時の処理)
    },
    function (err) {
        // : (失敗時の処理)
    });

 新規にデータを作成する場合、まずはContactクラスのインスタンスを作成する必要があり、(1)のようにcontacts.createメソッドを使います。このメソッドはネイティブコールをしない同期メソッドですので、すぐにオブジェクトが作成されます。そして、(2)では氏名データを作成するためにContactNameインスタンスを作成し、同様に(3)、(4)ではメールアドレス、電話番号のContactFieldインスタンスを作成し、それぞれを(1)で作成したインスタンスのプロパティに指定します。追加する場合には、(5)のようにsaveメソッドを使用します。また、更新の場合にも同じくsaveメソッドですが、その場合にはcontacts.findメソッドや、contacts.pickContactメソッドで取得したContactオブジェクトに対してsaveメソッドを実行すると更新されます。また、それらのオブジェクトのremoveメソッドを実行すれば削除することが可能です。

OSが提供するUIから選択する

 OSが提供する連絡先一覧のUIから選択した連絡先データを取得するコードがリスト7のようになります。

リスト7 OSが提供するUIから連絡先を選択して取得する(www/js/controllers/ContactController.jsの抜粋)
// (1)UIの起動
navigator.contacts.pickContact(function(item){
        // (2)選択したデータ
        $scope.$apply(function(){
            $scope.model = {
                'displayName' : item.displayName,
                'familyName'  : item.name.familyName,
                'givenName'   : item.name.givenName
            };
            // (省略)
        });
    },
    function(err){
        // 省略
    });

 (1)のようにpickContactメソッドを実行するとOSの連絡先一覧UIが表示され、そのUI上から連絡先をクリックすると(2)のコールバック関数が実行されます。連絡先データを使ってほかのフォームへの入力支援などに使う場合などにはこのpickContactメソッドの方が使いやすいと思います。

最後に

 連絡先データはこのようにアクセスでき、入力を支援するような使い方が簡単にできます。例えばECアプリなら配送先データなどを入力する手間などを省くことができます。しかし、連絡先データはスマホ内にあるプライバシーデータですので利用者が意図していない状態でアクセスすることは避ける必要があります。

 また、AndroidやiOSなどでも多少形式が異なります。そして、必ずしも標準アプリから登録されるとも限らないためデータがどのような状態になっているのかは保証されません。従って、実際に利用する場合には、データの有無などを確認する必要があります。

 次回はカレンダーにアクセスするプラグインを紹介します。

参考資料

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
Apache Cordovaで本格スマホアプリに挑戦しよう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクト について> 有限会社 WINGSプロジェクト が運営する、テクニカル執筆コミュニティ(代表 ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/9838 2017/01/24 13:58

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー