chamfer

なぜ作ったか

AI に作らせた HTML の資料を、いろいろな発表に幅広く使いたかった。そのために、気に入っている部分には手を付けずに数か所だけ直せる場所を探したが、見つからなかったのが出発点だ。既存のツールに何が足りなかったかは紹介の記事に書いた。

その出発点は、初日に約束の形になった。開発を始めた 2026 年 8 月 28 日のロードマップには、作る機能より先に「やらないと決めていること」が 3 つ並んでいる。取り込んだ HTML を独自の形式に変換しない（直したあとの HTML が元とどれだけ同じかが、この道具の芯だから）。既存のページビルダーに載せない（任意の HTML を読ませると構造が崩れるから）。利用者のファイルをサーバーへ送らない（ブラウザの中だけで処理することを、この道具の性質に据えたから）。

作り方の判断と経緯

画面より先に、編集のエンジンを作った

初日は、ひな形を置いたあと、画面より先に HTML の DOM を直接書き換える編集のエンジンとそのテストを書いた。文字・位置・大きさ・体裁・ページの順番を変える操作はどれもエンジンの「コマンド」で、元に戻す・やり直すもコマンドの履歴として持つ。画面はコマンドを発行するだけにして、機能を足すときは、コマンドとテストを書いてから画面のボタンにつなぐ順を守っている。

この分け方は、同じ日に AI からの操作を足したときに効いた。MCP のツールはコマンドの一覧から機械的に作るので、コマンドを 1 つ足せば、AI が使える道具も 1 つ増える。複数の要素への操作を 1 回の取り消しにまとめる batch を足したときも、MCP の側には手を入れずにツールができ、AI にも「3 枚のカードの色をそろえて、だめなら 1 回で戻す」という頼み方が通るようになった。

変換しない、を守るための工夫

取り込んだ HTML を書き換えないと決めると、読めない形式に出会ったときに「中身を直してから取り込む」という逃げ道が使えない。8 月 31 日に対応した Claude Design の形式（<deck-stage>）は、スライドの枠を外部のスクリプトが作るので、配られた HTML だけを開くと寸法を失って潰れる。chamfer はタグに書かれた幅と高さを読んで枠だけを補い、取り込んだ DOM には手を入れず、書き出すときも原文のまま返す。

フォルダで開くときも同じ考え方で、相対参照を書き換える代わりに <base> を 1 つ差し込み、参照の解決はブラウザに任せている。

「ページとして」書き出すときに chamfer の印を残す例外は、スライドの中のアニメーションだけだ。出る順番や動き方は要素の属性（data-chamfer-anim）として持ち、この属性は書き出しても外さない。利用者が自分で付けた中身だからだ。書き出した HTML には単体で再生するための小さな仕組みを一緒に入れ、その仕組みは chamfer で開き直すと取り除かれる。

サーバーを持たないまま、ログインと保存を足した

8 月 29 日には、サーバー側の処理を持たない静的なサイトとして書き出す形にして、Vercel で公開した。その日のうちに、手元では動いた「サンプルを開く」が公開先でだけ動かないことがあり、以後は機能を足すたびに公開先での動きを確かめるスクリプトを書き足している。

9 月 13 日に配信を AWS（非公開の S3 と CloudFront）へ移した。AWS のワークショップがあって、その題材に chamfer がちょうどよかったのと、AWS そのものにも興味があったからだ。同じ日に Google アカウントでのログインとクラウドへの保存を足した。足すときに守ったのは 4 つだ。ログインしない人の使い心地は何も変えない。保存場所の鍵は、確かめ済みのトークンにある利用者の ID からしか作らず、他人の文書を指す要求をそもそも書けないようにする。文書の中身は保存の API を通さず、署名付きの URL でブラウザと S3 が直接やりとりする。預けるのは書き出しと同じバイト列で、独自の保存形式は作らない。

手を止めると自動で保存する仕組みは、progFocus の自動保存を手本にした。保存の API には条件付きの更新が無いので、書く直前にクラウド側の更新日時を読み比べ、別の場所で先に書き換えられていたら上書きせずに止まる。止まったときに自分の判断で保存し直せるよう、手で押す保存の操作も残してある。

AI からクラウドの文書を扱う

9 月 14 日には、クラウドに預けた文書を claude.ai や Claude Code から URL でつないで扱える、リモート MCP を作った。ツールは 12 本ある。ログインに使っている Cognito は、その日に試した限り、MCP の認可サーバーに必要なクライアントの動的登録を持っていなかった。そこで薄い OAuth 2.1 の認可サーバーを自前で書き、Cognito には人の確認だけを任せている。本番ではまだつないでいない。

数字で見る今

chamfer のリポジトリは公開していないので、ここには 2026 年 10 月 9 日に数えた数字だけを載せる（最後のコミットは 10 月 2 日）。

項目	値
開発した期間	8 月 28 日〜10 月 2 日の 36 日
コミット（main）	91。うち Claude との共著が 82
Issue	57 件。閉じたものは 50 件
プルリクエスト	80 件。マージしたものは 63 件
編集のコマンド	14 種類
MCP のツール	手元で動かす版が 25 本、クラウドの文書を扱うリモート版が 12 本
テスト	1,158 件（10 月 2 日の実行）。ほかに、公開先で動きを確かめるスクリプトが 18 本
自動で見分けるスライドの区切り方	6 通り（reveal.js・section・改ページなど）と Claude Design の deck-stage
使い方の解説	日本語 5 ページ・英語 3 ページ

最初の 4 日で、取り込みから直接の編集・体裁・書き出し・PDF・MCP・フォルダ・アニメーションまでがそろった。9 月はログイン・保存・共有と、独自ドメインへの移行、解説、点検に充てている。

これから

URL を渡して取り込む機能は、静的なサイトという作りとぶつかる。ほかのサイトの HTML をブラウザから取りに行くには中継のサーバーが要るので、ページを保存してフォルダとして開いてもらう、取りに行けるサイトだけに絞る、中継を置く、の 3 案から「何を諦めるか」を先に決める。中継を置くと静的な配信をやめることになるので、これは最後の手段だ。

ほかに残っているのは、テンプレート集、リモート MCP を本番でつなぐかどうかの判断、公開リンクの期限、画面からアカウントを消せるようにすること。

関連リンク

• HTML スライドの全体像：作る・直す・PDF にする・発表する … chamfer の中にある解説のまとめ
• chamfer のデータの扱い … ログインしたときに何を預かり、いつ消えるか
• progFocus … 自動保存の作りを手本にした、別の作品