← 2025-12-14 の一覧へ戻るホーム
Useful patterns for building HTML tools

2025/12/11 6:08

Useful patterns for building HTML tools

RSS: https://news.ycombinator.com/rss

元のHacker News記事へ ↗
要約▶

Japanese Translation:

改善された要約
著者は、HTML、JavaScript、および CSS をすべて 1 ファイルにまとめた 150 件以上のシングルファイル HTML ツールを作成しています。コードは主に大規模言語モデルによって生成され、その後 Playwright でテストし、GitHub Pages に公開してビルドステップやフレームワークなしでブラウザ上で完全に動作させています。典型的なパターンとしては、CDN（CDNjs、jsDelivr）からライブラリを取得し、URL や localStorage に状態を保存し、JavaScript で「ダウンロード」ボタンを提供する方法があります。人気の例には svg‑render、pypi‑changelog、bluesky‑thread、paste‑rich‑text、alt‑text‑extractor、clipboard‑viewer、cors‑fetch、icon‑editor、word‑counter、render‑markdown、haiku などがあります。より複雑なプロジェクトでは、著者は Claude Code や Codex CLI のようなコーディングエージェントを使用し、Playwright テストを実行して GitHub にプルリクエストで変更をプッシュします。LLM API（OpenAI、Anthropic、Gemini）はツールから直接呼び出すことができ、API キーは localStorage に保存されているためページソースに露出しません。ツールはまた、、PDF.js、Tesseract.js、および Pyodide、Squoosh、sloccount などの WebAssembly モジュールを使用してサーバーなしでファイル入力を処理し、OCR、画像圧縮、ブラウザ内で Python や C コードを実行します。一部のツールはリッチクリップボード API を利用した「コピー」ボタンを公開し、モバイルでもうまく機能します。これらすべてが軽量でコピー＆ペースト準備済みのワークフローを示しており、開発者が重いツールなしで迅速にプロトタイピングできることを実証し、ブラウザのみで動作する Web アプリの構築と共有方法を示しています

本文

2025年12月10日

HTMLで作るアプリを「HTMLツール」と呼び始めました。
それらは HTML、JavaScript、CSS を一つのファイルにまとめて使い、実用的な機能を提供します。ほとんどは LLM（大規模言語モデル）によって作成されています。この記事では私が実際に役立ったパターン集をご紹介します。

例

  • svg‑render – SVG コードをダウンロード可能な JPEG/PNG に変換
  • pypi‑changelog – PyPI のリリース間での差分を生成し、クリップボードへコピー
  • bluesky‑thread – ブルー・スカイ上のディスコーススレッドを階層化して表示

これらは最近のお気に入りです。実際に使っているツールは数十個あります。
tools.simonw.net でコレクションを覗いてみてください。
「月別」ビューがあると閲覧しやすいです。

HTML ツールの構成要素

1. アーティファクト・キャンバスでプロトタイプ作成

ChatGPT、Claude …　それぞれに アーティファクト（＝「前置き」） があり、
そのまま簡単に「本文」―


● **サブミットボタンが非‑先行‐実装でさっくりと……

?

We need to translate the entire article into Japanese. Provide natural, polite. Let's produce full translation.2025年12月10日

HTML で作るアプリを「HTML ツール」と呼び始めました。
それらは HTML、JavaScript、CSS をひとつのファイルにまとめて使い、実用的な機能を提供します。ほぼすべて LLM（大規模言語モデル）で書かれています。この記事では私が実際に役立ったパターン集をご紹介します。

例

  • svg‑render – SVG コードをダウンロード可能な JPEG／PNG に変換
  • pypi‑changelog – PyPI のリリース間で差分を生成し、クリップボードへコピー
  • bluesky‑thread – Bluesky 上のディスコーススレッドを階層表示

これらは最近のお気に入りです。実際に使っているツールは数十個あります。
tools.simonwillison.net でコレクションをご覧ください。「月別」ビューだと探しやすいです。

HTML ツールの構成

1. アーティファクト／キャンバスでプロトタイプ作成

ChatGPT・Claude・Gemini は、簡単な HTML+JavaScript アプリを即座に書き出してくれます。

  • Claude は「Artifacts（アーティファクト）」と呼び、
  • ChatGPT と Gemini は「Canvas（キャンバス）」と呼びます（必要なら「ツール」メニューをトグル）。

例（Gemini/ChatGPT 用）：

JSON を貼り付けて YAML に変換するキャンバスを作ってください。React は使わないで。

Claude 用：

JSON を貼り付けて YAML に変換するアーティファクトを作ってください。React は使わないで。

React は完全に排除します。ビルドステップが必要になり、LLM から直接コピー＆ペーストしづらくなるためです。

共有リンク が付くと完成したアプリの URL が得られます（例：ChatGPT の JSON→YAML、Claude の JSON→YAML、Gemini の JSON→YAML）。

2. 複雑なプロジェクトはコードエージェントへ

Claude Code や Codex CLI は Playwright 等を使って即座にテストできます。
大規模プロジェクト（例：Bluesky スレッドビューア）や既存ツールの改修に利用しています。
変更は 

simonw/tools
リポジトリへ直接プルリクエストで反映されます。

3. CDN から依存ライブラリを読み込む

CDNjs、jsDelivr 等からライブラリを取得します。
LLM プラットフォームのアーティファクト／キャンバス機能は、ライブラリ名を言えば自動で CDN URL を生成してくれることが多いです。
うまくいかない場合は CDN で検索し、URL をコピー＆ペーストします。

4. 別サーバにホストする

LLM ホステッドツールは厳しい sandbox 内で動き、外部データを読み込めず、プロモーションメッセージが表示されることもあります。
私は GitHub Pages にホストしています。

.html
ファイルを 
simonw/tools
にコピーすると数秒で公開できます。

5. コピー＆ペーストを活かす

コピー＆ペーストは最強の手段です。

  • 内容 → 変換 → 再コピー
  • モバイルフレンドリーにするため、「クリップボードへコピー」 ボタンを付ける

例：

  • hacker‑news‑thread‑export – URL を貼り付けて LLM 用に凝縮したスレッドを取得
  • paste‑rich‑text – ページからコピーして HTML としてペースト（モバイル対応）
  • alt‑text‑extractor – 画像を貼り付けると alt テキストを抽出

6. デバッグツールを作る

何が可能かを知るのは鍵です。

ツール内容
clipboard‑viewer任意のクリップボード内容をすべて表示
keyboard‑debug現在押されているキーと KeyCode を表示
cors‑fetchURL が CORS 経由でアクセス可能か確認
exif画像の EXIF データを表示

7. URL に状態を持たせる

状態をそのまま URL に埋め込むことで、ツールは共有・ブックマークが簡単になります。

例：icon‑editor（24×24 アイコンエディタ）はデザインを URL に保持します。

8. localStorage を使って秘密情報や大きな状態を保存

localStorage
はクライアント側でデータを保持し、サーバーに露出しません。

  • word‑counter – タイピング中に自動保存
  • render‑markdown – ブログ執筆時に便利（同じテクニック）
  • haiku – 
    prompt()
    で API キーを取得し、
    localStorage
    に保管。Claude Haiku を使ってウェブカメラ映像から俳句を書き出す。

9. CORS 対応 API を集める

CORS が許可されたエンドポイントは HTML ツールの金鉱です。

API用途
iNaturalist動物観測データ（写真付き）を取得
PyPIパッケージ情報を取得
GitHub公開リポジトリ → raw.githubusercontent.com（CORS 対応）
Blueskyさまざまな操作に利用
MastodonCORS が寛容
GitHub Gists状態を永続化するための Gist を作成

例：

  • species‑observation‑map – iNaturalist の最近の観測を地図上に表示
  • zip‑wheel‑explorer – Python wheel を取得し、ブラウザで解凍・閲覧
  • github‑issue‑to‑markdown – Issue の詳細／コメントをコピー可能な Markdown に変換
  • terminal‑to‑html – 必要に応じて Gist へ保存
  • bluesky‑quote‑finder – Bluesky 投稿の引用を表示し、いいね数や時間でソート可

10. CORS 経由で LLM を呼び出す

OpenAI・Anthropic・Gemini は JSON API を CORS 経由で利用できますが、API キーは必須です。

localStorage
にキーを保管します（手間はありますが安全）。

例：

  • haiku – Claude API でウェブカメラ画像から俳句を生成
  • openai‑audio‑output – OpenAI の GPT‑4o 音声 API で音声合成
  • gemini‑bbox – Gemini 2.5 が複雑な画像マスクを返すことを示す

11. ファイルの読み込みは恐れずに

<input type="file">
でサーバーアップロード不要、JavaScript だけでファイル内容を読むことができます。

例：

  • ocr – PDF.js + Tesseract.js を使ってブラウザ上で OCR。
  • social‑media‑cropper – 画像を開く／貼り付けて Twitter（2:1）、LinkedIn（2:1）、Substack（1.4:1）などに合わせてトリミング。
  • ffmpeg‑crop – 動画プレビューで領域をドラッグし、ローカルで ffmpeg コマンドをコピー。

12. ダウンロード可能なファイルも用意

多くのツールはサーバー不要でダウンロードファイルを生成します。

  • svg‑render – SVG を PNG/JPEG に変換してダウンロード
  • social‑media‑cropper – トリミングした画像をダウンロード
  • open‑sauce‑2025 – .ics ファイル（スケジュール）を出力するアプリ（「Vibe」プロジェクト参照）

13. Pyodide でブラウザ上に Python を動かす

Pyodide は WebAssembly にコンパイルされ、CDN から読み込め、

micropip
で追加パッケージを入れられます。

例：

  • pyodide‑bar‑chart – Pandas + Matplotlib で棒グラフを描画
  • numpy‑pyodide‑lab – インタラクティブな NumPy チュートリアル
  • apsw‑query – APSW SQLite をブラウザ上で実行し、EXPLAIN QUERY プランを表示

14. WebAssembly がさらに可能性を広げる

WebAssembly はネイティブコードをブラウザで走らせます。

例：

  • ocr – Tesseract.js（WebAssembly）
  • sloccount – David Wheeler の SLOCCount をブラウザへ移植
  • micropython – 
    @micropython/micropython‑webassembly‑pyscript
    で Python を実行

15. 既存ツールをリミックスする

公開コレクションがあると、LLM アシスタントはそれを再利用できます。
私はツールをコンテキストにコピーしたり、関連例を検索させてから作業します。
ソースコード自体がドキュメント・パターンになっています。

例：Claude Code に

pypi パッケージエクスプローラ ツールを見てください…
PyPI API を使い、wheel URL を一覧表示し、差分を作成して「コピー」ボタン付きの pypi‑changelog.html を作ってください。

完全なトランスクリプトはリポジトリのコロノンに掲載しています。

16. プロンプトとトランスクリプトを記録

ワークフローを文書化するため、以下を公開します。

  • 直接チャット LLM 用：プラットフォームの share 機能で共有
  • コーディングエージェント（Claude Code, Codex CLI）用：ターミナルトランスクリプトを 
    terminal‑to‑html
    ツールに貼り付け、Gist で共有。
    リポジトリのコミットメッセージはこれらのトランスクリプトへリンクします。

ぜひ挑戦してみてください

過去一年半で LLM の可能性を探求し、この方法でツールを作ると HTML ツーリングと LLM の両方が深く理解できます。

自分だけのコレクションを始めたいなら、GitHub で無料リポジトリを作り、GitHub Pages を有効にしてください（設定 → Pages → ソース → デプロイ先ブランチ → main）。その後は好きなように 

.html
ファイルをコピーして公開できます。

ボーナス・トランスクリプト

Claude Code + shot‑scraper でこの投稿にスクリーンショットを追加しました。

同じ日のほかのニュース

一覧に戻る →

2025/12/14 7:58

Linux Sandboxes and Fil-C

## Japanese Translation: メモリ安全性とサンドボックスはプログラムの異なる部分を保護するため、両方が強力なセキュリティに必要です。純粋な Java プログラムはメモリ安全であってもファイルシステムの syscalls を通じて任意のファイルを書き込むことができるし、逆にすべての能力を取り消したアセンブリプログラムでもメモリバグがある場合がありますが、カーネルが特権 syscalls を殺すためサンドボックスから逃げられません。サンドボックスは意図的に許容範囲を広く設計しているため、攻撃者は残されたメモリ安全性のバグを利用してブローカー・プロセスへ到達することができるので、両方の防御を組み合わせるとより強固な保護が得られます。 本書では、C/C++ 用に設計され、システムコールまで安全性を保証し、init や udevd などの低レベルコンポーネントで使用できるメモリ安全ランタイム「Fil‑C」への OpenSSH の seccomp ベース Linux サンドボックス移植方法について説明します。OpenSSH は既に chroot を採用し、`sshd` ユーザー/グループとして特権なしで実行し、`setrlimit` を使用し、非許可 syscalls を `SECCOMP_RET_KILL_PROCESS` で殺す seccomp‑BPF フィルタを適用しています。Fil‑C はその runtime 内で自動的にこれらの syscalls を許可することで簡素化します。背景スレッドは存続させつつスレッド生成を防ぐため、Fil‑C は API `void zlock_runtime_threads(void)` を追加し、必要なスレッドを事前確保してシャットダウンを無効にします。 OpenSSH の seccomp フィルタは強化されています。失敗時の挙動が `SECCOMP_RET_KILL` から `SECCOMP_RET_KILL_PROCESS` に変更され、mmap 許可リストに新たに `MAP_NORESERVE` フラグが追加され、`sched_yield` が許可されています。サンドボックスは二つの `prctl` コール（`PR_SET_NO_NEW_PRIVS` と `PR_SET_SECCOMP`）で構築され、エラー検出も行われます。Fil‑C のランタイムは `filc_runtime_threads_handshake` で全スレッドとハンドシェイクし、各スレッドが no_new_privs ビットと seccomp フィルタを持つことを保証します。複数のユーザー スレッドが検出された場合、安全エラーが発生します。 メモリ安全性とサンドボックスを組み合わせることで、OpenSSH はより厳格な隔離を実現し、メモリバグによる権限昇格リスクを低減します。このアプローチは他のセキュリティクリティカルプロジェクトにも採用を促す可能性があります。

2025/12/14 9:34

An Implementation of J

## Japanese Translation: ## 改訂版要約 本書は、技術仕様の構造化された目次であり、以下のように整理されています。 1. **第0章 – はじめに** 2. **第1章 – 文を解釈する** - 1.1 単語生成 - 1.2 構文解析 - 1.3 トレイン（列車） - 1.4 名前解決 3. **第2章 – 名詞** - 2.1 配列 - 2.2 型 - 2.3 メモリ管理 - 2.4 グローバル変数 4. **第3章 – 動詞** - 3.1 動詞の構造 - 3.2 ランク - 3.3 原子（スカラー）動詞 - 3.4 オブヴァース、同一性、および変種 - 3.5 エラー処理 5. **第4章 – 副詞と接続詞** 6. **第5章 – 表現** - 5.1 原子表現 - 5.2 ボックス化された表現 - 5.3 木構造表現 - 5.4 線形表現 7. **第6章 – ディスプレイ** - 6.1 数値表示 - 6.2 ボックス化表示 - 6.3 フォーマット済み表示 主要セクションの後に、付録A〜F（インキュナブルム、スペシャルコード、テストスクリプト、プログラムファイル、外国接続詞、およびシステム概要）が補足資料として提供されます。書末には参考文献・用語集・索引が付されています。 この構成（目次 → 詳細セクション → 付録 → 参照資料）は、読者に全体枠組みを最初に把握させたうえで、必要に応じて詳細へ掘り下げたり補足資料を参照したりできる明確かつ階層的な道筋を提供します。

2025/12/14 8:39

Closures as Win32 Window Procedures

## Japanese Translation: **改訂版要約:** この記事では、Win32 のウィンドウプロシージャに追加のコンテキストポインタを渡す方法を示しています。これは、WndProc が通常 4 つしか引数を取らないため、ネイティブ API には備わっていない機能です。著者は x64 アセンブラで小さなトランスペイル（trampoline）を作成し、実行時に JIT コンパイルして 5 番目の引数スロットを挿入し、呼び出し前に必要なコンテキストを格納します。これにより、各ウィンドウがグローバル変数や `GWLP_USERDATA` を使わずに独自の状態を保持できるようになります。トランスペイルは GNU アセンブラで書かれ、`.exebuf` セクション（`bwx` フラグ付き）から 2 MiB の実行可能バッファが確保されます。C ヘルパー関数 `make_wndproc(Arena *, Wndproc5, void *arg)` は 2 つのバイトオフセットプレースホルダーを修正してトランスペイルを生成します。作成後は `set_wndproc_arg(WNDPROC p, void *arg)` を使ってコンテキストを変更できます。アロケータ例では、異なる状態オブジェクト用に複数のトランスペイルを生成したり、動的に切り替えたりする方法を示しています。この手法は、トランスペイルがアンウインドテーブルを持たないため Windows Control Flow Guard 下でも安全に機能し、グローバル変数を使わずにウィンドウごとのデータを付与する低レベルの手段を示しています。