[小ネタ]LIFF SDK v2でQRコードを使った活用を考える #LINE_API

はじめに

こんにちは、中村です。 LINE Front-end Framework(以下、LIFF)のv2がリリースされました。

こちらの記事にて、主な機能等が紹介されています。
LIFF v2がリリースされ、外部ブラウザ対応や二次元コードリーダー等便利な機能が追加されました。

今回のアップデートで対応されたQRコードスキャン機能を取り上げます。

QRコードスキャン

LINE QRコードリーダを起動し、QRコードを読み取ります。コールバックで読み取った文字列が値として返されます。

LINE内ブラウザでのみ利用可能でLIFF登録時にScanQRの権限付与する必要があります。

起動方法

QRコードスキャンを利用するのは簡単です。LIFF SDK v2.1を読み込み下記のコードを実装することで起動できるようになります。 サンプルコードではスキャン後のレスポンスをアラートするようにしています。

<button id="scan">QRを読み込む</button>
<script>
    let scanBtn = document.getElementById('scan');
    scanBtn.addEventListener('click', function() {
        liff.scanCode().then(result => {
            alert(JSON.stringify(result.value)); //Character string read by QR code reader
        });
    });
</script>

活用方法

次にこのscanCode()を利用した事例を考えてみます。

IoT連携

QRコードを読み込むことで対象デバイスの各種操作を行えるようにします。ネイティブアプリで似たような事例として、mobikeがあります。 mobikeでは、アプリを通じてレンタル自転車の鍵の解錠や決済を行えます。自転車に付いているQRコードを読み込むことで鍵の解錠が可能です。

商品検索

現状はQRコード読み込みですが、バーコード読み込みができるとより利用しやすいと思います。 店舗にて商品QRコードを用意し、欠品時やサイズ違い・色違いなどを検索を行えます。検索内容を保存しておくことでユーザーの嗜好を分析しECや店舗で提案できます。

QRコードマーケティング

飲み物にシリアルコードを登録するキャンペーンをやっていることがあります。通常ではシリアルコードをWebで入力することがほとんどですがQRコードを読み込むことで登録ができると簡単に追加できます。またLINE IDを利用することでユーザー登録も完了するとよりシームレスに利用できます。

まとめ

scanCode()の簡単な実装方法、活用方法をまとめました。簡単に実装ができるので利用できるアプリケーションにはすぐ取り入れられそうです。また現状QRコード読み込む状態から読み込みが終了しないとLIFFアプリに戻れませんがおそらく修正されるのではないかと思います。

個人的にはJANコードを読み込めることでより活用の幅が広がるのではないかと思いますのでぜひ対応に期待しています!