新卒チームで挑む、フルリモートFlutterアプリ開発

まだ入社していなかった学生チームが、一度しか対面したことのないメンバーと、コロナウイルスによる音楽祭中止と仕様変更といった難局を乗り越え、いかにして日比谷音楽祭アプリを開発しリリースに辿り着いたのか。 gRPCやFlutterを導入したことによる開発効率の向上や、0からチームでアプリを開発する経験ができたことの面白さ、入社前に経験することができて嬉しかった点などを学生目線でお伝えします。

Transcript

1. #bitvalley2020 新卒チームで挑む フルリモートFlutterアプリ開発
2. #bitvalley2020 砂賀 開晴（ぎもちん） 21卒 DeNA CTO室 群馬高専 5年 電子メディア工学科 技術　　Flutter, iOS, Xamarin, WPF, React 趣味　　爆音でライブBD観賞、アイマス Twitter @SKKbySSK_TC
3. #bitvalley2020 どんなアプリ作ったの？
4. #bitvalley2020 どんなアプリ作ったの？ 日比谷公園で行われる、日比谷音楽祭向けのアプリ(既に配信終了) 20卒・21卒がメインで開発 機能は主に4つ • 豪華アーティストによる、アプリ専用の音楽再生 • QRでアーティスト獲得 • 音楽祭のチケット機能 • 公園内のマップ機能
5. #bitvalley2020 どんなアプリ作ったの？ 日比谷公園で行われる、日比谷音楽祭向けのアプリ(既に配信終了) 20卒・21卒がメインで開発 機能は主に4つ • 豪華アーティストによる、アプリ専用の音楽再生 • QRでアーティスト獲得 クイズで獲得に変更 • 音楽祭のチケット機能 • 公園内のマップ機能 コロナで仕様変更に・・・
6. #bitvalley2020 どんなアプリ作ったの？ クライアント • gRPC • Flutter サーバー • gRPC • Go • Firebase
7. #bitvalley2020 どんなアプリ作ったの？ サーバー • gRPC • Go • Firebase クライアント • gRPC • Flutter gRPC？はじめて聞いた Flutter！？ 面白そう！
8. #bitvalley2020 gRPCってなに？
9. #bitvalley2020 gRPCってなに？ 共通の言語で 手間なく ハイパフォーマンスな通信を実現するフレームワーク
10. #bitvalley2020 共通の言語 • APIをIDL（インターフェース定義言語）を使って 定義する ◦ gRPCでは、Protocol Buffersを用いる ◦ エンドポイントも同時に定義できる • 定義したファイルをコンパイルすることで、各言 語の実装が生成される IDL
11. #bitvalley2020 共通の言語 • APIをIDL（インターフェース定義言語）を使って 定義する ◦ gRPCでは、Protocol Buffersを用いる ◦ エンドポイントも同時に定義できる • 定義したファイルをコンパイルすることで、各言 語の実装が生成される IDL 実装の手間がなくなる！！
12. #bitvalley2020 コードで見るgRPC 予約API
13. #bitvalley2020 コードで見るgRPC リクエスト内容 レスポンス内容 エンドポイント （プロシージャ）
14. #bitvalley2020 コロナでイベント中止
15. #bitvalley2020 コロナでイベント中止 大幅に仕様変更
16. #bitvalley2020 コロナでイベント中止 大幅に仕様変更 gRPCのおかげで高速対応
17. #bitvalley2020 Flutterってなに？
18. #bitvalley2020 Flutterってなに？ iOS, Androidアプリを作れるクロスプラットフォームフレームワーク • Googleが開発 • 単一のコードで動く • 描画にSkiaを利用　　　非常に高速に動作 • Hot Reload機能 • OS依存の機能も使える ◦ カメラ、オーディオ、GPSなど • state_notifier、BLoC、Providerが主流
19. #bitvalley2020 単一のコードで動く • OSに依存せず、ロジック・UIを記述できる • OSに依存する機能は、PlatformChannelを用いて呼び出し ◦ Swift/ObjC、Kotlin/Javaで機能を用意する PlatformChannel iOS Android
20. #bitvalley2020 独自の描画系を持つ Material App Scaffold AppBar Button Text Text • 宣言的UI ◦ SwiftUI、Reactに似た書き方 Column
21. #bitvalley2020 独自の描画系を持つ • レンダリングにSkiaを利用 ◦ 2Dゲームを作っているイメージ ◦ 1枚のネイティブViewに対して高速描画 • ネイティブUIの完全再現は厳しい ◦ 基本的にMaterial Designベース ◦ iOSっぽいUIもまあまあ作れる
22. #bitvalley2020 Hot Reload（Hot Restart） • コードを保存すると、コンパイルし直さなくても反映されるヤベーやつ • UIはもちろん、ロジックも反映される • アプリを再起動したければ、Hot Restartで解決 ◦ コンパイルせずにFlutterを再起動できる コンパイル回数が実質1回に！！
23. #bitvalley2020 デモ
24. #bitvalley2020 Xamarin.Formsとの比較 Flutter 描画 • Skiaによる独自の描画系 • ネイティブUIを模している 言語 • Dart • プラグインはSwift, ObjC, Kotlin, Java Xamarin.Forms 描画 • iOS、AndroidのViewをラッピング • ネイティブUIを完全に再現できる 言語 • C# • iOSやAndroidの機能も全てC#で書ける
25. #bitvalley2020 コロナでイベント中止 大幅に仕様変更
26. #bitvalley2020 コロナでイベント中止 大幅に仕様変更 Flutterのおかげで高速対応
27. #bitvalley2020 最後に・・・
28. #bitvalley2020 入社前に経験できて嬉しかった点 • DeNAでのアプリ制作を経験できた ◦ デザイナーさんや、PMの方、サーバー・クライアントサイドエンジニアの方と話ながら開発を進めた ◦ QA, QCを本格的にして頂いた • Flutter, gRPCといった今キテる技術を学べた ◦ 開発は新卒がメインで、クライアントサイドの全員がほぼ Flutter未経験、 しかもフルリモートという、かなり挑戦的なプロジェクトだった
29. #bitvalley2020 入社前に経験できて嬉しかった点 • アプリを0からチーム開発できた ◦ 開発方針決め ◦ メンバー同士で積極的にレビュー • 仕様変更が経験できた ◦ コロナが原因です ◦ Flutter、gRPCのおかげで爆速対応ができた ◦ 焦らず、基本に忠実に開発するのが一番良いことが学べた
30. #bitvalley2020 技術面の詳細な話は DeNA Engineers’s Blog にて掲載中です！！
31. #bitvalley2020 Twitter @DeNAxTech をフォローしよう！ 技術を徹底的に磨き、積み上げ、試行錯誤を繰り返しながら、 幅広いチャレンジを続ける DeNA のエンジニア。 彼らの考え方を見て面白いと思ってもらえるように、彼らの発信について 短く要約してお伝えしてます。ぜひ Twitter フォローお願いします！！
32. #bitvalley2020 ご清聴ありがとうございました！