① SPA クライアントルーティング 対応済み
history.pushState / popstate · DOM 全入れ替えルート遷移で reload せずに <main> を丸ごと差し替え。MutationObserver で新コンテンツに自動再適用(当初の懸念は実機で否定)。
各カードは、ウィジェットが現場で遭遇する ページ構成(アーキテクチャ) を 1 つずつ再現した実機デモです。 既存の a11y-training / screen-reader-lab は「機能」を見せるもの。こちらは「どの種類のページで widget 自体が正しく動くか」を検証します。 各ページに観測パネルを内蔵し、widget がやるべきこと・既知のギャップを明示します。
ルート遷移で reload せずに <main> を丸ごと差し替え。MutationObserver で新コンテンツに自動再適用(当初の懸念は実機で否定)。
サーバー描画済み DOM の上で、JS が遅れて文言や属性を差し替える。DOMContentLoaded 後の boot と MutationObserver の挙動を確認。
スクロールで後から DOM 追加。追加要素にコントラスト/フォント拡大が効くか、遅延 GIF の凍結が漏れないか(naturalWidth>0 問題)を観測。
iframe 内のコンテンツに widget が届かないことを実証。same-origin / cross-origin それぞれの境界を可視化。
デモを開く →querySelectorAll が shadow root を貫通しない。web component 内のテキストにコントラスト/フォント拡大が効かないことを実証。
埋め込み PDF は widget の対象外。read-aloud / コントラストが PDF ビューアに届かないことを示し、screen-reader (PDF compatible) との差を明確化。
デモを開く →「アニメーション停止」が CSS animation には効くが、canvas/WebGL の rAF ループには効かないことを実証。SVG SMIL は pauseAnimations() で停止可能。
body 入れ替えで #siteforce-root が一旦破棄されるが、survival observer が自動再マウント(B2 修正)。手動 Siteforce.boot() 不要。
widget は @media print { :host { display:none } } を持ち、印刷時に UI が紙面に出ない(B1 修正)。
panel は LTR 前提で角が不自然に。text-align:left !important が RTL 本文を破壊。ロケールに RTL 言語なし。
フォーム本文は widget 対象。カード入力は決済 iframe 内(別オリジン)で対象外。funnel・フォーカス管理を壊さないことが要件。
デモを開く →大 DOM のチャンク処理漏れ、ソートのキーボード操作との競合、アプリ modal と widget パネルのフォーカストラップ競合を観測。
デモを開く →head 読み込み(body 未生成)でも throw せず起動(B3 修正)。async/注入で currentScript=null でも data-key を解決。
フレームワークが出力するネストした shadow root内のテキストは貫通不可。Light DOM / slotted のみ効く。⑤ より実戦的。
デモを開く →テーマのカラープリセット(低コントラスト既定値)+ wp-block ネスト。通常 DOM なので widget が効くはず(制約ではない)。
デモを開く →コンテンツが canvas/WebGL ピクセルに描画 → テキストノード無し → recolor/読み上げ対象外。HTML 凡例のみ届く。
デモを開く →Chromium/WebKit ベースなので boot するはず。自動切替スライド追従は観測可、long-running メモリ・touch 操作は未検証。
デモを開く →実地クロールで .ac.jp 大学・研究室に生きた frameset を 13 件確証。frameset 親は <body> 無、パネルはフレーム矩形にクリップ。単一スニペット全サイト前提が崩れる。
常磐大 Shift_JIS+frameset・spacejam quirks を実測。quirks と Shift_JIS は無害=外部 si.js は自身の UTF-8 で独立デコード、Shadow DOM/fetch に影響なし。致命は IE-mode と frameset の方。
デモを開く →claude-in-chrome 実測で gov.uk(nonce 厳格)・joomla.org(allowlist)が si.js を実際にブロック。13/15 は通るが厳格 CSP では allowlist 追加 or nonce 連携が必須(チェックリスト #6 を実証)。
デモを開く →公開 105 件で IE 強制メタは 0 件(FACT)。現代ブラウザは無視=widget 起動。実 IE11 / Edge IE モードでのみ Trident=ES5 で attachShadow/fetch/import() 欠落=起動不能。
中国 self-host CMS は注入・エンジン共に OK だが GFW が海外 CDN/API を遮断=import() が解決せずパネル非表示。露も主権ネットでスロットル。中国向けは ICP 取得済み中国 CDN への再ホストが必須。
WordPress / Wix / Squarespace / Shopify / Magento 等。出典: 2026-06-29-global-cms-builders-widget-compatibility
オーナー全権・テーマ注入自由。最も対応容易。
開く →Business+ プランのみコード注入可。無料/Personal は不可。
開く →Head 注入はメイン文書 OK だが HTML 埋め込み要素は iframe 隔離。
開く →head 注入可。SSR+hydrate。
開く →静的出力。有料プランで head 注入。
開く →global head 注入手段なし。fixed ランチャーが iframe 矩形にクリップ。構造的 🔴。
開く →Header Code はサイト全体可。ページ Embed は iframe 隔離。
開く →店舗フロントは全プランで head 注入可。
開く →checkout は Shopify 管轄の厳格 CSP で si.js ブロック(実証)。
開く →セルフホストでレイアウト XML 全制御。
開く →Code Injection(非サニタイズ)標準装備。
開く →開発者・管理者経路で注入。
開く →allowlist に si.js origin 追加が必要(実測: joomla.org)。
開く →phpBB / vBulletin / SMF / MediaWiki / DokuWiki 等。出典: 2026-06-29-legacy-selfhosted-worldwide-widget-compatibility
SSR 静的・所有者制御。Shadow DOM 隔離が旧 jQuery の $ 衝突を無効化。
開く →SSR・容易。
開く →旧テーマ再現。SSR・標準モード。
開く →スキン/Common.js 注入(管理者)。
開く →DB 不要・テンプレ main.php 注入=最容易。
開く →既定 CSP で si.js ブロック。allowlist 追加が必要。
開く →engine は動くがプラットフォーム死=生きたインスタンスが稀=現実的に不可。
開く →Classic ASP / ColdFusion / FrontPage / PHP-Nuke / osCommerce / Movable Type。出典: 2026-06-29-legacy-selfhosted-worldwide-widget-compatibility
公開=🟢、Edge IE モード強制=🔴。backend 古さは無関係、訪問者エンジンが決め手。
開く →素直な SSR。注入容易。
開く →frameset + IE 強制メタの二重苦。パネルがフレーム矩形にクリップ。
開く →themefooter() に 1 行。EOL セキュリティは別軸。
開く →古い table 組みだが普通の静的 HTML。footer.php に 1 行。
開く →静的出力=素 HTML。最も素直。
開く →Discuz / DedeCMS / WeChat / Naver / Cafe24 / 1C-Bitrix / Tilda / VK / PrestaShop / VTEX 等。出典: 2026-06-29-regional-platforms-widget-compatibility
注入/エンジン OK だが GFW が海外 CDN/API 遮断→import() 非解決。第5軸 Network。
開く →同上。GFW 遮断で海外 origin 不達。
開く →本文サニタイズで生 <script> 除去→注入点なし。
開く →二重: ビルダー注入点なし + GFW 不達。
開く →SmartEditor が生 script 除去 + 本文 iframe 隔離→注入点なし。
開く →オーナースキン編集で注入可。
開く →head.php 注入相性良。
開く →注入可だが主権ネットで海外 CDN スロットル(Cloudflare 16KB cutoff 2025-06)。
開く →メイン DOM 展開(iframe なし)。
開く →注入点なし + visitor 認証ゲート。
開く →テーマ DOM 注入可。
開く →SPA ルート遷移ごと再アタッチ必要。
開く →SharePoint / ASP.NET / AEM / Sitecore / Liferay / Confluence / SAP / Lotus Domino / GOV.UK。出典: 2026-06-29-enterprise-gov-legacy-widget-compatibility
Script Editor 撤去。SPFx パッケージ化が前提=「タグ1本」とは別物。
開く →backend 無関係、訪問者エンジン(IE モードか)が決め手。
開く →公開ブランドサイト=modern。clientlib 注入で最相性良。
開く →公開サイト=modern。layout/rendering 注入。
開く →ポートレット iframe 集約が panel と競合しうる。
開く →HTML マクロは既定無効・管理者が封印しがち。Cloud は生 script 不可。
開く →IE 依存 + iView iframe 集約の二重苦。
開く →IE モード pin + frameset の二重苦(古典 frame-era 構造)。
開く →script-src 'self' 'nonce-…' で外部 si.js ブロック(実測: gov.uk)。allowlist or nonce 連携が必須。
開く →Bubble/Framer/Next.js/Moodle/Circle/Notion/GitBook 等。出典: 2026-06-29-appbuilder-jamstack-lms-community-docs-widget-compatibility
AMP/PWA/Smart TV/in-app webview/Opera Mini/reader/Tor 等。出典: 2026-06-29-special-runtimes-widget-compatibility
東南アジア/インド/中東/アフリカ/トルコ/ブラジル。marketplace seller=🔴, EC SaaS builder=🟢, thin-client(Opera Mini/UC)=🔴。出典: 2026-06-29-emerging-markets-platforms-widget-compatibility
飲食/不動産/医療/教育/官公庁CMS/非営利/金融/メディア/ポートフォリオ。**ベンダーホスト面🔴 / 自サイト埋め込み面🟢** の二面性。出典: 2026-06-29-industry-vertical-platforms-widget-compatibility