マルチプラットフォームTwitterクライアントを作成する(前編)

テックポエム

この記事はUnifinity Advent Calendarの10日目の記事です。前編と後編の2回にわたって、Unifinityを使いiOSでもAndroidでもWindowsでも動作するTwitterクライアントアプリを作成します。

fig1.png

はじめに


Unifinityを使うと、スマートフォンでもPCでも動作するアプリを簡単に作成できます。使用するロジックも画面デザインも共通のものを使えるので、Android, iOS, Windows個別にアプリを作成する場合と比較して1/3の工数で作成できます。
そこで今回はUnifinityを使って、スマートフォンからもPCからもよくアクセスされるTwitterに接続するアプリを作成したいと思います。
記事は前編と後編に分かれています。まずこの前編では、Twitterからデータを取得する処理を実装します。後編ではUIの実装を行います。

作成するアプリ


前編。
http://download.unifinity.co.jp/download/advcal2018/1214/twitter1.zip
※ このTwitterクライアントアプリはロジックからTwitter APIを呼び出します。Twitter APIの呼び出しにはTwitter社から発行されるAPIキーとアクセストークンが必要です。サンプルアプリにはこれらの値を設定していませんので、取得はあらかじめご自身で行ってください。

このアプリを実行する前に、以下の操作を行ってください。

1. サンプルアプリをダウンロードして解凍し、Unifinity Studioで開きます。
2. プロパティーダイアログのグローバル変数タブを開きます。
3. consumer_keyとconsumer_secretの初期値欄にAPIキー2つを、access_tokenとaccess_token_secretの初期値欄にアクセストークン2つを入力します。
4. OKを押してダイアログを閉じます。

以上の操作が終わるとUnifinity StudioやUnifinity Application Playerでアプリを実行できるようになります。アプリを実行して画面表示に従ってTwitterの認証に成功すると、図2のような画面が表示されるはずです(表示される内容は認証したアカウントによって異なります)。

Twitterの認証


Twitterからデータを取得するにはTwitter APIを呼び出します。Twitter APIはhttps://api.twitter.com/で始まるURLにHTTPでリクエストを送信することで呼び出します。その際、OAuthというプロトコルで署名する必要があります。Twitterの対応しているOAuth 1.0では、署名の際にアプリごとに異なるAPIキー(Consumer key, Consumer secret)とユーザーごとに異なるトークン(Access token, Access token secret)が必要です。
つまりTwitterクライアントを実装するためには、APIとトークンを組み合わせて署名する処理とトークンを取得する処理の2つを実装する必要があります。

ロジックの実装


署名・API呼び出し処理
signatureの計算

fig2.png
OAuth 1.0でリクエストを認証する処理を実装するのに最も重要なのはsignatureと呼ばれる値を生成する処理です。signatureは特定の規則に従って文字列を生成し、そのハッシュ値を計算することで得られます。
ハッシュ値を計算する元になる文字列は、APIを呼び出すパラメーターとランダムな英数文字列、タイムスタンプ等を=と&を使って結合することで生成します。
ハッシュ値の計算については、TwitterではHMAC-SHA-1を使ってハッシュ値を計算します。UnifinityにはSHA1を計算するロジックがあるので、ハッシュ値は https://www.ipa.go.jp/security/rfc/RFC2104JA.html に従って計算することで得られます。

リクエスト送信とレスポンス受信

fig3.png
Unifinityでは1行で簡単にHTTPリクエストを送信できます。signatureとAPI キー等OAuthに必要な情報を載せたHTTPヘッダーを生成してしまえば、簡単にOAuth認証したHTTPリクエストを送信することができます。またTwitterから返ってきたレスポンスについても、値をJSON解析ロジックに引き渡すことですぐにレスポンスの内容を確認することができます。

トークン取得処理

fig4.png
多くのウェブアプリではTwitter上でアプリ連携ボタンを押すと直接そのアプリのページに遷移してアプリを使用することができます。しかし今回作成するのはウェブアプリではなくモバイルアプリなので、アプリ連携ボタンを押した直後にアプリを立ち上げるのは困難です。そこで今回はPIN認証で承認処理を実装しました。取得したトークンをデータベースに保存することで、初回より後のアプリ起動では認証作業を省略することができます。
PIN認証ではユーザーがTwitter上でアプリ連携ボタンを押すと何桁かのランダムな数が表示されます。その暗証番号をモバイルアプリに入力することで、モバイルアプリ側はTwitterに承認リクエストを投げアクセスが承認されるという仕組みです。
この実装にはブラウザを立ち上げたり入力ダイアログを表示したりする手間が必要です。Unifinityではロジックの中からブラウザを立ち上げたり入力ダイアログを表示したりできるので、このような少々手間のかかる実装でも簡単に行うことができます。

仕上げ


一旦動作を確認するために、ユーザーのホームタイムラインを取得し、Twitterから返ってきたレスポンス(JSON形式)をそのままラベルの内容に設定します。これで冒頭のアプリが完成です。

おわりに


Unifinityを使うと簡単にマルチプラットフォームで動作するTwitterクライアントを作成できます。
前編ではTwitter と接続してAPIを呼び出し、レスポンスを直接表示しました。後編ではUIを作成してアプリを完成させます。