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

松島健人（kento matsushima）/株式会社ギフティ
PWA Night Conference 2021 @オンライン 登壇資料
https://conf2021.pwanight.jp/

Transcript

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

2. 自己紹介

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

4. ギフティについて

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

6. eGift Platform
7. オンラインで手軽にギフトを贈れる「giftee」 

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

9. giftee and more

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

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

12. eGift Platform
13. 弊社が提供するチケット（バーコード読み取り）
14. 弊社が提供するチケット（スタンプ）
15. QRコードリーダーによる読み取り
 🎊
 🎊
 ※ QRコードは(株)デンソーウェーブの登録商標です 
 

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

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

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

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

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

21. QRコードリーダーを実装したギフトチケットの仕組み 成功または失敗を
 画面に表示
 ⭕：チケット利用完了
 ❌：エラー
 QRコードの内容が正 しいか確認
 利⽤済み
22. 1. QRコードリーダーの概要
 2. QRコードリーダーの誕生秘話
 3. QRコードリーダーの実装方法
 4. ブラウザAPIを利用した将来

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

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

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

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

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

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

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

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

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

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

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

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

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

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

37. 読み取ったQRコードを解析する カメラで
 QRコードを読み取る 
 videoタグに
 ストリーム
 <video> <canvas> videoタグの
 内容を描写
 
 getImageDataでimage 化
 画像データを解析
 jsQR
38. 読み取ったQRコードを解析する
39. 読み取ったQRコードを解析する カメラのストリーミング内容をcanvas要素に描写 

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

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

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

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

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

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

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

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

48. QRコードリーダーのおさらい
49. 実装が容易 01 実装が容易
 02 専用機器・インストール不要で端末があれば読み取れる 

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

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

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

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

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

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

57. 個人開発 ※あとでgithubにあげるかも
58. レンタルした本の識別
 会社の本だよ
 自分の本だよ

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

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

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

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

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

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

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