LIFF v2.15.0（2021/09/30公開）にてliff.scanCodeV2の機能が追加。
scanCode自体は以前から存在し何度か試したものの上手くいかず（他ブログでは機能停止ともあり）そんな経緯もあったのでV2を試してみることに。
#完成形
（動画では下部のボタンを押してスキャンを起動、QRコードを読み取ったのち中身のWikipediaのリンクを送信）
#参考にしたサイト
#環境
- node.js
- heroku
- git
#準備
コマンドプロンプトを起動し、まずはherokuへログイン
heroku login
久々にログインしたら二段階認証でつまづきログインできず。解決策が見当たらなかったので仕方なくアカウント作り直し（二段階認証なしで）。
その後、
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 を作成。
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
のファイルを作成。中身は以下のとおり。
<!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>
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にてLIFF用のチャンネルを作成。
LIFF -> LIFFアプリを追加 にて名前などを設定し、エンドポイントURLにherokuのURLを入力。あとQR Scanも忘れずにOnへ。
※サイズはCompactだとエラーになる（この現象が判らず長時間はまった。）
追加後に発行されるLIFFのURL(liff.line.me/...)をトークルーム内で起動できるように配置すれば完了。
#おわり
LINEのアナウンス通り、以前より存在したscanCodeと同様の処理で実行可能で、尚且つ簡単な構文で実装できたので大満足。
あと気になる箇所は、
-
カメラの許可を常に聞いてくる（設定保存は不可能？）
-
メッセージ送信ではなくpostbackで内部処理できない？