HTML コード ランナー の仕組み

ツールの背後にある技術アーキテクチャ、セキュリティ モデル、設計上の決定について詳しく説明します。

アーキテクチャの概要

HTML コード ランナーは純粋にクライアント側のアプリケーションです。コードを処理するバックエンド サーバー、スニペットを保存するデータベース、外部サービスへの API 呼び出しはありません。ツール全体は、HTML、CSS、JavaScript などの標準 Web テクノロジーを使用してユーザーのブラウザ内で実行されます。

コード実行パイプライン

「実行」ボタンをクリックすると、次のシーケンスが発生します。

  1. コード キャプチャ — テキストエリア エディタからの HTML コンテンツが文字列として読み取られます。
  2. Blob 作成 — コード文字列は、MIME タイプ text/html の Blob オブジェクトでラップされます。
  3. URL 生成 - 一時的な BLOB URL は、URL.createObjectURL() を使用して作成されます。
  4. Iframe の読み込み - BLOB URL は、サンドボックス化された iframe の src 属性に割り当てられます。
  5. レンダリング — ブラウザは iframe 内で HTML ドキュメントをレンダリングし、埋め込まれた CSS と JavaScript を実行します。
  6. コンソール キャプチャ - iframe の console.log、console.error、および console.warn メソッドは、出力を [コンソール出力] パネルにパイプするためにオーバーライドされます。
  7. クリーンアップ - メモリを解放するためにロードした後、Blob URL が取り消されます。

セキュリティモデル

セキュリティは設計上の重要な考慮事項です。複数の分離層を使用します。

サンドボックス化された Iframe

プレビュー iframe は、次の権限を持つ HTML5 サンドボックス 属性を使用します。

  • allow-scripts - iframe 内での JavaScript の実行を有効にします (JS プレビューに必要)
  • allow-modals - alert()、confirm()、および prompt() ダイアログを許可します
  • allow-same-origin — BLOB URL の読み込みに必要です (コンテンツは BLOB URL とオリジンを共有する必要があります)

サンドボックスには明示的に次のものは含まれません。

  • allow-top-navigation — iframe は親ページに移動できません
  • allow-forms — フォームの送信はブロックされます (偶発的なデータ漏洩を防ぎます)
  • allow-popups — ポップアップ ウィンドウはブロックされます

BLOB URL の分離

document.write() または srcdoc を介してコードを挿入するのではなく、Blob URL を使用します。これにより、ブラウザーは BLOB URL を独自の実行コンテキストを持つ別個のドキュメントとして扱うため、分離が向上します。

サーバー側の処理は不要

コードがネットワーク経由で送信されることはありません。入力した瞬間からタブを閉じるまでブラウザのメモリに残ります。侵害するサーバー、侵害するデータベース、悪用する API エンドポイントはありません。

エディターのデザイン

コード エディターは、次の機能を備えたスタイル付きの

  • 行番号 — 行番号を表示し、エディタと連動してスクロールする同期された読み取り専用パネル
  • タブ サポート — Tab キーは、フォーカスを移動する代わりに 2 つのスペースを挿入します (標準のコード エディターの動作)。
  • 等幅フォント — コードの読みやすさを最適化するために JetBrains Mono を使用します
  • スペルチェックが無効 — ブラウザがコードの「スペルミス」に下線を引くのを防ぎます。

パフォーマンスに関する考慮事項

  • ツール全体は、2 つの小さな JS ファイルと 1 つの CSS ファイルを含む 1 つの HTML ファイルにロードされます。
  • JavaScript フレームワークやライブラリは使用されていません。すべてのコードはバニラ JS です。
  • フォントは、font-display: swap を使用して非同期的にロードされます。
  • このツールはページの読み込みから数ミリ秒以内にインタラクティブになります。
  • メモリ リークを防ぐために、BLOB URL は使用後に取り消されます。

アクセシビリティ

このツールはアクセシビリティを念頭に置いて設計されています。

  • すべてのインタラクティブ要素には ARIA ラベルが付いています
  • FAQ アコーディオンは適切な aria-expanded 状態を使用します。
  • すべてのインタラクティブな要素に焦点がはっきりと表示されます
  • 色のコントラストは WCAG AA ガイドラインを満たしています
  • このツールはキーボードで完全に操作可能です
  • トースト通知では、role="status" と aria-live="polite" を使用します。

レスポンシブデザイン

インターフェイスはすべての画面サイズに適応します。

  • デスクトップ (1024px+) — エディターとプレビュー パネルを並べて表示
  • タブレット (768px ～ 1024px) — 全幅レイアウトの積み重ねられたパネル
  • モバイル (<768px) — 積み重ねられたパネル、折りたたまれたナビゲーション、最適化されたタッチ ターゲット

SEOの実装

このサイトの各ページには次の内容が含まれます。

  • 独自のタイトルタグとメタディスクリプション
  • セマンティック HTML5 要素 (ヘッダー、メイン、フッター、ナビゲーション、セクション、記事)
  • 重複コンテンツの問題を防ぐための正規 URL
  • WebPage、SoftwareApplication、FAQPage、および BreadcrumbList スキーマの構造化データ (JSON-LD)
  • 多言語サポートのための Hreflang タグ
  • 適切な見出し階層を持つページごとに 1 つの H1

HTML コード ランナーを試す →