メルペイの社内向け管理画面を振り返る

Merpay Advent Calendar 2019 の 13 日目は、メルペイフロントエンドチーム の @tanakaworld がお送りします。

メルペイの管理画面は 2019 年 2 月のサービスローンチに先立ち、2018 年 11 月にリリースされました。私は 2018 年 8 月に入社してから一貫して管理画面開発に関わり、様々な機能開発・運用を行ってきました。その中でフロントエンドエンジニアとして関わったいくつかのプロジェクトをピックアップしてご紹介します。

目次

• 
  はじめに

  • メルペイのフロントエンドチーム
  • メルペイの社内向け管理画面
• プロジェクトの振り返り
  • 審査業務効率化プロジェクト
  • マイクロサービス分割プロジェクト
    • 課題感
    • 分割の方針
    • 分割後のアーキテクチャ
  • Component v2.0 リニューアルプロジェクト
    • 課題感
    • デザインポリシー
    • 開発フロー
• 社内向け管理画面で今後注力したいこと
  • オペレーションの効率化
  • E2E Testing / Visual Regression Testing
  • Developer Experience の向上

はじめに

まずはじめに前提となるメルペイのフロントエンドチームと管理画面の構成について述べます。

メルペイのフロントエンドチーム

メルペイで実現しようとしていることは多岐に渡ります。プロジェクト単位でわかれており、それぞれの Web 開発にフロントエンドチームで取り組んでいます。メルペイのお客さま向けプロダクト、加盟店さま向け、社内オペレータ向けと使用するユーザーも様々です。

フロントエンドチームでは 加盟店さまが使用する管理画面の開発も行っていますが、今回は社内オペレータ向けの管理画面に絞ってお話します。

メルペイの社内向け管理画面

メルペイの社内向け管理画面には大きく分類すると３つの機能があります。

• CSTool
  • Customer Support Tool
  • メルペイをご利用頂いているお客さまを管理する機能
• MSTool
  • Merchant Support Tool
  • メルペイを利用できるお店、加盟店さまを管理する機能
• その他
  • オペレータの権限管理する機能

いずれも社内オペレータが使用する社内向けの管理画面です。リリース当初は一つの Nuxt アプリケーションでしたが、現在は機能ごとにマイクロサービスがわかれています。（詳細は後述します）

Nginx が Nuxt の前段にいる一般的な構成で、GKE (Google Kubernates Engine) 上でホスティングされています。API Gateway はメルペイ内の全てのリクエストが通過するマイクロサービスで、URL ごとに適切なマイクロサービスにルーティングします。CircleCI で Nginx と Node.js の Docker Image をビルドして Docker Registry に登録、さらにそれを Hook して GKE にデプロイが実行される流れです。

プロジェクトの振り返り

さて、本題のプロジェクトを振り返ってみます。

審査業務効率化プロジェクト

メルペイ決済がお店で使えるようになるまでには、次のフローを踏んでいます。

1. 店舗オーナーさまが Web から申込む
2. メルペイが申し込み内容を審査する
3. 店舗オーナーさまに審査結果を通知する
4. 店舗オーナーさまにスタートキットを配送する

この審査を MSTool 上で実施しています。申込み後、より速くメルペイの利用を開始いただけることを目標に、業務効率化プロジェクトが発足しまし、次のことに取り組みました。

メルペイ管理画面の本番環境はセキュリティ観点からオペレータ権限を持っている社員しかアクセスできない仕組みになっています。私を含めプロダクトチームメンバーはアクセスできないため、オペレーションチームが拠点を置いている福岡オフィスを訪問しました。

UX Research チームと協業してユーザービリティテストを行い、ユーザービリティを定量化する手法をとったのが新鮮でした。お申込み情報のチェック・データ加工の自動化、UI/UX観点のアプローチで効率化を図り、最終的には審査時間の大幅な短縮に繋がりました。

詳細はこちらにまとまっています。
UX Research for Co-creation

マイクロサービス分割プロジェクト

リリース当初、管理画面チームは一つのプロダクトチームで一つの Nuxt アプリケーションを運用していました。しかしある日、各部門で規模を拡大するための組織変更があり、CSTool と MSTool でチームが分かれることになりました。プロダクトマネージャーとオペレーションチームは別々のチームになった一方、デザイナー・フロントエンドエンジニア・バックエンドエンジニア・QA エンジニアは両チームに横断的に関わるという状況です。その結果、様々な課題が生まれました。

課題感

• Git ブランチの混戦、コンフリクト
• コミュニケーションコストの増大
• リリース回数の増加
• QA コストの増大

一つのアプリケーションを複数チームが共有する状況になりました。複数機能の開発が並行して進行し feature ブランチが混在かつリリース時期が見えない、リリースするまでマージしないとなるとコンフリクトは避けられないため、マージはするがその機能をフラグで隠すというような運用を強いられていました。その他、週１・２回のリリースが毎週続き、QA コストの増大やスケジュール調整に時間を取られるなどの問題も発生していました。

分割の方針

このような状況を変えるために、独立した開発とリリースが行えることを目標として、分割プロジェクトが発足しました。ちょうど近い時期にメルペイ全体で技術的負債の返済がテーマに掲げられたのも後押しし、分割に踏み切ることができました。リファクタリングやアーキテクチャの変更は、やろうと思えばいくらでもできてしまうので期限と制約を設けてミニマム対応しようという方針にしました。

• 対応期間は2ヶ月
• デザインは共通
• 配信ドメインは共通
• GCP Project は共通

分割後のアーキテクチャ

分割の詳細はこちらにまとめています。
Nuxt マイクロサービスを 3つに分割した話

組織構造・機能に応じてマイクロサービス分割したことにより、先述の課題は解消されました。配信環境の Node.js と Nginx も分かれ、それぞれ独立したデプロイが可能になりました。リクエストパスに応じてルーティング先が切り替わる構成になっており、新しいマイクロサービスが増えても対応できるようにしています。現在は 4 つ目の Nuxt マイクロサービスが開発され始めています。

Component v2.0 リニューアルプロジェクト

マイクロサービスの分割前に予め、UI コンポーネントを共通パッケージとして切り出していました。

tech.mercari.com

この UI コンポーネントを v1.0 として、v2.0 にリニューアルするプロジェクトが進行しています。

課題感

リリースしてから半年ほど経過したころから、オペレーションの中で管理画面の使われ方や不便な箇所がわかり課題が明確になってきました。まずはデザイナー主導で課題を整理しました。

• シンクライアントで操作している (アクセスできる端末やアプリケーション、ウェブサイトが制限されている環境)
• 多くの細かい情報を参照する
• 重要度の高い操作を実行する
• 問い合わせを受けて、急いで行動しなければいけないときがある
• 情報の羅列を見続ける
• 重要かつ集中力を要するアクションが多い

デザインポリシー

最終的に、オペレーションや開発コストを最小化することと、ユーザビリティ良くするために、コンポーネントリニューアルを課題解決の打ち手として実施する運びとなりました。次のポリシーでリニューアルを進めています。

• デザインが一貫している
• 拡張性が高い
  • パーツを組み合わせて使用できる
  • 項目を増やしても、全体感が崩れにくい
• 高い操作性を保てる
  • 部品が同じで配置ルールが決まっていると、使う人が迷わない
  • キーボード操作をはじめとするアクセシビリティに配慮する
• 開発しやすい
  • デザインしたデザイナー以外も使えるのでデザインデータが属人化しづらい
  • 実装したエンジニア以外も使えるのでコードが煩雑になりづらい
• スピーディに機能追加できる
  • 新しい機能や新しい画面をつくるとき、すでにある部品が再利用できる
  • デザイナーがいなくても、品質を保ちやすい
  • 実装も速い

開発フロー

UI コンポーネントを管理しているリポジトリにカタログアプリケーションを同梱し、実動作を確認できるようにしています。リポジトリのブランチ毎にビルドされ、社内 S3 に自動デプロイされるようになっています。デプロイされたカタログは社内の誰でも閲覧できるようになっており、このカタログを中心にデザイナーと協業しながら開発を進めています。

年内には一部の管理画面で Component v2.0 が稼働する予定です。

社内向け管理画面で今後注力したいこと

最後に、今後注力していきしたいことをまとめます。

オペレーションの効率化

オペレーションの効率化が、メルペイの加盟店さま、お客さまの体験向上に寄与すると思っています。まだまだ改善の余地があります。先述の審査業務効率化の他にも、プロダクトやマイクロサービスを横断した効率化プロジェクトが発足しています。直近はオペレーション上の手作業をシステム化することに取り組みたいと思っています。

E2E Testing / Visual Regression Testing

メルペイ QA チームと連携して、マニュアルテストの自動化を進めてています。現在は Cypress 用いた自動化に着手しているところです。その他、コンポーネントライブラリの VRT テストを検討しています。

Developer Experience の向上

先述の Component 2.0 リニューアルプロジェクトを始めとするコンポーネントライブラリ開発やツールチェイン開発など、開発効率を上げるための取り組みをしていきたいと思っています。メルペイフロントエンドでは基本的に Nuxt + TypeScript を用いたプロジェクト構成で統一しており、日々最新バージョンへの追従を行っています。Vue.js 3.0 がリリースされた際にはマイグレーションも計画しています。

メルペイではミッション・バリューに共感できる Frontend エンジニアを募集しています。一緒に働ける仲間をお待ちしております。

Software Engineer, Frontend [Merpay]

明日の Merpay Advent Calendar 執筆担当は、 SRE の @T-sato さんです。引き続きお楽しみください。