TECHHILLS-年間300万人が利用するファッション通販アプリをFlutterでリプレイスした話-

Transcript

1. 年間300万人が利用する ファッション通販アプリをFlutterで リプレイスした話 クルーズ株式会社 鈴木 優一 #TECHHILLS
2. 自己紹介 経歴 ・2008年にモバイルコンテンツプロバイダに入社 ・2012年クルーズ株式会社に入社 入社後は技術統括部門の責任者として全社の開発平準化や採用技術選定、 アーキテクト業務に従事のほか、品質管理部門やCS部門、人材育成部門 の運営に携わる。 ・2015年に執行役員就任 最高技術責任者CTO グループのIT技術・セキュリティ分野全般を担当する。 鈴木 優一 クルーズ 株式会社 執行役員 CTO 兼 CROOZ SHOPLIST株式会社 技術統括部長 #TECHHILLS
3. ・CROOZについて ・アプリリプレイスの背景 ・Flutterの採用に至る経緯 ・POCフェーズ（技術検証）での実施内容 ・製造フェーズの進め方 ・リプレイスで発生した諸問題 ・Flutter導入を検討す方々へのアドバイス ・まとめ 本日のAgenda #TECHHILLS
4. １ CROOZに ついて #TECHHILLS
5. CROOZ について クルーズは『SHOPLIST.com by CROOZ』を軸に、EC領域に関連する 複数のサービスを展開する「ECソリューションカンパニー」です。 モバイル コンテンツ 受託開発事業 IT業界に 特化した 人材派遣事業 2001年 検索エンジン CROOZを 活用した ネットワーク 事業 2002～ 2009年 事業売却 コンテンツ ブロバイダ 事業 ソーシャル ゲーム事業 2003年 2007年 Mobage 参入 2007年 ネイティブ ゲーム市場 参入 2014年~ モバイル コマース 事業 2008年 2016年~ 事業撤退 ファッションEC SHOPLIST 2016年~ 10業種20社を超 えるグループ経営 で1兆円を目指す 時代の流れに合わせメイン事業を 5回変更 #TECHHILLS
6. CROOZ について 現在EC領域を中心にゲーム領域/ 広告/メディア領域で 事業の展開をしています #TECHHILLS
7. CROOZ SHOPLISTについて 「一番お得、ここにしかない商品の提供」をビジョンに、レディー ス・メンズ・キッズのファッションアイテムを中心にインテリアや コスメや雑貨に至るまで、幅広いジャンルのアイテムをまとめて購入 できる通販サイト「SHOPLIST.com by CROOZ」を運営しています。 #TECHHILLS
8. 2 アプリ リプレイス の背景 #TECHHILLS
9. アプリリプレイスの背景 製造効率を上げたかったから ・当時iOSは XCode / Swift の併用、AndroidはJava/Kotlin 併用で 実質4言語を併用して開発保守を行っていた ・言語レベルの差異ではなく設計レベルで両OSでの違いがあり、仕様調査や バグ修正もOS個別の実装だった ・ XCode ⇒ Swift 、 Java ⇒ Kotlin への移行も新規開発・改修案件都度の 実施で期日を持って完了する見通しが立てづらかった 上記３点の理由より、クロスプラットフォーム言語を使ってアプリ リニューアルすることで開発効率を上げられないかを検討することに #TECHHILLS
10. Flutterの採用に至る経緯 戦略としては ・両OS間で設計、実装は一致させる ・個別OSごとの詳細ロジックはPluginで吸収。必要に応じてネイティブ言語で書く。 ・テストは両OSごと実施となるが、それ以外は原則両OS共通とする ことで開発の生産性の1.8倍を目指す。 ・上記をクロスプラットフォーム言語というソリューションで解決 させる #TECHHILLS
11. Flutterの採用に至る経緯 ・上記を実現するためにFlutter、React Native 、Xamarinについて ネット文献などで比較し、Flutterを選定。 ・主な比較の視点としては以下 ・コミュニティの発展度合い … 例）GitHubのスター数 ・言語のトレンド性 … 例）Google トレンドの推移 ・担当エンジニアの意向 ・その後POC実施して本格製造を進めることに #TECHHILLS
12. ３ POCフェーズ での実施内容 #TECHHILLS
13. POCフェーズ（技術検証）での実施内容 POCフェーズでは以下の内容についての検証を実施 ①サポートするOSバージョンへの適合状況の確認 ②現在導入しているSDKの対応状況 ③パフォーマンス ④コードの共通化できる量 #TECHHILLS
14. POCフェーズ（技術検証）での実施内容 POCフェーズでは以下の内容についての検証を実施 ①サポートするOSバージョンへの適合状況の確認 →問題なし。 両OSとも適合している ②現在導入しているSDKの対応状況 →OK 正確にいうと1つのSDKが非対応。ただし提供元より Flutter対応版SDKを受領できることとになり、開発上のリスク はなくなった。 #TECHHILLS
15. POCフェーズ（技術検証）での実施内容 POCフェーズでは以下の内容についての検証を実施 ③パフォーマンス劣化がないことの確認 ホーム画面をFlutter実装し、現行アプリと表示速度を目視で評価し 劣化なしを確認 ④コードの共通化できる量 両OS共通言語で実装できることを確認 上記４点について約1.5人月かけて検証し、このまま進めても期待する 製造効率の向上が見込めると判断して本製造に入ることに #TECHHILLS
16. POCフェーズ（技術検証）での実施内容 補足：POCの実施体制とメンバーについて ▪実施体制 ・メンバー2名（うちFlutter案件専任は1名） ▪メンバー 未経験者１名＋経験者（業務委託）１名にて実施 #TECHHILLS
17. 4 製造フェーズ の進め方 #TECHHILLS
18. 製造フェーズの進め方 以下の計画で進めることに １．特定時点の現行アプリと同じ機能をFlutterにて機能単位で開発 ２．上記が完了したらそこからの現行アプリとの機能差分について開発 ３．通しデバッグ ４．任意アップデートにて公開 問題が発生したら、ネイティブ実装版アプリに切り戻し申請。 問題なければ、強制アップデート #TECHHILLS
19. 製造フェーズの進め方 図で説明すると以下 公開版 アプリ x.x.x版 x.x.y版 x.x.z版 Flutter版 アプリ x.x.x版 ①まず開発開始時点の現行アプリ と同じ機能を開発 x.x.z版 ②機能差分を開発 この間はリリース凍結 x.y.x版 #TECHHILLS
20. 製造フェーズの進め方 アプリ開発環境 ・Flutter SDKのバージョンは2系の当時最新版を使用 ・State管理にはReverpodを使用 ・その他SDK、パッケージについては特に明確に指定なし ・Flutter SDKのバージョン管理にはfvmを使用 開発体制 スタート時点はメンバー３～４名。内訳は ・正社員１名（経験10年以上のベテラン） ・正社員１名（入社一年目の新卒） ・業務委託１～２名（うちFlutter経験者１名） #TECHHILLS
21. 製造フェーズの進め方 サーバ側 アプリのリプレイスに伴い、サーバ側でも技術的な新規チャレンジとして 以下を実施 ・アプリ to サーバ間通信をHTTPSからGRPCに変更 ・GRPCサーバを実行する基盤としてのFargateの導入 #TECHHILLS
22. AWS Fargate 製造フェーズの進め方 サーバ側 As Is アプリ DNS ロードバランサ Auto Scaling group Web サーバ(PHP) HTTPS HTTPS HTTP To Be アプリ DNS ロードバランサ Auto Scaling group Web サーバ(PHP) GRPC GRPC HTTP HTTP GRPC Proxy(C#実装) HTTP 内部DNS 内部NW 外部NW アプリ 起動時 DNS ロードバランサ Auto Scaling group Web サーバ(PHP) HTTPS HTTPS HTTP 動作モード取得API API API GRPC動作かHTTPS動作化を返却 #TECHHILLS
23. 製造フェーズの進め方 スキル転換の計画 ・毎週4時間学習時間を確保し、個人単位で修得 ・機能差分を埋める段階で、既存アプリの開発を停止しネイティブアプリ 開発メンバー全員を機能差分の実装に入れる形で計画 #TECHHILLS
24. ５ リプレイスで 発生した諸問題 #TECHHILLS
25. リプレイスで発生した諸問題 諸々発生…。 大別すると ・Flutterリプレイスだから発生した問題 ・Flutterリプレイスには直接関係なく、リプレイス案件固有の問題 #TECHHILLS
26. Flutter起因の問題 WebView周りの不具合 ・Cookie制御周り ・mixed contentがあった場合の表示 ・java script の動作 などWebViewで表示するHTMLコンテンツ周りの問題が多く対処に難航 最終的に、PackageをFlutter公式のwebview_flutterからflutter_inappwebview に変更するのと、アプリ とWebView内のHTTP通信間のデータの受け渡しを CookieからHTTP Headerに変更することで不具合が解消 #TECHHILLS
27. Flutter起因の問題 検索などキーボード入力直後のクラッシュ テキストボックスからLost Focusしたタイミングでアプリがクラッシュする 事象が発生 そのタイミングで関係のない画面までrebuildされていることまでは特定できて いたものの、なぜrebuildが実行されるのかの原因がつかめず、1か月以上問題 解決できなかった。 結論でいうとキーボード表示時にMediaQueryがrebuildを実行させていること が特定でき、回避ははできたものの、回避に1か月以上かかってしまった #TECHHILLS
28. Flutter起因の問題 習得コスト 具体的には ・言語としては習得したと言えるけど、実際に組もうと思うように進捗しない ・なんのクラスを使ってUIを作るのが最適ががトライアンドラーで実装して 見ないとわからない。 ・言語としての習得コストがメンバーによって異なるために一律で人員計画 に落としづらい。 など。 #TECHHILLS
29. リプレイス案件固有の問題 正常動作がわからない問題 ・初期リリースから5年以上経過しており、画面仕様以外ほぼドキュメントが 無かったため、既存のアプリのソースを元に機能をスクラッチで開発。 仕様抜けが多少あってもまずは製造し切ってしまい、デバッグフェーズで 問題点としてチケット化し修正していく計画だった。 ・一方で「今動いているものが正常」という状態で正常系動作というものが まとまっている文書類がなく、何が正常な動作かが判断できない状況に… ・プランナーに協力してもらい、デバッグ項目書（合計約4,100項目）を新規 に整備し、各項目ごとに動作確認。 #TECHHILLS
30. その他発生した問題 海外製Android端末固有の不具合 ・WebView内でテーブルタグが正しく展開できない ・メモリ消費量が多く、特定画面で固まる など。 対処としてはデバイスごとにWebViewのパラメータを調整する、スタックする 画面数や表示する商品写真枚数を減らすなど調整。 #TECHHILLS
31. ６ Flutter導入を 検討する方々へ アドバイス #TECHHILLS
32. Flutterでアプリをリプレイスしてみて 製造効率に対する評価 ・クロスプラットフォーム言語という手段で実現しているのですごく乱暴に 言うと2倍にはなっている。 → 両OSを別々のエンジニアが開発しなくてもよくなったため ・一方でOS、デバイス固有の問題で処理分岐は発生するが発生は軽微。 → クロスプラットフォーム言語の場合、分岐で済むので両OS個別で記載するよりは はるかに工数は少ない。 メンバーからの定性評価 ・開発言語の統一できたことに加え、古く仕様が不明瞭なコードを一新できた ことで調査実装が楽になったなど、スクラッチで作り直したことによって得 られた効果もあった #TECHHILLS
33. Flutter導入を検討す方々へのアドバイス Flutter経験者は１名はプロジェクトに参画すべき 他の言語、フレームワークと比較してもナレッジに依存する部分が大きく、 特にPOCや立ち上げフェーズは経験者が1名いないとかなり大変。 一方でプロジェクトへの参画の仕方についてはアドバイザリであっても外部委託 であっても問題はない。理由としてはナレッジに依存する部分が多いため。 #TECHHILLS
34. Flutter導入を検討す方々へのアドバイス WebView要注意 具体的には ・PackageとしてはFlutter公式のwebview_flutterからflutter_inappwebview のほうがオススメ ・表示するHTMLコンテンツについてDeveloperConsole等でエラー、警告 がない状態にまずしておく ・Flutter 側 とWebView内で表示するコンテンツのサーバ通信ではCookieは 使わないほうがいい #TECHHILLS
35. Flutter導入を検討す方々へのアドバイス 実装は共通化できるけど、端末固有の不具合は個別実装が必要 具体的には ・海外Android端末固有問題への対処 ・特定OSバージョンへの不具合対応 #TECHHILLS
36. ７ まとめ #TECHHILLS
37. まとめ ・Flutterの活用で製造効率の大幅な改善が可能 ・一方で習得コストは高い（特にナレッジに依存する部分が多い） ・WebView周りは要注意 ・クロスプラットフォーム言語であってもOS, デバイス分岐は必要 #TECHHILLS
38. 今後のイベントのお知らせ #TECHHILLS
39. 直近開催予定のイベント お申込みはこちらから👉 #TECHHILLS
40. 次回 2022年9月開催予定！ 次回のテックヒルズ開催のお知らせ TECHPLAYで CROOZをフォローして 情報をお待ちください！ #TECHHILLS
41. Twitterでも情報発信しています！ 情報発信強化中！！！ ハードボイルなCTOのつぶやき 未経験エンジニアの教訓 s-flo #TECHHILLS
42. 最後に お申込みはこちらから👉 #TECHHILLS
43. ご清聴ありがとうございました!! #TECHHILLS