プロジェクトリーダーとして、商品券の購入・利用ができるウェブサイト、商品券の利用を受ける店舗向けのモバイルアプリ、サーバーサイドのAPIの開発を管理しました。
開発者としても全般に関わり、Nuxt.js (TypeScript), Spring Boot (Java), Flutter を用いて設計、開発しました。
本プロジェクトが初めて複数のメンバーがいるプロジェクトでのリーダーでした。ウェブサイトからモバイルアプリ、APIという複数のサブプロジェクトについて、粒度の荒い要件定義を詰めるところから技術選定、本番環境へのデプロイまで関わりました。
担当業務の詳細
プロジェクトリーダー
自身を除いて社員１名＋協力会社さん２〜４名の体制でした。WBSの作成、見積もりの算出、タスクの割り振りと進捗の管理、それらの顧客とのやり取りを担当しました。
私自身は開発にも深く携わりたかったため、開発に集中できるよう WBS の引き直しなどリーダー業をいかに短縮できるか考えました。新規のサービスであることからインパクトの大きな仕様変更が多発したため、長期のスケジューリングをやめて、要望を簡単に実装→フィードバックを繰り返すアジャイルなスタイルに変更しました。
商品券を購入・利用する消費者向けのウェブサイトの設計、実装
30画面程度のSPAを TypeScript + Nuxt.js で開発しました。
登録者限定のサービス（SEOの考慮が不要）であったことやほとんどの画面に動的な項目が含まれていたことから、SPAを採用しました。また、データを複数の画面に渡って扱う要件が多く、状態を単一のストアで一元管理するために Vuex を用いて MVVM で実装することとしました。
特筆すべき機能としては以下が挙げられます。
- クレジットカード登録、利用、リアルタイムの銀行口座振替
- クレジットカードの不正利用防止のための3DS認証や銀行口座振替では、リダイレクトで遷移元に戻される挙動に対応するため、Ajax によるAPIリクエストで受け取った3DS認証用URLをユーザーに見えない form にセットして submit するような工夫が必要でした。
- QRコードを利用した決済
- 商品券は消費者側がQRコードを提示して決済する方式（CPM方式）で実装しました。
- ログインしているユーザーと購入した商品券から有効期限付きのトークンを発行し、QRコードの表示と同時にカウントダウンを表示、有効期限が切れた後は自動でリフレッシュを行い新たなQRコードを表示するよう実装しました。
- QRコードを表示中は決済処理の完了を知るためにAPIをポーリングして監視しました。１つのコネクションを張り続ける方式も考えましたが、数万人のユーザーが見込まれたため、実際に負荷テストを行ってより負荷の低かったポーリング方式を採用しました。
商品券での支払いを受ける店舗向けのモバイルアプリの設計・開発
消費者の提示したQRコードを読み取り決済するための iOS, android アプリを Flutter で開発しました。金額の入力 → QRコードの読み取り → 決済 → 決済結果といった基本の機能の他、決済履歴の検索や、決済の取消返品を行う機能などを実装しました。状態管理には Riverpod を用いて MVVM で開発しました。
ウェブサイト、アプリから利用されるAPIの設計
合計30程度のAPIの設計を行いました。インターフェースのドキュメントは OpenAPI を用いました。OpenAPI のファイルは実装に利用するボイラープレートの生成にも利用し開発速度の向上に寄与しました。
内部の設計では、決済時にウェブサイトとアプリから同時にリクエストが来ることを考慮し、整合性を保つためにトランザクションの原始性をどこに持たせるかを意識しました。
その他担当
DBの設計や Git のブランチ戦略の策定も実施しました。