⭐チャットをHTMLに畳んだら思わぬツールに－失敗の供養から生まれた便利な1枚
Bonjour。半人半AIの禅僧、ムッシュ・ミスクリアです。
まず、これを見てください。
AIとの長いやりとりと、そこで生まれた84点のファイルを、1枚のHTMLに畳んだものです。
周到に設計したように見えるかもしれません。
違います
失敗の供養から出てきたものですW
その経緯と、どなたでも使えるプロンプトを共有します。プロンプトは記事末尾に添付しています。
1｜41点、全部リンク切れ
19回のやりとりで、41点のファイルを作ったチャットがありました。
数日後、その続きをやろうとして、以前に生成したファイルをダウンロードしました。
落ちてきません😭
別のボタンを押しました。
落ちてきません😭😭
上にさかのぼって片っ端から押して、41点全滅と分かりました😭…
私「ファイルがダウンロードできない」
AI「新しい版を出すたびに、古いファイルを削除していました。過去のリンクが全部切れています。私のミスです」
私「…（T_T）」
実体を消せば、リンクだけが残ります。
画面にボタンは表示されたままなので、押すまで気づきません。
2｜作り直すだけなら、できた
ただ、詰んではいませんでした。
やりとりそのものは残っていたから
何を作ったか、なぜその版になったかは、全部文章として残っています。読み返して作り直せば復元できます。
実際、できました。
ここまではHTMLと関係ありません。
ホッしたのもつかの間…問題はそのあとでした。
3｜困ったのは、文とファイルが並ばないこと
作り直すと、また41点が画面に並びます。
私が使っている環境では、AIの返答の文章と、ファイルのダウンロード欄は別々に出ます。
ほしかったのは「説明、ファイル。説明、ファイル」と縦に並んだ一覧でした。
私「説明とファイルを交互に並べた形で出せませんか」
AI「その形では出せません。画面の作りとして、表示が分かれています」
私「…（T_T）」
頼み方の問題ではありませんでした。
ダウンロードするファイルが5つ並ぶと、違うのは名前の末尾の数字だけです。
どれが現行版かは、そのときの説明を読まないと分かりません。
その説明が、別の場所にある。
実際、私は一度、古い版を最新版と思い込んで作業しかけました😱
4｜AIが出してきたのが、1枚のHTMLだった
困っていると、AIが案を出しました。
AI「1枚のHTMLに畳んでは。説明とファイルを上から順に並べられます」
ただのリンク集を想像しながら、あきらめ半分でやってもらいました。
番号と見出し、何が起きたかの説明、その場で生まれたファイルがサムネイル付きのボタンで並ぶ。
出せないと言われた形が、そこにありました
画面の作りとして出せないだけで、中身を1枚のHTMLに焼き直せば、並べ方は自由になる。
押せば、今度は実際に落ちてきます。実体がHTMLの中に入っているからです。
5｜これ、普通に使えるじゃないか
使ってみて思いました。
事故の後始末に限った話ではありません。
説明とファイルが、同じ1枚の中にあります
ダウンロードしたファイルをフォルダに並べただけでは、なぜ前の版ではだめだったのかが分かりません。
そのまま人に渡せます
共有リンクは権限が切れれば見えません。
相手が同じサービスを使っていなければ開けません。
半年後の自分にも渡せます
この記事も、そのHTMLを資料として書いています。
失敗を供養していたら、探していた道具ができていました。
6｜使いやすく作り直して、プロンプトにした
最初のHTMLは、AIがその場で組んだものでした。
そこから、より使いやすくなるようにAIと一緒に作り直し、同じものを毎回出せるようにプロンプトの形にまとめました。
冒頭に載せた画面は、そのプロンプトで作ったものです。
41点の案件ではなく、別の長い作業を畳んだものです。
先頭はこうなります。
実行日、会話の範囲、ファイルの数、人が上げたものとAIが作ったものの内訳。
その下の「お知らせ」欄が気に入っています。
指定したフォルダが無かったこと、代わりに見た場所、見つからないファイルを何で代替したこと。
うまくいかなかったことが、そのまま残ります
ひとつお断りを。
これは私の環境（Claude Opus5）で動いたものです。
サービス、モデル、プランによっては、ファイルを作る機能が使えなかったり、途中で出力が切れたりする可能性があります。
7｜指定するのは5つだけ
貼るときに書き換えるのは、次の5つです。既定のままでも動きます。
✏️C：会話の書き方
そのまま残すか、要約にするか、両方か
✏️D 同梱するファイルの範囲
AIが作ったものだけか、自分が上げたものも入れるか
✏️E ファイルの持たせ方
HTMLに埋め込むか、別のフォルダに分けるか
✏️F 冒頭の案内
この先も開いて使うファイルだけを、先頭にまとめて示すか（チャットの内容からAIが判断）
✏️I 設計図ファイル
続きの作業に渡すデータを付けるか
案件名や日付は、AIが会話の中身から決めます。人が書かなくていい部分だと判断して、指定から外しました。
ファイル名の左には「人」「AI」のバッジが付きます。
どちらが出したものかが一目で分かります。
冒頭には、場面の数やファイルの数がまとまって出ます。長いチャットほど、ここから読むのが速いです。
8｜こんなことに使えそうです
使ってみて、向いていると感じた場面を挙げます。
🎈新しいチャットへの引き継ぎ
会話が長くなると処理が重くなります。畳んで新しいチャットに渡せば、経緯を保ったまま続きから始められます。私はこの使い方が中心です。
🎈人への引き渡し
途中から参加する相手に、決まったことと成果物を1枚で渡せます。口頭の説明が要りません。
🎈半年後の自分への申し送り
ファイル名だけでは、なぜその版になったのかが思い出せません。理由が同じ場所にあります。
🎈手順書のたたき台
やったことがそのまま並んでいるので、あとで手順に起こすときの材料になります。
いずれも、説明と実体が離れると困る場面です。逆に、ファイルが数点しかない短い作業なら、わざわざ畳む必要はありません。
9｜この失敗も、上手に供養できました
順番はこうでした。
41点が全滅した
やりとりは残っていたので作り直せた
作り直したら、今度は並べ方に困った
そこでAIが、1枚のHTMLを出してきた。
事故がなければ、この形にはたどり着いていません
いまは長い作業が一段落するたびに走らせています。
後始末のためではなく、次の作業のためにです。
添付のWordには、「これ、作れますか」とAIに聞くだけの短いプロンプトも入れました。
動かない環境で長い会話を畳もうとすると、時間だけが溶けます。
この失敗も、上手に供養することができました。
#AIとの会話を捨てない #思考ログ術 #AI活用 #生成AI #プロンプト #ChatGPT #Claude #仕事術 #ナレッジマネジメント #供養 #html #ムッシュミスクリア #便利 #ツール #AI