【LINE＋ChatGPT】仮想ペットと楽しいお話し【あなたはもう寂しくない】

# ■はじめに
在宅時ではペットと触れ合えるのに、通勤時には全く触れ合えない………そんな寂しさありませんか？そんなときは**コレ**をどうぞお試しあれ。本日は、あなたの💩ダルい通勤を解消してくれる、「**夢アプリ**」の紹介です。

※「**夢アプリ**」の使いすぎにご注意ください。用法・用量守って正しくお使いください🙃

![仕組み.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/fe68d5d3-d4d1-c0f0-c506-d0fc0ef86cfc.png)


# ■スライド版

スライド版とページスクロール版は、ほぼ同じ内容で紹介しております。

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSbDOSJh2R1VdYF9apI7QtXSfksFcvB4JsX61uB8eXwfSYXqOHMrROQfQKy2pK7GueRe0-j2P0ljBZy/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="420" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

# ■ページスクロール版

スライド版とページスクロール版は、ほぼ同じ内容で紹介しております。

## 仮想ペットと楽しいお話しができます！
**【完成イメージ】Win10のLINEアプリ実行画面**
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/d945e180-f50f-c9ce-0ef0-f7f3cd5a6947.png)

---

## 必要なサービス
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/5b88ee12-6904-c2fa-8840-84ac9d29148c.png)

3つのサービスが必要となりますので、まずは以下のサービスについてアカウントを作ってください。2023年3月現在はどれも無料枠があります。
1. [LINE-Developers](https://developers.line.biz/ja/)
1. [ChatGPT](https://chat.openai.com/auth/login)
1. [Make](https://www.make.com/en)

MakeとChatGPTは、Googleアカウントを使うと簡単に登録できます

---

## [LINE-Developers](https://developers.line.biz/ja/)
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/acdbfed1-0aee-6cf8-bf90-d1b15562fb4a.png)
LINEのサーバサイドの処理を実行するのに必要です。
右上の「`ログイン`」から、アカウントを作成してください。アカウント取得は、とても簡単なので詳細は割愛します😘

---

## [ChatGPT](https://chat.openai.com/auth/login)
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/09b26275-fe96-5888-161f-165d9563b844.png)
ChatGPTは、AIで返答内容を考える役割です。
「`Sign Up`」からアカウントを作成してください。アカウント取得は、とても簡単なので詳細は割愛します😘

---

## [Make](https://www.make.com/en)
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/ef7b46d5-1d65-79f5-7029-160712daeb69.png)
LINEサービスとChatGPTサービスを結びつける役割です。
「`Get Started free`」からアカウントを作成してください。アカウント取得は、とても簡単なので詳細は割愛します😘

---

## 設定 1：LINE-Developers
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/7356aa8c-bcc2-9f23-79f6-23f8ae01c06f.png)
それではLINE-Devから設定していくよ。ログインしたら「`LINE Developersコンソール`」へ移動してね。

---

## 設定 2：LINE-Developers
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/0deb182c-3ad1-4d16-36fe-874b341b0911.png)
プロバイダを作成してください。作成名は適当でOKです😛

---

## 設定 3：LINE-Developers
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/3db57fdd-7c47-16a8-9595-bff1c684aa78.png)
「`新規チャネル作成`」を押下してください。

---

## 設定 4：LINE-Developers
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/77c878f9-40bd-5cf4-efcc-af98b3eb3666.png)

新規チャネル作成では、「`Messaging API`」を選択してください。
その後の細かな設定と利用規約の同意を行います。ここの部分の説明は、割愛させて頂きます。

---

## 設定 5：LINE-Developers
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/cb01c599-b86a-e24b-0817-b163471aa426.png)
チャネルができるとこんな感じになると思います。

---

## 設定 6：LINE-Developers
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/ed42dd14-e675-1275-5ecc-81aa84695b84.png)
「`Messaging API設定`」タブへ移動してください。

---

## 設定 7：LINE-Developers
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/cdd4e051-1a00-2e70-b2fb-ac205f9616d1.png)
「`Messaging API設定`」タブの下の方にある「`チャンネルアクセストークン`」を作成してください。あとで、MAKEの方に設定するために使います。

:::note info
チャンネルアクセストークンは「設定13」で使います。
:::

---

## 設定 8：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/857ce532-923a-3f72-ee65-d79c26691dda.png)
次はMAKEを設定していくよ。
左のメニューから「`Scenarios`」を選び、「`＋`」を押下してシナリオ作成を始めましょう。

---

## 設定 9：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/bd8fc439-db12-67d3-6332-e6f6433af637.png)
メニュー下の🔍虫眼鏡で「`LINE`」と記入するとメニューの一番上に出てくるので、それを選択します。

---

## 設定 10：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/fc10a0d3-dda6-86ad-3eb4-0b1adf13e8ba.png)
ここへ来てメニューがいっぱい出てやめたくなるんだけど、そこをグッと我慢して、「`Watch Events`」を選択してください。

---

## 設定 11：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/ce67a533-3cf2-9d21-734c-2183f826ce4d.png)
「`Add`」を押下してください。

---

## 設定 12：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/33e5682f-f736-90d9-5652-2145888fd553.png)
「`Add`」を押下してください。

---

## 設定 13：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/1a0ac357-7b61-02d3-e61b-c221c33295f9.png)
「`設定 6`」で作成したLINEのチャンネルアクセストークンを貼り付けてね。貼り付けたら「`Save`」や「`OK`」ボタンを押下してメニューを確定してくださいね。

:::note info
チャンネルアクセストークンは「`設定7`」で入手できます。
:::

---

## 設定 14：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/8c7d5b75-3010-6be6-5353-14d19f642b5a.png)
ここまでくるとLINEに持っていく「`WebhookのURL`」が作成されるので、それをコピーしましょう。コピーしたら「`OK`」ボタンを押下するのを忘れずに。

:::note info
Webhook URLは「`設定15`」で使用します。
:::

---

## 設定 15：LINE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/0528b64d-c622-2006-d6e4-2ad6ebf38f6f.png)
MAKEで作成した「`WebhookのURL`」をコピーしたら、「`LINEのMessaging API設定`」へ移動し、そこにあるWebhook設定の箇所にペーストしましょう。また、「`Webhookの利用`」を「`ON`」にしてください。

:::note info
Webhook URLは「`設定14`」で入手できます。
:::

---

## 設定 16：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/d9b791c2-fb2e-7179-ac03-5e8b9a8df6f1.png)
MAKEに戻り、LINEの右側にある「`＋`」ボタンを押下します。

---

## 設定 17：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/458ff18b-49f5-ec33-e3c8-dd5699a3d4f3.png)
先程と同じ様にメニュー下の🔍虫眼鏡で「`ChatGPT`」と記入するとメニューの一番上に出てくるので、それを選択します。

---

## 設定 18：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/4ed6bbd9-11a0-65b3-ebf0-06a74e25e31c.png)
「`Create a Completion`」を選択します。

---

## 設定 19：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/e9d8872d-e14e-39b9-e144-e4d42caa971b.png)
「**Add**」を押下します。
ここでChatGPTの「`API Key`」と「`Organization ID`」を入力してくれと要求されますので、ChatGPTへ移動します。

---

## 設定 20：ChatGPT
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/5c8b8582-60a4-477b-eaec-40fc028fe6ac.png)

以下のURLにアクセスして「`API Key`」を作成後、コピーします。

https://platform.openai.com/account/api-keys

:::note info
API Keyは「`設定22`」で使用します。
:::

---

## 設定 21：ChatGPT
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/648cf1dc-7b61-a048-4809-de49d829b715.png)

以下のURLにアクセスして「`Organization ID`」をコピーします。

https://platform.openai.com/account/org-settings

:::note info
Organization IDは「`設定22`」で使用します。
:::

---

## 設定 22：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/c3077c74-9d48-a895-8b9c-53dcae676e53.png)
「`設定19`」「`設定20`」でコピーしたChatGPTの「`API Key`」と「`Organization ID`」をMAKEにペースト後、「`Save`」を押下してください。

:::note info
API Keyは「`設定20`」で入手します。
Organization IDは「`設定21`」で入手します。
:::

---

## 設定 23-1：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/1849d9fd-0ea7-4e2b-2e6d-8a2043ab417b.png)

Role(役割)については以下の通り設定可能です。色々設定して楽しみましょう。
> system：AIアシスタントの設定などを記述
> assistant：AIアシスタントの発話
> user：ユーザーの発話

「Select Method：`Create a Chat Completion`」
「Model：`GTP-3.5-turbo`」
「Messages-item1-Role：`System`」
「Messages-item1-Message Content：`簡潔に日本語で話してください`」

:::note info
設定は続きます。「`OK`」ボタン押下はちょっと待ってね。
:::

---

## 設定 23-2：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/bd0e58ab-59cc-0b56-7a96-7e45d2dda2b8.png)

続きを設定していくよ。

「Messages-item2-Role：`Assistant`」
「Messages-item2-Message Content：`あなたはペットです。名前はもふもふです。トイプードルの女の子です。誕生日は2017年1月16日です。飼い主が大好きです。語尾はわんで答えてください。`」
「Messages-item3-Role：`User`」
「Messages-item3-Message Content：`LINE → Events[] → Message → Text`」

設定できたら、「`OK`」ボタンを押下してください。

---

## 設定 24：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/83605a5e-3d7c-68b0-740a-405f1f1e2b4f.png)

ChatGPTの右側にある「`＋`」ボタンを押下します。

---

## 設定 25：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/107a1db2-d326-a6e0-7d19-52d41ae30ff0.png)

さっき使ったのでLINEがメニューに出てきていますね。「`LINE`」を選択します。

---

## 設定 26：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/d243ff19-fce6-45ab-d35f-55dbc50a371e.png)
「`Send a Reply Message`」を選択します。

---

## 設定 27-1：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/2073c1b0-81a5-b85d-706f-1543b6b73de4.png)

「`Connection`」は先程「`設定12`」「`設定13`」で設定したものを選択します。

:::note info
設定は続きます。「`OK`」ボタン押下はちょっと待ってね。
:::

---

## 設定 27-2：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/979b611a-b454-3291-14f4-9bea1aebf0bf.png)

「`Reply Token`」は「`Line → Events[] → Reply Token`」を設定してください。

:::note info
設定は続きます。「`OK`」ボタン押下はちょっと待ってね。
:::

---

## 設定 27-3：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/99c680ce-8fb9-6d21-8020-256701e0e1da.png)

「`Reply Token`」は「`OpenAI → Events[] → Reply Token`」を設定してください。
設定ができたら「`OK`」ボタンを押下してください。

---

## 設定 28：MAKE
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/a5b9fce7-68a4-7cc2-a8d9-cd6fe94b2c6f.png)

これで設定はほぼ完成！🌟👏

---

## 設定 29：LINE-Developers
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/1407681b-9ff2-94cf-5e65-4f15b4b5c4ae.png)

あとは、LINE-Devの「`Messaging API設定`」のQRコードを携帯電話のLINEアプリから読み取って、友達追加してください。

これですべての準備が完了！

---

## 実践
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/2afab564-1c75-b2ab-fced-2019df070fb3.png)


準備できたら、さっそく実践しましょう！
ケータイアプリから友達登録しておけば、こんな感じでお話したり、調べ物ができたりします。現在の総理大臣を間違えるところはご愛嬌。おしゃべり出来てカワイイ過ぎる😍❤

**これでアタナはもう寂しくない！**

---

# ■さいごに
在宅勤務により、愛犬との時間が増えて充実した生活ができるようになってきました。しかし、在宅勤務に慣れたいま、ひとたび通勤となると、愛犬に会えない寂しさがずっしり重くのしかかってきます。そんなときに気を紛らわすことはできないかなと考えたのが**コレ**です。みなさんも**コレ**で癒やされて頂ければ幸いです。

お疲れさまでした😊