【サーバーレスで構築】kintoneとLINE連携！Flex Messageを活用した商品カタログBotの実装手順（AWS Lambda/TypeScript）

$ yarn add @line/bot-sdk express @codegenie/serverless-express
$ yarn add -D typescript @types/express @types/aws-lambda

Copy

// src/index.ts
import express, { Application } from "express";
import serverlessExpress from "@codegenie/serverless-express";
import { middleware } from "@line/bot-sdk";
import "dotenv/config";
import router from "./router";

const app: Application = express();

const lineConfig = {
  channelAccessToken: process.env.LINE_CHANNEL_ACCESS_TOKEN!,
  channelSecret: process.env.LINE_CHANNEL_SECRET!,
};

app.use("/line", middleware(lineConfig)); // LINE署名検証

app.use(router);

export const handler = serverlessExpress({ app });

Copy

// src/router.ts
import express from "express";
import LineController from "./controller.js";

const router = express.Router();

router.post("/line/webhook", async (req, res) => {
  const controller = new LineController();
  await controller.webhook(req);
  res.sendStatus(200);
});

export default router;

Copy

https://【AWS Lambdaの関数URL】/line/webhook

Copy

https://【サブドメイン】.cybozu.com/k/v1/records.json

Copy

const res = await fetch(url.href, {
    headers: {
    "X-Cybozu-API-Token": process.env.KINTONE_API_TOKEN!, // APIトークンを渡す
    },
});

Copy

const url = new URL(`${process.env.KINTONE_BASE_URL!}/k/v1/records.json`);
    url.searchParams.append("app", process.env.KINTONE_APP_ID!);
    url.searchParams.append(
      "query",
      sellStartDatetime <= TODAY() order by sellStartDatetime desc,  // 取得条件
    );

Copy

// types/kintone-ecapp.d.ts

declare namespace kintoneTypes {
  interface ProductCatalogAppFields {
    description: kintone.fieldTypes.MultiLineText;
    leadTime: kintone.fieldTypes.Number;
    title: kintone.fieldTypes.SingleLineText;
    price: kintone.fieldTypes.Number;
    sellStartDate: kintone.fieldTypes.Date;
  }
  interface SavedProductCatalogAppFields extends ProductCatalogAppFields {
    $id: kintone.fieldTypes.Id;
    // 中略
  }
}

Copy

// tsconfig.json

 "files": [
    "./node_modules/@kintone/dts-gen/kintone.d.ts",
    "./types/kintone-ecapp.d.ts",
  ],

Copy

/** kintone APIのレスポンス */
type KintoneECAppResponse = {
  records: kintoneTypes.SavedProductCatalogAppFields[];
};

const itemDetails: KintoneECAppResponse = await res.json();

Copy

// src/KintoneService.ts

export class KintoneService {
  public async getECProducts(): Promise<Product[]> {
    const url = new URL(`${process.env.KINTONE_BASE_URL!}/k/v1/records.json`);
    url.searchParams.append("app", process.env.KINTONE_APP_ID!);
    url.searchParams.append(
      "query",
      sellStartDate <= TODAY() order by sellStartDate desc
    );

    const res = await fetch(url.href, {
      headers: {
        "X-Cybozu-API-Token": process.env.KINTONE_API_TOKEN!,
      },
    });

    if (!res.ok) {
      throw new Error("kintone API実行（商品取得）に失敗しました");
    }

    const productData: KintoneProductCatalogAppResponse = await res.json();

    return productData.records.map((item) => ({
      title: item.title.value,
      description: item.description.value,
      price: Number(item.price.value),
      leadTime: Number(item.leadTime.value),
    }));
  }
}

/** 商品 */
export interface Product {
  /** タイトル */
  title: string;
  /** 説明 */
  description: string;
  /** 価格 */
  price: number;
  /** 納品日数 */
  leadTime: number;
}

/** kintone APIのレスポンス */
type KintoneProductCatalogAppResponse = {
  records: kintoneTypes.SavedProductCatalogAppFields[];
};

Copy

     message = { 
        type: "flex",
        altText: "商品カタログ",
        contents: {
          type: "carousel", // 1. コンテナ(カルーセル)
          contents: ecData.map((item) => ({
            type: "bubble",
            hero: { // 2. ブロック(hero block)
              type: "image", // 3. コンポーネント(画像)
              url: "【背景画像URL】",
              size: "full",
              aspectRatio: "20:13",
              aspectMode: "cover",
            },
            body: {  // 2. ブロック(body block)
              type: "box",
              layout: "vertical",
              contents: [
                {
                  type: "text", // 3. コンポーネント(テキスト)
                  text: item.title,
                  weight: "bold",
                  size: "xl",
                },
                // 中略   
              ],
            },
          })),
        },
      };

Copy

// ローディング表示
await this.client.showLoadingAnimation({
    chatId: 【LINE ID】,
    loadingSeconds: 30, // 最大表示秒数
});

Copy

// src/LINEService.ts

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

import { WebhookEvent } from "@line/bot-sdk";
import { Product, KintoneService } from "./KintoneService.js";

const { MessagingApiClient } = messagingApi;

/**
 * LINEサービス
 */
export class LineService {
  /** LINEクライアント */
  private client: messagingApi.MessagingApiClient;
  constructor() {
    this.client = new MessagingApiClient({
      channelAccessToken: process.env.LINE_CHANNEL_ACCESS_TOKEN!,
    });
  }

  /**
   * LINEメッセージの処理
   * @param events LINE Webhookイベント
   * @returns
   */
  public async processWebhook(events: WebhookEvent[]): Promise<void> {
    try {
      for (let i = 0; i < events.length; i++) {
        const event = events[i] as WebhookEvent;

        if (!event || (event.type !== "message" && event.type !== "postback")) {
          // LINE Consoleでの動作検証用
          return;
        }

        let message = ""; // ユーザーが送信したメッセージ
        if ("message" in event && event.message.type === "text") {
          message = event.message.text;
        }

        const lineId = event.source.userId; // ユーザーのLINE ID（返信に必要）
        if (!lineId) {
          throw new Error("LINE IDを取得できませんでした");
        }

        // ローディング表示
        await this.client.showLoadingAnimation({
          chatId: lineId,
          loadingSeconds: 10,
        });

        // kintoneからEC商品取得
        const kintoneService = new KintoneService();
        const ecData = await kintoneService.getECProducts();

        // LINEでカタログをFlex Messageで送信
        await this.showECCatalog(event.replyToken, ecData);
      }
    } catch (error) {
      console.error(error);
      throw error;
    }
  }

  /**
   * 商品カタログをFlex Messageで表示する
   * @param replyToken LINEリプライトークン
   * @param ecData 商品データ
   */
  private async showECCatalog(
    replyToken: string,
    ecData: Product[]
  ): Promise<void> {
    let message: messagingApi.Message = {
      type: "text",
      text: "商品がありません",
    };

    if (ecData.length > 0) {
      message = {
        type: "flex",
        altText: "商品カタログ",
        contents: {
          type: "carousel",

         contents: ecData.map((item) => ({
            type: "bubble",
            hero: {
              type: "image",
              url: "【背景画像URL】",
              size: "full",
              aspectRatio: "20:13",
              aspectMode: "cover",
            },
            body: {
              type: "box",
              layout: "vertical",
              contents: [
                {
                  type: "text",
                  text: item.title,
                  weight: "bold",
                  size: "xl",
                  wrap: true,
                },
                {
                  type: "text",
                  text: item.description,
                  size: "sm",
                  wrap: true,
                },
                {
                  type: "box",
                  layout: "vertical",
                  margin: "lg",
                  spacing: "sm",
                  contents: [
                    {
                      type: "box",
                      layout: "baseline",
                      spacing: "sm",
                      contents: [
                        {
                          type: "icon",
                          url: "【価格アイコンURL】",
                          offsetTop: "xs",
                        },
                        {
                          type: "text",
                          text: ${item.price}円,
                          wrap: true,
                          color: "#666666",
                          size: "sm",
                          flex: 5,
                          margin: "sm",
                          offsetStart: "sm",
                        },
                      ],
                      alignItems: "center",
                    },
                    {
                      type: "box",
                      layout: "baseline",
                      spacing: "sm",
                      contents: [
                        {
                          type: "icon",
                          url: "【納品日数アイコンURL】",
                          offsetTop: "xs",
                        },
                        {
                          type: "text",
                          text: ${item.leadTime}日後にお届け,
                          wrap: true,
                          color: "#666666",
                          size: "sm",
                          flex: 5,
                          margin: "sm",
                          offsetStart: "sm",
                        },
                      ],
                      alignItems: "center",
                    },
                  ],
                },
              ],
            },
          })),
        },
      };
    }

    try {
      await this.client.replyMessage({
        replyToken: replyToken,
        messages: [message],
      });
    } catch (error) {
      console.error(error);
      throw error;
    }
  }
}

Copy