[LINE API] liff.scanCodeV2を試してみる

LIFF v2.15.0（2021/09/30公開）にてliff.scanCodeV2の機能が追加。
scanCode自体は以前から存在し何度か試したものの上手くいかず（他ブログでは機能停止ともあり）そんな経緯もあったのでV2を試してみることに。

#完成形
![Videotogif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1552742/015ed008-43f8-170e-afce-4a9ba32b11bd.gif)

（動画では下部のボタンを押してスキャンを起動、QRコードを読み取ったのち中身のWikipediaのリンクを送信）

#参考にしたサイト
- [（チュートリアル）Node.jsを使ってサンプル応答ボットを作る | LINE Developers](https://developers.line.biz/ja/docs/messaging-api/nodejs-sample/)

- [【LINE / LIFF】LQRコード読み取り（liff.scanCode()）がうまくいかない →機能停止中だった（2021/5現在）](https://zenn.dev/bulb/articles/348aed346d6847) 

#環境
- node.js
- heroku
- git

#準備
コマンドプロンプトを起動し、まずはherokuへログイン

```
heroku login
```

久々にログインしたら二段階認証でつまづきログインできず。解決策が見当たらなかったので仕方なくアカウント作り直し（二段階認証なしで）。

<br>その後、

```
mkdir qrscan
cd qrscan
git init
heroku create {任意のアプリ名}
npm init -y
npm install express
```
を順に叩いてローカル環境を構築。（今回はqrscanというフォルダに作成）

作成された `package.json` の中身を編集。

```
  "scripts": {
    "start": "node index.js", //この1文を追加する。
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```

フォルダー内に `index.js` を作成。

```javascript:index.js
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
const myLiffId = process.env.MY_LIFF_ID;

app.use(express.static('public'));

app.get('/send-id', function(req, res) {
    res.json({id: myLiffId});
});

app.listen(port, () => console.log(`app listening on port ${port}!`));
```

#liff.scanCodeV2を実装

publicフォルダにliff.scanCodeV2の機能を配置する。

フォルダ内には

- index.html
- qrscan.js

のファイルを作成。中身は以下のとおり。

```html: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/sdk.js"></script>
        <script src="qrscan.js"></script>
    </body>
</html>
```

```javascript:qrscan.js
window.onload = function() {
  const defaultLiffId = "LIFFのID";
  initializeLiff(defaultLiffId);
};

function initializeLiff(defaultLiffId) {
  liff
  .init({
      liffId: defaultLiffId
  })
  .then(() => {
      liff.scanCodeV2().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.');
  });
}
```

今回はスキャンした文字列をトークルームにそのまま送信する。

あとheroku側にもLIFFのIDを設定。

```
heroku config:set MY_LIFF_ID={LIFFのID}
```


#デプロイ

```
git add .
git commit -m "First commit"
git push heroku master
```

#LIFFの設定

[LINE Developers](https://developers.line.biz/)にてLIFF用のチャンネルを作成。
LIFF -> LIFFアプリを追加 にて名前などを設定し、エンドポイントURLにherokuのURLを入力。あとQR Scanも忘れずにOnへ。
※サイズはCompactだとエラーになる（この現象が判らず長時間はまった。）

追加後に発行されるLIFFのURL(liff.line.me/...)をトークルーム内で起動できるように配置すれば完了。


#おわり

LINEのアナウンス通り、以前より存在したscanCodeと同様の処理で実行可能で、尚且つ簡単な構文で実装できたので大満足。

あと気になる箇所は、

- カメラの許可を常に聞いてくる（設定保存は不可能？）

- メッセージ送信ではなくpostbackで内部処理できない？