QUO CARD Digital Innovation Lab Tech Blog

クオカード デジタルイノベーションラボの技術ブログです

QUOカードPay オンラインストアを内製化しました

2020/6/24にQUOカードPay オンラインストア(https://pay.quocard.jp/)を内製化しました。

今回はその背景や内容について記載します。

背景

QUOカードPay オンラインストアは最初のローンチ時はエンジニアの手が足りていなかった為外注で構築し、運用も外注していましたが、スピード感を持って機能追加や改善を進める為内製化することにしました。 また元々EC2などマネージドではないサービスを利用していましたが、運用の効率化の為ECSなどマネージドなサービスを利用する形に変更しました。

技術的な変更点

言語

Javaで作られていましたが、部分的にKotlinを導入しました。今後も順次Kotlin化を進める予定です。

インフラ

EC2でしたが、ECS(Fargate)に変更しました。またストレージとしてEFSを使っていましたが、疎結合にするためS3に変更しました。

テスト

ほぼ手動でテストを行う形でしたが、実装の変更による影響を素早く検知して対応するために自動テストは必須であると考えています。その為、徐々に自動化を進めようとしています。できればUnit Testを用意する形にしたいのですがテストするために大幅なリファクタリングが必要になるところが多い為、まずはE2Eのテストを用意した後に書き換えを進めようとしています。

バッチ

JP1から起動する形でしたが、AWS Step Functionsを利用する形に変更しました。また夜間バッチである必要の無いものは徐々にオンライン化する、または営業時間に実行する形にするなどを検討しています。

監視

DataDog,Sentryを導入しました。また1次対応はMSP(外部の監視・運用会社) にお願いしています。

期間

10人程度で約5ヶ月で完了しました。 ブルックスの法則を避ける為、最初から全員参加する形にしました。

リリース

営業日に2日間サービスを停止して実施しました。お客様にご迷惑がかかる可能性があるので可能であれば無停止で行いたかったですが、予期せぬトラブルが発生しても対応できるよう今回はサービス停止を選択しました。 ある程度余裕を持ったスケジューリングだった為、リリース中に細かい問題が発生しましたが無事対応して予定時間前にリリースすることができました。

今回はまず内製ができる環境を作るというところが目的だったため問題を全て解消するという事はできませんでしたが、今後改善して行きたいと思います。 そのためにエンジニアを募集しています。

https://quo-digital.jp/

IntelliJの社内勉強会を開催しました

つい先日、社内勉強会で IntelliJ IDEA のショートカットとか使い方とかのレクチャーをしたので、その内容について紹介します。読むのにかかる時間は 3 分くらいを目指してます。


ここのところ、デジタルイノベーションラボではペアプログラミングやモブプログラミングを積極的に取り入れています。 そしてメンバーと一緒に数時間ほどして、メンバーが IntelliJ IDEA の操作に習熟できていないような印象を持ちました。 ペアプロ、モブプロの中で指摘してもいいのだけど、そうすると取り組みたい本質的な問題に集中できないように思われました。 そこで別途 IntelliJ IDEA の使い方講習を行う流れにしました。

そのときの資料がこちらになります。

内容を雑にまとめると、以下のような IntelliJ ならではのキーマップ・機能を覚えておくと便利です。

  • 機能そのものを検索する( + (shift) + A)
  • コードの問題点をいい感じに修正する( + Enter)
  • 名前のイニシャルを入力すれば絞り込んでくれる

では、ここでブログを書く人をバトンタッチして、実際の受講者に話しを聞いてみましょう。

こんにちは。デジタルイノベーションラボに 2019 年の 7 月からお世話になっている飯島です。

自分は元々 Emacs を使っていたこともあり、IntelliJEmacs キーバインドにして使用していましたが、持田さんの勉強会に参加してからすぐにデフォルトに戻しました。 特殊なキーバインドにしていると、特定のショートカットキーがオーバーライドされて存在しなくなってしまうことがあるからです。 また、デフォルトにしておくと便利なショートカットキーを簡単に口伝できるというメリットもあります。 IntelliJ インストール後にいちいちキーバインドの設定をする必要もありません。 あとこれが一番の理由かもしれませんが、Mac は最初から特定のキーマップが Emacs と同じため、デフォルトにしていても文字の編集操作がやりやすいというのがあります。 (デジタルイノベーションラボでは基本的に入社時点で最新の MacBook Pro が支給されます)

勉強会では数あるキーマップの中から持田さんセレクトで便利なモノを紹介してもらいましたが、自分が一番使うようになったのは 「⌘ + ⌥ + B」 です。 interface の実装クラスや実装メソッドを検索して飛ぶことができます。 「⌘ + B」と併せて使用することでソースコードを深く速く追っていけるようになりました。 キーマップは覚えなくても何とかなるので学習を後回しにしがちですが、知っているか知らないかでここまで効率に差が出てくるならば早めに覚えた方が良いと思いました。

とっぴんぱらりのぷう

QUOカードPayのモバイルアプリで利用している技術

デジタルイノベーションラボのゴルゴです。

今回はQUOカードPayのモバイルアプリで利用している技術を紹介します。

Androidアプリ

MVVM+Clean Architectureパターンで実装しており、以下のような技術・サービスを利用して開発しています。

言語: Kotlin 100%

ライブラリ: Rx, Retrofit2, Glide, Koin, Coroutine, Epoxy, Firebase

テスト: JUnit, Spek, Mockito, Espresso, Spoon

ソースコード管理: GitHub

CI/CD: Bitrise

よくあるパターンなので特筆するところはそれほどないですが、開発当初の開発メンバでDagger2に慣れているものがいなかったので、習得しやすいKoinを採用しました。ハマることもなくすんなりと使えたので良かったです。ただ、KoinはInjectするオブジェクトを動的解決するので実行時エラーになるリスクがあり、今後も使い続けるかはわかりません。Dagger2のように静的解決してくれる、KotlinネイティブのDIツールの登場を待っていたのですが、どうやらDagger2がGoogle公式の推奨DIツールがなったようなので、本腰を入れて調べています。

また、Coroutineは当初experimentalだったこともあって非同期処理は主にRxで実装しており、今の所部分的にしかCoroutineは使っていません。

CIにはBitriseを利用しているのですが、モバイルアプリ向けに特化されていて使いやすいです。自作のSlack BotGitHubと組み合わせることで、Slackからメンションを飛ばすとストアへのアップロードまで自動で行われるようにしています。

iOSアプリ

MVP + Clean Architectureパターンで実装しており、以下のような技術・サービスを利用して開発しています。

開発言語: Swift5

ライブラリ: Rx, Moya, Nuke, R.swift, Realm, Firebase

テスト: XCTest, swift-snapshot-testing

ソースコード管理: Github

ライブラリ管理: Carthage, CocoaPods

CI/CD: Bitrise

iOSアプリではAndroidアプリと比べてMVVMを採用した場合のRxSwiftへの依存度が高くなる等があった為、MVP + Clean Architectureを採用しました。 通信ライブラリにはAlamofireのラッパー的なMoyaを使うことでdebug時はスタブを利用するようにしています。 リソースファイルへのアクセスはR.swiftを使用しているので、プロパティとして取得できるためtypoがなくなりました。

CIはAndroidアプリ同様にBitriseとSlack BotGithubと組み合わせてSlackからApp Store ConnectへIPAアップロードを自動化しています。

設計

iOSAndroidはそれぞれネイティブ実装していますが、ドメイン層に用意するUseCaseやRepositoryの設計は出来るだけ揃えることで相互のエンジニアがレビューしやすいようにしています。

プロダクトグループの評価制度

デジタルイノベーションラボの齋藤です。

クオカードは2019年4月から人事制度を変更しました。クオカードは30年以上の歴史があり、人事制度も今までパッチを当てて対応してきましたが、根本から整理するという事になり2018年の1年間をかけて整理を行いました。

通常であればデジタルイノベーションラボ所属のエンジニア/デザイナーもその新人事制度を導入するところだと思いますが、デジタルイノベーションラボはQUOカードPay立ち上げの為に今までクオカードにはいなかったアプリやサーバーサイドのエンジニアが所属しており、他部署と同じ評価制度で進めるのは適切でないのではないかと考え、独自の評価制度にさせていただきました。

また最近主に海外で人事評価制度を廃止する会社も出てきており、それを踏まえてデジタルイノベーションラボのエンジニア・デザイナーの人事制度を以下の通り作成しました。

  • 年次の目標は策定しない

  • 期待値との大きな乖離が無く、成果が出れば翌年度に1段階昇格

  • 期待値との大きな乖離がある場合は、それ以上の昇格/降格もある

  • 期待値とのズレは半期に1度のフィードバックではなく、毎週の1on1で伝える

  • 能力ではなく、成果で判断する

それぞれを作った背景です。

年次の目標は策定しない

デジタルイノベーションラボはQUOカードPayという新規事業の為の組織です。QUOカードPayはまだ立ち上げフェーズの為、またスマホ決済は数ヶ月もすると環境が大きく変わってしまう為、年始に目標を立てても年末までに有効ではない目標になっている事があります。またデジタルイノベーションラボはできるだけ自走できる組織を目指している為、ゴールを共有し全員それを実現させることを目標としたいと考え、年次の目標は策定しないことにしました。

期待値との大きな乖離が無く、成果が出ていれば翌年度に1段階昇格。

公正・公平な人事評価は非常に難しく、また納得感の無い評価が退職理由になることも多いのではと考えています。また評価を気にして上司や同僚との議論を避けたり、評価に最適化された行動を取ってしまうのを避け、仕事自体に集中できる環境を作りたいと考え、このような形としました。副効用ですが、被評価者・評価者両方の目標設定・評価の時間がだいぶ削減できるとも考えています。

期待値との大きな乖離がある場合は、それ以上の昇格/降格もある。

期待を大きく超えて活躍した場合は1段階と言わず数段階昇格できるようにしました。

期待値とのズレは半期に1度のフィードバックではなく、隔週の1 on 1で伝える

なるべく早いフィードバックにより、双方の期待していること/やりたいことを調整したいと考えています。

能力ではなく、成果で判断する

例えば能力が非常に高いメンバーがいても成果が全く出ていなかったら貢献しているとは言えないと考えこのようにしました。

一旦このような形にしましたが、今後運用していく中で改善していければと考えています。

QUOカードPayシステムのバックエンドで利用している技術

デジタルイノベーションラボの齋藤です。

今回はQUOカードPayシステムのバックエンドで利用している技術を紹介します。

以下のような技術/サービス/ツールを利用しています。

バックエンドの言語

決済アプリになるので出来るだけ問題を検出しやすいようにしたいと考え、まず静的型付け言語で進める方向で検討をはじめました。その時の候補はJava,Scala,Kotlin,Goです。

実際にシステムを開発する際はプログラミング言語だけでなくフレームワークも重要な要素になると思いますが、KotlinであればJavaの資産も利用でき、またJavaより冗長さが無く良いのではと考えサーバーサイドKotlinを選択しました。 Goは決済システムのバックエンドとしてはプリミティブすぎるのではないかと考え、Scalaは表現力が高いと思いますがメンバーによる差が出やすいと考え選択肢から外しました。

ちなみにGoはLambdaで使っています。

フレームワーク

リリース時はシンプルな部分のみ作っていたことやスケジュール的な都合等色々あり、Lambdaでgoを動かしていました。以下の通り現在解消されたそうですが、当時は色々課題があり、順次Fargateに移行しようとしてました。

Fargate移行後はメンバーの経験しているSpring Bootを利用していましたが、以下きしださんのスライドで説明されているように現在はコンテナの起動時間を考慮しMicronautも利用しています。

speakerdeck.com

O/R Mapperは最初はDomaを利用していましたが、今後jOOQが主流になりそうな雰囲気を感じたのでjOOQを導入しました。今後は以下のExposedがどうなるのかが気になっています。

github.com

インフラ

AWSを利用しています。Fargate上にデプロイしています。細かい部分ではgoをLambdaで動かしています。DBはAurora PostgreSQLを主に使っています。

クオカード デジタルイノベーションラボについて

クオカード デジタルイノベーションラボの齋藤です。

1年半前ぐらいからデジタルイノベーションラボのテックブログを始めようとしていましたが、とうとう初エントリをアップすることができました。

おそらくほぼ全てのソフトウェアエンジニアにクオカードという会社が認知されていないと思うので、どういう組織か、何をやってるのか等について書きたいと思います。

株式会社クオカードについて

創業30年ちょっとでQUOカードというプリペイドカードを発行したりQUOカードPayというデジタルギフトサービスを運営している会社です。2017年12月に親会社が現在のティーガイアに変わりました。金融系なので、ベンチャーマインド溢れるというよりはどちらかというと堅い会社だと思います。

QUOカードPayについて

2017年12月に親会社が変わり、デジタル版のQUOカードを立ち上げる事が決まりました。私もそのタイミングでジョインしましたが、当時サーバーサイドやアプリのソフトウェアエンジニアがおらず、採用から始める事になりました。しかしリリース時期の目標は約1年後に決まっていた為残高管理部分は外注にし、アプリや周辺部分は内製化とすることにしました。現在は徐々に内製化を進めています。

QUOカードPayは決済ではなくデジタルギフトです。バーコードでお支払いをいただく点は他のバーコード決済サービスと同じですが、利用者がご自身のクレジットカードや銀行口座と紐づけて支払いをするのではなく、主に企業の販促等で配られたものでお支払いをしていただくイメージです。 またQUOカードPayは既存のQUOカードのリプレイスではなく、使い分けになると考えています。例えば既存のQUOカードを販促で配布する場合、住所等の個人情報を受け取る必要がありました。また発送にかかる手間・コストも必要になります。そのようなケースはメールアドレスさえ受け取れば配布が可能なQUOカードPayの方が向いていると思います。逆に来店キャンペーンのようにその場で直接手渡しをするようなケースは既存のQUOカードの方が向いていると思います。

QUOカードPayは2019年3月に無事リリースでき、現在は主に機能追加や各種改善を行なっています。

デジタルイノベーションラボについて

QUOカードPayの開発やセールス、プロモーションを行う為の組織として、2017年12月に作られました。クオカードの本社は三越前ですが、デジタルイノベーションラボは京橋駅直結のWeWork東京スクエアガーデンにオフィスがあります。 デジタルイノベーションラボにプロダクトグループとマーケティンググループがあり、プロダクトグループは開発を、セールスやプロモーションはマーケティンググループが担当しています。 プロダクトグループの雰囲気はどちらかというとスタートアップやweb系企業に近いと思います。

  • 現在のプロダクトグループのメンバー

ソフトウェアエンジニア、UIデザイナー、UXデザイナー合わせて10人ちょっとです。

開発の進め方

スクラムを導入しました。現在は2週間スプリントです。まだ全てうまく行っているという状況ではないのですが、色々と試行錯誤しながら改善を進めています。できるだけクロスファンクショナルな組織になるように進めています。

採用について

エンジニア募集中です。募集職種、条件等は以下に記載しました。 https://quo-digital.jp/

隔週火曜のスクラムイベントの日以外は申請無しでリモートワークできます。技術書は買い放題です。開発マシンは基本的にメモリ32GのMacBook Proです。IntelliJを使う場合は会社で購入します。

エンジニア向けイベントは基本的に業務として参加可能です。 いくつかのイベントのスポンサーになりました。

スポンサーになったイベント

https://droidkaigi.jp/2019/en/#sponsors

https://www.tryswift.co/events/2019/tokyo/jp/

https://iosdc.jp/2019/sponsor.html

https://rubykaigi.org/2018/sponsors/

https://2019.scalamatsuri.org/index_en.html

https://kotlin.connpass.com/event/129860/

https://2020.scrumgatheringtokyo.org/