はじめに

メリークリスマス！サイバーエージェントのCTO統括室というところでクロスプラットフォーム開発担当をしている三島木です。CyberAgent Advent Calendar 2021 の最後の記事です。

2021年、サイバーエージェントにおける、モバイルアプリのクロスプラットフォームの取り組みについてにもありますが、サイバーエージェントではFlutterプロジェクトが5件、Kotlin Multiplatform Mobile(以下KMM)プロジェクトが4件立ち上がり、クロスプラットフォーム技術の導入元年と言って良いような一年となりました。

この記事ではそれらのプロジェクトの実態を紹介しながら、この一年を振り返れればと思います。

新規開発プロジェクトでのクロスプラットフォーム開発

今年サイバーエージェントでは5つのクロスプラットフォーム技術を用いた新規開発プロジェクトが進行していました。どのような経緯で技術が採用されたのか、どのようなチーム構成なのか、これらのプロジェクトを簡単に紹介します。

2年ぶりにFlutterを採用したFANBASE ARENA

2020年の後半に株式会社OENのFANBASE ARENAプロジェクトが立ち上がりました。FANBASE ARENAは、オフィシャルファンコミュニティアプリを開設することができるエンタメDXソリューションです。

当社でのFlutterのプロダクション初採用は2018年のREQUというプロダクトでしたが、実に2年ぶりの採用となりました。Flutterの技術が成熟してきていた事もあり、少数精鋭での立ち上げを意識して採用に至りました。

FANBASE ARENA(ファンベースアリーナ)はライブ配信やギフティングなどの機能を持ち、いわゆる「サイバーエージェントクオリティ」のメディアサービスアプリをFlutterで実現するという大きなテーマに果敢にチャレンジしています。

アーティストがiOSやAndroidから動画を配信し、そのコンテンツを多数のユーザーがリアルタイムに視聴する事ができる体験をFlutterで実現するため、配信側ではAgoraのSDKを使用して撮影した動画をRTMPにpushしており、視聴側では受け取ったHLSを再生するための動画プレーヤーをネイティブで実装してFlutterから使えるようにしています。

開発チームのエンジニア数は4人で、全員iOS開発を強みに持つエンジニアです。Flutter開発未経験のメンバーが、日々技術共有の機会を設けながら開発を進めています。

Androidアプリの追加開発とiOSアプリ置き換えのWINTICKET

WINTICKET(ウィンチケット)は、公営競技のライブ映像の視聴・投票が可能なインターネット投票サービスです。

3月頃、WINTICKETでAndroidネイティブアプリ開発プロジェクトが立ち上がりました。WINTICKETは現在iOSのネイティブアプリとPWAを提供していますが、今回Androidネイティブアプリを提供するというニーズに対し、後のiOSアプリのリプレイス、コードベースの統一を視野に入れ、Flutterが採用される運びとなりました。

投票サービスの特性上、膨大な情報を提供する必要があり、その際のView構造やそのシームレスな表示、複雑なビジネスロジックに難易度があります。画面数も100を超え、PinPを始めとした膨大な機能を持つ大規模アプリケーションです。

今回の開発にあたって既存iOSアプリを担当していたメンバーやWeb担当のメンバーが開発に参画した他、他部署からAndroidメンバー、iOSメンバーが異動、デザイナー出身メンバーも参画し、現在は9名のエンジニアがFlutterアプリ開発を行っています。

既存アプリをリプレイスするAmebaマンガ

同時期にAmebaマンガのアプリリニューアルプロジェクトも立ち上がりました。

Amebaマンガは250社以上のコンテンツ提供元より20万冊の電子コミックを取揃える漫画サービスです。

開発中のアプリはWeb版のAmebaマンガで購入した漫画を端末内にダウンロードし、圏外状態でも読めるようになる本棚アプリです。

今回アプリに対してテコ入れを行うことが決まった当時、すぐに開発に従事可能だったのがAndroidエンジニアのみだったこともあり、Flutterによるクロスプラットフォーム開発に踏み切りました。

電子書籍の規格にePubというものがありますが、その形式のデータを読めるようにする必要があります。既存アプリのリニューアルでもあるため、Webと同様のePubリーダーライブラリを利用することになりました。アプリの言語比率としては、Dartが38%になっています。(Viewer部分の実装はePubリーダーライブラリを使用するためiOSとAndroidそれぞれネイティブで実装しています）

Flutter開発に関わるメンバーは4名で、Androidエンジニアが2名、iOSエンジニアが1名、サーバサイドエンジニアが1名です。初期メンバーは1名で、デザインが仕上がるまでの間に flutter-architecture-blueprints を参考にモックを作りながらFlutterのスキルを習得していきました。なんと殆どのメンバーが兼務で開発が進められています。

FANBASEの経験値を活かした立ち上げ: WRESTLE UNIVERSE

WRESTLE UNIVERSE(レッスルユニバース)は株式会社CyberFightの提供するプロレス動画配信サービスです。

現在Webで提供されていますが、5月頃にネイティブアプリ開発プロジェクトが立ち上がりました。ネイティブアプリを提供するにあたって、FANBASEの資産を活かしながら開発するためにFlutterを採用しました。

動画再生機能のプレイヤーpluginはFANBASEで開発されたものを利用して開発を進めました。

ユーザーから要望の多いCast機能にも対応する予定になっていますが、Cast対応はFlutter公式のpluginがまだ存在していないため、自分たちで一からpluginを作成しています。

開発メンバーは3名。Androidエンジニア1名ジョイン後数ヶ月の期間を経て、iOSエンジニアが2名ジョイン。Flutter未経験からの開始で、勉強をしながら実装を進めていきました。それでも最初の1ヶ月ほどで基本的な理解を行い、実装に移っています。

Windowsアプリで印刷・通知機能を提供: 薬急便

薬急便は、処方せん事前送信・オンライン服薬指導、オンライン診療を行うためのサービスです。

基本的にはWebにて展開されているサービスですが、医療機関での印刷・通知機能をFaxから代替提供するため、薬急便コントロールパネルという店舗のパソコンで利用するためのWindows版アプリをFlutterで開発しました。8月頃に開発を開始し、10月に提供開始しています。

開発メンバーは1名で、薬急便のWebフロントエンドエンジニアが個人的に技術検証を進めており、自ら提案して実現した形です。

薬急便のFlutterアプリ開発に関してはこちらの記事も御覧ください。

新規プロジェクトにFlutterを採用して

Flutterを採用する前に抱いていた懸念としては、UI/UXがリッチなプロダクトの作成をするうえで致命的に足りない機能などがないか？ということでした。これに関しては大方の予想通り、Flutterの豊富な既存パッケージを使ったり、オリジナルのコンポーネントの作成を行うことで、特に大きな問題にぶつかることなく開発をすすめることができています。

その反面、予想以上に大きな工数が必要となる場面があることもわかってきました。例えば、既存のパッケージでは要件を満たさない場合は独自に開発を行う必要が出てきますが、FlutterのUI上で動画のコンテンツを保護しつつ再生を行うなど、複雑な状態を管理しながら必要な要件を満たしていくにはネイティブ側の機能実装に加え、各プラットフォームの違いを吸収することを念頭に置いたネイティブとのブリッジ部分の設計と実装が必要になります。また、実装者がいずれかのプラットフォームに精通していない場合には実装や動作確認のコストが想定よりも大きくなりがちです。

ほかにも、OSのバージョンアップ直後に最新のOSの標準UI/UXに準拠できない点も無視できません。

とはいえ、これらのことを踏まえた上でも、各プラットフォーム間での実装の差異を減らしたり開発リソースを縮小することができる可能性などを勘案すると、今後のサービスの運用を長い目で見たときに大きなアドバンテージをもたらしてくれると思います。

運用中のプロジェクトでのクロスプラットフォーム開発

サイバーエージェントには長期的に運用を続けている大規模なサービスが複数あります。それらのサービスの提供先プラットフォーム間の差異を埋めながら効率的・安定的にサービスを開発・運用し続けることは共通の課題となっており、運用中のプロジェクトにもクロスプラットフォーム技術の導入が進んでいます。

今年の動きではありませんが、ドットマネーでは2018年時点で新規アプリ開発時にKMP（Kotlin Multiplatform Project。当時はKMMがまだ存在しませんでした）を採用しました。iOS/Android担当エンジニアそれぞれ1名ずつの体制での開発でしたが、開発効率の向上に大きな手応えを感じていました。

近年、Fensi、ABEMA、タップル、Amebaといった運用中のプロジェクトでKMMの検証・導入が進められています。

KMM導入のモチベーションは主に、プラットフォーム間の機能差を無くすこと、複数プラットフォーム向け開発の工数を削減することですが、これらを満たすためにFlutterと比較して既存のプラットフォームに最適化された機能を活かしつつロジックを統一できること、既存のAndroid実装の資産を活かせること、現行の機能開発と並行して導入がしやすいことなどが選定理由として共通して挙げられています。

導入の状況ですが、Fensiの開発チームでは今年3月頃からKMMの検討を開始し、4月から順次導入という方針で導入が進められています。2名の専任エンジニアが検証を行い、ロガーライブラリなどから共通化を開始しました。現在は順次機能毎に導入を進めている状況です。ABEMAでは今年に入ってから検証を開始しており、現在は2名のエンジニアが専任で検証にあたっています。APIクライアントから導入を開始し、一機能に導入して課題を洗い出しています。タップルでは1名が専任、2名が兼任でKMM化に携わっており、ネットワークレスポンスやUIのモデルをKMM化することから始めつつ、機能実装の導入検証を行っているフェーズです。Amebaでは兼任4名体制で進めており、各機能への導入時期の検討を行っています。

KMMの導入を進めてどうなのか

KMMは既存プロジェクトへの導入が主なため、基本的には検証を行いながら段階的に導入を進めている状況です。とりあえず導入するという段階はどのプロジェクトも達成しており、既存のUIやAndroidの資産を活かして導入することができるのは既存プロダクトにとって大きなメリットとなっています。

一方でどのプロジェクトにも言えることですが、KMMに限らずクロスプラットフォーム技術を運用中のサービスに適用するには一定のコストが掛かります。iOS/Android間の仕様や設計の差異をどのように吸収するかを考える必要がありますし、バージョン管理等含めた開発フローなども検討する必要があります。また、そもそもまだ安定版ではありませんし、メモリ管理やiOS環境とのブリッジには課題もあります。

それでもKMM導入の走り出しとしては大きな問題なく導入を始められています。Kotlinでの開発ということでiOSメンバーの参画や学習コストへの懸念もありますが、各プロジェクトでオンボーディングやチュートリアルを充実させたり、ペアプロを行うなどしながら導入を進めています。実際の開発効率への寄与がどの程度になるかがはっきりするのはまだこれからといったところですが、引き続き導入を進めながら知見を貯めていきたいと思います。

ABEMAの事例についていくつかの資料が公開されていますので、こちらも御覧ください。

まとめと来年に向けて

この一年で多数立ち上がったFlutterとKMMを採用したプロジェクトについて紹介させていただきました。主に新規サービスの開発や既存アプリのリプレイスにFlutterが採用され、既存のサービスにはKMMが採用されるケースが多くなりました。

今年始めの段階では5、6名規模だったクロスプラットフォーム開発者ですが、現在では30名を超えるエンジニアがクロスプラットフォーム開発に携わっています(記事の内容より既に増えていました)。Flutterプロジェクト担当者の中にはもちろん以前からFlutterを研究していたエンジニアも居ますが、新卒メンバー含め、このタイミングでFlutterにチャレンジしたエンジニアのほうが大多数です。今後既存のプロジェクトにKMMの導入が進むことからも、多かれ少なかれクロスプラットフォーム技術に関わるエンジニアは更に増えていくでしょう。

紹介してきたプロジェクトは実際にはほとんどがそれぞれ別の子会社に属するプロジェクトですが、お互いにコミュニケーションを行いながら開発を進めています。プロジェクト毎に独立性を保ちつつも有機的に繋がるサイバーエージェントの強みが活かせていると感じています。

クロスプラットフォーム技術にフォーカスした知見の外部への発信も行われています。2020年末から Flutter × Kotlin Multiplatform by CyberAgent として勉強会を開催してきましたが、この12月で5回目を迎えました。

また11月にはFlutterをメインに扱う国内初開催のカンファレンスであるFlutterKaigiが開催され、弊社から3名が登壇しました。

DXが叫ばれる世の中で、さまざまなドメインにおける高品質なモバイルアプリケーションの要求は増すばかりです。弊社では来年以降も多くの新規サービスの立ち上げを見込んでいますが、一方で技術者の不足も深刻です。クロスプラットフォーム技術による品質・生産性向上には大きな期待を寄せています。

来年は現在開発中のサービスのリリースがさらに増え、運用を含めたクロスプラットフォーム開発の実態についてさらに知見が深まることと思います。今後もサイバーエージェントではクロスプラットフォーム技術を活用した品質・生産性向上を模索していきます。

近日、特に大規模なFlutterアプリとなるWINTICKETについての連載も予定しています、お楽しみに！

サイバーエージェントではモバイルアプリのクロスプラットフォーム開発を進める仲間を募集しています。興味をお持ちの方は是非ご応募ください！

本記事の執筆には伊藤恭平さん(KyoheiG3)、各プロジェクトの皆さんに多大なご協力を頂きました。ありがとうございました。

モダンな技術と開発戦略で挑むABEMA Androidアプリのリニューアル

2021年 Amebaのネイティブチームが取り組んだこと