2024/4/18

Honoでランダムにアイスクリームを提案するLINE BOTを作る

Hono + Cloudflare Workersを使用してランダムにアイスクリームを提案するLINE BOTを作成しました。チョコモナカジャンボに変わる新しい最強のアイスクリームを見つけることをコンセプトに、技術選定から実装までを解説します。

はじめに

コンビニのアイスクリームで CMJ(チョコモナカジャンボ)が味、食感、満足感など様々な点で最強すぎることに気づいた。
アイスクリームを食べるときはほぼ必ず CMJ しか食べなくなってしまったため、今回は新しい最強のアイスクリームを見つけるをコンセプトに、ランダムでアイスクリームを提案してくれる LINE BOT を作成する。

コンセプト

CMJ に変わる新しい最強のアイスクリームを見つける
熱いと話題の Hono を触ってみる
ついでに Hono と相性が良い Cloudflare Workers も使って API サーバーを構築する

できたもの

デモ

QR

liff.line.me

Official Account Profile

リンクを開くにはこちらをタップ

リポジトリ(README編集中)

github.com

GitHub - Suntory-Y-Water/I-scream: ランダムでアイスクリームを提供するアプリ

ランダムでアイスクリームを提供するアプリ. Contribute to Suntory-Y-Water/I-scream development by creating an account on GitHub.

フロー

ユーザーが「今日のアイスクリーム」と送信
アイスクリーム情報(商品画像、商品名、商品価格)を返却

観点

まず終わらせろの精神にもとづき、必要最低限の実装をした。

セブンイレブンで提供されている商品かつ関東地方
特定のメッセージに対してのみ返信

1 個ずつ解説します。

セブンイレブンで提供されている商品かつ関東地方

セブンイレブンで提供されている商品かつ、関東地方に場所を限定した。

セブンイレブンに絞った理由は以下の通りです。

情報が1ページにまとまっていること

まずはじめにユーザーへ返却する情報は以下と定義した。

商品画像
商品名
商品価格

この 3 つさえあればブラウザで商品の検索や、店舗へ行って探すときに困らないと判断した。

またこれらのデータはブラウザからスクレイピングする必要があるため、取得するコードを楽に書きたかったこともあり情報が 1 ページで表示されているものを選んだ。

自社ブランド以外の商品がある

大手コンビニ各社では自社ブランド(セブンプレミアム、ファミマル、ローソンセレクト)を展開しているが、一部コンビニの商品サイトにパルムやスーパーカップなど大手メーカーのアイスクリームが一覧として表示されていない。
今回は CMJ を越える最強のアイスクリームを発見することが目的なので、自社ブランドしか提供していないコンビニは対象から外すことにした。

店舗数が多いこと

コンビニのアイスクリームに絞った以上、店舗数が多いほうが最強のアイスクリームを探しやすいと判断した。

拡張性

今回は作成規模の関係で関東地方のアイスクリームしか検索の対象にしていないが、関西のアイスクリームやスイーツも対象にしたいなど、様々な要件に対応できるコンビニが適切と判断した。

特定のメッセージにのみ返信する

本当は UIUX などユーザー体験を高めるために細かいところまで気を配りたかったが、それをするとまた面倒くさくなってリリースできないことをリスクと考えた。
今回は「今日のアイスクリーム」と送信するだけでアイスクリームの情報を提供できるようにした。

作成後の感想

追加で実装したい部分

cron triggersを使ったデータの自動更新

私が確認した限り、毎週火曜日午前 7 時時点でセブンイレブンの新商品が更新されている。
朝からアイスクリームを食べる人は少ないであろう読みで、毎週火曜日午前 7 時にアイスクリームの情報洗い替えすることで、最新のアイスクリーム情報を提供できる仕組みを作成したい。

こちらが参考になると思い進めているが、なぜか kv_namespaces の値が取得できず詰まってしまったので、定期実行は一度保留にしてリリースすることを優先させた。

zenn.dev

Hono を利用しているプロジェクトで Cloudflare Workers の Cron Triggers を設定する

技術的な部分

簡単な実装しかしていないが Hono のユーザー体験が良く、直感的に API を作成できた。
Cloudflare Workers との相性もよく、爆速でデプロイできることからも小規模アプリであれば尚更使いやすいんじゃないかなと感じた。
LINE Messaging API でのアプリ？開発も始めてでしたが、公式ドキュメントが総じて分かりやすく Flex Message の作成も GUI 上で行うことができたので触りとしてはちょうどよかった。

定期実行のエンドポイントにはアクセスを極力させたくないため Bearer Auth で認証を設けています。

src/index.ts

import { Context, Hono } from 'hono';
import { router } from './api';
import { prettyJSON } from 'hono/pretty-json';
import { Bindings } from './types';
import { bearerAuth } from 'hono/bearer-auth';
import { doSomeTaskOnASchedule } from './model';
 
const app = new Hono();
app.use('/', prettyJSON());
app.use(
  '/scheduled',
  async (
    c: Context<{
      Bindings: Bindings;
    }>,
    next,
  ) => {
    const token = c.env.BEARER_TOKEN;
    const auth = bearerAuth({ token });
    return auth(c, next);
  },
);
app.route('/', router);
const scheduled: ExportedHandlerScheduledHandler<Bindings> = async (event, env, ctx) => {
  ctx.waitUntil(doSomeTaskOnASchedule(env.API_URL, env.BEARER_TOKEN));
};
export default {
  fetch: app.fetch,
  scheduled,
};

src/model.ts

/**
 *
 * @description スケジューリング関数。定時になったら指定されたAPIを叩く
 * @param {string} apiUrl
 */
export const doSomeTaskOnASchedule = async (apiUrl: string, token: string) => {
  await fetch(`${apiUrl}/scheduled`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
  }).catch((err) => {
    console.log(`LINE API error: ${err}`);
    return null;
  });
};