LINE Front-end Framework(LIFF) v2でQRコードを読み取るよ

こんにちは!
冬が苦手なディレクターの神吉です。

この記事はEnigmo Advent Calendar 201920日目の記事です。

LINEの開発者情報をチェックしていて、ちょっと前にLIFF v2がリリースされていました。
https://developers.line.biz/ja/docs/liff/release-notes/#spy-releasedate_20191016

f:id:enigmo7:20191218130815p:plain:w300

LIFFとは

LIFFとはLINE Front-end Frameworkのことで、LINEが提供するウェブアプリのプラットフォームです。
JavaScriptを書いて開発する感じです。

LIFFはけっこう前から提供されていましたが
LIFF v1 → LIFF v2になって主に下記ができるようになりました。

  • 外部ブラウザでLIFFアプリが動作する。
    • v1はLINE内ブラウザでのみ動作していました。
  • ユーザーのプロフィール情報とメールアドレスを取得できる。
    • LINEログインでできる仕組みに近い仕組みなのかなと思います。
  • QRコードを読み取れる。
    • 新機能ですね!
  • LIFFアプリの動作環境を細かく取得できる。
    • 外部ブラウザで動作するようになって細かい情報を取得する必要がでてきたのかと思います。

LIFF v1もちゃんと触っていなかったのですがこの機会にv2を触ってみたいと思います。
とりあえずLIFFでQRコードを読み取りをやってみます。

事前準備

こちらを事前に準備してください。

LIFFアプリの追加

LINE Developersコンソールよりの 「LIFFアプリを追加」より必要事項を入力してLIFFアプリの追加をしてください。
※今回はQRコードを読み取りをするのでScan QRの設定はONにしてください。

f:id:enigmo7:20191219115402p:plain:w500

またLIFFサーバーAPIでもLIFFアプリを追加することができます。
https://developers.line.biz/ja/reference/liff-v1/#add-liff-app

追加後LIFF URLが発行され、LIFFを開くことができるようになります。

f:id:enigmo7:20191219105854p:plain:w300

LIFFアプリの開発

ここからは実際の開発手順です。

LIFF SDKを読み込み

LIFF SDK https://static.line-scdn.net/liff/edge/2.1/sdk.js を読み込んでください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>sample</title>
  </head>
  <body>
    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
  </body>
</html>

LIFFアプリを初期化する

sdk.js 読み込み後に追加してください。

liff
  .init({
    liffId: "XXXXX" // liffIdを指定。line://app/XXXXXの部分
  })
  .then(() => {
    // 処理はここから
  })
  .catch((err) => {
    // エラー処理
    console.log(err.code, err.message);
  });

QRコードを読み取り処理

document.getElementById('qr_button').addEventListener('click', function() {
    if (liff.isInClient()) {
        liff.scanCode().then(result => {
            document.getElementById('qr_text').textContent = result.value;
        }).catch(err => {
            document.getElementById('qr_text').textContent = err.message;
        });
    }
});

liff.scanCode()はLINEのQRコードリーダーを起動し、読み取った文字列を取得するメソッドです。
#qr_buttonにクリックするとLINEのQRコードリーダーが立ち上がり、 QRコードをスキャンすると#qr_textQRコードで読み取ったテキストが挿入されます。

f:id:enigmo7:20191219105829p:plain:w300

注意点

  • iOS版LINEバージョン9.19.0以降では、liff.scanCode()の提供を一時停止しています。(2019/12/18時点)
  • liff.scanCode()は、外部ブラウザでは利用できません。

どう活用する?

手軽にQRコードリーダーを使えるのは良いです。QRの読み取りも速いです。
またLIFFはLINEのuserIdと紐づけてイベントログを取得でき、データ活用できます。
そういったところ活かしオンラインとオフラインをつなぐような施策使えればと思います。
(今のところBUYMAでの具体的な活用案が浮かばずすみません。。)

感想

  • かなり簡単に試すことができました!
  • LIFFを使用する上で実行環境による挙動の違いはしっかり把握しないといけないなと感じました。
  • 今後もLINEの開発者情報はこまめにチェックして、新機能は早めに試してみたいと思います。

参考

株式会社エニグモ 正社員の求人一覧

hrmos.co