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

by CROOZ

Slide 1

Slide 1 text

年間300万人が利用するファッション通販アプリをFlutterでリプレイスした話クルーズ株式会社鈴木優一 #TECHHILLS

Slide 2

Slide 2 text

自己紹介経歴・2008年にモバイルコンテンツプロバイダに入社・2012年クルーズ株式会社に入社入社後は技術統括部門の責任者として全社の開発平準化や採用技術選定、アーキテクト業務に従事のほか、品質管理部門やCS部門、人材育成部門の運営に携わる。・2015年に執行役員就任最高技術責任者CTO グループのIT技術・セキュリティ分野全般を担当する。鈴木優一クルーズ株式会社執行役員 CTO 兼 CROOZ SHOPLIST株式会社技術統括部長 #TECHHILLS

Slide 3

Slide 3 text

・CROOZについて・アプリリプレイスの背景・Flutterの採用に至る経緯・POCフェーズ（技術検証）での実施内容・製造フェーズの進め方・リプレイスで発生した諸問題・Flutter導入を検討す方々へのアドバイス・まとめ本日のAgenda #TECHHILLS

Slide 4

Slide 4 text

１ CROOZについて #TECHHILLS

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

CROOZ について現在EC領域を中心にゲーム領域/ 広告/メディア領域で事業の展開をしています #TECHHILLS

Slide 7

Slide 7 text

CROOZ SHOPLISTについて「一番お得、ここにしかない商品の提供」をビジョンに、レディース・メンズ・キッズのファッションアイテムを中心にインテリアやコスメや雑貨に至るまで、幅広いジャンルのアイテムをまとめて購入できる通販サイト「SHOPLIST.com by CROOZ」を運営しています。 #TECHHILLS

Slide 8

Slide 8 text

2 アプリリプレイスの背景 #TECHHILLS

Slide 9

Slide 9 text

アプリリプレイスの背景製造効率を上げたかったから・当時iOSは XCode / Swift の併用、AndroidはJava/Kotlin 併用で実質4言語を併用して開発保守を行っていた・言語レベルの差異ではなく設計レベルで両OSでの違いがあり、仕様調査やバグ修正もOS個別の実装だった・ XCode ⇒ Swift 、 Java ⇒ Kotlin への移行も新規開発・改修案件都度の実施で期日を持って完了する見通しが立てづらかった上記３点の理由より、クロスプラットフォーム言語を使ってアプリリニューアルすることで開発効率を上げられないかを検討することに #TECHHILLS

Slide 10

Slide 10 text

Flutterの採用に至る経緯戦略としては・両OS間で設計、実装は一致させる・個別OSごとの詳細ロジックはPluginで吸収。必要に応じてネイティブ言語で書く。・テストは両OSごと実施となるが、それ以外は原則両OS共通とすることで開発の生産性の1.8倍を目指す。・上記をクロスプラットフォーム言語というソリューションで解決させる #TECHHILLS

Slide 11

Slide 11 text

Flutterの採用に至る経緯・上記を実現するためにFlutter、React Native 、Xamarinについてネット文献などで比較し、Flutterを選定。・主な比較の視点としては以下・コミュニティの発展度合い … 例）GitHubのスター数・言語のトレンド性 … 例）Google トレンドの推移・担当エンジニアの意向・その後POC実施して本格製造を進めることに #TECHHILLS

Slide 12

Slide 12 text

３ POCフェーズでの実施内容 #TECHHILLS

Slide 13

Slide 13 text

POCフェーズ（技術検証）での実施内容 POCフェーズでは以下の内容についての検証を実施 ①サポートするOSバージョンへの適合状況の確認 ②現在導入しているSDKの対応状況 ③パフォーマンス ④コードの共通化できる量 #TECHHILLS

Slide 14

Slide 14 text

POCフェーズ（技術検証）での実施内容 POCフェーズでは以下の内容についての検証を実施 ①サポートするOSバージョンへの適合状況の確認 →問題なし。両OSとも適合している ②現在導入しているSDKの対応状況 →OK 正確にいうと1つのSDKが非対応。ただし提供元より Flutter対応版SDKを受領できることとになり、開発上のリスクはなくなった。 #TECHHILLS

Slide 15

Slide 15 text

POCフェーズ（技術検証）での実施内容 POCフェーズでは以下の内容についての検証を実施 ③パフォーマンス劣化がないことの確認ホーム画面をFlutter実装し、現行アプリと表示速度を目視で評価し劣化なしを確認 ④コードの共通化できる量両OS共通言語で実装できることを確認上記４点について約1.5人月かけて検証し、このまま進めても期待する製造効率の向上が見込めると判断して本製造に入ることに #TECHHILLS

Slide 16

Slide 16 text

POCフェーズ（技術検証）での実施内容補足：POCの実施体制とメンバーについて ■実施体制・メンバー2名（うちFlutter案件専任は1名） ■メンバー未経験者１名＋経験者（業務委託）１名にて実施 #TECHHILLS

Slide 17

Slide 17 text

4 製造フェーズの進め方 #TECHHILLS

Slide 18

Slide 18 text

製造フェーズの進め方以下の計画で進めることに１．特定時点の現行アプリと同じ機能をFlutterにて機能単位で開発２．上記が完了したらそこからの現行アプリとの機能差分について開発３．通しデバッグ４．任意アップデートにて公開問題が発生したら、ネイティブ実装版アプリに切り戻し申請。問題なければ、強制アップデート #TECHHILLS

Slide 19

Slide 19 text

製造フェーズの進め方図で説明すると以下公開版アプリ x.x.x版 x.x.y版 x.x.z版 Flutter版アプリ x.x.x版 ①まず開発開始時点の現行アプリと同じ機能を開発 x.x.z版 ②機能差分を開発この間はリリース凍結 x.y.x版 #TECHHILLS

Slide 20

Slide 20 text

製造フェーズの進め方アプリ開発環境・Flutter SDKのバージョンは2系の当時最新版を使用・State管理にはReverpodを使用・その他SDK、パッケージについては特に明確に指定なし・Flutter SDKのバージョン管理にはfvmを使用開発体制スタート時点はメンバー３～４名。内訳は・正社員１名（経験10年以上のベテラン）・正社員１名（入社一年目の新卒）・業務委託１～２名（うちFlutter経験者１名） #TECHHILLS

Slide 21

Slide 21 text

製造フェーズの進め方サーバ側アプリのリプレイスに伴い、サーバ側でも技術的な新規チャレンジとして以下を実施・アプリ to サーバ間通信をHTTPSからGRPCに変更・GRPCサーバを実行する基盤としてのFargateの導入 #TECHHILLS

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

製造フェーズの進め方スキル転換の計画・毎週4時間学習時間を確保し、個人単位で修得・機能差分を埋める段階で、既存アプリの開発を停止しネイティブアプリ開発メンバー全員を機能差分の実装に入れる形で計画 #TECHHILLS

Slide 24

Slide 24 text

５リプレイスで発生した諸問題 #TECHHILLS

Slide 25

Slide 25 text

リプレイスで発生した諸問題諸々発生…。大別すると・Flutterリプレイスだから発生した問題・Flutterリプレイスには直接関係なく、リプレイス案件固有の問題 #TECHHILLS

Slide 26

Slide 26 text

Flutter起因の問題 WebView周りの不具合・Cookie制御周り・mixed contentがあった場合の表示・java script の動作などWebViewで表示するHTMLコンテンツ周りの問題が多く対処に難航最終的に、PackageをFlutter公式のwebview_flutterからflutter_inappwebview に変更するのと、アプリとWebView内のHTTP通信間のデータの受け渡しを CookieからHTTP Headerに変更することで不具合が解消 #TECHHILLS

Slide 27

Slide 27 text

Flutter起因の問題検索などキーボード入力直後のクラッシュテキストボックスからLost Focusしたタイミングでアプリがクラッシュする事象が発生そのタイミングで関係のない画面までrebuildされていることまでは特定できていたものの、なぜrebuildが実行されるのかの原因がつかめず、1か月以上問題解決できなかった。結論でいうとキーボード表示時にMediaQueryがrebuildを実行させていることが特定でき、回避ははできたものの、回避に1か月以上かかってしまった #TECHHILLS

Slide 28

Slide 28 text

Flutter起因の問題習得コスト具体的には・言語としては習得したと言えるけど、実際に組もうと思うように進捗しない・なんのクラスを使ってUIを作るのが最適ががトライアンドラーで実装して見ないとわからない。・言語としての習得コストがメンバーによって異なるために一律で人員計画に落としづらい。など。 #TECHHILLS

Slide 29

Slide 29 text

リプレイス案件固有の問題正常動作がわからない問題・初期リリースから5年以上経過しており、画面仕様以外ほぼドキュメントが無かったため、既存のアプリのソースを元に機能をスクラッチで開発。仕様抜けが多少あってもまずは製造し切ってしまい、デバッグフェーズで問題点としてチケット化し修正していく計画だった。・一方で「今動いているものが正常」という状態で正常系動作というものがまとまっている文書類がなく、何が正常な動作かが判断できない状況に… ・プランナーに協力してもらい、デバッグ項目書（合計約4,100項目）を新規に整備し、各項目ごとに動作確認。 #TECHHILLS

Slide 30

Slide 30 text

その他発生した問題海外製Android端末固有の不具合・WebView内でテーブルタグが正しく展開できない・メモリ消費量が多く、特定画面で固まるなど。対処としてはデバイスごとにWebViewのパラメータを調整する、スタックする画面数や表示する商品写真枚数を減らすなど調整。 #TECHHILLS

Slide 31

Slide 31 text

６ Flutter導入を検討する方々へアドバイス #TECHHILLS

Slide 32

Slide 32 text

Flutterでアプリをリプレイスしてみて製造効率に対する評価・クロスプラットフォーム言語という手段で実現しているのですごく乱暴に言うと2倍にはなっている。 → 両OSを別々のエンジニアが開発しなくてもよくなったため・一方でOS、デバイス固有の問題で処理分岐は発生するが発生は軽微。 → クロスプラットフォーム言語の場合、分岐で済むので両OS個別で記載するよりははるかに工数は少ない。メンバーからの定性評価・開発言語の統一できたことに加え、古く仕様が不明瞭なコードを一新できたことで調査実装が楽になったなど、スクラッチで作り直したことによって得られた効果もあった #TECHHILLS

Slide 33

Slide 33 text

Flutter導入を検討す方々へのアドバイス Flutter経験者は１名はプロジェクトに参画すべき他の言語、フレームワークと比較してもナレッジに依存する部分が大きく、特にPOCや立ち上げフェーズは経験者が1名いないとかなり大変。一方でプロジェクトへの参画の仕方についてはアドバイザリであっても外部委託であっても問題はない。理由としてはナレッジに依存する部分が多いため。 #TECHHILLS

Slide 34

Slide 34 text

Flutter導入を検討す方々へのアドバイス WebView要注意具体的には・PackageとしてはFlutter公式のwebview_flutterからflutter_inappwebview のほうがオススメ・表示するHTMLコンテンツについてDeveloperConsole等でエラー、警告がない状態にまずしておく・Flutter 側とWebView内で表示するコンテンツのサーバ通信ではCookieは使わないほうがいい #TECHHILLS

Slide 35

Slide 35 text

Flutter導入を検討す方々へのアドバイス実装は共通化できるけど、端末固有の不具合は個別実装が必要具体的には・海外Android端末固有問題への対処・特定OSバージョンへの不具合対応 #TECHHILLS

Slide 36

Slide 36 text

７まとめ #TECHHILLS

Slide 37

Slide 37 text

まとめ・Flutterの活用で製造効率の大幅な改善が可能・一方で習得コストは高い（特にナレッジに依存する部分が多い）・WebView周りは要注意・クロスプラットフォーム言語であってもOS, デバイス分岐は必要 #TECHHILLS

Slide 38

Slide 38 text

今後のイベントのお知らせ #TECHHILLS

Slide 39

Slide 39 text

直近開催予定のイベントお申込みはこちらから👉 #TECHHILLS

Slide 40

Slide 40 text

次回 2022年9月開催予定！次回のテックヒルズ開催のお知らせ TECHPLAYで CROOZをフォローして情報をお待ちください！ #TECHHILLS

Slide 41

Slide 41 text

Twitterでも情報発信しています！情報発信強化中！！！ハードボイルなCTOのつぶやき未経験エンジニアの教訓 s-flo #TECHHILLS