Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

LIFF v2 で追加されたQRコードリーダーを使ってみる

More than 1 year has passed since last update.

※2019/12/11追記
iOS版LINEではQRコードリーダーが使えなくなったようです。

2019/11/29
LIFFの一部機能の提供の一時停止について
以下の機能は、技術的な問題があり提供を一時停止することになりました。今後の対応が決まり次第、改めてお知らせします。

liff.scanCode()
liff.bluetooth.*
一時停止バージョン
LINE 一時停止バージョン
iOS版LINE 9.19.0以降は、上記の機能の提供を一時停止します
Android版LINE 対応方法を検討しています
ご利用のユーザー様にはご不便をおかけいたしますが、何卒ご理解いただきますようお願い申し上げます。
引用元

はじめに

先日、LIFF v2がリリースされ、外部ブラウザ対応やQRコードリーダー等便利な機能が追加されました。

スクリーンショット 2019-10-28 12.01.01.png (333.7 kB)

ということなので、QRコードリーダーを使ってみます。

できたもの

以下の友だち追加ボタンから、実際に試していただけます。

友だち追加

手順

LIFFスターターアプリとして、サンプルが公開されています。
GitHubのline-liff-v2-starterリポジトリのREADME.mdに従って、操作していけばLIFFアプリのベースが作れます。

あるいは @h-takauma さんの記事がわかりやすいので、参考にしてみてください。
LIFF v2でLINEログインを試してみた

今回は、LIFFスターターアプリから使用しないコードを削除しました。

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>QRコードリーダー</title>
    </head>
    <body>
        <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
        <script src="liff.js"></script>
    </body>
</html>

またワンクリックでQRコードリーダーの起動までいきたかったので、liff.init()メソッドでLIFFアプリを初期化した後、liff.scanCode()メソッドでQRコードリーダーを呼び出しています。

読み取った文字列をliff.sendMessages()メソッドで、LIFFアプリが開かれているトーク画面にメッセージ送信し、liff.closeWindow()メソッドでLIFFアプリを閉じています。

liff.js
window.onload = function() {
    const defaultLiffId = "xxxxxxxxxxxxx";
    initializeLiff(defaultLiffId);
};

function initializeLiff(myLiffId) {
    liff
    .init({
        liffId: myLiffId
    })
    .then(() => {
        liff.scanCode().then(result => {
            const stringifiedResult = result.value;
            liff.sendMessages([{
                'type': 'text',
                'text': stringifiedResult
            }]).then(() => {
                liff.closeWindow();
            }).catch((error) => {
                window.alert('Error sending message: ' + error);
            });
        }).catch(err => {
            window.alert('scanCode failed!');
        });
    })
    .catch((err) => {
        window.alert('Something went wrong with LIFF initialization.');
    });
}

注意点は、LINE Developersコンソールで、LIFFアプリにScanQR権限を付与する必要があることと、

image.png (289.7 kB)

LIFFのサイズやエンドポイントURLを編集した際に、なぜかScanQR権限が勝手にOFFに戻ってしまうので、ScanQR権限の状態は要注意ですw
(そのうち改善されるはず!!!)

ezgif-6-404dd4c4468c.gif

わかったこと

  • QRの読み取りめっちゃはやい
  • こちらのサイトで作成した、テキストを埋め込んだQRコードは読み取りできなかった。。

Screenshot_20191028-182332.png (1.9 MB)

  • ありきたりだけどQRコードスタンプラリーとか作れそう「LINEでQRスタンプラリー!!」

手軽にQRコードリーダーが使えるのはいいですね!

LIFF v2 ではQRコードリーダー以外の機能も追加されています。
@sumihiro3 さんの記事(LIFF v2 で追加されたAPIを試してみる)がわかりやすいので、参考にしてみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away