ヨシケイをもう長いこと利用している。レシピ付きで食材を届けてくれるサービスで、パルシステムとかオイシックスとかと同じサービス。食材を買いに行かずに済むし、レシピを考えなくても良いので便利に使っている（特に子供が小さいときはかなり助けてもらった）。

上に表示しているのはヨシケイのレシピだが、紙面の都合上などもあり手順番号を参照させたり、手順と別の場所にある調味料を A などで参照させたりしている。これが分かりづらい。

[3] 鍋にA、1を入れて煮立て、牛肉を加えてアクを取り、落とし蓋をして弱めの中火で煮る。器に盛り、2を散らす。

「鍋にA、1を入れて」と書かれているが、Aは近くにない。1は2つ前の工程を確認しないといけない。「2を散らす」も同様。算数の文章題とか契約書みたいで、一度読んだだけでは頭に入らない。

落ち着いて順に読んでいけば前提が頭に入っているはずだけど、台所で作業しながらではちょっとむつかしい。

あと、ヨシケイのミールキットは2〜4人向けのバリエーションがあり、PCだと全部出ている。スマホだとプルダウンメニューで変更できるが、毎回デフォルトの「2人用」になっているので変更する必要がある。変更を忘れると薄味の料理になってしまう。

ということで、この辺の解決をした。

上から順に音読しながら手を動かしたらご飯ができるやつ

通称「ヨシケイ揚げ物マンEX」。ヨシケイは結構揚げ物があり、奥さんは揚げ物が苦手だった。子供の付き添いとかで帰宅が遅くなった日にヨシケイの箱を開けてレシピが揚げ物だったときは、膝から崩れ落ちてしまっていた。そのためメニューを調べて揚げ物の日は「⭐️今日は揚げ物です⭐️」と通知するLINEボットを作ってあった。

あれから月日が経ち、奥さんは揚げ物が得意になっていた。また最近ヨシケイがリニューアルしてURLが変わったりしていたのでbotが止まっていた。この機に Next.js on Vercel だったヨシケイ揚げ物マンbotを n8n on 自鯖に変えたのだった。

やっていることは下記の通り。

1. HTMLを取得
2. 各種テキストを正規化
3. レシピ内の番号参照をインラインに展開し、2人前前提の表記を3人前に変更し、かつ、上から順に読んで手を動かしたらなんかご飯ができる状態まで平易な内容で要約
4. LINEで通知しているので Flex message で読みやすくカード化
5. メニューによっては調理順が副菜→主菜の順になるので、カードの並びを変更

平日の朝7時に起動→文字コード変換

スケジュールトリガーで毎朝7時に動かして、IFノードで {{$now.weekday}} < 6 とやっているが、よく考えたらトリガーでcronが使えたのでこっちでもよかった。

0 7 * * 1-5

ヨシケイはShift-JISだったのでそのままでは読めない。ので、別ワークフローで変換している。やっていることは sjisのままダウンロード → Execute Comamndノードでiconvを使った変換 → 変換後のファイルを再読み込み 、となっている。そのファイルを使ってHTML内から必要なテキストを取得している。

AIでいい感じにする

要約と言ったらAI。プロンプトはこうしている。

参照をインライン展開しているので要約の方の文章量が多いが、各手順番号の中だけでスコープが完結しているので考えずに済む。TailwindCSSっぽい考え方。あとAIがマークダウンにしてくれるので、後工程でFlex Message化も楽になる。

揚げ物チェックにもAIを使っている。揚げ物判定が地味に面倒くさくて、「揚げ」だけだと油揚げの味噌汁を誤判定するし、「揚げ油」だと揚げ焼きを誤判定する。多分180度とかの温度でいけるんだけど数値が違ったら困るしなぁ、と思っていたのでAIに任せることにした。

ちなみにここでもモデルは Kimi を使っている。

Flex Message で送る

Flex Messageを送信する | LINE Developers

要約のマークダウンが出せた時点で油断していたら、LINEがマークダウンを表示できなかった。文字サイズを変えたりする方法を探していたらFlex Messageという物があったので利用した。「カードコンポーネントをFlexboxで並べたカルーセル」みたいなものが出せるので、画像、ページURL、タイトル、レシピなどを用意して、codeノードで変換してMessaging APIに送っている。

あと、上のレシピでは副菜から作る手順になっていたので、表紙みたいなカードの隣がいきなり副菜になっている。まぁユーザーはつべこべ言わずに手を動かせばいいんですよ、という作りですね。

[
  {
    "text": "# 牛肉と大根の煮込み (主菜)\n\n1. ⚡ 大根をさっと洗い耐熱器にのせラップをかけずにレンジ...",
    "image": "https://www2.yoshikei-dvlp.co.jp/webodr/image/20251110/HH/HH1.jpg",
    "url": "https://www2.yoshikei-dvlp.co.jp/webodr/apl/10/101502_D.aspx?WK=20251110&DY=20251110&KB=01&KD=34&PT=00&OA=0",
    "title": "今日のヨシケイ: 牛肉と大根の煮込み、焼きはんぺんと白菜のごまドレサラダ",
    "material_table": [
      {
        "title": "牛肉と大根の煮込み",
        "table": [
          ["牛切り落とし肉", "210ｇ"],
          ["こんにゃく", "2/3枚"],
          ["大根(冷蔵)", "360ｇ"],
          ...
        ]
      },
      {
        "title": "焼きはんぺんと白菜のごまドレサラダ",
        "table": [
          ["白はんぺん(冷凍)", "1枚"],
          ["ミニトマト(冷蔵)", "3コ"],
          ...
        ]
      }
    ]
  }
]

[
  {
    "messages": [
      {
        "type": "flex",
        "altText": "今日のヨシケイ: 牛肉と大根の煮込み、焼きはんぺんと白菜のごまドレサラダ",
        "contents": {
          "type": "carousel",
          "contents": [
            {
              "type": "bubble",
              "hero": {
                "type": "image",
                "url": "https://www2.yoshikei-dvlp.co.jp/webodr/image/20251110/HH/HH1.jpg",
                "size": "full",
                "aspectRatio": "8:7",
                "aspectMode": "cover"
              },
              "body": {
                "type": "box",
                "layout": "vertical",
                "contents": [
                  {
                    "type": "box",
                    "layout": "vertical",
                    "margin": "xxl",
                    "contents": [
                      {
                        "type": "text",
                        "text": "牛肉と大根の煮込み",
                        "weight": "bold",
                        "size": "md",
                        "wrap": true
                      }
                      ...

おもしろユーザー体験 〜全体像ってだいじ〜

当初は表紙みたいなカード（主に材料表）を省略してレシピだけを表示していた。これでも調理ができないことはないが、「この具材はどっちに使うんだ…？」「全体像がなさすぎてめちゃくちゃ不安」という体験があり、素材表を載せることにした。これが全体の地図みたいな役割になったので、安心して読めるようになった。

また、レシピの画像や公式ページURLへの遷移ボタンも置きたかったので、表紙みたいなものができてちょうどよかった。収まりも良くなりました。