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

※2019/12/11追記
iOS版LINEではQRコードリーダーが使えなくなったようです。
> 2019/11/29
> LIFFの一部機能の提供の一時停止について
> 以下の機能は、技術的な問題があり提供を一時停止することになりました。今後の対応が決まり次第、改めてお知らせします。
> 
> liff.scanCode()
> liff.bluetooth.*
> 一時停止バージョン
> LINE	一時停止バージョン
> iOS版LINE	9.19.0以降は、上記の機能の提供を一時停止します
> Android版LINE	対応方法を検討しています
> ご利用のユーザー様にはご不便をおかけいたしますが、何卒ご理解いただきますようお願い申し上げます。
> [引用元](https://developers.line.biz/ja/news/)

# はじめに
先日、[LIFF v2がリリースされ、外部ブラウザ対応やQRコードリーダー等便利な機能が追加されました。](https://engineering.linecorp.com/ja/blog/liff-v2/)

<img width="1022" alt="スクリーンショット 2019-10-28 12.01.01.png (333.7 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2019/10/28/15524/7c446783-47f0-43f9-b7f7-c2c951ce3915.png">

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

# できたもの

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LIFF v2 で追加されたQRコードリーダーを試してみた<br>読み取りはやw<a href="https://twitter.com/hashtag/LINE_API?src=hash&amp;ref_src=twsrc%5Etfw">#LINE_API</a> <a href="https://twitter.com/hashtag/LIFF?src=hash&amp;ref_src=twsrc%5Etfw">#LIFF</a> <a href="https://t.co/37oYJDzIuV">pic.twitter.com/37oYJDzIuV</a></p>&mdash; Takuya Kanatani / 金谷拓哉 (@torisankanasan) <a href="https://twitter.com/torisankanasan/status/1188764863817895936?ref_src=twsrc%5Etfw">October 28, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

<a href="http://nav.cx/mpuM0sN"><img src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png" alt="友だち追加" height="36" border="0"></a>


# 手順
[LIFFスターターアプリ](https://developers.line.biz/ja/docs/liff/trying-liff-app/)として、サンプルが公開されています。
[GitHubのline-liff-v2-starterリポジトリ](https://github.com/line/line-liff-v2-starter)のREADME.mdに従って、操作していけばLIFFアプリのベースが作れます。

あるいは @h-takauma  さんの記事がわかりやすいので、参考にしてみてください。
[LIFF v2でLINEログインを試してみた](https://qiita.com/h-takauma/items/f954a6c2a8ad9ee4396b)


今回は、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)](https://img.esa.io/uploads/production/attachments/3505/2019/10/28/15524/a3477833-b4af-4a88-97e8-3f6defc248f4.png)

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

![ezgif-6-404dd4c4468c.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151106/971a6257-e84b-715a-f4cf-dc6c73a6ae4e.gif)

# わかったこと
- QRの読み取りめっちゃはやい
- [こちら](https://qr.quel.jp/)のサイトで作成した、テキストを埋め込んだQRコードは読み取りできなかった。。

![Screenshot_20191028-182332.png (1.9 MB)](https://img.esa.io/uploads/production/attachments/3505/2019/10/28/15524/ef9ad3be-2ee4-4609-9bb3-4014b05c1f43.png)

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

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

LIFF v2 ではQRコードリーダー以外の機能も追加されています。
@sumihiro3 さんの記事（[LIFF v2 で追加されたAPIを試してみる](https://qiita.com/sumihiro3/items/92263468e29710884400)）がわかりやすいので、参考にしてみてください。