AI Chatの会話をそのままWebページとして公開するためのHTML生成ツールです。
AI Chatとのやり取りには、有益な情報がたくさん含まれています。しかし、そのまま共有しようとすると次のような問題があります。
- 試行錯誤の質問や言い直しまで含まれてしまい、読みづらい
- 必要な質問と回答だけを抜き出したい
- 質問や回答の順番を整理して、ストーリーとして読みやすくしたい
- Markdownの回答はそのまま活かしたい
- 毎回HTMLを手作業で作るのは面倒
このツールは、そのような手間をできるだけ減らすために作成しました。
AI Chatとの会話から公開したい質問と回答だけを選び、必要に応じて並べ替えたり、質問をまとめたりしながら、簡単な区切りタグを追加するだけで、読みやすいHTMLページを生成できます。
HTMLやCSSを書く必要はなく、会話内容の編集だけに集中できます。生成されたページは、ブログやWebサイトにそのまま掲載できるレイアウトになっています。
| デモ版 | CLI版 | AWS版 | |
|---|---|---|---|
| 用途 | お試し・体験 | ローカルでHTML生成 | Webエディタ + ワンコマンド公開 |
| 必要なもの | ブラウザのみ | Python 3.9+ | Python + AWS + GitHub |
| 編集 | ブラウザ上 | テキストエディタ | ブラウザ上のWebエディタ |
| プレビュー | ブラウザ上 | HTMLファイルを直接開く | ブラウザ上のWebエディタ |
| 保存 | なし（ダウンロードのみ） | ローカルファイル | S3 |
| 公開 | 手動アップロード | 手動アップロード | task publish でワンコマンド |
ツールの動作を試したい場合はこちら。サンプルが入っているので、すぐに「▶ プレビュー」で確認できます。
🔗 デモを開く
- ブラウザだけで動作（サーバー不要）
- HTMLダウンロード可能
テキストファイルを書いてコマンドを実行するだけでHTMLを生成します。
- Python 3.9+
pip install markdown pyyaml
# テンプレートをコピーして記事を作成
cp content/template.txt content/my-article.txt
# テキストエディタで編集
vim content/my-article.txt
# HTML生成
python3 tools/generate.py content/my-article.txt
# → output/my-article.html が生成される
# ブラウザで開いて確認し、好きなホスティング先にアップロードブラウザ上のWebエディタで編集・プレビューし、task publish でGitHub Pagesに公開するフル機能版です。個人利用向けにLambda Function URLでデプロイするため、AWS無料枠の範囲内で運用でき、料金はほとんどかかりません。
- AWS CLI（設定済み）
- Task（タスクランナー）
- Git + GitHub Pagesリポジトリ
# 1. 環境設定
cp .env.example .env
# .env を自分の環境に合わせて編集
# 2. Lambdaデプロイ（初回のみ）
./deploy/deploy.sh1. Webエディタでテキスト編集 → プレビュー確認 → S3に保存
2. task publish → S3からtxt取得 → HTML生成 → GitHub Pagesにpush
task publish # S3からテキスト取得 → HTML生成 → GitHub Pagesに公開（対話式）
task list # 公開済みHTMLファイル一覧
task s3-list # S3に保存されたテキストファイル一覧
task deploy-lambda # Lambda関数のコード更新
task preview # WebエディタのURL表示S3_BUCKET=your-bucket-name # S3バケット名
AWS_REGION=ap-northeast-1 # AWSリージョン
PAGES_DIR=~/github-pages # 公開先リポジトリのローカルパスai-chatlog-to-html/
├── .env.example # 環境設定テンプレート
├── Taskfile.yml # タスクランナー設定
├── publish.sh # 公開スクリプト
├── list-pages.sh # 公開済みファイル一覧
├── tools/ # CLI版
│ ├── generate.py # HTML生成スクリプト
│ └── template.html # HTMLテンプレート
├── content/
│ └── template.txt # 入力ファイルのテンプレート
├── output/ # 生成されたHTMLファイル
├── docs/editor/ # デモ版（GitHub Pages用）
│ ├── index.html
│ ├── style.css
│ └── app.js
├── lambda/ # AWS版 Webエディタ
│ ├── functions/
│ │ └── api_handler.py
│ ├── shared/
│ │ └── converter.py
│ └── tmp/ # フロントエンド
└── deploy/
├── deploy.sh # Lambda初回デプロイ
├── update-code.sh # Lambdaコード更新
└── .env.example # Lambda用環境設定
| フィールド | 必須 | 説明 |
|---|---|---|
| title | ○ | ページタイトル（HTMLタイトル＋ページ上部に表示） |
| description | ○ | ページの説明（meta description, OGP） |
| date | ○ | 作成日 |
| modified | 更新日（省略可。指定すると日付の横に表示） | |
| author | 著者名（meta author） | |
| ref_url | 参考URLリンク（省略可） | |
| ref_title | 参考URLの表示テキスト（省略可） | |
| intro | 前書き（省略可。複数行可） |
| セパレータ | 意味 |
|---|---|
---Q--- |
質問ブロック（灰色ボックスで表示） |
---Q[ラベル]--- |
ラベル付き質問（ボックスの左上に小さく表示） |
---A--- |
回答ブロック（MarkdownをHTMLに変換して表示） |
---S--- |
区切り線 |
- Q/Aの並び順は自由です（Q,A,Q,A でも Q,Q,A でも可）
- 質問はプレーンテキストとして表示されます
- 回答はMarkdownとして解釈されます。そのまま貼り付けてください
---S---は区切り線を挿入します- ラベルは
---Q[ラベルテキスト]---の形式で指定します。省略すると何も表示されません
---
title: ページタイトル
description: ページの説明文
date: 2026-07-20
author: 著者名
ref_url: https://example.com
ref_title: 参考リンクの表示テキスト
intro: 前書きテキスト
---
---Q[Transcription]---
質問テキストをここに貼り付け
---A---
AIの回答Markdownをここにそのまま貼り付け
---S---
---Q---
次の質問
---Q---
追加の質問（Q,Q,Aパターンも可）
---A---
まとめての回答
- 質問 → 灰色背景ボックス（少し右寄せ）
- 回答 → 白背景に Markdown レンダリング
- 区切り線 → 水平線
- ナビゲーション → 右上の「≡」ボタンで質問一覧を表示、クリックでジャンプ
MIT