こんにちは。株式会社LiemPiaのtampopo256です。
普段は教育系のWebサービス「clemy」を作ったりしています。
LINE Bot を作ってみたい、でも何かユニークな機能がほしい。
そんな中で思いついたのが「テキストを送ると即座にQRコード画像で返してくれるLINE Bot」でした。
今回は Google Apps Script(以下GAS)と無料のQRコード生成APIを使って、誰でも簡単に作れるBotを紹介します。
やりたいこと
ユーザーがLINEでメッセージ(例えばhttps://example.com
や入場番号12345
など)を送信すると、その内容をQRコードに変換して画像で返信するBotを作ります。)
技術構成
- LINE Messaging API:メッセージ送受信のためのAPI
- Google Apps Script (GAS):LINE Botのロジック実装とQRコード生成、返信処理を行う
- QRコード生成API:QRServer API
- Google スプレッドシート:イベントログやエラーログを記録(オプション)
準備するもの
- LINE Developersで作成したチャネル(Botのアクセストークンなど)
- Google スプレッドシート
実装の流れ
1. LINEからのWebhookイベントを受け取る
function doPost(e) {
const eventData = JSON.parse(e.postData.contents);
if (eventData.events && eventData.events.length > 0) {
const event = eventData.events[0];
const replyToken = event.replyToken;
if (event.type === 'message' && event.message.type === 'text') {
const userMessage = event.message.text;
replyWithQRCode(replyToken, userMessage, event);
}
}
return ContentService.createTextOutput(JSON.stringify({'content': 'success'}))
.setMimeType(ContentService.MimeType.JSON);
}
LINEから送られてくるデータ(メッセージイベント)を受け取り、text
メッセージだった場合はQRコード返信処理に進みます。
2. QRコードを生成して返信する
function replyWithQRCode(replyToken, text, event) {
const encodedText = encodeURIComponent(text);
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodedText}&size=500x500&margin=30`;
const message = {
type: 'image',
originalContentUrl: qrCodeUrl,
previewImageUrl: qrCodeUrl
};
replyMessage(replyToken, message);
}
ここでは QRServer API を利用し、受け取ったテキストをURLエンコードした上でQRコード画像のURLを構築しています。LINEでは image
メッセージタイプで画像を送信可能なので、それをそのまま使って返信しています。
3. LINEに返信する
function replyMessage(replyToken, message) {
const url = 'https://api.line.me/v2/bot/message/reply';
const payload = {
replyToken: replyToken,
messages: [message]
};
const options = {
method: 'post',
contentType: 'application/json',
headers: {
Authorization: 'Bearer ' + LINE_ACCESS_TOKEN
},
payload: JSON.stringify(payload)
};
try {
UrlFetchApp.fetch(url, options);
} catch (error) {
logErrorToSpreadsheet(error);
}
}
返信トークンを使って、LINEのMessaging APIにQRコード画像を送信します。
公開設定(GAS Webアプリとして)
- GASのメニューから「デプロイ」 → 「新しいデプロイ」
- 「種類の選択」で「ウェブアプリ」
- 「自分として実行」「全員(匿名ユーザーを含む)」に設定
- 公開されたURLをLINE DevelopersのWebhook URLとして設定
まとめ
LINE BotとGAS、そして外部のQRコード生成APIを組み合わせることで、シンプルかつ実用的なQRコード生成Botを作ることができました。
GASを使うことでサーバー不要で開発できるのも大きなメリットです。
ちょっとした社内ツールやイベント用のBotとしても活用できるので、興味のある方はぜひ試してみてください!
おまけ
なお、このLINE Botは現在 @274zsodn というLINE公式アカウントで実際にご利用いただけます。
以下のURLから友だち追加してお試しください:
👉 https://lin.ee/wy2kjKB
※無料プランで運用しているため、アクセスが集中した場合などには一時的に応答しないことがあります。あらかじめご了承ください。