chamfer の紹介：AI が作った HTML スライドの「最後の 5%」を GUI で直すエディタ
AI にスライドや資料を HTML で作らせると、9 割は良くできている。ただ、言い回しが 1 か所だけ気に入らない、見出しの文字が少し大きい、画像を 1 枚差し替えたい、という残りがたいてい出る。そこを「直して」と頼むと、気に入っていた別のページまで作り変わってしまう。
chamfer は、その最後の 5% を GUI で直すためのエディタだ。生成元に関係なく HTML をそのまま開き、変換もレンダリングし直しもせず、直したら同じ HTML のまま書き出す。ログインしなければ処理はすべてブラウザの中で終わり、開いたファイルがサーバーに送られることはない。
この記事では、chamfer で何ができて何が苦手か、どう作ったか、なぜ作ったかを書く。画面つきの操作の手順と困ったときの解決は、chamfer の中の使い方ガイドにまとめてある。
ひととおりの流れ
- https://chamfer.takushio2525.com/ を開き、HTML ファイルかフォルダを画面にドロップする。「HTML ファイルを選ぶ」「フォルダを選ぶ」のボタンからでもいい。まず触ってみるなら「サンプルを開く」で 7 ページのデモが開く。
- 左のページ一覧で、直したいページを選ぶ。
- キャンバスの文字をクリックして、その場で書き換える。Enter で確定、Shift+Enter で改行、Esc で取り消し。
- 枠のつまみで位置と大きさを直す。右のインスペクタで文字サイズや色を変え、画像は「差し替え…」で手元の画像に入れ替える。
- 「書き出し」を押し、書き出す形を選ぶ。
インストールもアカウントも要らない。
1 つずつの操作を画面つきで追いたいとき、AI に頼み直す・HTML を手で書き換える・GUI で直すの 3 つを比べてから決めたいときは、AI で作った HTML スライドを、作り直さずに直す方法を読んでほしい。
直せること
- 文字: キャンバス上の文字をクリックして直接書き換える。
- 位置と大きさ: 枠のつまみをドラッグする。矢印キーなら 1px ずつ動く。移動は
transformで表すので、周りの要素が押し出されてレイアウトが崩れることはない。 - まとめて選ぶ: Shift クリックで選択に足すか、スライドの余白からドラッグして四角く囲む。移動とスタイルの変更がまとめて効き、元に戻すのも 1 回で済む。
- スタイル: 文字サイズ・文字色・背景色・内側の余白・外側の余白・揃え（左 / 中央 / 右）・太字。
- 画像: 選んで「差し替え…」を押し、手元の画像に入れ替える。画像はファイルの中に埋め込まれるので、書き出した HTML は 1 枚で完結する。
- ページ: 左のサムネイルをドラッグして並べ替える。サムネイルに出るボタンで複製・削除ができる。「＋」は今のページを複製して後ろに足す（白紙のページは作れない）。
- 要素を足す: 「挿入」からテキストボックス・四角形・楕円・直線・矢印を、表示中のページの中央に足せる。
- アニメーション: フェード、上下左右からのスライド、ズームを付け、出る順番と速さを決められる。書き出した HTML を単体で開いても、クリックするごとに再生される。
- 元に戻す / やり直す: ツールバーのボタンか、⌘Z / ⇧⌘Z（Windows は Ctrl+Z / Ctrl+Y）。ドラッグの途中は履歴に積まず、手を離したところで 1 段になる。
- 発表: 「発表」で全画面にし、→・Space・Enter で進み、Esc で終える。
書き出しは 3 通り
「書き出し」を押すと、何に使うかで形を選ぶ画面が出る。
| 選ぶもの | 出てくるもの |
|---|---|
| ページとして | 読み込んだ HTML に、直したところだけを載せたもの。chamfer の痕跡は残らない（ファイル名は 元の名前.chamfer.html） |
| 発表用スライドとして | 開始画面と矢印キーでの送りを同梱した 1 枚の HTML。渡した相手はブラウザで開くだけで発表できる（元の名前.chamfer-deck.html） |
| PDF として | 1 スライドが 1 ページの PDF。ブラウザの印刷画面から保存する |
「ページとして」書き出したときに変わるのは、触った要素の style と属性だけだ。何も触らずに書き出せば中身は同じ HTML が返り、直したところを元に戻せば、書き出した結果が編集前とバイト単位で一致することまでテストで確かめている。PDF の用紙はスライドの実寸に合わせ、ページの区切りがない文書は A4 縦に流し込む。
AI が作った HTML をブラウザでそのまま印刷すると、なぜ途中で切れたり背景色が消えたりするのか、PDF にしてもうまくいかないときにどこを直すかは、HTML のスライドを 1 枚 1 ページの PDF にするに書いた。
フォルダのまま開ける
HTML が 1 枚で完結しているとは限らない。index.html の横に css/ や assets/ があるものは、フォルダごとドロップすれば、相対参照を書き換えずにそのまま開ける。フォルダの中身はブラウザの IndexedDB に写し、Service Worker がそこから返すので、サーバーには送らない。HTML が複数入っているときは、開くものを選べる。
書き出すのは直した HTML 1 枚だけで、CSS などの参照はそのまま残る。元のフォルダに戻せば、そのまま動く。CSS ファイルそのものは書き換えない。読み込めるのは 2,000 ファイル・256MB までで、node_modules と __MACOSX は読み飛ばす。
ファイルはサーバーに送らない
chamfer は静的なサイトとして書き出していて、編集のためのサーバーを持っていない。フォルダの配信はブラウザの IndexedDB と Service Worker、PDF はブラウザの印刷機能に任せている。ログインしない限り、開いたファイルはブラウザの外に出ない。
編集している間は、HTML の中のスクリプト（<script>・onclick のような属性・javascript: の URL）を止めている。知らない HTML を開いても勝手に動かないようにするためで、書き出すときには元どおりに戻す。
サイト全体で使っているアクセス解析はこのサイトでも動いているが、送るのはどのページが開かれたかだけで、文書の中身や名前は含まない。詳しくはプライバシーポリシーに書いてある。
ログインすると、クラウドに置いておける
Google アカウントでログインしたときだけ、直している文書をクラウドに置ける。開いただけでは送らず、編集して手を止めたときに自動で保存する。保存するのは「ページとして」書き出したものと同じ HTML 1 枚と、ファイル名・サイズ・日時だけで、置き場所は AWS の東京リージョンにしている。
保存した文書は、リンクで共有できる。「リンクを知っている人なら誰でも」と「指定したアカウントだけ」の 2 種類で、どちらも閲覧専用だ。版の履歴は持たないので、上書きする前の中身には戻せない。フォルダで開いた文書は HTML だけが保存され、CSS や画像は手元に残る。
苦手なこと
- ログインしていないときは、ページを再読み込みすると開いていた文書が消える。直したら書き出してから閉じる。
- 画面の幅が狭いと、ページ一覧とインスペクタが畳まれる。PC のブラウザで使う前提で作っている。
- フォントの種類を変える欄、要素の重なり順の変更、発表者ビュー、ページ切り替えのトランジションは無い。
- スクリプトで動くところ（クリックで切り替わる部品など）は、編集している間は動かない。
- PDF にしたとき、スライドからはみ出していた分は次のページに出る。
- 外部の CSS や画像を参照している HTML を 1 枚だけ読ませると、見た目が欠ける。足りない CSS と JavaScript のファイル名は知らせてくれるので、そのときはフォルダごと開き直す。
このうち最後の、外部のファイルに頼って見た目が欠ける問題は、AI に作らせる段階で避けられる。1 つのファイルにまとめる・スライドごとに区切る・文字を画像にしない、といったあとで直しやすくなる頼み方とその理由は、あとで直しやすい HTML スライドを AI に作らせるコツにまとめた。
作った理由
AI に作らせたスライドは、「全体をもう一度生成する」か「HTML を手で直す」かの二択になりがちだった。生成し直すと気に入っていた部分まで変わるし、HTML を手で直すのは慣れていないと難しい。
既存のツールも探したが、「reveal.js 形式にしか対応していない」「任意の HTML を読み込むと構造が崩れる」「そのサービスで生成したものしか編集できない」のどれかに当たった。直したいのはたいてい提案書や講義資料なので、どこにもアップロードせずに済ませることも外せなかった。そこで「何も変えずに開いて、触ったところだけ変えて、同じ形で返す」ことを一番の約束にしている。
GUI の操作は、同じものを AI からも呼べるツール（MCP）として作ってあり、AI に同じ操作で直させる使い方も用意している。こちらは一般向けに出す準備をしているところだ。
- chamfer: https://chamfer.takushio2525.com/
- 操作の手順: chamfer 使い方ガイド
- 使った技術と開発の記録: chamfer の解説