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

テックポエム

この記事はUnifinity Advent Calendarの16日目の記事です。前編と後編の2回にわたってUnifinityを使ってTwitterクライアントアプリを作成する記事の後編です。前編はこちらをご覧ください。
前編ではTwitterからデータを取得する部分を実装しました。後編では主にUIを作成します。

fig1.png

図 1完成したアプリの実行例

作成したアプリ

後編では完成した以下のアプリについて説明します。

※ このTwitterクライアントアプリはロジックからTwitter APIを呼び出します。Twitter APIの呼び出しにはTwitter社から発行されるAPIキーが必要です。サンプルアプリにはAPIキーをつけていませんので、APIキーの取得はあらかじめご自身で行ってください。

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

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

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

実装


データベースへの追加

fig2.png図2タイムライン取得ロジックの改修(赤枠部分)

fig3.png

図3日時解析ロジック

fig4.png

図4データベース設計

Twitterのタイムラインは複数のツイートで構成されています。Unifinityで複数のデータを並べて表示するにはサブフォームリストを使います。サブフォームリストに複数のデータを表示するためには、フォームをデータベースと連携する必要があります。そこで、まずは取得したデータをデータベースに追加します。

データベースには表示したいデータとしてツイートしたユーザー名(2種類)、投稿時刻、本文の4つと、表示しないデータとしてツイートのIDの合計5カラムを作成しました。ツイートIDのカラムにユニーク制約をつけることで、同じツイートを重複して取得してもデータベースには重複して保存されないようにできます。
データベースにデータを追加するにはTwitterから取得したデータ(JSON形式)をディクショナリーに変換し、それぞれのツイートから必要なデータを取得してデータベースに追加します。このとき、JSONには投稿時刻の情報は文字列として格納されているので、データベースに追加する際に文字列型から日時型に変換する必要があることに注意してください。

サブフォームリストでの表示


fig5.png

図5サブフォームのレイアウト

データベースにツイートのデータを登録できたので、サブフォームリストに表示します。図のような画面を明細画面として作成し、データベースと連携します。

新着ツイートの読み込み

fig6.png
図6ダブフォームリストのスワイプ処理設定

fig7.png

図7スワイプ時読み込み処理

モバイル版のTwitterの公式アプリと同様に、画面を上下にスワイプすると過去のツイートや新しいツイートを読み込めると便利です。
Unifinityのサブフォームには上下のスワイプ時処理を設定できます。上下スワイプ処理の中で過去のツイートや新しいツイートを読み込むことで、Twitter公式アプリと同様の操作が可能になります。

おわりに


Unifinityを使うことで、スマートフォンでもPCでも動作するTwitterクライアントアプリを簡単に作成できました。今回はタイムラインを表示する機能と更新する機能しか実装しませんでしたが、ツイートの投稿機能などを付け加えることも可能です。ご自身の手でご自身にとって使いやすいアプリにぜひ改造してみてください。