「新たなレモンサワーが見つかる！出逢える！」LINE Botで製作開始vol.1 #JavaScript

現在、大好きなレモンサワーを起点にしたユーザーと飲食店をつなげるアプリを企画中です。

1か月ほど前にnote記事にしましたので、是非ご覧ください。

と意気込んで企画したは良いものの、スケールを大きくし過ぎたことで絶賛迷走中ですので、企画を身の丈にあったものに修正中！

まずは、第1段階のステップとして、

・ユーザーがレモンサワーの情報を投稿できる・投稿されて蓄積されたレモンサワーの情報からお近くのお店を探せる・投稿されたレモンサワー情報を集約するWEBサイト

の3点を表現できるものをLINE Botで作ろうと思います。

プロダクトイメージ

必要な機能としては、

を想定しています。

まずはこちらを参考に、起点となるオウム返しLINE Botを作成します。

環境

Visual Studio Code v1.60.2
Node.js v16.10.0
npm v7.21.1
ngrok 2.3.40

コード・結果

コード（クリックで表示）

'use strict';

const express = require('express');
const line = require('@line/bot-sdk');

const PORT = process.env.PORT || 3000;

// Messaging APIを利用するための鍵を設定します。
const config = {
  channelSecret: 'チャネルシークレット',
  channelAccessToken: 'チャネルアクセストークン'
};

const client = new line.Client(config);

async function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }
  // ユーザーにリプライメッセージを送ります。
  return client.replyMessage(event.replyToken, {
    type: 'text', // テキストメッセージ
    text: event.message.text // ← ここに入れた言葉が実際に返信されます
    // event.message.text には、受信したメッセージが入っているので、それをそのまま返信しています
    // ここを 'テスト' のように書き換えると、何を受信しても「テスト」と返すようになります
  });
}

// ここ以降は理解しなくてOKです
const app = express();
app.get('/', (req, res) => res.send('Hello LINE BOT! (HTTP GET)'));
app.post('/webhook', line.middleware(config), (req, res) => {

  if (req.body.events.length === 0) {
    res.send('Hello LINE BOT! (HTTP POST)');
    console.log('検証イベントを受信しました！');
    return;
  } else {
    console.log('受信しました:', req.body.events);
  }

  Promise.all(req.body.events.map(handleEvent)).then((result) => res.json(result));
});

app.listen(PORT);
console.log(`ポート${PORT}番でExpressサーバーを実行中です…`);

レイアウトは仮ですが、LINE Official Account Managerからリッチメニューも設定してみました。
レモンサワーWEBサイトはこれからの着手ですので、一旦自身のTwitterに遷移させています。
参考：【公式】リッチメニューの活用法作成から設定方法まで解説

次のステップ

LIFFを使いこなせるようになること！

参考：LIFFアプリを作ってみよう（#1 基礎編）
参考：LINE BotのUI機能まとめ（リッチメニュー・Flex Message・LIFFの活用方法）

LIFFを理解して、LINE Botに組み込んでいきます！
また記事にて報告させていただきますね！