ChatGPTで過去ログ見れない障害が発生してるのでログ保存サービス作った

:::note warn
#### 注意
**ChatGPTの公式機能としてログ保存＆共有できる機能が実装されたので、ここで紹介している方法はもう試さないでください。**
:::

-----

ChatGPTで過去のチャットリストとかログとかが全部消えて見れない障害？バグ？が発生してたので、チャットのログを保存できるサービスをなんとなく作りました。

#### 動画で見たほうが早いと思うのでどうぞ！
:raised_hand:
https://www.youtube.com/watch?v=5LTvZ4vrSkU

<iframe width="640" height="360" src="https://www.youtube.com/embed/5LTvZ4vrSkU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


------

こんなかんじでChatGPTの画面上で今チャットしているところまでのスナップショットをとって保存しておけるものです。


# ChatGPTスナップショットの使い方

:::note warn
#### 注意
**ChatGPTの公式機能としてログ保存＆共有できる機能が実装されたので、ここで紹介している方法はもう試さないでください。**
:::

-----

使い方はざっくり以下のようなかんじ

1. ChromeでTampermonkeyという拡張機能をインストール
2. Tampermonkeyにユーザースクリプト追加
3. ChatGPTにアクセスする


拡張機能入れないといけないのかーって思った人はコンソールに直接貼り付けるだけでも動くので大丈夫です！
（毎回貼り付けないとだからめんどくさいけど）


## Tampermonkeyをインストール

Chrome拡張機能の [Tampermonkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ja) をストアからインストールしてください。

この拡張機能は、ウェブページで任意のスクリプトを実行するためのものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/eba57363-977c-840c-a0d0-32e1d882322d.png)

インストールするとChromeの右上にアイコンが追加されると思うので、そこをクリックして「新規スクリプト追加」を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/eda981d3-4a50-1939-edbe-b514abebcdbb.png)




## ユーザースクリプトを追加

:::note warn
#### 注意
**ChatGPTの公式機能としてログ保存＆共有できる機能が実装されたので、ここで紹介している方法はもう試さないでください。**
:::

-----

スナップショットとるためのユーザースクリプトは以下です。

**ちなみに、これそのままコンソール貼り付けても動くので拡張機能入れるのめんどくさい人はどぞ！**


```javascript
// ==UserScript==
// @name         ChatGPT Snapshot Generator
// @namespace    https://ex.sigr.io/chatgpt-log/
// @version      1.0
// @description  try to take over the world!
// @author       LostMyCode
// @match        https://chat.openai.com/chat
// @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
// @github       https://github.com/LostMyCode
// @require      https://ex.sigr.io/chatgpt-log/userscript-m.js
// @grant        none
// ==/UserScript==

/**
 * Created by @LostMyCode
 * https://github.com/LostMyCode
 */

function updateStatus(text) {
    const el = document.getElementById("snapshot-status");
    if (!el) return;

    el.innerText = text;
}

function gen() {
    updateStatus("Generating...")
    const el = document.querySelector(".items-center");
    if (!el.parentNode.className.includes("react-scroll-to-bottom--css-")) throw new Error("Error: Wrong elm")

    const data = {
        title: document.title,
        html: el.innerHTML
    }

    fetch('https://ex.sigr.io/chatgpt-log/new.php', {
        method: 'post',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
        .then(response => response.text())
        .then(data => {
            console.log(data);
            console.log("chat log created:", `https://ex.sigr.io/chatgpt-log/${data}`);
            updateStatus("Done");
            document.getElementById("snapshot-link").innerHTML = `<a href="https://ex.sigr.io/chatgpt-log/${data}" target="_blank">https://ex.sigr.io/chatgpt-log/${data}</a>`;
        })
        .catch(e => {
            console.log("chat log error");
            updateStatus("Error");
        });
}

window.generateSnapshot = gen;

const div = document.createElement("a");
div.addEventListener("click", () => {
    console.log("click gen");
    gen();
});

div.id = "supersonic";
div.style = "padding: 10px; position: fixed; top: 10px; right: 10px; background: rgba(0,0,0, 0.7); z-index: 9999; color: #fff;";
div.innerHTML = `
<div>Status: <span id="snapshot-status">Ready</span></div>
<div style="padding: 5px; background: rgba(37, 83, 156, 0.8); text-align: center;">Generate</div>
<div id="snapshot-link"></div>
`

document.body.appendChild(div);
```



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/37aaf49f-1545-ca32-5d4e-d4864399c160.png)


貼り付けたら保存しましょう。

## ChatGPTにアクセス

いつも通り、ChatGPTへ行きます。
https://chat.openai.com/chat


そしたら右上になにか見慣れないものが出るはず！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/046ac5e9-c54f-bc86-2a62-82cd8f269c18.png)


## ChatGPTでスナップショットをとる

:::note warn
#### 注意
**ChatGPTの公式機能としてログ保存＆共有できる機能が実装されたので、ここで紹介している方法はもう試さないでください。**
:::

-----


一通りChatGPTとお話します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/ea6f1007-c42c-f16b-84bf-f64f377321de.png)


ここまでの会話を保存したいなというタイミングで右上の[Generate]をクリックします。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/c3c955f3-2331-8add-3c6c-749250dc67c7.png)


するとすぐ下にスナップショットページのリンク生成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/e589067c-ef86-6272-8364-2a7139c5c1e9.png)



リンクをクリックして、スナップショットを確認してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/e08edf06-17ed-7b38-6dd8-92ab8a2d552d.png)


これまでの会話が保存されているのが確認できました。


## 技術面

完全に自分用なので、実装はかなりひどいです笑

スナップショットの保存にデータベースを使っていると思われるでしょうが、一切使っておりません。
なんとこれ、ChatGPTの会話ログ部分のHTMLをそのまま保存しているだけです。

- Javascript
- PHP

以上で完結しております。



こんなに手を抜く人は他にいないかもしれません・・・。


## さいごに

無料プランのユーザーにもGPT4.0を恵んでください！

Twitter: [@LostMyCode](https://twitter.com/LostMyCode)

https://github.com/LostMyCode


:::note warn
#### 注意
**ChatGPTの公式機能としてログ保存＆共有できる機能が実装されたので、ここで紹介している方法はもう試さないでください。**
:::