FUJI ROCK FESTIVAL ’19 公認アプリで採用した技術（Android/iOS）

PARTYでエンジニアをしている森(@d_forest)です。
FUJI ROCK FESTIVAL ’19 公認アプリではAndroidの開発を担当していました。

今回は、公認アプリで採用した技術について、紹介します。

Androidアプリは私が、iOSアプリはiOS担当の児玉（@_hrkd）にバトンタッチします。

FUJI ROCK FESTIVAL ’19 公認アプリとは

アーティストラインナップやタイムテーブルなど、フジロックをより楽しむために、FUJI ROCK FESTIVAL ’19に合わせてリリースしました。SoftBank 5Gを活用した会場の混雑状況ライブカメラが見られることでも、注目を集めました。

iOSとAndroidでリリースしたこのアプリは、通信状況が不安定なフジロック会場でも快適にお使いいただけるよう、オフラインでも使えるように実装する必要がありました。ただし、リリース後にアーティストやタイムテーブルの情報が追加・変更される可能性もあるため、通信状況が良いときはサーバーに問い合わせて情報を更新することも必要です。

iOSもAndroidも、基本的な機能を使い勝手良く実装することはもちろんのこと、そのようなデータの取得や更新には特に注意して実装しました。

詳しくはこちらの記事も御覧ください。

▼「FUJI ROCK `19 by SoftBank 5G」詳細

FUJI ROCK '19 by SoftBank 5G - PARTY

Androidアプリの基本構成と設計

特筆すべき点はありませんが、堅実にGoogleが提唱するアーキテクチャに沿って、MVVM + Repositoryパターンで実装しています。
コードはすべてKotlinで記述し、Jetpackを積極的に採用しました。また、DIにはDagger2を採用しています。

Jetpackライブラリの採用

AndroidアプリをMVVM + Repositoryパターンで実装するにはJetpackの活用は外せません。公認アプリでもフル活用しています。

・Fragment (Single Activity)
・Navigation
・LiveData
・ViewModel
・Room

今回、公認アプリのメイン機能はSingle Activityで実装しました。Fragment間の遷移はNavigationを、値の受け渡しはSafeArgsを利用しています。

Single Activityの良い点は、ViewModelを通すことで、Fragment間の値の受け渡しが非常に効率的で簡単になることです。そのおかげで公認アプリでは、あるアーティストの詳細画面でタイムテーブルをお気に入りにしたとき、一覧画面にもタイムテーブル画面にも、お気に入りにしたことが即座に反映されます。
このような実装が簡単にできるのも、Single Activityで、ViewModelとLiveDataを採用しているおかげです。

Single Activityで困る点もありました。それはToolbarと遷移アニメーションの扱いです。ToolbarはActivityに設置することが普通です。しかし例えば、アーティスト一覧画面から詳細画面に遷移するとき、右から左にスライドするような遷移アニメーションを加えようとすると、ToolbarがActivityにあると違和感のないアニメーションにすることが困難です。
ToolbarをFragmentに持たせる方法もありますが、予期せぬバグが発生する可能性を考慮してそれはやめました。今回は、遷移アニメーションをシンプルにすることで解決しました。

Roomは、通信環境がなくてもアプリが利用できるようにするためには欠かせないライブラリです。フジロック開催中の会場では、インターネットに接続しづらい状況が発生します。公認アプリでは、そのようなときも利用できるように、あらかじめアーティスト情報などをダウンロードしてローカルDBに格納し、それを表示しています。その制御にRoomを活用しました。

このように、Androidの公認アプリでは、最新の構成と設計に沿うように開発しました。

続いて、iOSアプリで採用した技術を紹介します。

iOSアプリの基本構成と設計

PARTYでエンジニアをしている児玉（@_hrkd）です。今年が3度目の参加となったフジロッカーです！

公認アプリは、ユーザー自身がPOSTやPUTなどの処理を行うことのないシンプルな要件で、ステート管理などには特に悩まされることはなかったため、シンプルにMVC構成を取っています。

ただし、フジロックの会場のシビアな通信環境は開発当初から自明でしたので、モデル層でのアーティストデータなどのハンドリングにはかなり気を使っています。

シビアな通信環境でもスムーズに利用できる工夫

アプリ起動時のロード時間はたとえ数百KBの情報でも会場内では長く、ストレスになることが予想されたため、アーティスト情報やタイムテーブルなどの主要な情報はすべてJSONファイルとしてアプリ内にバンドルしました。

アプリ起動時にはクラウド上にあるデータの更新日時をチェックし、バンドルされている情報より新しい場合のみデータをダウンロードするような制御をしています。

またアーティスト画像の取り扱いについては事前にサイズの最適化処理を実施し、アプリ側の読み込みには取得速度が早いと評判のNukeを採用しました。読み込み後のアニメーション実装もシンプルです。

こういった地道な実装のおかげで会場内でもストレスなく動作するUXが実現できていたと思います。

Viewの実装においてお世話になったライブラリ

短い開発期間を乗り越えさせてくれたライブラリ達は以下のとおりです。

・XLPagerTabStrip
- ほぼ全画面で利用した、横スワイプ可能なタブビューを実装できるライブラリ。
・SpreadsheetView 
- タイムテーブル表示の実装に利用させていただきました。ピンチズームなどの実装は自前で行う必要があります。
・EmptyDataSet-Swift
- テーブルビューのセルが0件のときにViewの切り替えをスピーディーに実装できます。
・R.swift
- リソースをカンタンに参照できるライブラリ

シンプルな構成のiOS開発ではベストプラクティスが枯れている感があり、あまり目新しい情報はお伝えしにくいですが、iOS13から利用できるSwiftUIではよりモダンな書き味が実現できそうですので、今後積極的にシェアしていきたいと思います！

PARTY