2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

こんにちは。株式会社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コード生成APIQRServer 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アプリとして)

  1. GASのメニューから「デプロイ」 → 「新しいデプロイ」
  2. 「種類の選択」で「ウェブアプリ」
  3. 「自分として実行」「全員(匿名ユーザーを含む)」に設定
  4. 公開されたURLをLINE DevelopersのWebhook URLとして設定

まとめ

LINE BotとGAS、そして外部のQRコード生成APIを組み合わせることで、シンプルかつ実用的なQRコード生成Botを作ることができました。
GASを使うことでサーバー不要で開発できるのも大きなメリットです。

ちょっとした社内ツールやイベント用のBotとしても活用できるので、興味のある方はぜひ試してみてください!

おまけ

なお、このLINE Botは現在 @274zsodn というLINE公式アカウントで実際にご利用いただけます。
以下のURLから友だち追加してお試しください:
👉 https://lin.ee/wy2kjKB

※無料プランで運用しているため、アクセスが集中した場合などには一時的に応答しないことがあります。あらかじめご了承ください。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?