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

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

View Slide

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

View Slide

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

View Slide

１ CROOZに
ついて
#TECHHILLS

View Slide

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

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

AWS Fargate
サーバ側
As Is
アプリ
DNS ロードバランサ
Auto Scaling group
Web サーバ(PHP)
HTTPS HTTPS HTTP
To Be
アプリ
Auto Scaling group
Web サーバ(PHP)
GRPC GRPC HTTP HTTP
GRPC Proxy(C#実装)
HTTP
内部DNS
内部NW
外部NW
アプリ
起動時
Auto Scaling group
Web サーバ(PHP)
HTTPS HTTPS HTTP
動作モード取得API
API
API
GRPC動作かHTTPS動作化を返却
#TECHHILLS

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

実装は共通化できるけど、端末固有の不具合は個別実装が必要
具体的には
・海外Android端末固有問題への対処
・特定OSバージョンへの不具合対応
#TECHHILLS

View Slide

７まとめ
#TECHHILLS

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

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

CROOZ

More Decks by CROOZ

Featured

Transcript