プリントシール機にQRコード決済を導入した話

by furyu-puri

Slide 1

Slide 1 text

1 © FURYU Corporation. エンジニアがプロジェクトを立ち上げてリリースするまでの道のりプリントシール機に QRコード決済を導入した話

Slide 2

Slide 2 text

2 © FURYU Corporation. ・QRコードの商標はデンソーウェーブの登録商標です。・Amazon Web Services、"Powered by Amazon Web Services"ロゴ、およびかかる資料で使用されるその他のAWS商標は、米国その他の諸国における、Amazon.com, Inc.またはその関連会社の商標です。・Windows、Windows またはその他のマイクロソフト製品の名称および製品名は、米国 Microsoft Corporation の、米国およびその他の国における商標または登録商標です。・Redmineは、Jan Schulz-Hofen及びJean-Philippe Langの商標または登録商標です。・その他会社名、製品名、サービス名等は、それぞれ各社の商標または登録商標です。

Slide 3

Slide 3 text

3 © FURYU Corporation. 田村克彦自己紹介コンシューマゲーム開発経験を経てフリューへ入社プリントシール機における落書きアプリケーション開発をメインに担当フリュー株式会社プリントシール機事業部ソフトウエア開発部

Slide 4

Slide 4 text

4 © FURYU Corporation. INDEX プリントシール機の開発について QRコード決済の実装と運用についてフリューの紹介まとめ開発プロセス 01 02 03 04 05

Slide 5

Slide 5 text

5 © FURYU Corporation. フリューの紹介

Slide 6

Slide 6 text

6 © FURYU Corporation. フリュー株式会社の紹介プリントシールコンテンツメディアキャラクターマーチャンダイジングゲーム/アニメ人々のこころを豊かで幸せにする良質なエンタテインメントを創出する！

Slide 7

Slide 7 text

7 © FURYU Corporation. プリントシール機のトップメーカー ★プリントシール機台数シェアNO.1 日本にある９5％以上はフリューのプリントシール機 ※2021年夏自社調べ ★「ピクトリンク」有料会員数１５０万人フリュー株式会社の紹介 ※2021年3月末時点 ※ピクトリンクとはフリューのプリ画取得サイト

Slide 8

Slide 8 text

8 © FURYU Corporation. プリントシール機とは、主にゲームセンターに設置される自動写真撮影機です。ユーザーからはプリという愛称で呼ばれています。プリントシール機の紹介

Slide 9

Slide 9 text

9 © FURYU Corporation. プリントシール機の紹介筐体の構成事前ブース撮影ブース落書きブース印刷ブース

Slide 10

Slide 10 text

10 © FURYU Corporation. プリントシール機の紹介筐体の構成事前ブース撮影ブース落書きブース印刷ブース

Slide 11

Slide 11 text

11 © FURYU Corporation. プリントシール機の紹介筐体の構成事前ブース撮影ブース落書きブース印刷ブース

Slide 12

Slide 12 text

12 © FURYU Corporation. プリントシール機の紹介筐体の構成事前ブース撮影ブース落書きブース印刷ブース

Slide 13

Slide 13 text

13 © FURYU Corporation. プリントシール機の紹介筐体の構成事前ブース撮影ブース落書きブース印刷ブース

Slide 14

Slide 14 text

14 © FURYU Corporation. ハードウェア構成 Windows PC プリントシール機の紹介一眼レフカメラ USB シールプリンタ USB IO基板 COM 入力デバイス COM 通信機器 LTE、Ethernet

Slide 15

Slide 15 text

15 © FURYU Corporation. プリントシール機の開発について

Slide 16

Slide 16 text

16 © FURYU Corporation. 年間開発タイトル数新機種 3タイトルバージョンアップ３～４タイトルプリントシール機の開発について

Slide 17

Slide 17 text

17 © FURYU Corporation. 企画、ハード、ソフトと分かれています。画像は仮企画ハードソフト筐体コンセプト、世界観、仕様筐体設計、図面作成、機構開発などゲーム開発、ログ解析などプリントシール機の開発について

Slide 18

Slide 18 text

18 © FURYU Corporation. 私が所属しているソフトウエア開発部について画像は仮ゲーム落書き画像処理ゲーム画面、ゲームシーケンス制御、機器の制御落書き画面画像処理全般、機械学習プリントシール機の開発について

Slide 19

Slide 19 text

19 © FURYU Corporation. プリントシール機の開発について Windows Embedded ゲーム C# WPF / Unity 落書き C++ / Unity 画像処理 C++ 利用技術

Slide 20

Slide 20 text

20 © FURYU Corporation. プリントシール機の開発について Windows Teams Visual Studio Unity Coverity Github Enterprise Redmine Confluence 開発環境

Slide 21

Slide 21 text

21 © FURYU Corporation. プリントシール機にQRコード決済をテスト導入した話

Slide 22

Slide 22 text

22 © FURYU Corporation. 今日話すこと QRコード決済の実装と運用について QRコード決済の実装開発時に検討すべきこと開発プロセスについてプロジェクト立ち上げと遂行常時ペア開発の効果

Slide 23

Slide 23 text

23 © FURYU Corporation. QRコード決済の実装と運用について

Slide 24

Slide 24 text

24 © FURYU Corporation. QRコード決済の実装

Slide 25

Slide 25 text

25 © FURYU Corporation. QRコード決済の実装様々な決済ブランド LINE Pay PayPay 楽天Pay メルペイ d払い au Pay

Slide 26

Slide 26 text

26 © FURYU Corporation. QRコード決済方式は2種類 • スマートフォンでQRコードを表示させてお店側が読み込む方式 • オフライン（対面）での利用 CPM(Consumer Presented Mode) • スマートフォンでお店側のQRコードを読み取って決済する方式 • オンライン（ECサイト）、オフラインどちらでも使える MPM(Merchant Presented Mode) QRコード決済の実装

Slide 27

Slide 27 text

27 © FURYU Corporation. QRコード決済の実装それぞれの決済方式に必要なもの • QRコードを読み込むカメラ CPM(Consumer Presented Mode) • QRコードを表示する画面 MPM(Merchant Presented Mode)

Slide 28

Slide 28 text

28 © FURYU Corporation. QRコード決済の実装プリントシール機ではMPMを採用 • スマートフォンでQRコードを表示させてお店側が読み込む方式 • オフライン（対面）での利用 CPM(Consumer Presented Mode) • スマートフォンでお店側のQRコードを読み取って決済する方式 • オンライン（ECサイト）、オフラインどちらでも使える MPM(Merchant Presented Mode)

Slide 29

Slide 29 text

29 © FURYU Corporation. QRコード決済の実装 MPM方式は価格情報を動的にQRコードに埋め込める支払う側はQRコードを読み込んで決済ボタンを押すだけ店舗側が金額の確認をしなくてよい自動販売機やECサイトで利用が可能

Slide 30

Slide 30 text

30 © FURYU Corporation. QRコード決済の実装ここから、プリントシール機で実装したお話

Slide 31

Slide 31 text

31 © FURYU Corporation. QRコード決済の実装 LINE Payを実装したのは2018年

Slide 32

Slide 32 text

32 © FURYU Corporation. QRコード決済の実装 LINE Payの開発環境が整っていた・APIの提供・サンドボックス環境・テストアカウントの登録環境・テスト用クライアントアプリが必要なかった

Slide 33

Slide 33 text

33 © FURYU Corporation. QRコード決済の実装なぜ、プリントシール機に LINE Payを入れようと思ったのか？

Slide 34

Slide 34 text

34 © FURYU Corporation. QRコード決済の実装この当時、消費税増税まであと１年強でした。なぜ、プリントシール機に LINE Payを入れようと思ったのか？

Slide 35

Slide 35 text

35 © FURYU Corporation. QRコード決済の実装プリントシール機にとっての増税１００円値上げはユーザーにとって影響が大きい・100円硬貨単位でしか価格設定できない・内税なので、プレイ料金が据え置きだとオペレーター様の利益が増税分減ってしまう ※オペレーター様とはアミューズメント施設のオーナー様や運営者様

Slide 36

Slide 36 text

36 © FURYU Corporation. QRコード決済の実装増税対策のひとつとして導入・1円刻みでの価格設定を可能に・オペレーター様が価格を自由に設定できる

Slide 37

Slide 37 text

37 © FURYU Corporation. QRコード決済の実装ターゲットユーザーに最適だったLINE Pay LINEアプリで決済が可能 • 別途アプリを入れる必要がないハードルの低さ KYC（本人確認）がいらない • プリペイドとしても使えるので銀行口座やクレジットカードが必要ない

Slide 38

Slide 38 text

38 © FURYU Corporation. QRコード決済の実装 2019年末～Paypayの実装

Slide 39

Slide 39 text

39 © FURYU Corporation. プリントシール機での決済画面紹介

Slide 40

Slide 40 text

40 © FURYU Corporation. QRコード決済の実装デモ画面

Slide 41

Slide 41 text

41 © FURYU Corporation. QRコード決済の実装決済人数選択

Slide 42

Slide 42 text

42 © FURYU Corporation. QRコード決済の実装決済ブランド選択

Slide 43

Slide 43 text

43 © FURYU Corporation. QRコード決済の実装決済用QRコード表示

Slide 44

Slide 44 text

44 © FURYU Corporation. QRコード決済の実装プリ独自の割り勘決済

Slide 45

Slide 45 text

45 © FURYU Corporation. QRコード決済の実装それぞれで決済ブランドが選択可能

Slide 46

Slide 46 text

46 © FURYU Corporation. QRコード決済の実装それぞれのQRコードを表示

Slide 47

Slide 47 text

47 © FURYU Corporation. QRコード決済の実装一人決済した状態

Slide 48

Slide 48 text

48 © FURYU Corporation. QRコード決済の実装一人決済していても最初に戻れる

Slide 49

Slide 49 text

49 © FURYU Corporation. QRコード決済の実装自動的に返金処理する

Slide 50

Slide 50 text

50 © FURYU Corporation. QRコード決済に必要なもの

Slide 51

Slide 51 text

51 © FURYU Corporation. QRコード決済を実現するために必要なものプリントシール機で利用したMPMでは・QRコードを表示させるディスプレイ・決済事業者との決済APIサーバーと通信できる通信網

Slide 52

Slide 52 text

52 © FURYU Corporation. QRコード決済を実現するために必要なもの実現するにあたって開発したもの APIサーバー管理サイト用Webサーバーデータベースクライアントアプリケーション

Slide 53

Slide 53 text

53 © FURYU Corporation. QRコード決済を実現するために必要なもの実現するにあたって開発したもの APIサーバー Java Spring Bootで実装筐体から呼び出されるAPI • 筐体登録 • 注文処理 • 決済状態確認など決済事業者から提供されているAPIの呼び出し

Slide 54

Slide 54 text

54 © FURYU Corporation. QRコード決済を実現するために必要なもの実現するにあたって開発したもの Java Spring Bootで実装管理サイト用Webサーバー売上や筐体の状態が確認できるWebシステム • アカウント作成 • アカウントに対して筐体紐付け • 返金処理 • 筐体情報の一覧表示

Slide 55

Slide 55 text

55 © FURYU Corporation. QRコード決済を実現するために必要なもの実現するにあたって開発したもの C#とC++で実装クライアントアプリケーションゲーム画面からQRコード決済を利用しやすくするモジュール • C++、C#、Unityどれからでも使える

Slide 56

Slide 56 text

56 © FURYU Corporation. QRコード決済を実現するために必要なもの実現するにあたって開発したものクライアントアプリケーション DLL • C# DLL • C++ exe • C# ゲーム画面から利用 WPF / Unity ゲーム画面以外からの利用 C++ プロセス間通信で情報を送受信

Slide 57

Slide 57 text

57 © FURYU Corporation. 決済までの流れ

Slide 58

Slide 58 text

58 © FURYU Corporation. 決済までの流れ構成図（簡易版）

Slide 59

Slide 59 text

59 © FURYU Corporation. 決済までの流れ店舗運営者はWebシステム（管理サイト）から価格設定を行える

Slide 60

Slide 60 text

60 © FURYU Corporation. 決済までの流れ筐体は起動時にAPIサーバーに価格情報を問い合わせる

Slide 61

Slide 61 text

61 © FURYU Corporation. 決済までの流れデモ画面で決済可能なブランドと価格を表示させる

Slide 62

Slide 62 text

62 © FURYU Corporation. 決済までの流れ QRコード表示時にはAPIサーバーへ注文依頼

Slide 63

Slide 63 text

63 © FURYU Corporation. 決済までの流れ決済事業者APIに注文依頼することでURLが返ってくる

Slide 64

Slide 64 text

64 © FURYU Corporation. 決済までの流れ APIサーバーからURLを筐体へ返して筐体でQRコード変換して表示

Slide 65

Slide 65 text

65 © FURYU Corporation. 決済までの流れ割り勘の場合は、２回APIを呼ぶ

Slide 66

Slide 66 text

66 © FURYU Corporation. 決済までの流れ QRコード表示中は決済ステータスを確認

Slide 67

Slide 67 text

67 © FURYU Corporation. 決済までの流れ二人が決済完了すれば、ゲーム開始する

Slide 68

Slide 68 text

68 © FURYU Corporation. 決済までの流れ APIサーバーとWebシステム間はエラーが出たゲームのみ返金可能に

Slide 69

Slide 69 text

69 © FURYU Corporation. 開発時に検討すべきこと

Slide 70

Slide 70 text

70 © FURYU Corporation. 開発時に検討すべきことまず、前提条件を設けた決済代行を行わない

Slide 71

Slide 71 text

71 © FURYU Corporation. 開発時に検討すべきこと決済代行とは筐体からの決済売上売上金店舗ごとに分配フリューが店舗を一元管理する方法店舗（オペレーター様）決済事業者フリュー

Slide 72

Slide 72 text

72 © FURYU Corporation. 開発時に検討すべきこと決済代行とは実験的要素もあったので影響範囲を小さく筐体からの決済売上売上金店舗ごとに分配店舗（オペレーター様）決済事業者フリューフリューが店舗を一元管理する方法

Slide 73

Slide 73 text

73 © FURYU Corporation. 開発時に検討すべきこと決済代行を行わない方針として・オペレーター様に決済事業者の加盟店となってもらう・決済に必要なサーバーはフリューが用意筐体からの決済店舗（オペレーター様）決済事業者売上金

Slide 74

Slide 74 text

74 © FURYU Corporation. 開発時に検討すべきこと続いて、大きく２つの検討項目１．筐体の管理方法２．筐体の通信が不安定な場合の対応

Slide 75

Slide 75 text

75 © FURYU Corporation. 筐体の管理方法筐体をどのように管理するか店舗や加盟店との紐付けは？

Slide 76

Slide 76 text

76 © FURYU Corporation. 筐体の管理方法筐体をどのように管理するか店舗や加盟店との紐付けは？店舗と筐体を管理する Webシステムを構築

Slide 77

Slide 77 text

77 © FURYU Corporation. 筐体の管理方法企業、店舗、筐体の順に紐付けを構築企業店舗筐体筐体店舗筐体管理サイト

Slide 78

Slide 78 text

78 © FURYU Corporation. 筐体の管理方法企業店舗筐体筐体店舗筐体管理サイト決済事業者の加盟店契約に寄せた方法企業（加盟店）＝１アカウント企業、店舗、筐体の順に紐付けを構築

Slide 79

Slide 79 text

79 © FURYU Corporation. 筐体の管理方法企業アカウントを作成しその管理者が店舗アカウントを発行できる形企業店舗筐体筐体店舗筐体管理サイト

Slide 80

Slide 80 text

80 © FURYU Corporation. 筐体の管理方法企業アカウントで決済に必要な情報を入力

Slide 81

Slide 81 text

81 © FURYU Corporation. 筐体の管理方法企業アカウントからは店舗一覧、修正削除が可能

Slide 82

Slide 82 text

82 © FURYU Corporation. 筐体の管理方法店舗と筐体の紐付け店舗にある筐体をどれだけ手間少なく管理システムと連携するか

Slide 83

Slide 83 text

83 © FURYU Corporation. 筐体の管理方法管理システムとの連携管理システムから発行する登録コードを筐体で入力？

Slide 84

Slide 84 text

84 © FURYU Corporation. 筐体の管理方法筐体が多いと手間が掛かりすぎてしまうプリントシール機ならではの方法を取り入れた管理システムとの連携管理システムから発行する登録コードを筐体で入力？

Slide 85

Slide 85 text

85 © FURYU Corporation. 筐体の管理方法管理システムとの連携筐体筐体のカメラでQRコードを読み込む管理サイト QRコードを発行

Slide 86

Slide 86 text

86 © FURYU Corporation. 筐体の管理方法管理システムとの連携メンテナンス画面から筐体の一眼レフカメラで QRコードを読み込むライブビュー機能で映像の１フレームごとに QRコードを解析し、管理サイトから発行されたQRコードなら完了とする。

Slide 87

Slide 87 text

87 © FURYU Corporation. 筐体の管理方法 QRコードの内容と筐体のユニークな情報を筐体からAPIサーバーへ送り認証に成功すれば登録完了

Slide 88

Slide 88 text

88 © FURYU Corporation. 筐体の管理方法 QRコードの中身暗号化してQRコードにエンコード JSON ・店舗アカウントのID ・自動生成のランダムな文字列

Slide 89

Slide 89 text

89 © FURYU Corporation. 開発時に検討すべきこと２つ目の検討項目・筐体の管理方法・筐体の通信が不安定な場合の対応

Slide 90

Slide 90 text

90 © FURYU Corporation. 通信が不安定な場合の対応筐体の通信状況が必ずしも良いとはいえないお金に関わる部分なので、何かあれば即クレームに繋がる最悪のユースケースを考慮する必要がある

Slide 91

Slide 91 text

91 © FURYU Corporation. 通信が不安定な場合の対応筐体の通信状況が必ずしも良いとはいえないお金に関わる部分なので、何かあれば即クレームに繋がる。最悪のユースケースを考慮する必要があるつまり、ユーザーがお金を払ったのにゲームが開始されないこと

Slide 92

Slide 92 text

92 © FURYU Corporation. 通信が不安定な場合の対応 QRコード決済を選択したタイミングで通信が切れていれば筐体側でエラー停止させることなく誘導が可能

Slide 93

Slide 93 text

93 © FURYU Corporation. 通信が不安定な場合の対応問題はユーザーがQRコードを読み取った後に通信が切れた場合サーバーとユーザーのスマートフォンで決済が完結してしまい筐体側で決済状態が取れない

Slide 94

Slide 94 text

94 © FURYU Corporation. 通信が不安定な場合の対応問題はユーザーがQRコードを読み取った後に回線が切れた場合サーバーとユーザーのスマートフォンで決済が完結してしまい筐体側で決済状態が取れない支払ったかどうかもわからない

Slide 95

Slide 95 text

95 © FURYU Corporation. 通信が不安定な場合の対応対応策 QRコード表示以降、決済ステータス取得に失敗したらエラーとする

Slide 96

Slide 96 text

Slide 97

Slide 97 text

97 © FURYU Corporation. 開発時に検討すべきこと検討の結果・筐体の管理方法 →管理サイトを構築し、自社筐体に特化したサービスを提供・筐体との通信が不安定な場合の対応 →ワーストケースを想定する苦肉の策ではあるが、店舗スタッフオペレーション

Slide 98

Slide 98 text

Slide 99

Slide 99 text

Slide 100

Slide 100 text

Slide 101

Slide 101 text

Slide 102

Slide 102 text

102 © FURYU Corporation. QRコード決済の実装と運用についてまとめ・MPMであれば、筐体に対して追加ハードウェアが要らない →筐体に追加コストが必要ない・自前で実装することでユーザーに寄り添った仕様で作れる →プリントシール機では割り勘決済を実装筐体と連動するスマホアプリがあればシームレスに決済も可能。

Slide 103

Slide 103 text

Slide 104

Slide 104 text

Slide 105

Slide 105 text

Slide 106

Slide 106 text

Slide 107

Slide 107 text

107 © FURYU Corporation. 開発プロセスについて開発スケジュール 2018年8月下旬 • LINE Pay 調査・開発開始 2019年3月 • LINE Pay ロケテスト 2019年12月 • LINE Pay ローンチ 2020年3月 • PayPay ロケテスト

Slide 108

Slide 108 text

Slide 109

Slide 109 text

Slide 110

Slide 110 text

Slide 111

Slide 111 text

Slide 112

Slide 112 text

Slide 113

Slide 113 text

113 © FURYU Corporation. 開発に至った背景ビジネス感覚を持ったクリエイティブ集団とは・事業に興味をもつ・自分の仕事が事業や市場に与える影響を言葉で説明できる・貪欲に学び続ける・アイデアを発信できる持っている技術や知識をより効果的に発揮するための指針

Slide 114

Slide 114 text

Slide 115

Slide 115 text

Slide 116

Slide 116 text

Slide 117

Slide 117 text

Slide 118

Slide 118 text

Slide 119

Slide 119 text

Slide 120

Slide 120 text

Slide 121

Slide 121 text

Slide 122

Slide 122 text

Slide 123

Slide 123 text

Slide 124

Slide 124 text

Slide 125

Slide 125 text

Slide 126

Slide 126 text

126 © FURYU Corporation. 開発スピードの速さと品質の担保高速に機能実装を回す二人がそれぞれの観点を持ち、影響範囲を検討お互いが納得して設計と実装を行うので手戻りがない設計実装レビューレビュー対応設計実装設計の段階で実装も想像できているため圧倒的に早い

Slide 127

Slide 127 text

127 © FURYU Corporation. 悩みや課題の共有全力で一緒に解決策を考えられる事象が発生した際に最速のタイミングで共有できるお互いが当事者となるので一人で悩まなくてよい安心感も生まれる時間かけて深く議論や検討できる画期的な解決策やアイデアを生み出せることも

Slide 128

Slide 128 text

128 © FURYU Corporation. ペア開発で意識して実践したことこだわりを維持するために残業はしない常にペアで作業していると定時内だけでかなり疲労する疲れた状態で作業を続けても効率が下がるだけ終わらせることが目的になりこだわりが薄れないように

Slide 129

Slide 129 text

129 © FURYU Corporation. ペア開発で意識して実践したこと課題に対する解決策を出したら一日寝かす解決策を出したら満足してしまいがち本当にその策が最良なのか、翌日に再度見直す翌日に頭がリセットされた状態でもう一度考えてみることで新たな解決策が生まれることも

Slide 130

Slide 130 text

Slide 131

Slide 131 text

Slide 132

Slide 132 text

Slide 133

Slide 133 text

133 © FURYU Corporation. QRコード決済の実装と運用のまとめ・筐体と連動するスマホアプリがあればシームレスに決済が可能筐体に対して追加ハードウェアが要らない・MPMであれば、筐体に追加コストが必要ないユーザーに寄り添った仕様で作れる

Slide 134

Slide 134 text

134 © FURYU Corporation. 開発プロセスについてプロジェクトが成功したポイント・事業課題を解決できるサービスを考えられた・自分たちの技術力で運用までカバーを検討した・社内組織を活用したペア開発の効果・開発スピードの速さと品質の担保・悩みや課題の共有これからもペア開発は続けていくこの経験を参考にして、次なる新しい事業課題に取り組みます