はじめに
こんにちは！株式会社ブロードエッジ・ウェアリンク CTOの高丸です。
今回は、Qiita Advent Calendar 2024の11日目の記事です。
これまでの記事では、私がブロードエッジ・ウェアリンクに参画してからの「チーム作り」や「技術選定」について、その背景や考え方を書いてきました。
そして今回からは、これまでの記事でたびたび触れてきた「デザインリプレイスプロジェクト（アーキテクチャリプレイスプロジェクト）」について、より具体的な実装の話を展開していきたいと思います。
第1弾として、最初のマイルストーンリリースとなる「ログイン機能」と「リプレイス後の商品詳細ページ」について、実装の詳細や判断のポイントをお伝えしていきます。
ロードマップを引き直した（段階的なリリース）
大規模なシステムリプレイスにおいて、段階的なリリースは基本的なアプローチです。
我々も当初、「影響度の低い箇所から分割して徐々に移行していく」という原則に従ってロードマップを策定していました。
特にログイン機能については、システム全体への影響が大きいと考え、後期のフェーズでの実装を予定していました。
しかし、認証システムに関して重要な検討事項がありました。
既存システムではカルテの認証機能を利用していましたが、
将来的な拡張性を考慮して、Shopifyの認証機能への移行を決断しました。
Shopifyには直接的なSSO（シングルサインオン）の仕組みは実装されていませんが、自社で実装するよりもセキュアな認証基盤として活用できるだろうという理由です。
どこを優先するか
当初の計画から大きく方向転換し、「ログイン機能」と「商品詳細ページ」を第1弾のリリース対象として選定することになりました。この判断の背景には、ビジネス要件の変更という大きな要因がありました。
具体的には、当初のリプレイス案ではワインの好み診断機能の仕様も大きく変更することになっており、これまでは会員登録が必須だった診断機能を、会員登録なしでも利用できるように変更することとなっていました。
つまり、診断機能の改修には会員登録機能の変更も含まれており影響度が大きいため、ログイン機能を先に新システムに移行する必要があったのです。
また、これまでの記事で触れてきた通り、スクラム開発の導入がうまくいかなかったことや、フロントエンド開発の統括に課題があったことから、開発スケジュールに遅れが生じていました。そこで、まずは最小限の機能セットでリリースすることを決断しました。
商品詳細ページについても、同様の判断をしています。
当初は表示項目を大幅に増やす計画でしたが、これらの機能追加はいったん見送り、現状と同じ情報量を維持したまま、デザインの刷新のみを行うことにしました。
解決が必要だった技術課題
認証基盤をShopifyに移行する際、いくつかの技術的な課題に直面することになりました。最も大きな課題は、既存ユーザーの認証情報の移行でした。
既存システムでは一般的なメールアドレスとパスワードによる認証を採用していましたが、当然ながらパスワードは暗号化されて保存されています。そのため、単純にShopifyへユーザーデータを移行しようとすると、全ユーザーにパスワードの再設定を求める必要が生じてしまいます。
一斉メール送信でパスワード変更を案内する方法も検討しましたが、ユーザーの中には「面倒だな」と感じて離脱してしまう可能性が高く、結果として休眠ユーザー化を促進してしまう恐れがあったのです。
この課題に対して、メールアドレスだけで認証が完了するメールリンク認証を採用することにしました。
ユーザーが認証を試みた際に、認証用のリンクを記載したメールを送信し、そのリンクを通じて認証を完了する仕組みです。（この実装の詳細については、後日の記事で詳しく解説する予定です）
もう一つの技術的課題は、ShopifyのHydrogenとLiquidの併用でした。
段階的なリリースを実現するために、この二つの技術を共存させる必要がありました。
これに関しては、非公式ながらHydrogenをプロキシとして動作させる方法があり、それで実現しました。（この技術的な詳細についても、別途記事で詳しく紹介していく予定です）
この方法は、以前Shopifyの公式ドキュメントにも掲載されていましたが、現在は削除されています。
活発ではないですが、関連するGitHub Discussionsも載せておきます。
さいごに
これらの機能は、結果、2024年の5月にリリースされました。
メールアドレスのみでの認証
リプレイス前の商品詳細画面
リプレイス後の商品詳細画面
開発スケジュールの遅れに直面しながらも、チーム一丸となってこれらの技術的課題の解決に取り組みました。
特にHydrogenはまだ開発途上という面もあり、このタイミングでのリプレイスには予想以上の苦労がありました。しかし、予期せぬ課題が次々と現れるのも、システム開発の醍醐味といえるのかもしれません。
後日の記事では、メールリンク認証の実装詳細やHydrogenとLiquidの併用方法など、それぞれの技術課題をどのように克服していったのか、より具体的に解説していく予定です。
これらの経験が、同じような課題に直面している方々の参考になれば幸いです。
Discussion