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.4k
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
Oracle Database で機械学習を始めよう! Oracle Machine Learning
oracle4engineer
PRO
1
140
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
170
LLM + RAG を使った SORACOM Support Bot の裏側の歴史
soracom
PRO
1
640
GraphQLに入門してみた
chiroruxx
2
130
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.5k
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
1
640
Building a RAG app to chat with your data (on Azure)
pamelafox
0
130
Challenges - Open Farming Hackdays 2024
loleg
0
570
20240321_生成AI時代のDevOps
kzkmaeda
2
610
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
Vos logs méritent mieux que la config par défaut
lyrixx
2
400
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
11
1k
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Making Projects Easy
brettharned
106
5.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
Agile that works and the tools we love
rasmusluckow
323
20k
A designer walks into a library…
pauljervisheath
199
23k
Product Roadmaps are Hard
iamctodd
43
9.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Designing for humans not robots
tammielis
247
25k
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を活用して 身近な課題を解決しましょう!👍