この商品のアレルゲンは何？LINE Botに聞いて解決！

## 目次
<ul>
<li><a href="#feature">このツールを作成しようとした背景</a></li>
<li><a href="#feature">完成品</a></li>
<li><a href="#feature">使用ツール</a></li>
<li><a href="#how-to-use">作成手順</a></li>
<li><a href="#reviews">番外編</a></li>
<li><a href="#reviews">まとめ</a></li>
</ul>

<h2 id="feature">このツールを作成しようとした背景</h2>
ズバリ曖昧回避です。私は職業柄食に関わるので、アレルギーに対しての知識を持っていないとお客さまの命にかかわるからです。私の実体験のもとお客さまからこの商品は○○入っていますかと聞かれ、不安を覚えました。幸いにもその商品のラベルに書いてはありますが、確実な情報が欲しいときに品番を入力するだけで、その品番のアレルゲンが瞬時にわかるプロトタイプがあればいいなと思い、作成しました。これからどのように作成したのか説明します

<h2 id="feature">完成品</h2>

https://x.com/Ic8ICt6crO343/status/1919354083644731609

<h2 id="feature">使用ツール</h2>

LINE Bot
Googleスプレッドシート
ChatGPT
Google Apps Script

<h2 id="feature">作成手順</h2>

 ###### ①LINE Botを作成（前回の記事参照）

https://qiita.com/Z1616/items/00f7fe616d5da14f5fc7

 ###### ②Googleスプレッドシートに品番とアレルゲンを入力

![スクリーンショット (24).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4051643/872f38ec-fd87-40df-8d75-3b3205e75667.png)
今回はプロトタイプのため仮で１から50まで入力し、アレルゲンも入力しました。

###### ③Google Apps Scriptを拡張機能から開きます
開いたら最初に記入してある項目すべて削除して**まっさらな**状態にしてください

###### ④ChatGPTに聞く
私はプログラミング初心者なのでChatGPTにGASを書いてもらいました
この時の**ポイント**
・最終目的はどうしたいのか（この場合は品番でアレルゲンが知りたい）
・なんのツールを使って作成したいのか（今回はLINE Bot)
　これらを明確にすると本題から逸れることなく正解にたどり着けます

 わたしはこのように聞きました
 
 ![スクリーンショット (25).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4051643/4f58ec3f-9b34-4cc8-a0f9-bf3f510aae5b.png)

 この時に**画像を貼り付けて**聞くとより明確になります！

 ###### ⑤教えてもらったGASコードを③でまっさらにしたシートに張り付ける。コピークリックする
 ![スクリーンショット (26).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4051643/94324d20-3cea-4007-90ed-e2d374795102.png)
しかし、これでは**LINE Botと繋がっていない**ため、LINE Botで繋げたいと私は聞き新たなGASを作成してもらいました

![スクリーンショット (27).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4051643/02480ec0-58cb-4adc-ba48-5b8ba625a357.png)

よく見ると一番上にチャネルアクセストークン、
スプレッドシートIDの欄が増えました

この通りにLINE Developersから前回記事のようにアクセストークンを入手し、GASに貼り付けます。スプレッドシートIDも同様に貼り付けます
スプレッドシートはhttps://docs.google.com/spreadsheets/d/ と
/edit?... の間にある部分が IDです**注意**
ここで何回もエラーが起きたり、うまくいかなかったときにはそのGASを貼り付けてエラー内容ChatGPTに聞いてみたり、**初心者にわかりやすく教えて**と聞いたりしてみましょう。1から教えてくれます
シート名はSheet1　数字は半角です

###### ⑥デプロイでURLを作成する
![スクリーンショット (29).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4051643/18d0a7fb-6fba-4562-8e39-3429d7580e95.png)
右上の青いデプロイボタンをクリックする
新しいデプロイ→種類を選択（Webアプリ）→実行するユーザー（自分）→アクセスできるユーザー（全員）
このように設定するとURLが出てきます
![スクリーンショット (30).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4051643/d200bfcb-e04d-41a2-a8b9-ec4423e81570.png)
下のURLをコピーする

###### ⑦URLをLINE DevelopersのWebhook URLに張り付ける（Messaging APIの欄）
Webhookの利用をONにして検証→成功すればOK
これで登録が完了し完成です！！お疲れ様でした。

<h2 id="feature">番外編</h2>
今回ChatGPTで作成して、作業効率が大幅短縮することが実感しました。
なので私は品番とアレルゲンを追加するGASをChatGPTに書いてもらいました

完成品

https://x.com/Ic8ICt6crO343/status/1919725415372857709

最終的にこのようなGASになりました（IDやトークンは伏せてあります）

```
const LINE_ACCESS_TOKEN = 'ここにチャネルアクセストークン';
const SHEET_ID = 'ここにスプレッドシートID';

function doPost(e) {
  const json = JSON.parse(e.postData.contents);
  const replyToken = json.events[0].replyToken;
  const userMessage = json.events[0].message.text;

  let replyMessage = '';

  // 品番とアレルゲン（複数可）がスペース区切りの場合、登録処理
  if (userMessage.includes(' ')) {
    const parts = userMessage.split(' ');
    const partNumber = parts[0];
    const allergen = parts.slice(1).join(','); // 小麦 卵 乳 → "小麦,卵,乳"
    addAllergenRow(partNumber, allergen);
    replyMessage = `✅ 品番「${partNumber}」とアレルゲン「${allergen}」を登録しました！`;
  } else {
    // 検索処理
    const allergenInfo = searchAllergen(userMessage);
    replyMessage = allergenInfo
      ? `🔎 品番「${userMessage}」のアレルゲンは：\n${allergenInfo.replace(/,/g, '\n')}` // カンマを改行に
      : `⚠️ 品番「${userMessage}」は見つかりませんでした。`;
  }

  replyToUser(replyToken, replyMessage);
}

function addAllergenRow(partNumber, allergen) {
  const sheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName('Sheet1');
  sheet.appendRow([partNumber, allergen]);
}

function searchAllergen(partNumber) {
  const sheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName('Sheet1');
  const data = sheet.getDataRange().getValues();
  
  for (let i = 1; i < data.length; i++) {
    if (data[i][0].toString() === partNumber) {
      return data[i][1];
    }
  }
  return null;
}

function replyToUser(replyToken, message) {
  const url = 'https://api.line.me/v2/bot/message/reply';
  const payload = JSON.stringify({
    replyToken: replyToken,
    messages: [{
      type: 'text',
      text: message
    }]
  });

  const options = {
    method: 'post',
    contentType: 'application/json',
    headers: {
      Authorization: `Bearer ${LINE_ACCESS_TOKEN}`
    },
    payload: payload
  };

  UrlFetchApp.fetch(url, options);
}
```
これまでお世話になったのでお礼を言いました（笑）
![スクリーンショット (31).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4051643/ac6f8e6a-d6bc-4cb7-a275-a22d480ea611.png)


<h2 id="feature">まとめ</h2>
今回初めてChatGPTを使ってプロトタイプを作成してみた感想は思ったより簡単にできるんだと思いました。なぜかというと私はプログラミング初心者でプログラミングなんて絶対にできないと思っていたからです。ChatGPTのおかげでハードルが下がりました。時間も大幅に削減できるので、追加してみたい機能やアプリを気軽に質問できるのはいいと思いました。
作っていくうちにここをこうしたい、<strong>もっとこうだといいな</strong>というアイデアがうかび、作るのが楽しかったです。
原材料は日々変わっていくので<strong>自動更新機能</strong>があるといいなと思いました。

少し長くなってしまいましたが今回は以上となります。
最後までお付き合いいただきありがとうございました。