ペパボのカンファレンス情報を表示するアプリをFlutterで作った
このエントリは、GMOペパボエンジニア Advent Calendar 2020 – Adventar の6日目の記事です。5日目は、kunit さんの CRE、はじめ(て)ました でした。
タイトルの通りだけど、ペパボが主催するカンファレンスの情報を表示するアプリをFlutterで作った。現在はAndroid版のみ提供中。
この記事では開発の経緯やアプリの構成などについて書いていく。
砂場を求めて
発端は素朴なもので、業務で開発するプロダクト以外でFlutterのあれこれを試せる砂場が欲しくて題材を探していた。
そんな折、2020-10-16にペパボ主催でモバイルテックカンファレンスを開催することになった。
モバイルを冠するのであればこれはもうカンファレンスアプリを作るしかないだろう！となり（？）、社内でFlutter興味ありそうな人を集めて作ることにした。カンファレンス用のアプリがあると、テックジャイアント感も出るでしょう。知らんけど。
もともと社内/社外問わずFlutterのアウトプットはいくつか行っていたので、ありがたいことに自分を含め4人のメンバーが集まった。
ちなみにカンファレンスに登壇してこのアプリの紹介を行っている。一石二鳥ですね。
アプリの開発
メンバーが集まった時点ではなんとなくカンファレンスの情報を出せるアプリ作りたいね〜という話しかしていなかったので、まずはどんなアプリを作りたいのかを考えた。
ちょうど社内でオブジェクト指向UIデザイン──使いやすいソフトウェアの原理の読書会を進めていて、書籍の中で紹介されていたオブジェクト指向UI設計の会をアプリ開発の前に開発メンバーで実践した。
構想段階ではいろんなことをやりたいという話は出たんだけど、あんまり詰め込むと大変なので、ファーストリリースでは「最新のカンファレンス情報を表示する」を満たすことを目標として開発をスタートした。
ペパボは2020年1月27日からフルリモートでの勤務体制に移行していたので、アプリのリリースまではチームメンバーが物理的に集合することはなかった。その代わり、開発はGoogle Meet上にてモブプログラミング形式で行うことにした。
開発期間は構想含めて1ヶ月ぐらいで、実装は大体2週間ぐらいでファーストリリースを迎えることができた。
アプリの構成
FlutterでFirestoreを活用したモバイルアプリを作ってみたかったので、カンファレンスの情報はFirestoreに格納してアプリ起動時に取得する構成で開発を行った。
Firestoreはアクセスが高速で便利な反面、セキュリティルールの管理がやや独特で、慣れないうちは思わぬところでミスをする可能性が高いと感じたため、個人情報は特に格納せず、公開しても問題ない情報を読み取り専用で格納することにした。
Flutterの状態管理で定番となっているproviderやstate_notifierといったパッケージは使わず、素朴に最上位のStatefulWidgetで状態を持ち、それを下位のウィジェットにコンストラクタ経由で渡すような構成をとった。
これはチームにReactに精通したメンバーがいて、Reactでは大元のコンポーネントが状態を持ち、下位のコンポーネントにpropsで状態を流し込んでやることが多いというアドバイスを受けてそのような形になった。*1
この辺りはFlutter界隈と考え方が結構異なっていると感じたポイントで、おそらくReactはFlutterと比較するとリビルドのコストが低く、パフォーマンスに影響が出にくいのかも？といった印象を受けた。
ちなみに
iOS版は審査リジェクトされたのでまだ公開できてない。理由はMinimum Functionality。かなしいね。
おわりに
2020-12-16にペパボ主催のPepabo Tech Conference #13が開催される。
このカンファレンス開催に向けてアプリの機能拡充を目指しているので、興味を持った方はぜひダウンロードしてみてほしい。*2
明日はshibatchさんの記事です！*3
