This page is intended for users in Germany(English). Go to the page for users in United States.

CASHアプリ体験を決済でも!『モノ払い』開発エンジニアがNuxt.jsでSPAにした理由

こんにちは!バンク広報の磯田です。

2019年6月12日に、バンクから『モノ払い』という新しい決済サービスをリリースしました。

https://mono.cash.jp/

この決済サービスが導入されたオンラインストアで、ご自宅にある「モノ」でお買い物ができるようになります。まず初めにこの決済を導入していただいたのが、総合旅行予約サイトのエアトリさん、さらにナノ・ユニバースさんの自社オンラインストアも導入予定です。

大変ありがたいことに、とても話題にしていただきました。でもこれは、このサービスを形にした人がいたからこそだと思います。

今回はそんな『モノ払い』の開発チームのエンジニア2人にお話を聞いてみました!

『モノ払い』開発スタートを聞いて

柴田:昨年末から動きがありました。他の事業もあったのでそれと並行しながら進めていました。モノ払いは、以前から代表の光本がチャレンジしたいと言っていたので、開発をすることを聞いた時は「ついに来たか!」と思いました。

中富:「現代版物々交換」という尖ったコンセプトのサービスで、その目新しさと可能性にはわくわくしました。またエンジニアとしても、汎用的なシステム設計と、堅牢であることが求められる開発案件なので、非常にやりがいのあるプロジェクトになるなと感じました。

ノンディレクターの開発体制について

中富:今回、プロダクトオーナーを務めましたが、システム設計・実装から、仕様策定、導入企業への営業同行、法務や会計周りの社内調整など幅広く担当しました。

主軸はサーバーサイド開発におきつつ、その他サービス開発に必要なことにも裁量を持って進められました。ディレクション業務も兼務することで、設計・実装への落とし込みがスムーズで、よくある要件定義時のコミュニケーションの摩擦も発生しません。

柴田:本来は、ディレクターが間に入って仕様を詰めたり、期日を決めたりして、それがエンジニアに降りてきて開発を進めることが多いと思います。

中富:バンクでは、未知の領域に踏み込むようなプロダクトが多いので、スピード感を重視した※1.リーン開発体制をとっています。エンジニアがプロダクトオーナーとなり、メンバーや関係者との意思疎通もスムーズに行えるノンディレクター体制が非常にマッチしています。

※1.新たなアイデアやコンセプトを素早く形にし、実際の顧客の反応を見ながら製品やサービスの改善や軌道修正を行う開発体制のこと

開発を進める上で、大変だったこと

中富:モノ払いでは、とにかく社内外の調整が多く【開発業務+ディレクション業務】の仕事量に圧倒された瞬間もありましたが、社外との契約周りまでエンジニアが入り込めるのは、スタートアップならではの良い成長機会となりました。

システム面では、決済サービスなので細部まで堅牢なつくりを意識することが必要不可欠で、※2.Google Cloud IAPを利用した※3.JSON web tokenによる認証を導入するなど、新しいことにも挑戦しました。

一方で多くのサービスに導入して頂けるよう、汎用的なインターフェイスの設計を意識しなければならないことも難しいところでした。ビジネスサイドもシステムサイドも新しいことにどんどん挑戦していけるのは、未知の領域のサービスをつくるバンクならではの魅力です。

※2.Google Cloud IAP : Googe Cloud Platformで利用できるアクセス制御機構
※3.JSON web token : JSONをベースとしたトークンによるリクエスト認証の仕組み

決済サービスでNuxt.jsでSPAにした理由

柴田:一番の理由はユーザー体験を重視したかったためです。モノ払いは決済サービスでありながらアプリ的な体験も伴うので、ページ遷移やインタラクションになるべくストレスがないようにしました。※4.Nuxt.jsであれば※5.SPAを開発するために必要となる殆どの機能が用意されていますし、CASHの関連サービスでも採用した実績があるので最も導入しやすかったです。

中富:ユーザー体験を重視し、SPAにすることを優先事項として技術選定しました。SPAにするにしても、バックエンドは※6.Ruby on Railsなので、フロントエンドとアプリケーションを分離せず【Rails + Vue.js】など他にも検討しましたが、Nuxt.jsがスピード・品質面でのコストパフォーマンスに非常に優れているので、この構成となりました。

柴田:Nuxt.jsで作ることで、開発スピードもだいぶ上がったと思います。「モノ払い」のような中〜大規模なサービスであってもコードをシンプルに保ちやすいですし、複数人での開発にも向いています。

Nuxt.jsはまだまだ発展中のフレームワークですが、新しい技術も取り入れつつチャレンジできるのがバンクの面白いところだと思います。バンク社のビジョンに「すべては実験」というものがあるのですが、開発の面でもこの考えは変わりません。

※4.Vue.js アプリケーションを作成するフレームワーク
※5.Single Page Application(シングルページアプリケーション)単一のWebページでアプリケーションを構成する設計構造の名称
※6.Ruby on Rails(ルビーオンレイルズ)オープンソースのWebアプリケーションフレームワーク

モノ払いのこれから

中富:決済手段としてより気軽に導入できるサービスにすべく、導入ハードルを下げられるようにするための仕組みをづくりをはじめています。
またコンテンツ自体も改善を繰り返し、単純ないち決済サービスとして他の決済方法に並び利用ユーザーの牌をとっていくのではなく、モノ払いならではの新しいユーザー群へのリーチを可能にすることで、導入先企業の売上アップに貢献することを目指します。

柴田:僕は、使ってくれる方々の体験をさらに良くしたいと思います。
モノ払いも、CASHアプリと同じく無限に改善できると考えていて、モノでモノを買うという体験を、より楽しく、よりスピーディに味わってもらえるようにしていきたいです。

中富:光本の尖ったアイデアを形にしてく開発業務は本当に楽しかったです。さらに、このような前例のないサービスをエアトリさん、ナノ・ユニバースさんなど規模の大きいサイトに導入してもらえることは凄いことで、初回導入としてご協力いただいた両社に大変感謝しています。

「今までにないアイデアを形にする」
その裏側には、開発自体も新しいやり方にチャレンジするバンクのエンジニアたちの思いを感じるインタビューでした。

この記事を読んで、バンクの開発体制やモノ払い、そしてCASHTRAVEL Nowに興味を持っていただいたら、「話を聞いてみたい」からでも構いません!オフィスに遊びにきてください😊

プロフィール

中富 俊吾(なかとみ しゅんご)
1992年生まれ。中央大学を卒業後、株式会社カカクコムにて「食べログ」の開発を担当。2018年にバンクに入社。即時買取アプリ「CASH」のエンジニア。
柴田 守(しばた まもる)
1993年生まれ。駒澤大学GMS学部を卒業後、DMM.comに入社。「DMM Okan」の開発を担当。その後バンクに出向し、「CASH」の開発を担当。2018年にバンクに入社。
株式会社バンク's job postings
8 Likes
8 Likes

Weekly ranking

Show other rankings