PWA への切り替えが MishiPay のビジネスにどのように役立ったかをご紹介します。
MishiPay は、買い物客がスマートフォンで買い物をして、 無駄な時間を費やすことになりかねません。MishiPay のスキャンとGo テクノロジー 買い物客は自分のスマートフォンで商品のバーコードをスキャンし、支払いをするだけで済む ありません研究によると、 世界中の小売セクターに年間約 2,000 億ドルのコストがかかっています。
Google のテクノロジーは、GPS センサーやカメラなど、デバイスのハードウェア機能を使用しており、 MishiPay 対応の店舗を検索し、店内の商品のバーコードをスキャンして支払いを行う デジタル決済方法を使用できますスキャンとアプリの初期バージョンでは、Go テクノロジー プラットフォーム固有の iOS および Android アプリケーションで、アーリー アドプターはこのテクノロジーを愛用していました。読む PWA に切り替えることで、取引を 10 倍に増やし、2.5 年で 待機中！
10×
取引が増加
2.5 年
キューを保存しました
課題
ユーザーは、列に並んでいるや会計で待っているときに Google のテクノロジーがとても役立つと感じています。なぜなら、 列に並ぶ必要がなくなり、店舗内をスムーズに利用できます。ただし、 Android アプリまたは iOS アプリでは、その価値にもかかわらず、ユーザーは Google のテクノロジーを選んでくれませんでした。2017 年には MishiPay の課題となっており、参入障壁を低くして普及率を高める必要がありました。
解決策
PWA の構築とリリースに取り組むことで、インストールの手間や手間を省き、 新規ユーザーに、実店舗で Google のテクノロジーを試し、列に並ばずに シームレスなショッピング体験を提供しますリリース以来、ユーザーの採用が急増し、 PWA とプラットフォーム固有のアプリケーションを比較できます。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">技術的な詳細
MishiPay 対応の店舗を探す
この機能を有効にするには、
getCurrentPosition()
IP ベースのフォールバックソリューションも
利用できます
const geoOptions = {
timeout: 10 * 1000,
enableHighAccuracy: true,
maximumAge: 0,
};
window.navigator.geolocation.getCurrentPosition(
(position) => {
const cords = position.coords;
console.log(`Latitude : ${cords.latitude}`);
console.log(`Longitude : ${cords.longitude}`);
},
(error) => {
console.debug(`Error: ${error.code}:${error.message}`);
/**
* Invoke the IP based location services
* to fetch the latitude and longitude of the user.
*/
},
geoOptions,
);
このアプローチは、以前のバージョンのアプリではうまく機能しましたが、その後、大きな課題であることが判明しました。 次の点で MishiPay のユーザーにポイントを伝えます。
- IP ベースのフォールバック ソリューションで位置情報が不正確である。
- MishiPay 対応店舗のリスティングが地域ごとに増え続けているため、ユーザーはリストをスクロールして 正しい店舗を特定します
- ユーザーが誤って間違ったストアを選択してしまい、購入が記録されることがある 誤りです。
これらの問題に対処するため、Google は店舗内のディスプレイに位置情報を割り当てた固有の QR コードを埋め込み、
ありますこれにより、迅速なオンボーディング エクスペリエンスへの道が開かれました。ユーザーは位置情報の QR をスキャンするだけ
店舗にあるマーケティング資料に印刷されたコードがGo ウェブ アプリケーション。
これにより、サービスにアクセスする際にウェブアドレス mishipay.shop を入力する手間を省けます。
商品をスキャンしています
MishiPay アプリのコア機能はバーコード スキャンで、これによりユーザーは 現金に至る前であっても、累計を把握できます。 あります。
ウェブのスキャン機能を構築するために、Google は 3 つのコアレイヤを特定しました。
動画ストリーム
getUserMedia() メソッドを使用すると、
下記の制約に沿ってユーザーのリアビュー カメラにアクセスできます。メソッドを呼び出す
カメラへのアクセスを承認または拒否するプロンプトが自動的に表示されます。完了したら、
渡すには、次のように、それを動画要素にリレーします。
/**
* Video Stream Layer
* https://developer.mozilla.org/docs/Web/API/MediaDevices/getUserMedia
*/
const canvasEle = document.getElementById('canvas');
const videoEle = document.getElementById('videoElement');
const canvasCtx = canvasEle.getContext('2d');
fetchVideoStream();
function fetchVideoStream() {
let constraints = { video: { facingMode: 'environment' } };
if (navigator.mediaDevices !== undefined) {
navigator.mediaDevices
.getUserMedia(constraints)
.then((stream) => {
videoEle.srcObject = stream;
videoStream = stream;
videoEle.play();
// Initiate frame capture - Processing Layer.
})
.catch((error) => {
console.debug(error);
console.warn(`Failed to access the stream:${error.name}`);
});
} else {
console.warn(`getUserMedia API not supported!!`);
}
}
処理レイヤ
特定の動画ストリームでバーコードを検出するには、フレームを定期的にキャプチャして転送する必要があります。
デコーダ レイヤに渡します。フレームをキャプチャするには、VideoElement からストリームを
HTMLCanvasElement
drawImage()
メソッド（Canvas API のメソッド）を使用します。
/**
* Processing Layer - Frame Capture
* https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
*/
async function captureFrames() {
if (videoEle.readyState === videoEle.HAVE_ENOUGH_DATA) {
const canvasHeight = (canvasEle.height = videoEle.videoHeight);
const canvasWidth = (canvasEle.width = videoEle.videoWidth);
canvasCtx.drawImage(videoEle, 0, 0, canvasWidth, canvasHeight);
// Transfer the `canvasEle` to the decoder for barcode detection.
const result = await decodeBarcode(canvasEle);
} else {
console.log('Video feed not available yet');
}
}
高度なユースケースでは、このレイヤは切り抜き、変換、読み込みなどの前処理タスクも実行します。
グレースケールに変換していますこのようなタスクは CPU 使用率が高いため、アプリケーション
バーコード スキャンは長時間実行オペレーションであるため、応答がない状態になっています。
OffscreenCanvas API などの
CPU 使用率の高いタスクをウェブワーカーに
割り当てることができますハードウェア グラフィックス アクセラレーションをサポートするデバイスでは、
WebGL API とその
WebGL2RenderingContext でできること
CPU 使用率の高い前処理タスクの利得を最適化できます。
デコーダレイヤ
最後のレイヤはデコーダレイヤで、フレームからバーコードをデコードします。
処理レイヤによってキャプチャされますおかげで
Shape Detection API（つまり、
一部のブラウザでは、まだ利用できない場合があります。）
ImageBitmapSource: img 要素、SVG image 要素、video 要素、
canvas 要素、Blob オブジェクト、ImageData オブジェクト、ImageBitmap オブジェクトのいずれかです。
/**
* Barcode Decoder with Shape Detection API
* https://web.dev/shape-detection/
*/
async function decodeBarcode(canvas) {
const formats = [
'aztec',
'code_128',
'code_39',
'code_93',
'codabar',
'data_matrix',
'ean_13',
'ean_8',
'itf',
'pdf417',
'qr_code',
'upc_a',
'upc_e',
];
const barcodeDetector = new window.BarcodeDetector({
formats,
});
try {
const barcodes = await barcodeDetector.detect(canvas);
console.log(barcodes);
return barcodes.length > 0 ? barcodes[0]['rawValue'] : undefined;
} catch (e) {
throw e;
}
}
Shape Detection API にまだ対応していないデバイスについては、デコードするためのフォールバック ソリューションが必要です。
認識しますShape Detection API は、
getSupportedFormats()
メソッドを使って、Shape Detection API とフォールバック ソリューションを切り替えることもできます。
// Feature detection.
if (!('BarceodeDetector' in window)) {
return;
}
// Check supported barcode formats.
BarcodeDetector.getSupportedFormats()
.then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
代替ソリューション
簡単に統合できるオープンソースおよびエンタープライズ スキャン ライブラリがいくつか利用可能 スキャンを実装する方法を学びます。MishiPay のライブラリはこちら おすすめします。
上記のライブラリはすべて、上記で説明したすべてのレイヤを構成する本格的な SDK です。また、 さまざまなスキャン操作をサポートするインターフェースを公開します。バーコードの形式と 検出速度がビジネスケースに必要な場合、Wasm ソリューションか Wasm 以外のソリューションかで判断できます。 バーコードのデコードに追加リソース（Wasm）が必要になるというオーバーヘッドがあるにもかかわらず、Wasm は 精度の点で Wasm 以外のソリューションより優れています。
Scandit を第一に考えました。すべてのバーコードをサポートしています ビジネス ユースケースに必要な形式すべての利用可能なオープンソース ライブラリを スキャン速度が向上します。
スキャンの今後
Shape Detection API がすべての主要なブラウザで完全にサポートされれば、
バーコード スキャナに必要な機能を備えた新しい HTML 要素 <scanner>。エンジニアリング
MishiPay は、バーコード スキャン機能が新しいものになる確固たるユースケースがあると考えており、
これを可能にするオープンソース ライブラリやライセンス ライブラリの増加による HTML 要素
スキャンと検出などの機能がGo など多数あります。
まとめ
アプリ疲れは、プロダクトの市場投入時にデベロッパーが直面する問題です。ユーザーは多くの場合 アプリをダウンロードする前にその価値を理解できます。店舗では、 MishiPay は、買い物客のユーザーエクスペリエンスが向上しているため、 ダウンロードする必要があります。そこで役立つのが PWA です。障壁を取り除くことで その結果、取引が 10 倍に増え、ユーザーは 2 年半 待機していることがわかります
謝辞
この記事は、Joe Medley がレビューしました。