LINE Botの作り方 2026：Messaging API開発入門

ユーザー ── メッセージ ──▶ LINEプラットフォーム ── Webhook（POST + x-line-signature）──▶ あなたのサーバー
                                                                                          │
ユーザー ◀──── 返信 ────── LINEプラットフォーム ◀──── Messaging API（応答 / プッシュ）────┘

mkdir line-bot && cd line-bot
npm init -y && npm pkg set type=module
npm install @line/bot-sdk express
npm install -D typescript tsx @types/express @types/node

{
  "scripts": {
    "dev": "tsx watch --env-file=.env src/index.ts",
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "outDir": "dist",
    "skipLibCheck": true
  },
  "include": ["src"]
}

mkdir line-bot && cd line-bot
python -m venv .venv
source .venv/bin/activate   # Windows: .venv\Scripts\activate
pip install line-bot-sdk flask

LINE_CHANNEL_SECRET=your_channel_secret
LINE_CHANNEL_ACCESS_TOKEN=your_channel_access_token
PORT=3000

// src/index.ts
import express from "express"
import {
  JSONParseError,
  LineBotClient,
  SignatureValidationFailed,
  middleware,
  webhook,
} from "@line/bot-sdk"

const channelSecret = process.env.LINE_CHANNEL_SECRET
const channelAccessToken = process.env.LINE_CHANNEL_ACCESS_TOKEN
if (!channelSecret || !channelAccessToken) {
  throw new Error("LINE_CHANNEL_SECRET と LINE_CHANNEL_ACCESS_TOKEN を設定してください")
}

const client = LineBotClient.fromChannelAccessToken({ channelAccessToken })
const app = express()

// LINEのミドルウェアは生のリクエストボディでx-line-signatureを検証するため、
// JSONのボディパーサーより前に置きます。
app.post("/webhook", middleware({ channelSecret }), (req, res) => {
  res.sendStatus(200) // 先にLINEへ200を返してから処理する
  const { events } = req.body as webhook.CallbackRequest
  for (const event of events) {
    handleEvent(event).catch((err) => console.error("イベント処理に失敗", err))
  }
})

app.use(express.json()) // ほかのルートでは通常どおりJSONを解析できる

async function handleEvent(event: webhook.Event) {
  if (event.type !== "message" || event.message.type !== "text" || !event.replyToken) return

  await client.replyMessage({
    replyToken: event.replyToken,
    messages: [{ type: "text", text: `「${event.message.text}」ですね` }],
  })
}

// ミドルウェアはエラーをnext()に渡すだけ。このハンドラーがないとExpressは500を返す。
app.use((err: unknown, _req: express.Request, res: express.Response, next: express.NextFunction) => {
  if (err instanceof SignatureValidationFailed) {
    res.status(401).send("Invalid signature")
    return
  }
  if (err instanceof JSONParseError) {
    res.status(400).send("Invalid JSON")
    return
  }
  next(err)
})

const port = Number(process.env.PORT ?? 3000)
app.listen(port, () => console.log(`LINE Botがポート${port}で待機中`))

# app.py
import os

from flask import Flask, abort, request
from linebot.v3 import WebhookHandler
from linebot.v3.exceptions import InvalidSignatureError
from linebot.v3.messaging import (
    ApiClient,
    Configuration,
    MessagingApi,
    ReplyMessageRequest,
    TextMessage,
)
from linebot.v3.webhooks import MessageEvent, TextMessageContent

app = Flask(__name__)
configuration = Configuration(access_token=os.environ["LINE_CHANNEL_ACCESS_TOKEN"])
handler = WebhookHandler(os.environ["LINE_CHANNEL_SECRET"])


@app.post("/webhook")
def webhook():
    signature = request.headers.get("X-Line-Signature", "")
    body = request.get_data(as_text=True)  # JSONとして解析する前の生のボディ
    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        abort(400)
    return "OK"


@handler.add(MessageEvent, message=TextMessageContent)
def handle_text(event):
    with ApiClient(configuration) as api_client:
        MessagingApi(api_client).reply_message(
            ReplyMessageRequest(
                reply_token=event.reply_token,
                messages=[TextMessage(text=f"「{event.message.text}」ですね")],
            )
        )


if __name__ == "__main__":
    app.run(port=int(os.environ.get("PORT", 3000)))

import { messagingApi } from "@line/bot-sdk"

const text: messagingApi.TextMessage = {
  type: "text",
  text: "こんにちは！ご用件をお聞かせください。", // 最大5,000文字
}

const image: messagingApi.ImageMessage = {
  type: "image",
  originalContentUrl: "https://example.com/price-list.jpg", // HTTPS、JPEGまたはPNG、最大10MB
  previewImageUrl: "https://example.com/price-list-preview.jpg", // 最大1MB
}

const card: messagingApi.FlexMessage = {
  type: "flex",
  altText: "カット 4,400円", // 通知やトークリストに表示される
  contents: {
    type: "bubble",
    hero: {
      type: "image",
      url: "https://example.com/haircut.jpg",
      size: "full",
      aspectRatio: "20:13",
      aspectMode: "cover",
    },
    body: {
      type: "box",
      layout: "vertical",
      contents: [
        { type: "text", text: "カット", weight: "bold", size: "xl" },
        { type: "text", text: "4,400円・45分", color: "#06C755" },
      ],
    },
    footer: {
      type: "box",
      layout: "vertical",
      contents: [
        {
          type: "button",
          style: "primary",
          color: "#06C755",
          action: { type: "postback", label: "予約する", data: "action=service&id=cut", displayText: "カットを予約したい" },
        },
      ],
    },
  },
}

const menu: messagingApi.TextMessage = {
  type: "text",
  text: "ご希望の内容を選んでください。",
  quickReply: {
    items: [
      // ボタンは最大13個
      { type: "action", action: { type: "postback", label: "予約", data: "action=start_booking", displayText: "予約" } },
      { type: "action", action: { type: "message", label: "営業時間", text: "営業時間" } },
      { type: "action", action: { type: "location", label: "位置情報を送る" } },
    ],
  },
}

type Session =
  | { step: "idle" }
  | { step: "pick_date"; service: string }
  | { step: "confirm"; service: string; date: string }
  | { step: "human" } // スタッフがこのトークを引き継いだ状態

// チュートリアルのためメモリに保存。再起動で消え、複数インスタンス間で共有されないため、
// 本番ではRedisやデータベースを使う。
const sessions = new Map<string, Session>()

const SERVICES: Record<string, string> = { cut: "カット", color: "カラー" }

async function handleEvent(event: webhook.Event) {
  // このチュートリアルは1対1のトークのみ扱う
  if (event.source?.type !== "user" || !event.source.userId) return
  const userId = event.source.userId

  if (event.type === "follow") {
    await reply(event.replyToken, [menuMessage("友だち追加ありがとうございます！")])
    return
  }

  const session = sessions.get(userId) ?? { step: "idle" }
  if (session.step === "human") return // スタッフがLINE Official Account Managerから返信する

  if (event.type === "postback" && event.replyToken) {
    await onPostback(userId, session, event.postback, event.replyToken)
    return
  }

  if (event.type === "message" && event.replyToken) {
    if (event.message.type !== "text") {
      await reply(event.replyToken, [menuMessage("ありがとうございます。テキストのメッセージのみ読み取れます。")])
      return
    }
    const text = event.message.text.trim()
    if (["staff", "スタッフ"].includes(text.toLowerCase())) {
      sessions.set(userId, { step: "human" })
      await reply(event.replyToken, [
        { type: "text", text: "承知しました。営業時間内（10:00〜20:00）にスタッフがこのトークで返信します。" },
      ])
      return
    }
    await reply(event.replyToken, [menuMessage("下のボタンから選んでください。")]) // AIの章でこの行を置き換える
  }
}

async function onPostback(userId: string, session: Session, postback: webhook.PostbackContent, replyToken: string) {
  const data = new URLSearchParams(postback.data)
  const action = data.get("action")

  if (action === "start_booking") {
    await reply(replyToken, [{
      type: "text",
      text: "どのメニューにしますか？",
      quickReply: {
        items: Object.entries(SERVICES).map(([id, label]) => ({
          type: "action" as const,
          action: { type: "postback" as const, label, data: `action=service&id=${id}`, displayText: label },
        })),
      },
    }])
    return
  }

  if (action === "service") {
    const service = SERVICES[data.get("id") ?? ""]
    if (!service) return
    sessions.set(userId, { step: "pick_date", service })
    await reply(replyToken, [{
      type: "text",
      text: `${service}ですね。ご希望の日を選んでください。`,
      quickReply: {
        items: [{ type: "action", action: { type: "datetimepicker", label: "日付を選ぶ", data: "action=date", mode: "date" } }],
      },
    }])
    return
  }

  if (action === "date" && session.step === "pick_date" && postback.params?.date) {
    const next: Session = { step: "confirm", service: session.service, date: postback.params.date }
    sessions.set(userId, next)
    await reply(replyToken, [{
      type: "text",
      text: `${next.date}に${next.service}で予約リクエストを送りますか？`,
      quickReply: {
        items: [
          { type: "action", action: { type: "postback", label: "送信する", data: "action=confirm", displayText: "送信する" } },
          { type: "action", action: { type: "postback", label: "やめる", data: "action=cancel", displayText: "やめる" } },
        ],
      },
    }])
    return
  }

  if (action === "confirm" && session.step === "confirm") {
    sessions.delete(userId)
    // ここで予約システムに保存する、またはスタッフに通知する
    await reply(replyToken, [
      { type: "text", text: `${session.date}の${session.service}のリクエストを受け付けました。時間はこのトークでご連絡します。` },
    ])
    return
  }

  if (action === "cancel") {
    sessions.delete(userId)
    await reply(replyToken, [menuMessage("キャンセルしました。ほかにご用件はありますか？")])
  }
}

function menuMessage(text: string): messagingApi.TextMessage {
  return {
    type: "text",
    text,
    quickReply: {
      items: [
        { type: "action", action: { type: "postback", label: "予約", data: "action=start_booking", displayText: "予約" } },
        { type: "action", action: { type: "message", label: "スタッフと話す", text: "スタッフ" } },
      ],
    },
  }
}

async function reply(replyToken: string, messages: messagingApi.Message[]) {
  await client.replyMessage({ replyToken, messages })
}

from urllib.parse import parse_qsl

from linebot.v3.webhooks import PostbackEvent


@handler.add(PostbackEvent)
def handle_postback(event):
    data = dict(parse_qsl(event.postback.data))  # "action=service&id=cut"
    if data.get("action") == "date" and event.postback.params:
        text = f"選択した日付：{event.postback.params['date']}"
    else:
        text = f"アクション：{data.get('action')}"
    with ApiClient(configuration) as api_client:
        MessagingApi(api_client).reply_message(
            ReplyMessageRequest(reply_token=event.reply_token, messages=[TextMessage(text=text)])
        )

// src/ai.ts
import { GoogleGenAI } from "@google/genai"

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY })
const model = process.env.GEMINI_MODEL // Googleのドキュメントに載っている現行のモデル名
if (!model) throw new Error("GEMINI_MODEL を設定してください")

// Botがそのまま繰り返してもよい情報だけを書く
const FAQ = `
営業時間：10:00〜20:00、毎週水曜定休。
住所：東京都渋谷区神宮前1-2-3（JR原宿駅から徒歩5分）。
カット：4,400円（45分）。カラー：6,600円〜（約2時間）。
予約：メニューの「予約」をタップ。変更は3時間前まで。
`

export async function answerFromFaq(question: string): Promise<string | null> {
  const response = await ai.models.generateContent({
    model: model!,
    contents: question,
    config: {
      systemInstruction:
        "あなたは美容室の問い合わせに答えるアシスタントです。下のFAQだけを根拠に答えてください。" +
        "FAQに答えがない場合は、NO_ANSWER とだけ返してください。" +
        "お客様と同じ言語で、3文以内で簡潔に答えてください。料金、時間、キャンペーンを作り出してはいけません。\n\n" +
        `FAQ:\n${FAQ}`,
      temperature: 0.2,
      maxOutputTokens: 300,
      abortSignal: AbortSignal.timeout(15_000), // 応答トークンの期限に十分間に合うように
    },
  })
  const text = response.text?.trim()
  if (!text || text.includes("NO_ANSWER")) return null
  return text.slice(0, 5000) // LINEのテキストメッセージは最大5,000文字
}

// src/index.ts の先頭（ES Modulesでは拡張子 .js が必要）
import { answerFromFaq } from "./ai.js"

// handleEvent内で、自由入力に毎回メニューを返す代わりに：
await client.showLoadingAnimation({ chatId: userId, loadingSeconds: 20 })
const answer = await answerFromFaq(text).catch(() => null)
await reply(event.replyToken, [
  answer
    ? { type: "text", text: answer }
    : menuMessage("その件はお答えできません。「スタッフと話す」を押すと担当者につながります。"),
])

FROM node:22-slim AS build
WORKDIR /app
COPY package*.json tsconfig.json ./
RUN npm ci
COPY src ./src
RUN npm run build

FROM node:22-slim
WORKDIR /app
ENV NODE_ENV=production
COPY package*.json ./
RUN npm ci --omit=dev
COPY --from=build /app/dist ./dist
EXPOSE 3000
CMD ["node", "dist/index.js"]

import { HTTPFetchError } from "@line/bot-sdk"

const seen = new Map<string, number>() // webhookEventId -> 受信時刻。複数インスタンスならRedis（SET NX + TTL）を使う

function firstDelivery(event: webhook.Event): boolean {
  const now = Date.now()
  for (const [id, at] of seen) if (now - at > 30 * 60_000) seen.delete(id)
  if (seen.has(event.webhookEventId)) return false
  seen.set(event.webhookEventId, now)
  return true
}

function log(level: "info" | "error", msg: string, data: Record<string, unknown> = {}) {
  console.log(JSON.stringify({ time: new Date().toISOString(), level, msg, ...data }))
}

app.post("/webhook", middleware({ channelSecret }), (req, res) => {
  res.sendStatus(200)
  const { events } = req.body as webhook.CallbackRequest
  for (const event of events) {
    if (!firstDelivery(event)) continue // 同じイベントが2回届いた
    handleEvent(event).catch((err) => {
      if (err instanceof HTTPFetchError) {
        // 429：レート制限または月間上限、400「Invalid reply token」：使用済みか期限切れ
        log("error", "LINE API error", { status: err.status, body: err.body, eventId: event.webhookEventId })
      } else {
        log("error", "event failed", { error: String(err), eventId: event.webhookEventId })
      }
    })
  }
})