キャパオーバーの私を助けてくれる秘書が欲しい！Make×ChatGPTで王子さま秘書Botを生み出してみた話

## キャパオーバー解消！ChatGPTで業務改善に挑戦！

こちらの記事の通り、日々業務に追われて毎日が**キャパオーバー気味！**
状況を変えるためにChatGPTを使ったLINE Botを作ってみました

https://note.com/toukichirou_nene/n/n2293c8da1526

## 敏腕秘書を生み出す

###  話題のChatGPTを使いこなしたい

ChatGPTを使いこなしている上司の影響を受けてChatGPT登録してみたものの、いまいち使いこなせていない。いつもはPCで使用しているけど、これを身近なLINEで使えたらもっと活用できるのではないかと考えました。

### 王子さまが応答してくれるLINE Botにしよう！

ChatGPTをもっと手軽に使うために、LINEで質問を入れたら応答してくれるLINE Botを作成することにしました。
<font color="red">どうせ作るなら人格を持たせて私だけの秘書として活躍してほしい！</font>
さらにせっかくなら**かっこいい王子さま**に私を支えてほしい。
ということで王子さまが敏腕秘書になってくれるBotに決定！

**こちら参考にさせていただきました！**

https://note.com/nocode_dev/n/n86af1c0d6ec2

## できたのがこれ！

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">ノーコードツールMakeを使い、話題のChatGPTで王子さま格のLINE Botを作りました！<a href="https://twitter.com/hashtag/chatGPT?src=hash&amp;ref_src=twsrc%5Etfw">#chatGPT</a> <a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/withmake?src=hash&amp;ref_src=twsrc%5Etfw">#withmake</a> <a href="https://twitter.com/hashtag/linebot?src=hash&amp;ref_src=twsrc%5Etfw">#linebot</a> <a href="https://twitter.com/hashtag/linedc?src=hash&amp;ref_src=twsrc%5Etfw">#linedc</a> <a href="https://t.co/LAAtU7R8zt">pic.twitter.com/LAAtU7R8zt</a></p>&mdash; 藤吉郎 (@Chieaqua_1353) <a href="https://twitter.com/Chieaqua_1353/status/1824856249147773020?ref_src=twsrc%5Etfw">August 17, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

私の質問に色々答えてくれる王子さま
実の姿は**OpenAI ChatGPT**くん！
どうやって作成したかご紹介します！

## LINE公式アカウントを作る

### LINEアカウントって自分で作れるんだね

[LINE Developers](https://developers.line.biz/ja/)より王子さまアカウントを作成。画像はフリー素材から探しまくり私の理想とする王子さま（少女漫画風）を設定。
![oujiline.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/5cbde6c4-f65e-c309-6f1a-75e94af3253d.png)

### リッチメニューも作ってみた

私しか使わないけど、お店の公式LINEみたいにリッチメニューも作ってみた。テンプレートは[canva](https://www.canva.com/)よりかわいいのをチョイス。
* （左）ChatGPTのTOPへのリンク
* （真ん中）初心を忘れないための自己紹介への記事リンク
* （右）タップすると自動で「王子さま！私を応援して！」とテキスト入力されるボタンwww
![アイボリー　ブラウン　ホワイト　シンプル　フェミニン　かわいい　レース　アイコン　LINEリッチメニュー表.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/89d584ce-b476-7c35-81ad-1dfb5247c8e4.png)
スマホ画面で見るとこんな感じ
![ouji3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/29b3f288-03ee-2c1a-e3a4-86dd0370842e.png)

## Makeを使ってみよう

### Makeってなんだ？

最近よく聞く「ノーコード」という言葉  
でも何のことすら知らん。教えてグーグル先生！
**ソースコードの記述なしに直感的なドラッグ＆ドロップの操作のみでアプリやWebサービスが開発できる方法サービス**
だそうで、[Make](https://www.make.com/en)はそのノーコードツールの代表だということ
ふむふむ。では使っていこう！

### Makeの基本：オウム返しBotの作成

Make初級編としてLINEで問いかけると、同じ言葉をオウム返ししてくれるオウム返しBotを作りました。
[ハンズオン - オウム返しするBotを作ろう](https://zenn.dev/protoout/books/handson-hugging-face-line/viewer/040-echo-bot)
![oumugaeshi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/880cfae1-47e6-3412-c382-f39914ee3f74.png)
LINEで呼びかけてみるとこんな感じ
![BOT２.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/8e281f88-9400-9c65-202e-fbdb148867db.jpeg)

## ChatGPTの設定確認

### IDとキーの確認

すでに[ChatGPT](https://chatgpt.com/)の新規登録はしてあったのでここは割愛
※新規登録の方法を知りたい方はこちら [ChatGPTの使い方【登録方法も解説 | 無料】](https://zenn.dev/umi_mori/books/chatbot-chatgpt/viewer/how_to_use_chatgpt)

Makeの設定をする際に、ChatGPTの**Organization ID**と**API Key**の入力が必要になるため控えておきます。

「Organization ID」は設定画面で[確認](https://platform.openai.com/account/org-settings)ができます。

「API Key」は新規作成すると表示されます。

![apisakusei.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/0f8e52c0-a057-60dd-341a-a86cac780417.png)
右上の緑色のアイコン「+ Create new secret key」から作成します。
発行されたら**必ずどこかに保存しておきましょう！**

確認しようとしても、二度と全桁は**再表示されません!**
こんな感じでマスキングされてしか表示されないんです。
![apo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/0fd37d9c-98c1-5cb4-4610-1ccb04dd30c0.png)

控えていなかったら再発行するしかありません！！**（私はこれをやらかしましたww）**

## さあ、Makeでどんどん進めていこう！

### OpenAI APIと連携

さぁ、いよいよここからはMakeの出番です！
前回作成したLINEオウム返しBotを活用して、その間にOpenAI「ChatGPT」を連携させます。
**シナリオはこちら**
![tsunagiGPT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/519bf360-703e-937f-a306-aab3e23c8403.png)

### OpenAIを追加する

1. オウム返しBotを用意。右下の「＋」マークをクリック
![add1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/59be7089-6309-8a7d-dc61-8a2384e46698.png)

2. 出てきたリストから「OpenAI(ChatGPT,Whiser,DALL-E)」を選ぶ
![add2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/7e4f6edc-3cee-cd99-0e85-6e4aeea3b995.png)

3. 「Create Completion(Prompt)(GPT-3,GPT-3.5,GPT-4)」を選択
![add3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/2b1c4c27-9e9b-fa6b-8ffe-b3cb3f42e04a.png)

4. **生まれた～**
まさに**ポコ～ン**といった感じで、アイコンが生まれた！
なんだこれ。かわいい💛
![add4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/d9564c89-5b83-f173-c5cb-319c91c83606.png)

5. あとはマウス操作で真ん中に持ってくるだけ
![tsunagiGPT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/99ea464e-bc85-13a7-fdd7-61d0873204a8.png)

これでシナリオ設定は完了！
かんた～ん❣

## OpenAIの設定をしていきましょう
ポコ～ンと生まれたアイコンをクリックします
1. 「ADD」をクリック
![co1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/fecce342-efdf-b122-3eda-696bd84c8ab5.png)

2. 「API Key」と「Organization ID」を入力
さきほど保存しておいた「API Key」と「Organization ID」をコピペします。
![aisette.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/9683b897-4451-d8af-afb9-e9448de23eaa.png)

3. MethodとModelを選択
有料版にしてみたので**GPT-4o**を選択
これを機に課金したみたけど使いこなせるのかしら？
![yuuryo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/3f62a290-4972-0fe4-75a9-d93bb02f7f00.png)

5. 役割を持たせるぞ
ChatGPTに役割を持たせるシナリオを入力
**王子さまになりきってもらいましょう！**
「Messages」の項目より設定していきます
![m2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/6e4c4df1-26c7-5bbf-5e7a-d1838d49e3bf.png)

ユーザー側の設定も画面のように入力
![m5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/bd8da4d7-11ed-4998-50a3-50db25638282.png)

これで保存して**完了**

さて、こんなんでいいの？

## さあ王子さまへ話しかけよう

ではLINEで話しかけてみます

### とりあえず褒めてみる

**「かっこいいね」**
![home2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/35c78527-eea6-6bdd-34cf-8f4608ab03fc.png)
常に振る舞いにも注意を払っているとはさすが王子さま！

### まじめな仕事の課題を聞いてみよう

**「介護をしている人のサポートをするには何ができますか？」**
![shigoto2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/49787bd2-4822-8199-ea6b-439e4d13c4ae.jpeg)
素晴らしいアドバイス！事業に活かしていくぞ！

### ギャクはいけるんかな？

**「面白いこと言って」**
![omosiro1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/3d749209-73d9-d057-be85-eabaed5819c2.png)
う・う・う～ん（私には理解できない）
王子さまらしく上品なギャグだなww  

まあとりあえず

<font color="DeepPink">**私専用の王子さま兼秘書を生み出したぞ～💛** </font>

王子さま！末永くよろしくね
![2050349.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844917/f1d71a62-5630-0ab6-e28a-7bc5340f01d5.jpeg)


## あとがき
プログラムを組むなんて未知の世界のことだと思っていましたが、ツールを使えば自分でもできるんだな、と一気に世界が広がりました。
もっと勉強して世の中のAPIとつないで色々なBot作りたいな。
まず王子さまという敏腕秘書とともに、デジタルを駆使したできる女性を目指すぞ～！