Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

CROOZ
July 27, 2022
510

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

CROOZ

July 27, 2022
Tweet

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. 1 CROOZに
    ついて
    #TECHHILLS

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. 3 POCフェーズ
    での実施内容
    #TECHHILLS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  24. 5 リプレイスで
    発生した諸問題
    #TECHHILLS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  36. 7 まとめ
    #TECHHILLS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. 最後に
    お申込みはこちらから👉
    #TECHHILLS

    View Slide

  43. ご清聴ありがとうございました!!
    #TECHHILLS

    View Slide