はじめに
こんにちは、コミューン株式会社でソフトウェアエンジニアをしている牛嶋です。 2022 年 4 月にコミューンに入社してから、モバイルアプリチームに所属しており、Flutter を用いてコミューンのモバイルアプリ開発に従事しております。
元々コミューンのモバイルアプリは React Native で開発されていましたが、2022 年の 4 月から Flutter を利用したクロスプラットフォーム開発に取り組んでいます。 具体的には、WebView を利用してコンテンツを表示していた部分を Flutter 側で実装し直すことに取り組んでおり、その結果として、ユーザー体験の向上させることを目的としています。
この記事では、Flutter を利用したリプレイスプロジェクトの概要について書いていきたいと思います。
リプレイス PJ の背景
- コミューンが理想とする世界観
コミューンの Company Vision は「企業とユーザーが融け合う社会を実現する」です。 その Vision を実現するために、コミュニティサクセスを支援するプラットフォーム「commmune」を提供しています。 コミュニティサクセスを実現するためには、以下の 3 つのステップが必要だと考えています。
Step1: ユーザーの参加
ユーザーが限りなく障壁低く登録し、参加すべきユーザーが漏れなく参加できる状態
Step2: コミュニティの活性化
ユーザーがコミュニティーを継続利用し、コミュニティが活性化し続ける状態
Step3: 事業への貢献
ユーザーが、ユーザーが管理者が求める成果アクション（サブスクリプション契約の継続・新規商品の購入など、ユーザーの満足度を高めつつも企業の利益に繋がるアクション）を行い、経済的成果を創出する状態
上記で示したステップのうち、特に「コミュニティの活性化」に関して、モバイルアプリは重要な手段となります。 モバイルアプリの操作自体をよりスムーズにするとともに、アプリへの通知等の機能を拡充することで、ユーザーが利用しつづけたくなるアプリ体験へと進化させます。 それにより、アプリでのユーザー体験が向上することで、コミュニティ活性化へとつながり、「企業とユーザーが融け合う社会」の実現に近づいていきます。
上記のような世界観を実現するために、モバイルアプリの開発により注力するべく、リプレイスプロジェクトが始まりました。
- Flutter 採用の背景
コミューンでは、モバイルアプリをリプレイスするにあたって、Flutter を採用しました。 React Native で引き続き実装するという選択肢もありましたが、React Native 版モバイルアプリではほとんどのコンテンツを WebView を使って表示していただけであったため、技術選定に関しては、比較的ゼロベースで行われました。 Flutter 採用した理由は大きく以下になります。
開発効率の最大化
Flutter に限らず、クロスプラットフォーム開発全般にいうことができるメリットですが、少ない人数で開発効率を最大ができる点は一つの理由です。 iOS と Android でネイティブアプリエンジニアをそれぞれ採用する場合と比較して、実装の工数や開発に必要な人員などを、ある程度減らすことができます。 コミューンでも、ネイティブアプリ開発経験者が少なく、かつリソースも限られていたため、クロスプラットフォーム開発を選択しました。
社内エンジニアのモチベーションと後押し
社内メンバーのモチベーション的に新しい技術として Flutter にチャレンジしたいと気持ちの高まりがありました。 また、社内に Flutter でのモバイルアプリ開発をリードしたことがある人が在籍しており、知見が既に存在したことも意思決定の要因でした。
Flutter の将来性の高さ
今年に入ってから v3 がリリースされ、各プラットフォームが安定版になったり等、Flutter は Google によって積極的に開発されています。 数年後を考えてみても、技術が廃ることなく、モバイルアプリの基盤として十分に効力を発揮するであろうと判断しました。
段階的リプレイス計画
リプレイスをするにあたって、リリースを複数回に分けて、段階的にリリースをしていく戦略を取りました。
ビッグバンリリースをするのではなく、段階的にリリースするに至った理由として、既に生じている課題の解決が急務だったことが大きかったです。 コミューンモバイルアプリの場合、既にユーザーに対してアプリを提供しており、そのアプリ上で WebView では改善が難しい課題が生じていました。そのため、できるだけ早く生じている課題の解決し、アプリ内での体験を改善する必要がありました。
また、同時に技術負債を産まないことも考慮する必要がありました。 特に、WebView 内の処理と Flutter Widget 内の処理が相互にやり取りを行う部分の実装に関しては、アプリケーションの複雑性増加に直結してしまうため、できる限り減らしていきたいという気持ちがありました
コミューンでは、この辺の話は非常にフラットに行われていて、今回もプロダクトマネージャーとエンジニアが何回も意見交換を重ねました。 具体的には、プロダクト視点から見た課題と、開発視点から見た課題の双方を机上に並べて、お互いが状況を理解しあった上で、意思決定につなげていきました。
コミューンでは、エンジニアチーム以外の人間も技術に対する理解があるため、無駄なコミュニケーショントラブルに巻き込まれることなく、本質を追求したプロダクト開発ができます。弊社のバリューである「超本質主義」と「チームコミューン」は、単なるバリューではなく、実際に会社内に浸透しており、非常に仕事がしやすい環境だと感じています。
プロダクト観点と技術観点を総合的に鑑みた時に、最も効率的な形でリリースをしていくことを目的として、段階的に期間を区切り、アプリをリリースしていく方針を取りました。
第一弾リプレイス
第一弾リプレイスでは、モバイルアプリ開発の基盤乗り換え、コンテンツ表示速度やタッチ感度の改善等を中心としたユーザー体験の改善にフォーカスして行いました。
- モバイルアプリ基盤の乗り換え
Flutter アプリへの乗り換え
今後ユーザーにより価値を提供していくための基盤として、Flutter アプリを新規に立ち上げ、モバイルアプリ開発の基盤乗換えを行いました。
ビルド・リリースの CI/CD 基盤乗り換え
コミューンでは、クライアント様のアプリも含め、複数のモバイルアプリを管理しており、ビルド・リリース時間の短縮は生産性向上に大きく貢献します。 これまでは手動中心で行っていたリリース作業をできるだけ自動化することを目指し、CI/CD 基盤に Codemagic を導入しました。
多言語対応基盤導入
コミューンはアメリカにも進出しており、アプリケーションを開発する際には、多言語化を考慮必要があります。 そのため、立ち上げ初期から、flutter_localization を利用した多言語化基盤の導入を行いました。
- ユーザー体験の改善
一部 Widget 化
可能な範囲で画面の描画処理をモバイルアプリに寄せました。具体的には、ユーザーのサインイン画面などの、比較的処理を分離しやすい画面を対象に、Flutter アプリ内に実装を持ってきました。Flutter の Widget に実装を置き換えることで、WebView の時よりもタッチ感度を改善していく狙いがありました。
API 速度改善
頻繁にモバイルから呼び出されている API の速度改善を行いました。こちらは社内で別のプロジェクトとして、速度改善プロジェクトが立ち上がり、そちらのチームで担当して取り組んでいました。 Widget 化を推進すると同時に、まだ WebView を使っている箇所に関しては、API 側の改善をすることによって、コンテンツの表示速度を改善していく狙いがありました。
結果として、以下のような成果を上げることができました。
- モバイルアプリ基盤の乗り換えに関して
多言語化対応なども含め、今後モバイルアプリをスケールさせていくための基盤導入できました。 また、CI/CD 基盤に Codemagic を導入したことにより、ビルド・リリースを手動で行っていた状態から、自動で行える状態になり、生産性が向上しました。
- ユーザー体験の改善に関して
一部ページを Flutter 側で実装したことで、Footer のボタンの反応感度が上がるなど、アプリの操作性を向上させることができました。 表示速度の改善でも以下のように一定の成果を上げ、ユーザー体験を向上させることができました。
・iOS vs ブラウザ：15.7%改善(ファーストビュー表示時)、32.1%改善(ページ遷移時) ・Android vs ブラウザ：23.3%改善(ファーストビュー表示時)、12.8%改善(ページ遷移時) ※弊社サーバー計測システムにおける中央値比較
苦労した点
第一弾リプレイスにあたり、苦労した点を数点紹介したいと思います。
- 複数アプリを一つのリソースからビルドする
コミューンでは、さまざまなコミュニティを利用することができ、クライアント様ごとにアイコン等をカスタマイズした専用のアプリが存在します。そのため、複数のモバイルアプリが管理対象となります。 それらのソースコードは単一となっており、各種 OS ごとの設定や Asset などを、アプリごとに切り分けるための仕組みが必要となります。 上記の課題に対して、素材やアプリの設定などを書き換えるシェルスクリプトを用意しました。Codemagic では、ビルドを行う前に任意のスクリプトを実行することができます。 用意したシェルスクリプトをビルドの前に実行する設定を追加することにより、アプリごとの設定を反映できるようにしました。
- WebView 対応
ビッグバンリリースではなく、段階的にリプレイスをしていくため、WebView を利用している部分はまだ残っています。そのため、WebView と Flutter 内の実装とでやり取りを行う必要がある箇所がある程度生じました。 コミューンモバイルアプリでは、Flutter InAppWebView を利用して WebView を表示しています。JavaScript と Flutter の間では、JavaScript Channelを利用することによって、やり取りを行うことができ、それを用いて一部の処理を実装しています。 既存の仕様と照らし合わせながら、この辺りの連携の処理を記述するのには苦労しましたが、Web 側の実装を行うチームやプロダクトチームの快い協力等によって、リリースまで持っていくことができました。
- Flutter 知見のキャッチアップ
Flutter 経験者が少ないチームであったため、Flutter の知見にキャッチアップしていく必要がありました。 ここに関しては、個々人のキャッチアップはもちろん、チームでも Flutter 経験者のエンジニアを中心としたペアプログラミングの開催、また業務で得られたナレッジをシェアする会を定期的に開催するなど、チーム全体で知見をシェアすることに努めました。 また、得た知見やノウハウは徹底的にドキュメント化し、後から Flutter 未経験者が入ってきた場合でも、自分達が辿ってきた道のりを把握することができるように努めました。
今後の取り組み
今回のリプレイスで、モバイルアプリ内のユーザー体験改善で一定の成果を上げたとともに、今後アプリ体験をより良くしていくための基盤を整えることができました。
現在は既に第二弾リプレイスに取り掛かっております。上記で示したように、コミューンでは会社全体でプロダクト開発に対する理解があります。また、ユーザーからのニーズに基づいたやるべきことはたくさんあり、開発を加速させていくことがビジネスの成長につながることを確信できています。
今後も、引き続きモバイルアプリへ実装を寄せていくと同時に、モバイルアプリならではのユーザー体験を追加していくことによって、コミューンの目指す世界観を実現できるようなアプリ開発をしていく予定です。
おわりに
今回の記事では Flutter リプレイスプロジェクトの概要について書かせていただきました。まだまだ課題は多いですが、グローバルで利用されるユーザー体験の優れたアプリを作るべく、チームコミューン一丸となって奮闘しております。今後も少しずつ改善を加えていき、ユーザー体験向上に寄与していければと思っています。
コミューンではエンジニアを募集中です！少しでも興味のある方は気軽にカジュアル面談に申し込んでみてください！
