Titanium Mobileで作る! iPhone/Androidアプリ

第11回連絡先、クリップボードの利用

最近の話題から

先日4/4にTitaniumの統合開発環境としてTitanium Studioがプレビューリリースされました。Titanium StudioはAppcelerator社が買収したAptana社のAptana Studioをベースにしている開発環境です。もともとAptana StudioはJavascriptのための開発環境で自動補完などが優秀なソフトウェアだったのですが、Titaniumに最適化されより使いやすい環境になっているようです。

iPhone落穂ひろい

前回の連載まででTwitterクライアントに必要な最低限の機能の紹介はできたと思われるので、今回はTwitterクライアントとは少し関係ないけれどiPhoneアプリを作る上で有用な機能について紹介していきます。

プロジェクトも新しく作り直しますので、Githubにて公開しているリポジトリも変更になります。ご注意ください。

まずは、iPhoneの電話帳(連絡先)へのアクセスについて解説します。

電話帳へのアクセス

var addressButton = Ti.UI.createButton(
    {
        title: '電話帳',
        width:100,
        height:40,
        left:10,
        top: 30
    }
);
win.add(addressButton);

addressButton.addEventListener(
    'click',
    function(){
        Titanium.Contacts.showContacts(
            {
                selectedPerson : function(e) {
                    var person = e.person;
                    var values = [
                        person.fullName
                    ];
                    for( var key in  person.email ) {
                        var mails = person.email[key];
                        for(var i=0;i<mails.length;i++) {
                            values.push( mails[i] );
                        }
                    }
                    for( var key in  person.phone ) {
                        var phones = person.phone[key];
                        for(var i=0;i<phones.length;i++) {
                            values.push( phones[i] );
                        }
                    }
                    var text = values.join("\n");
                    textArea.value = text; 
                        }
            }
        );
    }
);

最初にボタンを作成し、ボタンが押されたときに連絡先が開くように実装しています。

Titanium.Contacts.showContactsが連絡先を表示するメソッドで引数にオブジェクトを渡します。オブジェクトのselectedPersonプロパティに関数をセットしておくと、連絡先画面で人を選択したときにこの関数が呼び出されます。そして画面はこの連絡先を開いた画面に戻ってきます。連絡先から取得した情報はtextArea変数にあらかじめTi.UI.TextAreaを作成しておいて、そこに表示しています。textAreaの使い方については連載第4回を参照してください。

図1 実行画面
図1 実行画面

このselectedPersonプロパティにセットされていた関数に渡ってくるオブジェクトにpersonプロパティがあり、このオブジェクトに連絡先に登録してある情報が格納されています。連絡先に登録できる情報は電話番号、メールアドレスや住所など数が多いので、personオブジェクトから参照できる情報についてはAppcelerator Developer CenterのAPIリファレンスも確認してください。

このpersonオブジェクトから情報を得るにあたって注意すべき点は、プロパティによって、直接値が入っている場合(single-value)と、プロパティをもつオブジェクト(multi-value)が入っている場合がある点です。どのプロパティがどちらの形になっているかも上述したAPIリファレンスに書いてあります。

multi-valueになっているemailプロパティのを扱っているのが

for( var key in  person.email ) {
     var mails = person.email[key];
     for(var i=0;i<mails.length;i++) {
         values.push( mails[i] );
     }
}

この部分です。iPhoneの連絡先のデータは、メールアドレスに⁠自宅⁠,⁠勤務先⁠といったラベルが設定できます。person.emailオブジェクトはそのラベルをキーとした連想配列になっています。さらに、バリューのほうは配列になっており、配列の要素にemailアドレスが格納されています。これは、連絡先には⁠自宅⁠というラベルをもつemailアドレスを複数登録することができるためです。

図2 アプリ実行画面
図2 アプリ実行画面

上記のサンプルではTitanium.Contacts.showContactsメソッドに渡すオブジェクトにselectedPersonプロパティをセットして実行したので、連絡先を開いたときに人物の名前をタップした時点で処理が呼び出し元に戻りました。しかし、ある人物のデータ全体ではなく、ひとつのemailアドレスや電話番号までユーザーに指定させたい場合もありえます。この場合はTitanium.Contacts.showContactsメソッドに渡すオブジェクトにselectedPersonをセットせず、selectedPropertyをセットするとユーザーに個別の値を取得させることができます。

Titanium.Contacts.showContacts(
    {
         selectedProperty : function(e) {
              if ( e.property == 'email' ) {
                   var person = e.person;
                   var value  = e.value;
                   var values = [
                       value,
                       person.fullName
                   ];
                   var text = values.join("\n");
                    textArea.value = text; 
               }
             }
    }
);

その場合の実装は上記のようになります。e.propetyプロパティでユーザーがタップした項目が判別できるので、ここではメールアドレスをタップした時だけ処理を行うようにしています。e.personで取得できる内容はselectedPersonを利用している時と同じですが、e.valueでユーザーがタップした項目の内容だけ取得できます。ここではemaliアドレスがe.valueに格納されています。

クリップボードの利用

上の例では連絡先から取得した情報をtextAreaに表示していますが、これをクリップボードに保存してみましょう。iPhoneではURLスキーマを使ってほかのアプリを起動する以外にほかのアプリと連携する手段がありません。なのでクリップボードに情報を格納しておいてほかのアプリでも利用できるようにするというのは、ほかのアプリへ情報を渡す有効な手段になります。

var copyButton = Ti.UI.createButton(
    {
        title: 'Copy',
        width:100,
        height:40,
        left:120,
        top: 30
    }
);
win.add(copyButton);

copyButton.addEventListener(
    'click',
    function() {
        Ti.UI.Clipboard.setText(textArea.value);
<p>        Ti.API.debug(Ti.UI.Clipboard.getText); //デバッグ用にコンソールに表示</p>
    }
);

ボタンを作成してボタンが押されたときにtextAreaの内容をクリップボードに格納するサンプルになります。クリップボードへのアクセスは非常に簡単で、Ti.UI.Clipboard.setTextを呼び出すだけでテキストを格納することができます。また取得もTi.UI.Clipboard.getTextを呼び出すだけです。

Textのほかにデータを格納することもでき、

   Ti.UI.Clipboard.setData('mimetype', dataObject);

という形で保存することができます。mimetypeを設定する点に注意して下さい。また、UI部品のほとんどに実装されている toImage メソッド使ってUIをimageデータとして取得した場合のデータは


   Ti.UI.Clipboard.setData('image', imageObject);

という形で、mimetypeではなく 'image' という名前でもデータをセットできます。

まとめ

今回は連絡先に格納されたアドレス帳データの取り扱いと、クリップボードまわりの扱い方について解説しました。そろそろiPhoneでの開発についてはひと通り済んだので、次回からはAndroidでの開発について解説していきます。

おすすめ記事

記事・ニュース一覧