chrome 拡張機能の ChatGPT to Notion のインストール方法と設定・利用方法について 

## はじめに


**環境**

- Windows 11 home

**対象者**

- Notion と ChatGPT のアカウントが既にある方

**注意点**

- Notion と ChatGPT のアカウント登録方法については解説しておりません。ご注意下さい。

### このページの説明
ChatGPT to Notion について、インストール・設定・利用方法について説明しております。

### 【前提】ChatGPT to Notion について
ChatGPT との会話や回答を、Notion の databse に保存できる chrome の拡張機能です。
後から読み返したい回答や、チャットルーム全体の会話も保存出来ますので、かなり使い勝手良いです。

実際に以下のように保存がされます。
![34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/05dca7c1-239e-129a-624f-a7c3fcb6c672.png)


## 手順



### 1. 【事前準備】 データベースの作成
1.1　「/inline database」などと入力し、データベースを作成します。
余談ですが、私がデータベースを作成する時はデータベース用のページで作成し、目的のページにリンクドビューを作成しています。（じゃないとどこにあるのか忘れてしまうので一元管理しています）
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/a463bf85-4e6a-b021-e31f-2a0b4520ba80.png)


1.2　今回の拡張機能を使うためには、セレクトと URL のプロパティが必須になります。セレクトはデフォルトであるかと思うので、URL の追加をします
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/03aa2f73-fc54-d880-afcc-83b3ee5c23ee.png)


1.3　適当にセレクトプロパティのオプションを追加します。今回は 「test001」「test002」「test003」を追加します
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/8ce06433-4e96-faec-31e3-3ec8b7fc330a.png)


1.4　以下のように3つ作成している状態です。ここは、ご自身で適宜変えて下さい。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/92a72ebf-6826-d650-ee74-bc93fc9d3e2f.png)


1.5　個人的に、作成に日時入れた方が分かりやすそうだなって思ったので「作成日時」を追加しました。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/faa58547-6b5a-cd93-bcbe-5cecb58c0a50.png)

1.6　databse の名前は、適当に「ChatGPT_log_database」とします。ここは、自分の好きな名前に適宜変えて下さい。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/434d5e4b-e2e3-d46f-106b-315bd81b875b.png)


database の作成はこれで以上です。

### 2.  ****ChatGPT to Notion のインストール & 設定方法****

2.1　[chrome ウェブストア](https://chrome.google.com/webstore/category/extensions) を開き「ChatGPT to Notion」と検索しクリック。その後、該当ページを開きます。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/37e66640-dccd-837f-4b50-bf0760c1ab11.png)

2.2　続いて、「chrome に追加」をクリック
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/73991f48-4dc3-9d63-8075-97dcb67cee0a.png)

2.3　「拡張機能を追加」をクリック
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/0a2f42dc-41f4-8de1-b872-1b06725f99a5.png)

2.4　追加されると、画面右上に以下のような表示がされます。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/bef91621-ce51-6995-a83b-edc736aa9327.png)

2.5　赤線矢印の先にある、パズルのようなマークをクリック
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/6481e028-543d-b7bf-0006-cfa9689010f7.png)

2.6　ChatGPT to Notion と記載されている右側に、ピンマークがあるのでそちらをクリック。その後 ☓閉じで ok です。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/cf69dcf9-86fa-2f53-ab67-bfc1c7787f7b.png)

2.7　ChatGPT to Notion のマークが追加された事を確認
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/8f61fcbf-d83d-9b73-377c-4642841aee79.png)

2.8　ChatGPT to Notion をクリックすると別タブが開き、以下の画面が表示されます。アクセスしたいワークスペースに間違いがないか確認して、問題なければ「ページを選択」をクリック
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/41366735-e69c-ad37-7b22-61db1f69ae7b.png)

2.9　【事前準備】で作成した database の名前を入力しクリック
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/98d80623-ebf4-ede8-930d-a932c9482ee2.png)

2.0.0　「既に追加済み」となっている事を確認
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/a032fbf9-54e0-90c6-795b-2c4e62ff493c.png)


2.0.1　「手動で追加」の欄に、今追加したページが表示されている事、チェックが入っている事を確認し、「アクセスを許可する」をクリック
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/8df32c06-d0cc-7190-e4b6-5b2136732685.png)



2.0.2　ChatGPT to Notion ページが表示される事を確認
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/5e1313b5-3d0b-dab9-74c2-17102b999039.png)


2.0.3　【事前準備】にて作成したデータベースのページをブラウザで開きます。（普段デスクトップアプリで使っている方は、「ブラウザで実行します」をクリック）
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/f6cb63f7-37ff-d311-3ea0-f197e0e0acc5.png)

2.0.4　拡張機能をクリックすると、以下のような画面が表示されます。該当のデータベースが既に表示されていれば、チェックボックスにチェックを入れます。その後、画面が自動で切り替わります。
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/2ddc1106-f668-1211-8d6b-fff69ecacf38.png)


2.0.5　「Sttings」をクリックすることで、データベースと拡張機能の連携が完了です。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/a8cd4a99-0523-f065-5986-92b619be0646.png)


### 3. ****ChatGPT to Notion の利用方法（会話一部）****

3.1　ChatGPT のトーク画面を開くと、ChatGPT のアイコン下にピンマークが出ている事を確認し、保存したい回答のピンをクリックします。
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/71e8a19f-2548-9de8-15dd-0c96d699ba38.png)

3.2　画面右に、以下のような表示がされます。「Save to」には、連携したデータベースが入ってます。
![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/0406549a-400e-d551-75c5-91c5b3fdf5a4.png)

3.3　「タグ」をクリックし、該当のタグをクリックします。今回は適当に作った「test001」にします。
　　※種類のようなものです。実際には、〇〇系の話とかチャットルームのタイトル入れたりする使い方が良いかな？って思います。
![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/24b50bbf-f6a1-b59d-5d45-0deeb33b9487.png)

3.4　タグを選択後、反映されている事を確認します。「save」をクリックします。
![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/f5fb626f-b474-a4fa-efe6-263d1f5ff2b1.png)

3.5　「Saved」が表示されれば完了です。
![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/bda2d687-1c80-7d32-b1ba-4078198f36bf.png)

3.6　Notion のデータベースに戻り、作成されたことを確認します。
![28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/3319cf7a-134b-074c-c4f0-36e274b141de.png)

3.7　ページを開いてみるとこんな感じです。質問はトグルになっているので確認したい時は開く必要がありますね！
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/80215d5b-60e2-57ad-c9cf-efc9b7501611.png)


会話一部の保存方法の説明は以上です。

### 4. ****ChatGPT to Notion の利用方法（****チャットルーム内での****会話全部）****

「3. ChatGPT to Notion の利用方法（会話一部）」では、会話の一部でしたが、ここではチャットルーム全体の会話をまとめて保存する方法について解説します。

4.1　ChatGPT のアイコン下にあるピンマークではなく、拡張機能（右上）のボタンをクリックします
![29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/f52194cf-8bbe-ea07-269a-84a3927bfb8e.png)

4.2　以下のような画面が出ますので、Save 先が問題ないか確認します。
![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/eca6f550-2786-4113-788f-70105d1c7a9e.png)

4.3　タグを選択し、「Save full chat」をクリックします。
![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/8a49b03c-837e-efb5-15db-3f8834b2bfa4.png)

4.4　「Discussion saved」が表示されれば完了です。
![32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/ece60c93-37d5-a98a-42b3-18d56cf89c38.png)

4.5　Notion のデータベースに戻り、作成されたことを確認します。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/1527edaf-4dca-f737-df6a-6eaef38de629.png)


4.6　ページを開いてみるとこんな感じです。
![34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/084b3ee4-b209-8bbb-85db-61a6c3e05276.png)

会話全部の保存方法の説明は以上です。

## まとめ

お疲れ様でした！

今回は、ChatGPT to Notion のインストール・設定方法や、利用方法（チャット履歴一部・全部）についてまとめてみました。
Notion のデータベースに保存する事で、必要なやり取りをいつでも確認出来ますので Notion 使っている方は一度試してみて下さい。

それでは、素敵な Chat GPT + Notion ライフをお過ごしくださいませ！