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

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

この記事を読むのに必要な時間:およそ 3 分

写真を取得しよう

では,上のサンプルコードで呼び出していた二つの関数,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の解説からだいぶ逸脱してしまうので割愛しますが,興味のある方はソースコードから処理を追いかけてみてください。

著者プロフィール

倉井龍太郎(くらいりゅうたろう)

株式会社はてな アプリケーションエンジニア。

スマートフォンアプリからSQLチューニングまで幅広く格闘中。好きな言語はRuby。

URLhttp://d.hatena.ne.jp/r_kurain/
Twitter@kurain