Go To トラベルの電子クーポンでも利用された、ブラウザでの2次元コードリーダーの開発と将来について

by Kento

Slide 1

Slide 1 text

Go To トラベルの  電子クーポンでも利用された、  ブラウザでの2次元コードリーダーの  開発と将来について  株式会社ギフティ松島健人  

Slide 2

Slide 2 text

自己紹介 

Slide 3

Slide 3 text

自己紹介  松島健人（Matsushima Kento）    ECサイト運営会社 ▶ 2019年株式会社ギフティ入社  – 1993年生まれ / 群馬県出身  – ソフトウェアエンジニア  – Go To トラベルの電子クーポンを担当  

Slide 4

Slide 4 text

ギフティについて 

Slide 5

Slide 5 text

ギフト選びからお渡しまで、  オンラインで完結できるカジュアルギフトサービス  

Slide 6

Slide 6 text

eGift Platform

Slide 7

Slide 7 text

オンラインで手軽にギフトを贈れる「giftee」  

Slide 8

Slide 8 text

03 02 01 giftee ギフトを選ぶ  ギフトカードを選ぶ  SNSなどで贈る 

Slide 9

Slide 9 text

giftee and more 

Slide 10

Slide 10 text

eGiftを活用した法人向けソリューション  「giftee for Business」 

Slide 11

Slide 11 text

03 02 01 giftee for Business キャンペーンツイート  Twitter ID認証  抽選  04 当落画面 

Slide 12

Slide 12 text

eGift Platform

Slide 13

Slide 13 text

弊社が提供するチケット（バーコード読み取り）

Slide 14

Slide 14 text

弊社が提供するチケット（スタンプ）

Slide 15

Slide 15 text

QRコードリーダーによる読み取り  🎊  🎊  ※ QRコードは(株)デンソーウェーブの登録商標です    

Slide 16

Slide 16 text

1. QRコードリーダーの概要  2. QRコードリーダーの誕生秘話  3. QRコードリーダーの実装方法  4. ブラウザAPIを利用した将来 

Slide 17

Slide 17 text

本日はGoToトラベルプロジェクトの詳しい内容についてはお話しません。   質問などがあれば是非ギフティのスポンサーブースへ！ 󰡇   

Slide 18

Slide 18 text

1. QRコードリーダーの概要  2. QRコードリーダーの誕生秘話  3. QRコードリーダーの実装方法  4. ブラウザAPIを利用した将来 

Slide 19

Slide 19 text

02 01 QRコードリーダーの読み取りに必要な要素ブラウザからカメラを呼び出し、映像をブラウザにストリーミングする   ストリーミングした映像を解析する  

Slide 20

Slide 20 text

QRコードリーダーを実装したギフトチケットの仕組み QRコードの読み取り   QRコードの認識  QRコードの内容が正しいか確認 

Slide 21

Slide 21 text

QRコードリーダーを実装したギフトチケットの仕組み成功または失敗を  画面に表示  ⭕：チケット利用完了  ❌：エラー  QRコードの内容が正しいか確認  利⽤済み

Slide 22

Slide 22 text

1. QRコードリーダーの概要  2. QRコードリーダーの誕生秘話  3. QRコードリーダーの実装方法  4. ブラウザAPIを利用した将来 

Slide 23

Slide 23 text

1. QRコードリーダーの概要  2. QRコードリーダーの誕生秘話  3. QRコードリーダーの実装方法  4. ブラウザAPIを利用した将来 

Slide 24

Slide 24 text

ギフトチケットの読み取り方法読み取り方法  コスト  導入期間  接触の有無  POS  ✕  ✕  無  スタンプ  ○  ○  有  QRコードリーダーによるチケット読み取り  

Slide 25

Slide 25 text

QRコードリーダーを採用した理由 01 非接触で利用できるチケットが求められていた   - ユーザーが店頭のQRコードを読み取るだけなので、接触がない   02 ブラウザAPIが発達してきた  - 以前は「カメラアプリを起動してファイルをアップロードする」しか方法がなかった   - 上記は、ネイティブアプリで解決できるが、インストールのハードルが高い   03 コード決済アプリの台頭  - コード決済アプリが広まり、ユーザーのQRコード読み取りへのリテラシーが高まった  

Slide 26

Slide 26 text

ギフトチケットの読み取り方法読み取り方法  コスト  導入期間  接触の有無  POS  ✕  ✕  無  スタンプ  ○  ○  有  QRコードリーダー  ◎  ◎  無 

Slide 27

Slide 27 text

プロトタイプの作成 HTML、CSS、JavaScriptで完結   QRコードリーダー機能だけを有する   弊社のギフトチケットで正常に動作するか   サポートしている環境はどれか 

Slide 28

Slide 28 text

1. QRコードリーダーの概要  2. QRコードリーダーの誕生秘話  3. QRコードリーダーの実装方法  4. ブラウザAPIを利用した将来 

Slide 29

Slide 29 text

1. QRコードリーダーの概要  2. QRコードリーダーの誕生秘話  3. QRコードリーダーの実装方法  4. ブラウザAPIを利用した将来 

Slide 30

Slide 30 text

QRコードリーダーの実装に必要な機能 02 01 スマートフォンのカメラの起動  読み込んだQRコードの解析 

Slide 31

Slide 31 text

ブラウザからカメラを起動させる `navigator.mediaDevices.getUserMedia()`   これを呼べばOK󰢏   

Slide 32

Slide 32 text

ブラウザからカメラを起動させるカメラが立ち上がらない場合にエラーメッセージを表示する  

Slide 33

Slide 33 text

補足: 対応ブラウザ screenshot by https://caniuse.com/mdn-api_mediadevices_getusermedia 

Slide 34

Slide 34 text

補足: 直近のOSシェア状況 screenshot by http://smatabinfo.jp/os/android/index.html http://smatabinfo.jp/os/ios/index.html   

Slide 35

Slide 35 text

補足: 社内での端末検証・43端末中、1件のみ「例外制御」すら不可能  - Android: 5.0.2 / Chrome Version: 39.0.2171.93   ・実装後、Go To トラベル電子クーポンの利用件数: 約1,000万件  - QRコードリーダーに関しての目立ったお問い合わせはなかった     ・対応ブラウザ外の端末で成功する例、対応ブラウザ内で失敗する例が存在  - しかし42端末すべてQRコードリーダーの立ち上げ、もしくは例外制御は可能  

Slide 36

Slide 36 text

読み取ったQRコードを解析するライブラリ名  スター  直近のコミット  テストコード  cozmo/jsQR  2.4k  2021/4  有  LazarSoft/jsqrcode   3.6k  2017/4  無  schmich/instascan  2.5k  2017/4  無 

Slide 37

Slide 37 text

読み取ったQRコードを解析するカメラで  QRコードを読み取る   videoタグに  ストリーム  videoタグの  内容を描写    getImageDataでimage 化  画像データを解析  jsQR

Slide 38

Slide 38 text

読み取ったQRコードを解析する

Slide 39

Slide 39 text

読み取ったQRコードを解析するカメラのストリーミング内容をcanvas要素に描写  

Slide 40

Slide 40 text

読み取ったQRコードを解析するストリーミング内容を描写したcanvas要素から、画像を作成  

Slide 41

Slide 41 text

読み取ったQRコードを解析する生成した画像をライブラリに渡し、QRコードを解析  

Slide 42

Slide 42 text

読み取ったQRコードを解析する QRコードの中身を表示 

Slide 43

Slide 43 text

QRコードリーダーの実装でつまずいたところ 02 01 video要素とcanvas要素のサイズが合わないと読み取り精度が低下してしまう   処理がはやすぎる 

Slide 44

Slide 44 text

video要素とcanvas要素のサイズが合わないと読み取り精度が低下してしまう video要素とcanvas要素のアスペクト比が合致しているか確認 👀  ≠ 

Slide 45

Slide 45 text

処理がはやすぎる setTimeoutなどを入れて意図的に処理を遅延させる   よ〜し  このQRコードを  カメラで読ｍ…  もうチケットが  利用済みになってる！？ 

Slide 46

Slide 46 text

1. QRコードリーダーの概要  2. QRコードリーダーの誕生秘話  3. QRコードリーダーの実装方法  4. ブラウザAPIを利用した将来 

Slide 47

Slide 47 text

1. QRコードリーダーの概要  2. QRコードリーダーの誕生秘話  3. QRコードリーダーの実装方法  4. ブラウザAPIを利用した将来 

Slide 48

Slide 48 text

QRコードリーダーのおさらい

Slide 49

Slide 49 text

実装が容易 01 実装が容易  02 専用機器・インストール不要で端末があれば読み取れる  

Slide 50

Slide 50 text

実装が容易 02 01 実装が容易  専用機器・インストール不要で端末があれば読み取れる  

Slide 51

Slide 51 text

実装が容易カメラの起動は1行でOK 

Slide 52

Slide 52 text

実装が容易 QRコードの解析は3行でOK 

Slide 53

Slide 53 text

実装が容易 02 01 実装が容易  専用機器・インストール不要で端末があれば読み取れる  

Slide 54

Slide 54 text

専用機器・インストール不要で端末があれば読み取れる専用機器  アプリのダウンロード 

Slide 55

Slide 55 text

業務改善

Slide 56

Slide 56 text

スタンプの登録業務の効率化紐付け  工数が約半分に！👏 

Slide 57

Slide 57 text

個人開発 ※あとでgithubにあげるかも

Slide 58

Slide 58 text

レンタルした本の識別  会社の本だよ  自分の本だよ 

Slide 59

Slide 59 text

レンタルした本の識別  ↑ 最近引っ越した新オフィスです  

Slide 60

Slide 60 text

レンタルした本の識別  会社の本だよ  自分の本だよ  ISBN 

Slide 61

Slide 61 text

ブラウザAPIの将来

Slide 62

Slide 62 text

専用機器・インストール不要で端末があれば読み取れる画面共有  - `navigator.mediaDevices.getDisplayMedia(constraints)`   を呼び出すだけ󰢏    音声のトラッキング  - `webkitSpeechRecognition` を呼び出すだけ 󰢏 

Slide 63

Slide 63 text

ブラウザAPIの将来画面共有と音声のトラッキングができるウェブアプリといえば  

Slide 64

Slide 64 text

ブラウザAPIの将来 Shape Detection API（safari 未対応）  - face tracking  - バーコードの読み取り  - テキストの解析  いつの間にかライブラリなしでQRコードリーダーが実装できるようになっていた！   ブラウザAPIの進化は速いので、情報をしっかりキャッチアップしよう 👀 

Slide 65

Slide 65 text

おわりに：ブラウザAPIのススメ

Slide 66

Slide 66 text

ブラウザAPIのススメ実現可能性は  フロントエンドのみの  プロトタイプではかれる  まだまだ  可能性がたくさんある！ 

Slide 67

Slide 67 text

ブラウザAPIを活用して身近な課題を解決しましょう！👍