「HTMLツール」を構築するための便利なパターンいろいろ

オープンソース開発者のSimon Willison氏はこれまでに、150件以上の便利なウェブアプリを開発してきました。HTML・JavaScript・CSSを単一のファイルにまとめた自作のウェブアプリを「HTMLツール」と命名し、これまでHTMLツールを開発してきた過程で見出した便利なパターンについてブログにまとめています。

Useful patterns for building HTML tools
https://simonwillison.net/2025/Dec/10/html-tools/

◆HTMLツールのあるべき姿
Willison氏がこれまでに開発したHTMLツールの例には以下のものがあります。

・svg-render：SVGコードをダウンロード可能なJPEGやPNGにレンダリングするツール
・pypi-changelog：異なるPyPIパッケージリリース間で差分を作成し、クリップボードにコピーするツール
・bluesky-thread：Bluesky上のディスカッションスレッドのネストビューを生成するツール

上記のHTMLツールを作成した観点から、「HTMLツールはこうあるべきだ」という特徴をWillison氏は示しています。

・単一のHTMLファイルで構成する
・JavaScriptとCSSはHTMLファイルにインライン化されている
・Reactのようなビルドステップの必要なライブラリは使わない
・CDNから依存関係をロードする
・なるべく小規模を保つ

◆開発プロセス
HTMLツールを作成する最も簡単な方法は、Claudeの「Artifacts」機能、もしくはChatGPTやGeminiの「Canvas」機能を利用することだとWillison氏は述べています。これらのLLMで例えば「JSONを貼り付けてYAMLに変換できるHTMLツール」を作成したい場合、GeminiやChatGPTであれば以下のような指示を与えます。

Build a canvas that lets me paste in JSON and converts it to YAML. No React.

Claudeならば以下のような指示を与えます。

Build an artifact that lets me paste in JSON and converts it to YAML. No React.

いずれも「No React」と指定しているのは、こうしないとReact向けに特化したコードが生成されてLLMの出力したコードをコピー＆ペーストして使用するのが困難になってしまうためです。またReact向けのコードはビルドステップを伴うため、表示するまでに時間がかかるという問題もあります。より複雑なプロジェクトではClaude CodeやCodex CLIのようなコーディングエージェントを使用することで、開発と同時にコードのテストを進めることができます。

◆CDNの利用
サードパーティーのJavaScriptライブラリを使用する場合、CDN経由でロードするのがよいとWillison氏は述べています。Claude・ChatGPT・Geminiといった主要なLLMプラットフォームはArtifactやCanvasの機能として特定のCDNをサポートしているので、例えば「Use PDF.js」といった指示を与えれば適切なCDNからPDF.jsをロードしてくれます。CDNを利用しない場合は代替案としてnpmを利用する方法もありますが、これにはビルドステップを伴うため、動作解析の生産性が落ちたりセルフホストが煩雑になったりします。

◆ホスティング
Willison氏はHTMLツールをLLMプラットフォームでホスティングすることを推奨していません。理由としてはLLMプラットフォームはホスティングされたツールを制限の多いサンドボックス内で実行する傾向があることに加え、他の静的ホスティングと比較して信頼性が低いことが挙げられます。Willison氏が薦めるホスティングサービスはGitHub Pagesで、HTMLコードをgithub.comにペーストして数秒後にはパーマネントURLで公開できることを利点として挙げています。

◆既存ツールの再利用
Willison氏は自作の100件を超えるHTMLツールを単一の公開コレクションにまとめていますが、そうすることの最大の利点は「LLMアシスタントがそれらを面白い形で簡単に組み合わせられること」とのこと。また、既存ツールを再利用した方がLLMによって生成されたコードがちゃんと機能する可能性が格段に高い、とも述べています。

一例として、pypi-changelogを作成したとき、まずはClaude Codeに対して以下の指示をしました。

Look at the pypi package explorer tool

そうしてLLMがzip-wheel-explorerのソースコードを見つけて読み取った後に、以下の指示をすることでHTMLツールを作成させたそうです。

Build a new tool pypi-changelog.html which uses the PyPI API to get the wheel URLs of all available versions of a package, then it displays them in a list where each pair has a "Show changes" clickable in between them - clicking on that fetches the full contents of the wheels and displays a nicely rendered diff representing the difference between the two, as close to a standard diff format as you can get with JS libraries from CDNs, and when that is displayed there is a "Copy" button which copies that diff to the clipboard

この指示内容を要約すると以下の通りとなります。

・PyPI APIを使って利用可能なすべてのバージョンのホイールURLを取得する新しいツール「pypi-changelog.html」を作れ
・それぞれのペアの間に「変更内容を表示」ボタンを表示せよ
・「変更内容を表示」ボタンをクリックするとホイールの全内容を表示し、両者の差分を表示せよ
・CDNのJSライブラリを利用して、差分表示はできる限り標準的なdiffフォーマットに近いものにせよ
・「コピー」ボタンを用意し、クリックするとdiffの内容をクリップボードにコピーせよ

◆主要な機能やテクニック
Willison氏はHTMLツールを作成する際に役立つ主要な機能やテクニックとして、以下のものを挙げています。

・コピー＆ペーストの活用：HTMLツールの最も有用な入出力メカニズム
・デバッグツールの作成：クリップボードビューアやキーボードデバッグなど、HTMLツールの可能性を探るための優れたツールとなり得る
・状態の永続化：URLやLocalStorageなどを利用する
・CORS対応APIの活用：OpenAI・Anthropic・GeminiなどのLLMが提供するAPIを利用
・ファイル操作を恐れない：JavaScriptはファイルの内容に直接アクセスでき、ダウンロード用のファイルを生成することも可能
・PyodideやWebAssemblyの利用：ブラウザ上でPythonコードを実行したり、他の言語で書かれたソフトウェアをロードしたりできる

◆まとめ
パターンやテクニックと同じく重要なこととして、「LLMとのやり取りをすべて記録しておくこと」をWillison氏は挙げています。記録を取り公開することで、LLMを使うスキルを伸ばすことに繋がるとのこと。そしてもし自分のHTMLツールを作成したいという人がいれば、GitHub Pagesを有効にした無料のGitHubリポジトリを用意して、好みの方法で生成したHTMLページをコピー＆ペーストすればすぐにでも開発を始めることができる、と締めくくっています。