gihyo.jpサイトのロゴ

Titanium Mobileで作る！ iPhone／Androidアプリ

第7回TitaniumでTwitterクライアント─⁠─カメラの使用

2011-02-22

カメラを使ってみよう

前回はiPhoneらしい機能として、GPSとマップ表示の利用法について解説しましたが、今回はカメラの利用方法について解説します。また、既に撮影してある写真からも選択できるように、写真の選択方法をOption Dialogで選べるように実装してみます。また、TwitPicへの投稿方法も簡単に解説します。

ImageViewを準備

選択した写真をプレビューできるように、写真を表示するViewを用意しておきます。表示する部分は前回、地図を表示した部分と同じところにします。

前回実装を追加したmessage_window.jsに次のコードを追加します。

var imageView = Titanium.UI.createImageView(
    {
        width: 'auto',
        height: 240,
        top: 220
    }
);
imageView.hide();
win.add(imageView);

前回の地図表示と同じく、必要になるまで表示しないようにhideメソッドで表示を隠しています。また、width を 'auto' に指定していることに注意してください。widthをautoに指定することで、この後写真のデータを指定した時に縦横比がある程度維持されるように自動で調整が行われます。

OptionDialogを用意

写真の添付はその場で撮影することも、既に撮影した画像から選択することも考えられるので、OptionDialogと呼ばれる図のようなViewを出してユーザーに選択してもらうようにします。

画像 
var sourceSelect = Titanium.UI.createOptionDialog({
    options:['撮影する', 'アルバムから選ぶ', 'キャンセル'],
    cancel:2,
    title:'写真を添付'
});

sourceSelect.addEventListener('click',function(e)
{
    switch( e.index ) {
    case 0:
        startCamera();
        break;
    case 1:
        selectFromPhotoGallery();
        break;
    }
});

var photoButton = Ti.UI.createButton(
    {
        top: 160,
        left: 100,
        width: 80,
        height: 44,
        title: 'photo'
    }
);

photoButton.addEventListener(
    'click',
    function() {
        sourceSelect.show();
    }
);
win.add(photoButton);

Titanium.UI.createOptionDialogに渡すオブジェクトのoptionsに指定する配列で、表示する文言を指定できます。次に作成した、optionDialogオブジェクトに対してclickイベントのイベントリスナを設定しています。イベントオブジェクトeのe.indexから押されたボタンのインデクスが取得できます。ここでは、「⁠撮影する」「⁠アルバムから選ぶ」の二つのボタンそれぞれで写真を取得する実行する関数を呼び出しています。

後半部分では、ダイアログを表示するためのボタンをphotoButton変数に作成し表示しています。ボタンがクリックされた際にダイアログが表示されるように、photoButton.addEventListenerで指定する関数の中で、sourceSelect.show()を呼び出しています。

写真を取得しよう

では、上のサンプルコードで呼び出していた二つの関数、startCamera、selectFromPhotoGalleryを実装していきます。まずは、カメラを起動するstartCameraの実装です。

function startCamera() {
    Titanium.Media.showCamera(
        {
            success:function(event) {
                var image = event.media;
                imageView.image = image;
                imageView.show();
                uploadToTwitPic(image);
            },
            //cancel:function(){},
            error:function(error) {
                if (error.code == Titanium.Media.NO_CAMERA)
                {
                    alert('カメラがありません');
                }
            },
            saveToPhotoGallery:true,
            allowEditing:true,
            mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]
        }
    );
}

Titanium.Media.showCameraがカメラを起動するためのメソッドになっています。引数に渡すオブジェクトで取得した後の処理や、取得する画像の種類などを指定します。

まず、写真の取得に成功したときの関数をsuccessパラメタに指定しています。関数に渡ってくるeventオブジェクトのmediaパラメタで、取得した写真の画像が取得できます。取得した写真は先ほど作成したimageViewにセットし、imageViewを表示しています。そして、最後に、uploadToTwitPic関数で取得した画像をTwitPicに送信しています。uploadToTwitPic関数については最後に説明します。

写真の撮影がキャンセルされた時や、失敗した時の処理をそれぞれcancel, errorパラメタで指定できます。キャンセルしたときに特にするべき処理が今回は無いのでコメントアウトしています。失敗時の処理については、iPodにはカメラが無く、画像取得に失敗するのでそれに対応する処理を実装しています。

mediaTypesパラメタにTi.Media.MEDIA_TYPE_PHOTOを指定することで、静止画像のみを取得するようにしています。指定をしないと動画が撮影されることがあり、動画が取得された時の処理を実装する必要が出てきてしまいます。

つづいて、画像をフォトアルバムから取得するコードです。

function selectFromPhotoGallery() {
    Ti.Media.openPhotoGallery(
        {
            success: function(event) {
                var image = event.media;
                imageView.image = image;
                imageView.show();
                uploadToTwitPic(image);
             },
            // error:  function(error) { },
            // cancel: function() { },
            allowEditing: false,
            mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]
        }
    );
}

カメラを起動するのとほぼ同じようなコードで、フォトアルバムから写真を取得できます。Ti.Media.openPhotoGalleryメソッドに渡しているオブジェクトのパラメタは、Titanium.Media.showCameraに渡しているのと同じ意味を持ちます。

これで、photoボタンを押すとダイアログが表示され、写真を選択すると画面に表示されるようになりました。

画像

Twitterに写真を投稿するには

さて写真の取得をすることはできるようになりましたが、これをTwitterに投稿するにはもう一工夫必要です。Twitter自体は画像を投稿する機能を持ち合わせていないので、写真投稿サービスに画像を投稿した上でその画像のURLをTwitterに投稿しなければなりません。

それが先程も出てきたuploadToTwitPic関数です。TwitPicではOAuth Echoという認証方法でTwitterアカウントのOAuth認証とTwitPicのAPIキーの二つだけで投稿ができます。つまりユーザーがTwitPicのアカウントを改めて取得する必要はありませんし、TwitterのユーザーIDとパスワードをTwitPicに預ける必要もないということです。

function uploadToTwitPic(image) {
    var xhr = Ti.Network.createHTTPClient();

    var verifyURL = 'https://api.twitter.com/1/account/verify_credentials.json';
    var params = {
        url:verifyURL,
        method: 'GET'
    };
    var header = twitterApi.oAuthAdapter.createOAuthHeader(params);

    xhr.onload = function(){
        var res = JSON.parse(this.responseText);
        textArea.value = ( textArea.value || '' ) + ' ' + res.url;
    };
    //xhr.onerror = function(){  };

    xhr.open('POST','http://api.twitpic.com/2/upload.json');
    xhr.setRequestHeader('X-Verify-Credentials-Authorization',header);
    xhr.setRequestHeader('X-Auth-Service-Provider',verifyURL);

    xhr.send(
        {
            key: 'YOUR_TWITPIC_API_KEY',
            message: textArea.value,
            media: image
        }
    );
}

twitterApi.oAuthAdapter.createOAuthHeader()メソッドではOAuth EchoのためのHTTPリクエストヘッダを生成しています。また、xhr.onloadにアップロード完了後にテキストエリアの内容に画像のURLを追記するコールバック関数を指定しています。その後、xhr.openでTwitPicの投稿用URLを指定した“⁠後に⁠”xhr.setRequestHeaderでOAuth Echoの認証に必要なHTTPヘッダを指定しています。xhr.setRequestHeaderはxhr.openの前に実行してもエラーもウォーニングも出ません。しかし、実際にヘッダの追加は行われず適切な処理ができないので順番にはくれぐれも注意してください。

最後のxhr.sendでAPIキーを指定し、投稿する写真もmediaパラメタに指定しています。messageパラメタに文字列を指定すると、TwitPicのページに表示されるようになります。'YOUR_TWITPIC_API_KEY' の部分は自分で取得したTwitPicのAPIキーを利用してください。http://dev.twitpic.com/apps/newから取得できます。

oAuthAdapter.createOAuthHeaderメソッドは今回OAuth Echoを利用するために、著者がoAuthAdapterに勝手に追加したメソッドです。本連載のGitHubリポジトリから取得しないとこのメソッドが存在しないので注意してください。createOAuthHeaderの実装については、Titaniumの解説からだいぶ逸脱してしまうので割愛しますが、興味のある方はソースコードから処理を追いかけてみてください。

おすすめ記事

記事・ニュース一覧