「ChatGPT」を駆使して、🔰初心者も簡単アップグレード！

## 1. 初心者作成ツールのアップグレード:robot:
皆様、こんにちは。
総合小売業に勤める30歳デジタル超初心者です。
以前、非常にシンプルなLINEBotの「簡易秘書ろぼっとくん」を作成しました。これを社内メンバーに使用して頂いた結果、非常に好評でした！
↓前回の記事はコチラ！（「LINEBotで、社内の困り事を解決！」）

https://qiita.com/yoshwish0122/items/177779da03800d3bf420
### 今回、修正を加えたバージョンの完成形
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">初心者が「ChatGPT」のおかげで、<br>LINEBotをここまでアップグレードできた！<br>段々と便利になっていく「簡易秘書」<br>絶対に僕より頭良いぞ、コイツ…。<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/WDua0wXheI">pic.twitter.com/WDua0wXheI</a></p>&mdash; minaharu (@mina_haru_32527) <a href="https://twitter.com/mina_haru_32527/status/1828333015371784302?ref_src=twsrc%5Etfw">August 27, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

メンバーに使用して頂いたところ、以前の「ろぼっとくん」についての様々なご要望を頂きました。

**◆要望①：デザインがシンプル過ぎ。かわいくして欲しい**
**◆要望②：送信するテキストのルールを忘れた時に教えてもらいたい**
**◆要望③：店舗情報に追加で情報を入れて返信して欲しい**
**◆要望④：商品を検索する機能を追加して欲しい**

今回は新たな味方「ChatGPT」を駆使して、上記の要望を踏まえて改善したツールについて記事にしていきます！社内メンバーの要望を取り入れて、みんなの困り事を解決するために試行錯誤した、アップグレード内容について是非ともご覧くださいませ。

## 2. 今回、改善した内容
### 要望①　LINE内のデザイン変更
- [x] 使用ツール：ChatGPT、LINE Creative Lab

早速、「ChatGPT」にこんな文章で質問してみました。
![リッチ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/f98e6662-43d4-97f3-e698-7d246d1468a5.png)

凄い！とても丁寧に教えてくれました！( ﾟДﾟ)
せっかく教えて頂いた「リッチメニューを追加して、リッチメッセージを活用する」
これを実装してみようと思います。設定に関しては検索したサイトで勉強しました。

参考サイト：「LINE Creative Labでリッチメニュー・リッチメッセージを作る方法」
https://line-sm.com/blog/create-image-by-line-creative-lab/

「ChatGPT」では回答に出てこなかった、「LINE Creative Lab」という、LINE広告やLINE公式アカウントで利用するクリエイティブ（画像や動画）を作成する無料のツールを活用してみました。細かな設定方法等は、上記サイトが非常に分かりやすいので、ここでの説明は割愛します。

こんな感じでテンプレートもあるので簡単に作れちゃいます！
![Image_2500x1686_20240826.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/468406c4-9971-fed1-04a7-55147b809f93.png)

### 要望②　テキストの送信ルールを案内する
作成したリッチメニューに「テキスト」を登録し、確認したい項目についての送信時のルールを表示できます。これでルールを忘れてしまっても、「ろぼっとくん」が教えてくれます。

![キャプチsャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/92702b66-ba21-ac06-9caf-b7fd31e1b5b9.png)
※設定画面はこんな感じです。50文字以内の制約があるので簡潔に説明しましょう。

これで、要望①と要望②はクリアです！

### 要望③　店舗情報の追加
- [x] 使用ツール：ChatGPT、GAS（Google Apps Script）、Google spread sheets

私たちが普段、使用している「店舗情報」データは、こんな感じです。
RDCというのは商品流通の際に、店舗に到着する前に一時的に在庫を保管しておく場所です。今回は全てダミーデータですが、店舗が60以上、RDCが3か所あります。
![mendouキャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/b3260a74-09dc-1f05-f63a-bca6a9390e65.png)
これをスプレッドシートに転記して、LINEBotで運用しようと思うと「店番」「電話番号」が同じ列に記入されていて使いづらい…。そこで、「ChatGPT」に質問してみました。

![sippai.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/60b31c29-2d03-1623-0278-cc253c888aaa.png)
では、早速スプレッドシートのGASにコードを貼り付けて実行してみよう！と思ったのですが、まさかのエラーメッセージが出ました。原因は私の質問の仕方です。「おしゃれにしたい」などの漠然とした内容でも的確に返答をできる優れものですが、データ加工・処理をする上では「詳細」を伝える必要があるようです。

気を取り直して、様々な条件を伝えてみました。
![kouキャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/87133edc-22bd-99a9-3310-f738fcdd3a97.png)
そして、コードをGASに貼り付けて、実行すると…
![kieキャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/081f7f06-a2f3-6343-59af-3e63dc209629.png)
エラーが出ず、上手く実行できましたが、元々C列にあったデータが上書きされて消えてしまいました。これではいけませんので、更に条件を伝えます。
![yappariキャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/1d529196-bdaf-4122-e590-67782c0e26ee.png)

C列に元々あったデータをD列に移動させ、B列のデータを改行で分割してB列とC列に記入するようにスクリプトを修正してくれました。
以下が試行錯誤の結果、完成したスクリプトです。

:::note
<details><summary>完成したスクリプトの全体像</summary>

```javascript
function splitDataAndMoveColumn() {
  // シートの取得
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('店舗情報');

  // ヘッダーを設定
  sheet.getRange('B1').setValue('店番');
  sheet.getRange('C1').setValue('電話番号');

  // 元のC列（電話番号列）のデータをD列に移動
  var originalPhoneData = sheet.getRange('C2:C68').getValues();
  sheet.getRange('D2:D68').setValues(originalPhoneData);

  // B2からB68のデータを取得
  var range = sheet.getRange('B2:B68');
  var data = range.getValues();

  // 分割した値を格納する配列
  var storeNumbers = [];
  var phoneNumbers = [];

  // 各セルのデータを処理
  for (var i = 0; i < data.length; i++) {
    var cellValue = data[i][0];
    
    // 改行で分割
    var parts = cellValue.split('\n');
    
    // 改行前のデータを店番として保存
    storeNumbers.push([parts[0]]);
    
    // 改行後のデータが存在する場合は電話番号として保存
    if (parts.length > 1) {
      phoneNumbers.push([parts[1]]);
    } else {
      phoneNumbers.push(['']); // 改行後のデータがない場合、空白を保存
    }
  }

  // B2からB68に店番を設定
  sheet.getRange('B2:B68').setValues(storeNumbers);

  // C2からC68に新しい電話番号を設定
  sheet.getRange('C2:C68').setValues(phoneNumbers);
}
```
</details>
:::

前回までの会話の内容も記憶しているので、先程の工程に修正を加えれば良い事を、わざわざ指示しなくても判断してくれます。非常に優秀です。そして、このコードをGASに貼り付けて実行してみます。
![seikouキャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/3d4226ac-5b09-4556-a135-f9d3e84e3501.png)
上手く実行できました！さて、スプレッドシートの方は…
![dekitaキャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/eefeb03e-7640-c0c7-6876-ba6a7f6dd9fa.png)
上手く反映できました！これで転記して運用できそうです。
今回はダミーデータなので手作業でもできるレベルに見えるかもしれませんが、
実際には膨大な行数があるので、GASで加工する事により非常に時間短縮になります。
LINEBotに組み込めば、要望③もクリアできそうです！

### 要望④　商品検索機能の追加
- [x] 使用ツール：ChatGPT、GAS（Google Apps Script）、Google spread sheets

私たちが普段、使用している「商品情報」データは、こんな感じです。
様々な商品が自社の各店に品揃えがあるかどうかが記載されています。
例えば今回のダミーデータですと、商品3はA店・B店には品揃えがありますが、C店には品揃えが無いというデータになります。商品を発見した時に、既に自社に取り扱いがある商品か、新規商品かを調べられると、品揃えを検討する際に非常に役に立ちます。
![minikuiキャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/fc137eae-4193-19cf-0f13-ae6b8fe11dfa.png)
これもスプレッドシートに転記して、LINEBotで運用しようと思うと使いづらいので、
少し慣れてきた「ChatGPT」に、こんな質問をしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/26a86a16-08d4-638e-5b0c-cd88a10663b9.png)
先程の反省を活かして、直ちに完成形を要求するのではなく、どんな形になるのかを事前に聞いてから適用する方法を試みました。

◎コードが生成される事を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/91f78fba-f4ac-d122-c044-c57c8247c68e.png)
◎表も思い通りの形である事を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/913e7eaf-b184-16f7-3c19-594464f55ade.png)
自分の思い通りの形になっている事を確認したので、
元の状態をスプレッドシートからコピペして、表の通りに並べるコードを追加で質問しました。表の形ではなく文字列のような形でコピペしても正しく認識してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/14fb1667-c694-4686-b301-024a491a4725.png)
以下が完成したスクリプトです。

:::note 
<details><summary>完成した「表の並び替え」スクリプト</summary>

```javascript
function rearrangeData() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  // データ範囲を取得
  var data = sheet.getDataRange().getValues();

  // 出力する新しいデータを格納する配列
  var output = [['JANコード', '商品名称', 'あり', '×']];

  // 元データを処理して新しい形式に変換
  for (var i = 2; i < data.length; i++) { // 2行目からループ開始
    var janCode = data[i][0];
    var productName = data[i][1];
    var availableStores = [];
    var unavailableStores = [];

    // 各店舗について「○」と「×」の処理
    for (var j = 2; j < data[i].length; j++) {
      if (data[i][j] === '○') {
        availableStores.push(data[1][j]); // 店舗名称を追加（2行目から取得）
      } else if (data[i][j] === '×') {
        unavailableStores.push(data[1][j]); // 店舗名称を追加（2行目から取得）
      }
    }

    // 新しいデータを出力用の配列に追加
    output.push([
      janCode,
      productName,
      availableStores.join('・'),
      unavailableStores.join('・')
    ]);
  }

  // 新しいシートに出力（既存シートをクリアして上書き）
  sheet.clear(); 
  sheet.getRange(1, 1, output.length, output[0].length).setValues(output);
}
```
</details>
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/7bd02780-9ad1-8c9a-2c25-f8790454b637.png)
GASコードを貼り付けて、実行は成功です。簡単に以下のように並び替えができました。
![naretekitaキャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/ab4734fa-e866-03cb-f910-8ec745026bf1.png)
LINEBotに組み込めば、要望④もクリアできそうです！

# 3. LINEBotに要望③・④を追加する
使用ツール：Make、LINEBot
Makeで作成したシナリオはこちらです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844566/ce5501bd-5fe4-1251-4d01-1d9265110a47.png)

作成の際に、こちらの記事を参考にしました。
非常に詳しく記載されており、初心者の私でもすぐに理解できる程ですので、
ここでの設定の詳細説明につきましては割愛させて頂きます。

:::note info
私の同僚の記事なので、是非とも「いいね」お願い致します。
:::

https://qiita.com/Miyu1212/items/468381f093c4687dea4f

現在、自社に商品登録が無かった場合の返信の登録に躓き、苦戦中…。プロの方々に教わるも、分岐の部分で上手く動作せず、今回はタイムオーバー…。もっと勉強をして絶対に改善します！！

## 4.「ChatGPT」「GAS」を使う事で捻出した時間は
### 様々な発見の時間に
今まで分からない事があると全て自分で調べたくなる性分でしたが、こんな便利なツールがあったおかげで沢山の時間を捻出できました。その分、様々な記事を読んだり、デジタル初心者同士ではありますが同僚・仲間と話したりして、自身の「LINEBot」を想像以上に改良する事ができました。
また、単純に「ChatGPT」は話相手にもなってくれます。知らないこと・分からないことを漠然と投げかけて、会話のように質問を続けるだけで解決することも多かったです。例えば、今回の記事に書いた「LINE画面をおしゃれにしたい」や「Excelシート内を列ごとに仕分けて欲しい」など具体的な指示でなくても的確な返信をしてくれます。会話の内容を記憶しているので、「さっきのヤツに…」などの指示内容でも大丈夫でした。「非常に頭の良い、優しい」人間と会話している気分でした。


### 社内メンバーに「ろぼっとくん」をお披露目する時間に
実際にアップグレードした「ろぼっとくん」をメンバーと一緒に使用して、ご要望通りの改良ができたかチェックをして頂きました。
（⇒以降、メンバーからのフィードバックです。）

**◆要望①：デザインがシンプル過ぎ。かわいくして欲しい**
⇒「リッチメニューで見栄えが良い」「素朴なデザインで人前で使うのにも良い」

**◆要望②：送信するテキストのルールを忘れた時に教えてもらいたい**
⇒「リッチメッセージが簡単なワンタップなのが良い」
　「忘れて聞くのが恥ずかしかったから安心」

**◆要望③：店舗情報に追加で情報を入れて返信して欲しい**
⇒「これこれ！毎回調べるのが面倒だった！LINEで聞けるの楽チン！」

**◆要望④：商品を検索する機能を追加して欲しい**
⇒「これ凄すぎない？外出先で気になった商品も調べられちゃう！」

:::note
結果は、皆さん大満足！
新機能も皆さんの要望通りだったみたいで上手くできて本当に良かったです。
:::

:::note warn
みんな：「次はJANコード」がカメラで読み取れたら良いね！
私：「えっ、もうご要望追加ですか！？」
:::
まだまだ改良の余地があるみたいです。伸びしろしかないわ！
また頼みます！相棒の「ChatGPT」さま！
以上です！