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

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

View Slide

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

View Slide

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

View Slide

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

View Slide

5
フリューの紹介

View Slide

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

View Slide

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

View Slide

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

View Slide

9
筐体の構成
事前ブース撮影ブース落書きブース印刷ブース

View Slide

10
筐体の構成

View Slide

11
筐体の構成

View Slide

12
筐体の構成

View Slide

13
筐体の構成

View Slide

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

View Slide

15

View Slide

16
年間開発タイトル数
新機種
3タイトル
バージョンアップ
３～４タイトル

View Slide

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

View Slide

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

View Slide

19
Windows Embedded
ゲーム
C# WPF / Unity
落書き
C++ / Unity
画像処理
C++
利用技術

View Slide

20
Windows
Teams
Visual Studio
Unity
Coverity
Github Enterprise
Redmine
Confluence
開発環境

View Slide

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

View Slide

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

View Slide

23

View Slide

24

View Slide

25
様々な決済ブランド
LINE Pay PayPay 楽天Pay
メルペイ d払い au Pay

View Slide

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

View Slide

27
それぞれの決済方式に必要なもの
• QRコードを読み込むカメラ
• QRコードを表示する画面

View Slide

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

View Slide

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

View Slide

30
ここから、プリントシール機で実装したお話

View Slide

31
LINE Payを実装したのは2018年

View Slide

32
LINE Payの開発環境が整っていた
・APIの提供
・サンドボックス環境
・テストアカウントの登録環境
・テスト用クライアントアプリが
必要なかった

View Slide

33
なぜ、プリントシール機に
LINE Payを入れようと思ったのか？

View Slide

34
この当時、消費税増税まであと１年強でした。
なぜ、プリントシール機に
LINE Payを入れようと思ったのか？

View Slide

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

View Slide

36
増税対策のひとつとして導入
・1円刻みでの価格設定を可能に
・オペレーター様が価格を自由に設定できる

View Slide

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

View Slide

38
2019年末～Paypayの実装

View Slide

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

View Slide

40
デモ画面

View Slide

41
決済人数選択

View Slide

42
決済ブランド選択

View Slide

43
決済用QRコード表示

View Slide

44
プリ独自の割り勘決済

View Slide

45
それぞれで決済ブランドが選択可能

View Slide

46
それぞれのQRコードを表示

View Slide

47
一人決済した状態

View Slide

48
一人決済していても最初に戻れる

View Slide

49
自動的に返金処理する

View Slide

50
QRコード決済に必要なもの

View Slide

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

View Slide

52
実現するにあたって開発したもの
APIサーバー
管理サイト用Webサーバー
データベース
クライアントアプリケーション

View Slide

53
APIサーバー
Java Spring Bootで実装
筐体から呼び出されるAPI
• 筐体登録
• 注文処理
• 決済状態確認など
決済事業者から提供されているAPIの呼び出し

View Slide

54
Java Spring Bootで実装
管理サイト用Webサーバー
売上や筐体の状態が確認できるWebシステム
• アカウント作成
• アカウントに対して筐体紐付け
• 返金処理
• 筐体情報の一覧表示

View Slide

55
C#とC++で実装
ゲーム画面からQRコード決済を利用しやすくするモジュール
• C++、C#、Unityどれからでも使える

View Slide

56
DLL
• C#
DLL
• C++
exe
• C#
ゲーム画面から利用
WPF / Unity
ゲーム画面以外からの利用
C++
プロセス間通信で情報を送受信

View Slide

57
決済までの流れ

View Slide

58
構成図（簡易版）

View Slide

59
店舗運営者はWebシステム（管理サイト）から価格設定を行える

View Slide

60
筐体は起動時にAPIサーバーに価格情報を問い合わせる

View Slide

61
デモ画面で決済可能なブランドと価格を表示させる

View Slide

62
QRコード表示時にはAPIサーバーへ注文依頼

View Slide

63
決済事業者APIに注文依頼することでURLが返ってくる

View Slide

64
APIサーバーからURLを筐体へ返して筐体でQRコード変換して表示

View Slide

65
割り勘の場合は、２回APIを呼ぶ

View Slide

66
QRコード表示中は決済ステータスを確認

View Slide

67
二人が決済完了すれば、ゲーム開始する

View Slide

68
APIサーバーとWebシステム間はエラーが出たゲームのみ返金可能に

View Slide

69

View Slide

70
まず、前提条件を設けた
決済代行を行わない

View Slide

71
決済代行とは
筐体からの決済売上
売上金
店舗ごとに分配
フリューが店舗を一元管理する方法
店舗（オペレーター様）
決済事業者
フリュー

View Slide

72
決済代行とは
実験的要素もあったので影響範囲を小さく
筐体からの決済売上
売上金
店舗ごとに分配
決済事業者
フリュー
フリューが店舗を一元管理する方法

View Slide

73
決済代行を行わない
方針として
・オペレーター様に決済事業者の加盟店となってもらう
・決済に必要なサーバーはフリューが用意
筐体からの決済
決済事業者
売上金

View Slide

74
続いて、大きく２つの検討項目
１．筐体の管理方法
２．筐体の通信が不安定な場合の対応

View Slide

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

View Slide

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

View Slide

77
企業、店舗、筐体の順に紐付けを構築
企業
店舗
筐体
筐体
店舗筐体
管理サイト

View Slide

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

View Slide

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

View Slide

80
企業アカウントで決済に必要な情報を入力

View Slide

81
企業アカウントからは店舗一覧、修正削除が可能

View Slide

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

View Slide

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

View Slide

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

View Slide

85
筐体
筐体のカメラでQRコードを読み込む
管理サイト
QRコードを発行

View Slide

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

View Slide

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

View Slide

88
QRコードの中身
暗号化してQRコードにエンコード
JSON
・店舗アカウントのID
・自動生成のランダムな文字列

View Slide

89
２つ目の検討項目
・筐体の管理方法
・筐体の通信が不安定な場合の対応

View Slide

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

View Slide

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

View Slide

92
QRコード決済を選択したタイミングで
通信が切れていれば筐体側でエラー停止させることなく誘導が可能

View Slide

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

View Slide

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

View Slide

95
対応策
QRコード表示以降、決済ステータス取得に失敗したらエラーとする

View Slide

96
さらにエラー停止させる
筐体からは決済状態が不明となるため、スタッフオペレーション

View Slide

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

View Slide

98
決済だけでなく、より便利に
管理サイト上から売上の確認

View Slide

99
プレイ料金設定

View Slide

100
シール紙の残り枚数の確認

View Slide

101
・遠隔操作が無人店舗に強力なツールとなりえる
・オペレーター様の声を聞きながら機能を追加していきたい
QRコード決済を使わなくても利用できる

View Slide

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

View Slide

103
今日話すこと
プロジェクト立ち上げと遂行

View Slide

104

View Slide

105
QRコード決済導入はエンジニア提案の
ボトムアップなプロジェクト

View Slide

106
開発人員
エンジニア
２人+α
その他、社内外問わず
様々な人に開発やサポートをお願いしました。

View Slide

107
開発スケジュール
2018年8月下旬
• LINE Pay
調査・開発開始
2019年3月
• LINE Pay
ロケテスト
2019年12月
• LINE Pay
ローンチ
2020年3月
• PayPay
ロケテスト

View Slide

108
短時間かつ少人数でプロジェクトを
成功させることができた

View Slide

109
プロジェクトの立ち上げと遂行

View Slide

110
開発に至った背景
自分たちの技術で利益を実感できる
ビジネスを生み出したかった

View Slide

111
自部署に掲げられている指針
ビジネス感覚を持ったクリエイティブ集団

View Slide

112
ビジネス感覚を持ったクリエイティブ集団とは
・事業に興味をもつ
・自分の仕事が事業や市場に与える影響を言葉で説明できる
・貪欲に学び続ける
・アイデアを発信できる

View Slide

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

View Slide

114
指針が行動に繋がる
自分たちの技術で利益を実感できる
ビジネスを生み出したかった

View Slide

115
プロジェクト立ち上げまで
ブレスト選定
短期間での
集中実装
プレゼン承認
立ち上げまでの歩み

View Slide

116
ブレスト選定
短期間での
集中実装
プレゼン承認
ブレスト、選定は既存事業に近しいものを
・事業における課題を解決するもの
・強みをいかせること

View Slide

117
ブレスト選定
短期間での
集中実装
プレゼン承認
決めたら一気にプロトタイプを作ってしまう
・熱量が冷めないうちに
・合宿的にやるのも良い

View Slide

118
ブレスト選定
短期間での
集中実装
プレゼン承認
裁量権を持っている人に数字で語る
・課題解決におけるインパクト
・プロトタイプを見せることで実現可能性を後押し

View Slide

119
プロジェクトを成功させるために
次の２点を意識してプロジェクトを進めた
１．MVPの徹底
２．社内レビューを徹底する

View Slide

120
MVPを徹底する
影響範囲を限りなく小さくする
技術的に解決できる部分は徹底的に行い
自分たち以外に関わる人を最小限にする
プロジェクトの進行も早く、導入への障壁も下がった

View Slide

121
社内レビューを徹底する
自分たちがやっていることを公開する
会社組織を活用し
詳しい人に相談やレビューを入念に行った
事業部を超えた協力が得られた

View Slide

122
プロジェクトが成功したポイント
・事業課題を解決できるサービスを考えられた
・自分たちの技術力で運用までカバーすることを検討した
・社内組織を活用した

View Slide

123

View Slide

124
QRコード決済開発はエンジニア２人
進捗管理されるわけでもなく、互いに考え
互いを補完し合いながら能動的に行動した

View Slide

125
ペア開発におけるメリット
１．開発スピードの速さと品質の担保
２．悩みや課題の共有

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

130
私が感じたこと
・安定した開発の速さ
・課題に対して深く議論できるので妥協なく
スマートな対策やアイデアが出やすい
・集中度合いがかなり高いので、疲労が大きく定時内が限界

View Slide

131
まとめ

View Slide

132
まとめ
１．QRコード決済を実装、運用してみて
２．開発プロセスについて

View Slide

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

View Slide

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

View Slide

135
さいごに

View Slide

136
さいごに
プロジェクトを立ち上げて進めるには色んなスキルが必要になります
行動力
マーケティ
ング
データ分析問題解決
コミュニ
ケーション

View Slide

137
さいごに
技術力 ✕ もう一つの強み＝価値

View Slide

138
ご清聴ありがとうございました

View Slide

139

View Slide

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

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

furyu-puri

More Decks by furyu-puri

Other Decks in Programming

Featured

Transcript