第4回目の今回は、OAuthを使ったAPI呼び出しについて解説します。Twitter APIのほとんどはOAuthによる認証が必要となっており、OAuthはTwitterクライアントを作るには欠かせない技術の一つです。

投稿画面を作ろう

実際にOAuthの認証を始める前に投稿画面を先に作ってしまいましょう。初回のイメージに上げたように、画面右上に投稿画面を出すボタンを作成し、そのボタンが押されたら投稿画面が現れるようにしましょう。

var win1 = Ti.UI.currentWindow;
var messageButton = Ti.UI.createButton(
    {
            systemButton: Titanium.UI.iPhone.SystemButton.ADD
    }
);
messageButton.addEventListener(
    'click',
    function () {
        var messageWindow = Ti.UI.createWindow(
            {
                url: 'message_window.js',
                title: 'message',
                backgroundColor: '#fff'
            }
        );
        messageWindow.open();
    }
);
win1.rightNavButton = messageButton;

前回作成した、table_view.jsの先頭部分に次のようなコードを挿入します。注意してほしい点は、ボタンを作成しているメソッドcreateButtonと、画面左上つまりはナビゲーションバーの右部分にボタンを配置している、win1.rightNavButtonの部分です。このコードはiPhoneに初めから用意されているシステムボタンを利用したり、iPhoneにしか実装されていないNavigationBarの機能を利用しています。当然Androidでは動作しませんので注意してください。

また、ボタンはaddEventlistenerで、clickイベントに対してコールバック関数をセットすることができる点も注目してください。このaddEventlistenerメソッドを使用して、アプリのボタン等のUIに動作を付加していく方法はTitanium開発では頻繁に出てきます。HTMLによるWebアプリケーションにも似た、Javascriptらしい記述方法ですね。上の例ではclickイベントでツイートを書くためのウィンドウを開くように実装されています。 新しく開くウィンドウはmessage_window.jsに実装します。

var win = Ti.UI.currentWindow;
var textArea = Ti.UI.createTextArea(
    {
        height:150,
        width:300,
        top:10,
        font:{fontSize:20},
        borderWidth:2,
        borderColor:'#bbb',
        borderRadius:5
    }
);

win.add(textArea);
var postButton = Ti.UI.createButton(
    {
        top: 170,
        right: 10,
        width: 100,
        height: 44,
        title: 'POST'
    }
);
win.add(postButton);

こちらがmessage_window.jsです。まずは見た目だけ揃えているので、テキストエリアと投稿用のボタンが現れますがなんの機能もしません。見た目は以下のようになります。

OAuth認証の準備

画面ができたので、投稿ボタンを押したときにTwitterにツイートが流れるように実装していきます。前述のとおり、そのようなAPIにはOAuth認証が必要なのでこの準備をしていきます。

まず、Twitterに対して、APIを利用する開発者として申請をする必要があります。ログインした状態でhttp://twitter.com/apps/newにアクセスし、必要事項を記載して申請を行います。

申請に成功すると、Consumer KeyとCosumer SecretというOAuth認証に必要な値が見られるようになりますのでこれをどこかにメモしておいてください。

OAuthアダプタを使おう

TitaniumからTwitterのOAuth認証を行う方法として、OAuth Adapterというライブラリがあります。これを使うと面倒なOAuth認証の実装をほとんどライブラリ任せにすることができます。関連していくつかのライブラリが必要なので、次のファイルをダウンロードして、プロジェクトにあるResorces以下にlibディレクトリを作ってそのなかに配置してください。

• oauth-adapter
• oauth.js
• sha1.js

配置が完了したら、message_window.jsを以下のように変更して、投稿ボタンを押した時の処理の中でoauth_adapterを使用してTwitterに投稿するようにします。

コードの先頭部分にある 'consumer_key' と 'consumer_secret' はそれぞれ、自分で取得したものに変更してください。

Ti.include('lib/oauth_adapter.js');
var oAuthAdapter = new OAuthAdapter(
    'consumer_secret',
    'consumer_key',
    'HMAC-SHA1'
);
oAuthAdapter.loadAccessToken('twitter');

function tweet(message) {
    oAuthAdapter.send(
        'https://api.twitter.com/1/statuses/update.json',
        [['status', message]],
        'Twitter', //アラートのタイトル
        'Published.', //成功したときのアラートメッセージ
        'Not published.' //失敗したときのアラートメッセージ
    );

    if (oAuthAdapter.isAuthorized() == false) {
        var receivePin = function() {
            oAuthAdapter.getAccessToken(
                'https://api.twitter.com/oauth/access_token'
            );
            oAuthAdapter.saveAccessToken('twitter');
        };
        oAuthAdapter.showAuthorizeUI(
            'https://api.twitter.com/oauth/authorize?' +
                oAuthAdapter.getRequestToken(
                    'https://api.twitter.com/oauth/request_token'
                ),
            receivePin
        );
    }
}

postButton.addEventListener(
    'click',
    function () {
        if ( textArea.value ) {
            tweet( textArea.value );
        }
    }
);

win.add(postButton);

この変更をした後、ツイートをtextAreaに書いた上で投稿ボタンを押すと以下のような画面がでてきます。

この画面の指示に従うことで、このTwitterクライアントアプリの利用者はTwitterに投稿することができるようになります。次回以降はこのユーザー情報が記録されログイン処理は不要になります。

このままのコードですと、投稿後に画面から戻れないので一度アプリを再起動するか、Webブラウザで、認証したTwitterのアカウントを閲覧して投稿が成功していることを確認してみてください。

上のコードでの重要な点のひとつは、Ti.includeメソッドにより、ライブラリを呼び出している点です。このincludeメソッドは指定したファイルが、このメソッドを呼び出した位置に展開されるのと同じ効果があります。

もう一点は関数tweetの中でoAuthAdapter.sendメソッドを呼び出しているところです。少々わかりづらいのですが、[['status', message]]と配列で渡している第2引数がTwitterに投稿されるツイートになります。

関数tweetの中で行われているそれ以外の処理は、OAuth認証が初めてだった場合にアプリユーザーに認証許可を求めるために、上の画面例のようなウィンドウを表示するための設定が行われています。このあたりの処理を理解するにはOAuthへの理解が必要になりますので、gihyo.jp連載の「ゼロから学ぶOAuth 第一回⁠」⁠ もあわせて参考にしてください。

まとめ

oauth_adapterというライブラリを利用して、Twitterに投稿する方法を解説しました。投稿画面から戻れなかったり、ツイートの詳細が見られなかったりと、Twitterアプリとしては足らない部分がいくつもあるので、次回はこの辺りを改善していきます。