モバイルオンリー？革命的な出会い系サービスのUIとは！？
この投稿はAndroid Adevent Calendar 2014 の6日目の記事です。 5日目の記事は 天下一「AndroidのORM」武道会 - Qiita です。
モバイルオンリー？革命的な出会い系サービスのUIとは！？
先日、事情により終電を逃し、仕方無く始発を待つために独り深夜のマクドナルドにて時間をつぶしていた時の事です。
始発まであと2時間位といった頃合いだったでしょうか・・・僕は翌日（日付変わって実質その日）が休みという気楽さから逆に目が冴えていたこともあり、角田光代のツリーハウスをKindleで購入してホットコーヒーをお供に読み始めていました。
隣の席にはMBAを広げたホスト風のお兄さんが、時折、鋭いキータッチ音をたてながら何やら独り言を発していたりするのですが、別段、僕にとっては何の脅威でもありません。僕はそのまま、祖父の死から自分の家族のルーツに興味をもった良嗣と、中華料理屋「翡翠飯店」に住む三世代の家族の年代記を追いかける小旅行に没頭し始めました。
と
「おおお！オレ、オレ、ごめん寝てた？わりーなー、あのさー、モバイルオンリーで革命的な出会い系サービスを考えたんだよねー」
思わず隣を見てしまいました。 隣のお兄さんが携帯越しに誰かと「モバイルオンリーで革命的な出会い系サービス」の話を始めています。
「なあなあ！これ絶対凄いアイディアなんだよね！早く形にしたいの！あ、どのくらい凄いかっていうと、アイディアの規模的にはFacebookレベル！もしくは、Sugardaddieレベル！でさ、ちゃちゃっとアプリ作ってくれないかな？あ、最初はモックレベルでいいから！少し動かない部分があっても今は目をつぶる！Androidアプリね！iOSはおいおいは様子をみてからって感じ。それをエンジェル投資家っていうか、そういうお金くれる人たちに見せて資金調達してくるからさ！頼むよー！アプリなんて簡単だろう？まあ、オレもちょっと勉強すればアプリぐらい作れない事もないんだけど、Macも新しいの買ったし！ちなみに今マクドから電話してまーす！（笑）完璧でしょ！っていうか、オレが本気出してアプリ作れるようになったら、そりゃー怒濤のリリースラッシュからのメイクマネーでマネタリベース崩壊級にやばいんだけどね・・・まあ、役割分担っていうの？機会損失ってやつ？その時間に俺が新しいアイディアを考えた方が生産的じゃない？ほら、お金作るアイディアって才能っていうか選ばれた人にしか降りてこないんだよね・・・いや、まじでちょっと頑張ればさオレだってアプリなんて簡単・・・（以下延々とありがたい話が続きます）」
という自称アイディア神のありがたいお話に、僕は能面なような眼差しを虚空に注ぐ体で聞き入っていました。
「・・・今のアプリって複雑じゃん？だからさ、まじ、そこまでやるかーーーー！ってレベルまでシンプルにするわけ。そそ・・・紙とペン的なね！写真とか一切無いの！感情を感じさせないレベル！伊坂幸太郎のモダンタイムズでいうゴッシュ的無機質感！その無機質の先に人の温かみなわけよ！！キミにもらう温かいぬくもり. 明日への糧に生き抜くために！ってやつ！ケンジもびっくりのこの振り幅、パないでしょ？計算してるっしょ？」
ZEEBRAも唖然とする怒濤の語り口。 これが本当のライム遊戯なのかも・・・と思わせてしまう勢いがあります。（違う）
お兄さんの革命的なアプリ（クライアント側）の話をちゃっかり聞いていたのですが、仕様的には対話形式で理想の相手の情報・条件を入力するだけで、あとはその条件に近しい異性をマッチングするというもの。
「超シンプルにしたいわけよ！ウィザードっていうの？ユーザはただ選択するだけでいいわけ！そういうユーザーエクスペリエンス的なのが肝だよね」
それ、WizardPagerだったらすぐできるよ
というわけで、長い前振りでしたね。ごめんなさい。
（尚、前振りの件は始発までマクドで「ツリーハウス」を読んでいたこと以外、全てフィクションです。魔が差しました。ごめんなさい。）
さて、便利なウィザードUIライブラリーのご紹介です。
https://github.com/TechFreak/WizardPager
（オリジナル版は
https://github.com/romannurik/android-wizardpager
ですが、上記はバックポートして2.2にも対応されています）
WizardPagerは下記のようなページUIとページ間で入力したデータの管理を行うことができるlibraryです。
ユーザの選択によって、分岐するページ
BranchPage
選択した項目によって、ページの流れが枝分かれします。
性別等の大項目的な分類で以降のページを出し分けしたい時に有効です。
コード
new BranchPage(this, "あなたの性別は？") .addBranch( "私は女性です", // ユーザが女性の時に表示させたいページインスタンス・・・) .addBranch( "私は男性です", // ユーザが男性の時に表示させたいページインスタンス・・・) .addBranch( "私は男性でも女性でもありません", // ユーザが男性でも女性でもない時に表示させたいページインスタンス・・・ ))
１つのみ項目を選択するページ
SingleFixedChoicePage
他に選択する余地を与えない質問ページの作成に有効です。 66兆2000億といったら左京ではなく垂金権造の顔を思い浮かべます。
コード
new SingleFixedChoicePage(this, "相手の年収は").setChoices( "私が養うので不要です", "400万円以上", "500万円以上", "800万円以上", "2000万円以上", "66兆2000億円")
複数項目選択できるページ
MultipleFixedChoicePage
西島秀俊の厳し過ぎる結婚条件はあなたの結婚条件ではありません。 何故なら、あなたは西島秀俊ではないからです。
コード
new MultipleFixedChoicePage(this, "相手に求めるものは？") .setChoices( "仕事のワガママは許すこと", "映画鑑賞についてこない", "目標を持ち一生懸命な女性", "いつも一緒”を求めない", "女の心理の理解を求めない", "メール返信がなくてもＯＫ", "１カ月半会話なしでも我慢すること")
他にもテキスト情報を入力するページ等もありますが割愛します。
入力終了時は必ず最後に入力情報の確認画面を表示することも可能です。
ちょっとだけ構成の話
WizardPagerの仕組みは大きくModelとPageという2つのコンポーネントから構成されます。
Modelは、対話的に入力を行いたい種々のPageを管理します。
Pageは、ユーザに入力してもらいたい情報に対応したUI(Fragment）を持ちます。
PageFragmentCallbacksとModelCallbacksの両方のインターフェースを実装した具象クラス（大体はActivity）を軸にしてページの切り替えや、それに伴う入力データの復元等を行っています。
上記のリポジトリにはsampleアプリもあるので是非、cloneして動かしてみると良いでしょう。 また、ライブラリー自体の導入方法は簡単！ いつも通りbuild.gradleにワンライン追加するだけです！
dependencies {
compile 'com.github.techfreak:wizardpager:1.0.0'
}
ではでは！
