ChatGPT,GPT-4を簡単に使いたい？ならLINEから使えばいいじゃない？(ChatGPT,GPT-4 for LINE)

# GPT-4の対応について
GPT-4の手順も大きく変わらないので、waitlistの方法やらなんやら筆者でgpt-4を使用できたら追記していきます。
(2023/03/17)

# 目的
LINEでChatGPTに質問を投げて返答を見れるようにします。

# 構成図
今回の構成図はこちら
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/8ef293ff-082e-15ce-f5b9-b8ac0ba551f4.png)

# 作成手順
ざっくりこんな手順で作っていきます。
**[1. OpenAIでAPIkeyの発行](https://qiita.com/ShqnD/items/436bb33856063fe690ff#1-openai%E3%81%A7apikey%E3%81%AE%E7%99%BA%E8%A1%8C)**
**[2. AWS上にAPIの作成](https://qiita.com/ShqnD/items/436bb33856063fe690ff#2-aws%E4%B8%8A%E3%81%ABapi%E3%81%AE%E4%BD%9C%E6%88%90)**
**[3. Line DevelopersでBot作成](https://qiita.com/ShqnD/items/436bb33856063fe690ff#3-line-developers%E3%81%A7bot%E4%BD%9C%E6%88%90)**

では早速作っていきましょう。
## 1. OpenAIでAPIkeyの発行
### アカウント作成/ログイン
1. サイトにアクセスしアカウントを作成またはログイン
[OpenAI]https://openai.com/product
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/4b83b359-f5c9-437a-bf00-d252d78a65d6.png)

2. APIkeyのページへ移動
OpenAIページの右上にアカウントアイコンが表示されるので、クリックして「View API keys」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/9d7dc892-6bcc-604e-eefa-f02800a28bc4.png)

3. APIkeyの発行
「API keys」のページに遷移するので、「+ Create new sercret key」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/43a40ecc-2fc1-6b9d-089b-edcdd95481f7.png)
4. APIkeyの確認
APIキーが生成されるので、赤線→のコピーアイコンをクリックし、OpenAIのAPIキーを取得します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/a78c0a28-b6e2-aa0b-9887-5b0034206c47.png)
:::note warn
これが漏洩すると、他人に自身のお金でAPIを使用されてしまうので
取り扱いには十分注意しましょう。
:::

## 2. AWS上にAPIの作成
1. ソースのDL
ここからをどうぞ(https://github.com/ShqnD/line_chatgpt_bot)
src以下のファイルを全て選択してzip化しておいてください。
<details><summary>詳しい手順はこちら</summary>

◆cloneする場合
　コマンドラインで任意のフォルダに移動し下記を実行してください。
```cmd
git clone https://github.com/ShqnD/line_chatgpt_bot.git
```

◆zipダウンロード
　下記からダウンロードしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/404cbb30-633f-5c64-772b-02ab72717fad.png)

上記どちらかの方法でローカルにソースを用意できたら、
任意の方法でsrc配下の全ての資材を全選択しzip化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/b78b7375-8f4f-563f-86a8-c155278862e3.png)
おそらくデフォルトでsrc.zipというzipファイルができたら成功です。
手順2.3ではこのファイルをアップロードしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/b2fce807-4d7e-04f9-8c9c-0a28c3b8e51f.png)
</details>

2．Lambdaで関数作成
Lambdaのコンソールから関数の作成
関数名は任意、ランタイムはPython3.9にします。
関数名は```qiitafunc```としておきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/4c3a4171-3abd-7bd9-b165-c77f0b2b771f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/757124d7-dc2e-82ab-61c3-1a13383d2dd2.png)

3．ソースのアップロード
2.1で作成したzipファイルをアップロードしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/f798882d-53f1-5ba4-2e86-611302c8e760.png)
↓こんな感じになれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/87e5825f-00d4-28d5-b607-40f81b1586be.png)

4．環境変数の設定
この時点では下記の環境変数を設定します。
API_KEY:1.4で控えたOpenAIのAPIkey
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/0c947eae-2424-949b-e0f0-2313a2ad75a5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/9bfc8432-4e87-df21-5bd6-d0877da00d31.png)

5．タイムアウトの設定
ChatGPTからの返答に時間がかかる場合があるので伸ばしておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/1154533f-aff8-1b69-ab7d-94e5bd30de31.png)

6．API Gatewayの作成
API GatewayのコンソールからAPIの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/2a82fbfb-ee4b-4122-ceaa-b79ceae5e9a8.png)
REST APIを構築
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/c3e8e5b0-9b99-f85a-0b3c-2d7ead6512a0.png)
API nameを任意で設定
今回は```qiitagateway```としました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/dcab2354-638c-45af-e767-369547ab8218.png)
[Actions > CreateMethod]を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/2f0b5a55-4923-e570-7a32-93f39dbbfbc1.png)
POSTを選択してチェックマーク
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/6f567fe4-d804-878a-1623-b0cd282857fe.png)
[Use Lambda Proxy integration]にチェック、[Lambda Function]に2.2で設定した関数名を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/87e6bd27-bd79-a804-7d99-91718ced8a8c.png)
すると、「API GatewayからLambdaにアクセスする権限追加するけどいいですか？」と聞かれるのでOKしておきましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/ea0d3881-ba40-c35a-336f-6a292213a742.png)
ここまで出来たら[Actions > Deploy API]からデプロイします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/71bc909a-862d-38f4-a32b-3b30e50dcfec.png)
適当にステージを作ってデプロイします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/48f42c2c-214b-7dae-d710-9a11f357aa8d.png)
ここまですると赤線部分にURLが記載されているのでこれも控えておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/99c437af-ebcb-b543-fd13-72fef284b257.png)

:::note warn
これも漏洩すると、他人に自身のお金でAPIを使用されてしまうので
取り扱いには十分注意しましょう。
:::

## 3. Line DevelopersでBot作成
### アカウント作成/ログイン
1. サイトにアクセスしコンソールからログイン画面へ
[LINE Developers](https://developers.line.biz/ja/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/beb6114f-7c36-aa7f-4fbc-9e01f7cf4d99.png)
2. お好きな方法でログイン
LINEアカウントは普段トークなどを使用するアカウント、
ビジネスアカウントは普段使いのアカウントとは別にメールアドレスで発行することができるらしい。([参照](https://help2.line.me/business_id/web?lang=ja))
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/f47e800d-07fd-b984-cc82-71d6085514dd.png)

### Botの作成
1. プロバイダーの作成
名称はお好みで。
今回は```ChatGPT```としました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/be3d707d-a455-e17e-4fe3-6569b5d6637f.png)

2. チャネルの作成
Messaging APIを選択し必要項目(チャネル名など)を入力しチャネルを作成します。
チャネル名がBotの名称になるのでご注意ください。
今回は```QiitaGPT```としました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/4fb7ce8d-2b8e-f239-3f02-c674cd237f0c.png)

3. Botの設定
挨拶メッセージは任意、応答メッセージはLambdaから返答するので無効にしちゃいましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/dd2ef4cc-0b8c-c7d6-c348-a4e936c07073.png)
Webhook URLを2.6で控えたURLに設定しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/7f6ee86a-5037-3b6c-1534-000957e2de34.png)
忘れずにWebhookを有効化しておいてください。
これでメッセージが送られた際にAPI Gateway越しにLambdaがキックされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/041afc68-cc00-edce-f928-82bdb02f6b5c.png)


4. アクセストークンの取得
Messaging API設定タブの下の方にチャネルアクセストークンがあるので発行して控えておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/0993292e-937f-0d82-afa2-bb7351cbcb07.png)
合わせて、チャネル基本設定タブにチャネルシークレットがあるのでこちらも控えておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/fe9ef23a-363d-bab7-df91-b39c92737a48.png)
:::note warn
 これも漏洩すると、他人に自身のチャネルを使用されてしまうので
 取り扱いには十分注意しましょう。
:::

5．lambdaの設定
あとは2で作成したlambdaの関数に下記二つの環境変数を追加します。
LINE_CHANNEL_ACCESS_TOKEN:3.4で発行したチャネルアクセストークン
LINE_CHANNEL_SECRET:3.4で控えたチャネルシークレット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/9a53a121-c97e-dc66-3eaf-49e3d16f1053.png)

6．友達追加
LINE DevelopersのMessaging API設定タブにQRコードあるので友達追加してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559675/9239029c-bae1-28a8-f42b-cecbbf9ab05d.png)

これで完成です。
お疲れ様でした。