アーカイブ動画
サイバーエージェントの事業や技術スタックを紹介
サイバーエージェントはメディア・インターネット広告・ゲーム事業を中心に事業を展開しており、創業来25期連続で増収を継続。直近のグループ連結売上高は7105億円、従業員は約6000名になる。数多くある事業の中から、今回はAI事業とメディア事業の特徴やFlutterをはじめとするモバイル開発の技術スタックについて、サイバーエージェントの森眞佑子氏から紹介された。
〈AI事業〉
AI事業本部は小売、医療、行政、航空など、さまざまな業界のパートナーと協業しながら、チラシのデジタル化やスマホアプリの開発やDX推進を支援する事業を手がける。特徴としては、B2B2Cの事業モデルであり、共同開発を行っている点だ。
クライアント企業と協業する新規開発案件や、数百万人規模のユーザーが使うアプリ開発も多いため、モダンな開発と広い業務知識が得られる魅力的な環境がある。
〈メディア事業〉
メディア事業では、新しい未来のテレビ『ABEMA』など、大規模から中規模までのサービスを手がける。エンジニアは堅牢な設計やワークフローの実装、ユーザー体験をデザイナーやプランナーと共に作り込む役割を担う。
メディア事業内には、この後のパネルトークで登場する2人が登場するCAM、タップルも含まれており、 両社の特徴ならびに得られる経験は、中規模開発の経験が積めること。加えて、SwiftUI、KMM（Kotlin Multiplatform Mobile）、BFF (backend for frontend)など、最近注目されている技術やツールを使った新しいチャレンジができる点が紹介された。
トヨタ自動車が展開する新たな事業や開発環境を紹介
トヨタ自動車からは田窪氏が登壇し、トヨタが目指す未来の社会や取り組みについて紹介した。田窪氏と今回の登壇者が所属するコネクティットカンパニーは、モビリティの内部と外部環境をつなぐ車載器などの製品や通信サービスの企画開発から運用までを手がける。
これまでリアルな世界で培ってきた自動車産業に関する情報を、バーチャルとコネクティッドさせるメタバースやデジタルツイン的な取り組みなども行っている。
事業は以下の図のように、大きく8つの領域に分類されている。
車載器などから得られたデータを活用する取り組みも活発だ。例えば、ドライバーに対するアフターサービスでの活用や保険サービスなど、まさにモノからコトへのシフト。これまでなかった自動車メーカーの枠を超えた新たな領域のサービス開発も手がける。
中でも特徴的なのが、「次世代クラウド・新規事業」だ。空飛ぶクルマ、フライングモビリティの開発や、5Gやクラウド関連の新規事業の企画開発などを行う。開発の進め方は、創業時から受け継がれているトヨタフィロソフィーに則り、パートナー・ソフトウェア・ハードウェアの三位一体で進める。
マルチメディア車載器における、実際の開発フローも紹介された。マルチメディア車載器とは、カーナビ・オーディオ・メーターなどを指す。
働く環境は東京本社のある大手町や豊田本社、名古屋市に加え、アメリカ・オーストラリア・ベルギー・中国・タイ・シンガポールなど、世界各地に拠点があり、海外で活躍しているメンバーも多い。
また、大手町には全体の3分の1ほどのメンバーが働いており、ソフトウェア開発に携わるメンバーの割合は約25％である。
【パネルトーク】Flutter開発エンジニアが本音で対談
続いては、両社合わせて4名のFlutter開発エンジニアによるパネルトーク。まずはFlutterを使うまでのキャリアを紹介した後、Flutterの魅力について熱いトークが展開された。
トヨタ自動車株式会社 コネクティッド先行開発部
デジタルコクピットソフト開発室 谷畑 智彦氏
谷畑：大学は物理系でC++による数値計算を学び、2019年に入社。工場の生産技術のDXを担当していました。フロントエンドやモバイル開発の経験はありませんでしたが、2021年から次世代カーナビ開発にFlutterエンジニアとして参画。Flutter歴は1年10カ月ですが、プライベートでパズルアプリやゴルフのスイングを記録するアプリを作っています。
トヨタ自動車株式会社 コネクティッド先行開発部
デジタルコクピットソフト開発室 森下 真伍氏
森下：2020年に新卒で入社し、物流関係システムの企画や設計を担当。2021年から、次世代カーナビの開発プロジェクトにソフトウェアエンジニアとして参画。フロントエンドのFlutterだけでなく、CやC++といったバックエンド領域も担当しています。
株式会社CAM Creative Division 石川 雅之氏
石川：2012年に新卒入社。バックエンドを担当後、2017年からモバイルアプリのiOS開発を担当。現在はFlutterを使った新規アプリの開発を担当、ネイティブ組織のマネージャーも兼務しています。
株式会社CAM Creative Division 坂上 翔悟氏
坂上：2017年に新卒入社し、ライブ配信アプリの iOS を担当。iOS技術領域責任者として、社内アプリの品質担保や設計を担当後、2022年からFlutterを使った新規アプリの開発に携わっています。
Flutterの魅力１：Flutterコミュニティを中心に開発
坂上：FlutterはOSSなので、有志による新しい機能の追加やイシューが逐次確認できるなど、スピード感を持ちながら作り上げている。コミュニティ自体もすごく好きですね。SwiftUIやJetpack Composeでも宣言的UIがトレンドになっていますが、Flutterはその先駆けなので、優れている点も多いと思います。Flutterは海外の人が主体ということもあり、規模が大きいとのイメージがあります。
石川：ホットリロードが便利だと思います。デザイナーとの確認時にもビルドする必要がなく、ピクセル単位の細かな部分まで確認することができます。オープンソースであることも魅力です。欲しい機能やプラグインなどもたくさん開発されていますし、そのロジックを見ることができるので勉強になります。
谷畑：ホットリロードは僕たちもかなり恩恵を受けていて、開発スピードが上がったと思っています。コードの中身を見ることで勉強になるのはまさに同感です。実際、Flutter内部のフレームワークから実装を学ぶこともたくさんあります。
クロスプラットフォームなので、開発したアプリをブラウザでも見ることができます。デザイナーやプロダクトオーナーに確認しながら、イメージのすり合わせやフィードバックができることも大きなメリットですね。
森下：以前の車載器開発では、各社独自のフレームワークやUIキットで開発を行っていたため、VSCodeが使えないなど、OSSの恩恵を受けにくい面がありました。Flutterは普段使い慣れているツールで開発を行うことができます。
Flutterの魅力２：クロスプラットフォームでの開発
谷畑：クロスプラットフォームで開発できる点も好きです。現在の業務で携わっているカーナビの組み込み開発も、Flutterで開発しています。モバイル開発者が組み込みもWeb開発もできる汎用性の高い技術だと思います。
坂上：Flutterであれば1つのコードでAndroid、Macアプリ、Webブラウザなど何でも書ける強みがありますね。
森下：組み込みの場合は想定した動きをしないケースもあります。そこで、FlutterのEngineにも手を加えています。Engineの部分はC++などで書かれていますが、その部分は自分たちでビルドしたものを使っています。
坂上：かなりニッチな使い方だと思いますが、そこまでしてもFlutterで開発するメリットは何でしょう。
森下：まずはモダンな開発環境であること。もう一つは、ビルドしたときのパフォーマンスが速く、開発のスピードが高まることです。
谷畑：私たちがFlutterを採用した大きな理由は、レンダリングエンジンのパフォーマンスやリフレッシュレートが高いことですね。
Flutterの魅力３：開発工数が減る
森下：Flutter導入の決め手となったのは、トップダウンでの意思決定もありましたが、グローバルで開発を進めていることもあり、多くのエンジニアがFlutterでの開発に挑戦したいと思っていたからです
坂上：サイバーエージェントも開発工数が大幅に減らせることです。それまではモバイルのOS別に開発していましたが、Flutterを採用することでまとめて開発できるようになりました。開発コストの大幅な削減になったと感じています。
谷畑：React Nativeなどは候補に挙がらなかったのですか？
坂上：KMM（Kotlin Multiplatform Mobile）も含めて検討しましたが、OSSコミュニティが強いことや注目されているツールであること。そしてトヨタさんと同じく、トップダウンでの意思決定の部分も大きかったですね。
ただ、実際に導入してみるとデメリットもありました。FlutterはOSSなので、ネイティブなAPIとの連携は共通化できない部分も出てくる可能性があることです。
参加者から寄せられた質問にも回答
参加者からも多くの質問が寄せられた。その中からいくつか紹介する。
Ｑ．パフォーマンスが高まる点やメリットは？
森下：一つのメリットとしては、ビルドしてバイナリ形式になる、Node.jsサーバーなどが必要なくなる点です。
Ｑ．FlutterならではのCI/CDで工夫したこと
森下：テスト結果を測る際に、Flutterに搭載されているカバレッジツールを使っていますが、別のツールが必要なく便利です。
坂上：テストツールは弊社も導入しています。Flutterにはスナップショットテスティングの機能も搭載されており、自動でスクリーンショットを撮ることができます。さらにreg-suitというOSSを使い、プルリクが出たら差分を見て判断するシステムを実装しています。
石川：当初はreg-suitによるレポートファイルは、GitHubのプルリクエストに貼り付けていましたが、セキュリティ面を考慮してAmazon S3に移行しました。アクセスにはCloudFrontを使うことで、社外からのアクセスは遮断する対策を行っています。
Ｑ．デザイン連携はどうしているのか
谷畑：FigmaからFlutterをコンバートする仕組みを作り、デザインのプロパティをコンポーネントに紐付けています。
Ｑ．ESlintは使っているか？
森下：Flutter版を使っています。
谷畑：コードの自動修正機能はとても重宝しています。
坂上：コードの検証ツールも、コミュニティのおかげで純正ツールもあり、とてもありがたいと思っています。
Ｑ．技術関連の情報源は？
坂上：GitHubですね。1日に1回はリポジトリやイシュー、プルリクなどを見て、開発の進捗や課題をキャッチアップしています。TwitterでFlutterに関するツイートなども参考にしています。
森下：私もGitHubのソースや書かれているコメントを見ています。メソッドの説明だけでなく、ロジックについてのコメントなども参考にしています。
谷畑：私はBLoC（Business Logic Component）を使っているのですが、BLoCの作者が手がけたサンプルアプリの組み方などを見て、参考にしています。
Ｑ．複数拠点で取り組む際の工夫について
谷畑：時差もあるので、SlackやGitHubのコメント、プルリクなどを通してコミュニケーションしています。いつでも自由に情報を共有できることが、打ち合わせよりも効率的だと思っています。
Ｑ．開発体制について
谷畑：基本的にリリース日は決まっているので、開発計画という意味ではウォーターフォールです。ただ組織としてはスクラムを組み、各チーム単位で動いているので、コミュニケーションという意味ではスクラム開発と言えると思います。
石川：1週間スプリントで進めています。基本的にコンポーネントベース、機能単位でリリースしています。プルリクやコミットも含め、なるべく細かく切るようにしています。
Ｑ．Flutterを勉強する上での難しさは？
石川：状態管理ツールのriverpodや、SwiftUIの扱いが難しいと感じました。
坂上：riverpodやBLoCは事例をしっかりと書かれている方が多いので、じっくりと見ることが大事ですね。また、ウィジェットのコア、エレメントの部分を見ることもできるので、そのコードを見て学んでいくと、Flutterの習熟度が大分変わってくると思います。
Ｑ．アーキテクチャはどう設計しているか
森下：メインにFlutterのレイヤーを置き、そこからLinuxベースの車載に搭載されているさまざまなサービスをRustでつないでいます。コンポーネント間の通信では、リモートプロシージャコール（remote procedure call／RPC）をC++でつないでいます。一つひとつがサーバーのようにFlutterがリアルタイムで監視している。Webの構成に似ています。
トヨタ自動車株式会社
https://global.toyota/
トヨタ自動車株式会社の採用情報
https://www.toyota-recruit.com/career/
株式会社サイバーエージェント
https://www.cyberagent.co.jp/
株式会社CAMの採用情報
https://hrmos.co/pages/cyberagent-group/jobs/0000657
株式会社タップルの採用情報
https://hrmos.co/pages/cyberagent-group/jobs/1793556056302227465
関連するイベント
