Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Go To トラベルの 電子クーポンでも利用された、 ブラウザでの2次元コードリーダーの 開発...
Search
Kento
June 26, 2021
Technology
1
1.7k
Go To トラベルの 電子クーポンでも利用された、 ブラウザでの2次元コードリーダーの 開発と将来について
松島健人(kento matsushima)/株式会社ギフティ
PWA Night Conference 2021 @オンライン 登壇資料
https://conf2021.pwanight.jp/
Kento
June 26, 2021
Tweet
Share
Other Decks in Technology
See All in Technology
CSS polyfill とその未来
ken7253
0
140
TechBull Membersの開発進捗どうですか!?
rvirus0817
0
230
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
360
テストを実施する前に考えるべきテストの話 / Thinking About Testing Before You Test
nihonbuson
PRO
15
2.1k
技術書典18結果報告
mutsumix
2
180
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
1.3k
DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!
martin_lover
0
160
Houtou.pm #1
papix
0
670
What's Next in OpenShift Q2 CY2025
redhatlivestreaming
1
840
2025advance01
minamizaki
0
130
JNation 2025 - Quarkus for Spring Developers
edeandrea
PRO
0
110
ソフトウェアテストのAI活用_ver1.10
fumisuke
0
240
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.4k
KATA
mclloyd
29
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
4 Signs Your Business is Dying
shpigford
183
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Code Reviewing Like a Champion
maltzj
523
40k
Transcript
Go To トラベルの 電子クーポンでも利用された、 ブラウザでの2次元コードリーダーの 開発と将来について 株式会社ギフティ 松島 健人
自己紹介
自己紹介 松島健人(Matsushima Kento) ECサイト運営会社 ▶ 2019年 株式会社ギフティ入社 – 1993年生まれ
/ 群馬県出身 – ソフトウェアエンジニア – Go To トラベルの 電子クーポンを担当
ギフティについて
ギフト選びからお渡しまで、 オンラインで完結できるカジュアルギフトサービス
eGift Platform
オンラインで手軽にギフトを贈れる「giftee」
03 02 01 giftee ギフトを選ぶ ギフトカードを選ぶ SNSなどで贈る
giftee and more
eGiftを活用した法人向けソリューション 「giftee for Business」
03 02 01 giftee for Business キャンペーン ツイート Twitter ID認証
抽選 04 当落画 面
eGift Platform
弊社が提供するチケット(バーコード読み取り)
弊社が提供するチケット(スタンプ)
QRコードリーダーによる読み取り 🎊 🎊 ※ QRコードは(株)デンソーウェーブの登録商標です
1. QRコードリーダーの概要 2. QRコードリーダーの誕生秘話 3. QRコードリーダーの実装方法 4. ブラウザAPIを利用した将来
本日はGoToトラベルプロジェクトの詳しい内容についてはお話しません。 質問などがあれば是非ギフティのスポンサーブースへ!
1. QRコードリーダーの概要 2. QRコードリーダーの誕生秘話 3. QRコードリーダーの実装方法 4. ブラウザAPIを利用した将来
02 01 QRコードリーダーの読み取りに必要な要素 ブラウザからカメラを呼び出し、映像をブラウザにストリーミングする ストリーミングした映像を解析する
QRコードリーダーを実装したギフトチケットの仕組み QRコードの読み取り QRコードの認識 QRコードの内容が正 しいか確認
QRコードリーダーを実装したギフトチケットの仕組み 成功または失敗を 画面に表示 ⭕:チケット利用完了 ❌:エラー QRコードの内容が正 しいか確認 利⽤済み
1. QRコードリーダーの概要 2. QRコードリーダーの誕生秘話 3. QRコードリーダーの実装方法 4. ブラウザAPIを利用した将来
1. QRコードリーダーの概要 2. QRコードリーダーの誕生秘話 3. QRコードリーダーの実装方法 4. ブラウザAPIを利用した将来
ギフトチケットの読み取り方法 読み取り方法 コスト 導入期間 接触の有無 POS ✕ ✕ 無 スタンプ
◦ ◦ 有 QRコードリーダーによるチケット読み取り
QRコードリーダーを採用した理由 01 非接触で利用できるチケットが求められていた - ユーザーが店頭のQRコードを読み取るだけなので、接触がない 02 ブラウザAPIが発達してきた -
以前は「カメラアプリを起動してファイルをアップロードする」しか方法がなかった - 上記は、ネイティブアプリで解決できるが、インストールのハードルが高い 03 コード決済アプリの台頭 - コード決済アプリが広まり、ユーザーのQRコード読み取りへのリテラシーが高まった
ギフトチケットの読み取り方法 読み取り方法 コスト 導入期間 接触の有無 POS ✕ ✕ 無 スタンプ
◦ ◦ 有 QRコードリーダー ◎ ◎ 無
プロトタイプの作成 HTML、CSS、JavaScriptで完結 QRコードリーダー機能だけを有する 弊社のギフトチケットで正常に動作するか サポートしている環境はどれか
1. QRコードリーダーの概要 2. QRコードリーダーの誕生秘話 3. QRコードリーダーの実装方法 4. ブラウザAPIを利用した将来
1. QRコードリーダーの概要 2. QRコードリーダーの誕生秘話 3. QRコードリーダーの実装方法 4. ブラウザAPIを利用した将来
QRコードリーダーの実装に必要な機能 02 01 スマートフォンのカメラの起動 読み込んだQRコードの解析
ブラウザからカメラを起動させる `navigator.mediaDevices.getUserMedia()` これを呼べばOK
ブラウザからカメラを起動させる カメラが立ち上がらない場合にエラーメッセージを表示する
補足: 対応ブラウザ screenshot by https://caniuse.com/mdn-api_mediadevices_getusermedia
補足: 直近のOSシェア状況 screenshot by http://smatabinfo.jp/os/android/index.html http://smatabinfo.jp/os/ios/index.html
補足: 社内での端末検証 ・43端末中、1件のみ「例外制御」すら不可能 - Android: 5.0.2 / Chrome Version: 39.0.2171.93
・実装後、Go To トラベル 電子クーポンの利用件数: 約1,000万件 - QRコードリーダーに関しての目立ったお問い合わせはなかった ・対応ブラウザ外の端末で成功する例、対応ブラウザ内で失敗する例が存在 - しかし42端末すべてQRコードリーダーの立ち上げ、もしくは例外制御は可能
読み取ったQRコードを解析する ライブラリ名 スター 直近のコミット テストコード cozmo/jsQR 2.4k 2021/4 有 LazarSoft/jsqrcode
3.6k 2017/4 無 schmich/instascan 2.5k 2017/4 無
読み取ったQRコードを解析する カメラで QRコードを読み取る videoタグに ストリーム <video> <canvas> videoタグの 内容を描写
getImageDataでimage 化 画像データを解析 jsQR
読み取ったQRコードを解析する
読み取ったQRコードを解析する カメラのストリーミング内容をcanvas要素に描写
読み取ったQRコードを解析する ストリーミング内容を描写したcanvas要素から、画像を作成
読み取ったQRコードを解析する 生成した画像をライブラリに渡し、QRコードを解析
読み取ったQRコードを解析する QRコードの中身を表示
QRコードリーダーの実装でつまずいたところ 02 01 video要素とcanvas要素のサイズが合わないと読み取り精度が低下してしまう 処理がはやすぎる
video要素とcanvas要素のサイズが合わないと読み取り精度が低下してしまう video要素とcanvas要素のアスペクト比が合致しているか確認 👀 <video> <canvas> ≠
処理がはやすぎる setTimeoutなどを入れて意図的に処理を遅延させる よ〜し このQRコードを カメラで読m… もうチケットが 利用済みになってる!?
1. QRコードリーダーの概要 2. QRコードリーダーの誕生秘話 3. QRコードリーダーの実装方法 4. ブラウザAPIを利用した将来
1. QRコードリーダーの概要 2. QRコードリーダーの誕生秘話 3. QRコードリーダーの実装方法 4. ブラウザAPIを利用した将来
QRコードリーダーのおさらい
実装が容易 01 実装が容易 02 専用機器・インストール不要で端末があれば読み取れる
実装が容易 02 01 実装が容易 専用機器・インストール不要で端末があれば読み取れる
実装が容易 カメラの起動は1行でOK
実装が容易 QRコードの解析は3行でOK
実装が容易 02 01 実装が容易 専用機器・インストール不要で端末があれば読み取れる
専用機器・インストール不要で端末があれば読み取れる 専用機器 アプリのダウンロード
業務改善
スタンプの登録業務の効率化 紐付け 工数が約半分に!👏
個人開発 ※あとでgithubにあげるかも
レンタルした本の識別 会社の本だよ 自分の本だよ
レンタルした本の識別 ↑ 最近引っ越した新オフィスです
レンタルした本の識別 会社の本だよ 自分の本だよ ISBN
ブラウザAPIの将来
専用機器・インストール不要で端末があれば読み取れる 画面共有 - `navigator.mediaDevices.getDisplayMedia(constraints)` を呼び出すだけ 音声のトラッキング - `webkitSpeechRecognition`
を呼び出すだけ
ブラウザAPIの将来 画面共有と音声のトラッキングができるウェブアプリといえば
ブラウザAPIの将来 Shape Detection API(safari 未対応) - face tracking - バーコードの読み取り
- テキストの解析 いつの間にかライブラリなしでQRコードリーダーが実装できるようになっていた! ブラウザAPIの進化は速いので、情報をしっかりキャッチアップしよう 👀
おわりに:ブラウザAPIのススメ
ブラウザAPIのススメ 実現可能性は フロントエンドのみの プロトタイプではかれる まだまだ 可能性がたくさんある!
ブラウザAPIを活用して 身近な課題を解決しましょう!👍