WordPress記事に「動くコード」を埋め込みたい方へ
「記事内でコードを書いて、実際にその場で動かしたい！」
そんなブロガーや開発学習者に向けて、ミニCodePen風のライブ描画サービスを公開しました。
- ✅ WordPressのカスタムHTMLブロックにコピペするだけで動作
- ✅ iframeサンドボックス実行だからセキュリティ安心
- ✅ 自動保存機能付き（途中で閉じても続きから再開OK）
- ✅ URL共有可能（学習ノートや記事で配布しやすい）
- ✅ ワンクリックでHTMLファイルにエクスポート
「記事のコードをもっとわかりやすく見せたい」
「読者にインタラクティブなサンプルを見せたい」
そんな方にぴったりです。
こんな使い方ができます
- 技術ブログの記事に 動くデモ を埋め込み
- プログラミング学習サイトで 課題サンプル を共有
- デザイン提案を その場で確認できるHTMLモック として利用
今すぐ使ってみる
保存済み
仕様と安全性
- 完全クライアントサイド：サーバーにコードは送信しません（プレビューは
iframe[srcdoc]）。 - サンドボックス：
sandbox="allow-scripts …"でJSは動くが、親ページのDOMやCookieに触れません。 - 自動保存：ローカルStorageに下書き保存。
- 共有リンク：URLハッシュ（
#code=...）にベース64化して埋め込み。 - エクスポート：単一
HTMLファイルで配布・検収に便利。 - 制限：外部リソースの読込は先のHTML/CSSから記述してください（例：
<link>/<script src>）。同一オリジン制約上、一部APIは使えない場合があります。
公開サイトで一般ユーザーに入力させる場合は、このページを限定公開にするか、別途投稿承認フロー＋サニタイズ設計をご検討ください（本ツールは iframe で隔離する前提の“開発／学習用”です）。
よくある質問
Q. スクリプトが保存時に消えます
A. WordPressの権限/セキュリティ設定によっては<script>が除去されます。管理者で編集する、またはCode Snippets/子テーマに入れてショートコード化してください。
Q. 共有リンクが長い
A. 長文の場合はURLが長くなります。必要に応じて短縮サービスをご利用ください。
Q. ダークモードにしたい
A. この埋め込み自体の見た目は#wp-html-playground内のCSSを変更してください（プレビューの中身はあなたのCSS次第）。
