LIFFとは

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

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

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

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

事前準備

LINE ログインを利用できるLINEアカウント
※Messaging APIチャネルではないほうが良いです。
https://developers.line.biz/ja/docs/liff/release-notes/#spy-releasedate_20191111
HTTPS URL対応サーバ

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

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_textにQRコードで読み取ったテキストが挿入されます。

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

注意点

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

どう活用する？

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