埋め込み可能なエディタ
埋め込み可能なコードエディター
どんなサイトにも使える、実行可能なライブコードエディター。iframe 1つ、設定不要。
本格的に実行できるコードエディターをブログ、ドキュメント、チュートリアルに設置できます。読者はコードを書いて、その出力をあなたのページ上で直接確認できます。Coddy が提供します。下で言語とテーマを選び、開始コードを貼り付けて、iframe をコピーしてください。
Trinketから移行しますか？Coddyで置き換えられるものを見る
<figure style="margin:0;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden"><iframe src="https://coddy.tech/embed-editor?lang=pygame&theme=light&code=aW1wb3J0IHB5Z2FtZQoKcHlnYW1lLmluaXQoKQpzY3JlZW4gPSBweWdhbWUuZGlzcGxheS5zZXRfbW9kZSgoNDgwLCAzNjApKQpweWdhbWUuZGlzcGxheS5zZXRfY2FwdGlvbigiTW92ZSB0aGUgc3F1YXJlIikKY2xvY2sgPSBweWdhbWUudGltZS5DbG9jaygpCmZvbnQgPSBweWdhbWUuZm9udC5Gb250KE5vbmUsIDI4KQoKeCwgeSA9IDIyMCwgMTYwCnNwZWVkID0gNApydW5uaW5nID0gVHJ1ZQp3aGlsZSBydW5uaW5nOgogICAgZm9yIGV2ZW50IGluIHB5Z2FtZS5ldmVudC5nZXQoKToKICAgICAgICBpZiBldmVudC50eXBlID09IHB5Z2FtZS5RVUlUOgogICAgICAgICAgICBydW5uaW5nID0gRmFsc2UKCiAgICBrZXlzID0gcHlnYW1lLmtleS5nZXRfcHJlc3NlZCgpCiAgICBpZiBrZXlzW3B5Z2FtZS5LX0xFRlRdOgogICAgICAgIHggLT0gc3BlZWQKICAgIGlmIGtleXNbcHlnYW1lLktfUklHSFRdOgogICAgICAgIHggKz0gc3BlZWQKICAgIGlmIGtleXNbcHlnYW1lLktfVVBdOgogICAgICAgIHkgLT0gc3BlZWQKICAgIGlmIGtleXNbcHlnYW1lLktfRE9XTl06CiAgICAgICAgeSArPSBzcGVlZAogICAgeCA9IG1heCgwLCBtaW4oeCwgNDgwIC0gNDApKQogICAgeSA9IG1heCgwLCBtaW4oeSwgMzYwIC0gNDApKQoKICAgIHNjcmVlbi5maWxsKCgyNCwgMjgsIDQwKSkKICAgIHB5Z2FtZS5kcmF3LnJlY3Qoc2NyZWVuLCAoMjU1LCAxOTYsIDApLCAoeCwgeSwgNDAsIDQwKSkKICAgIGxhYmVsID0gZm9udC5yZW5kZXIoIlVzZSB0aGUgYXJyb3cga2V5cyIsIFRydWUsICgyMzAsIDIzMCwgMjMwKSkKICAgIHNjcmVlbi5ibGl0KGxhYmVsLCAoMTAsIDEwKSkKICAgIHB5Z2FtZS5kaXNwbGF5LmZsaXAoKQogICAgY2xvY2sudGljayg2MCkKCnB5Z2FtZS5xdWl0KCkK&credit=0" width="100%" height="480" style="display:block;border:0;width:100%" title="CoddyのPygameコードエディター" loading="lazy"></iframe><figcaption style="box-sizing:border-box;padding:5px 12px;font:11px/1.4 system-ui,-apple-system,sans-serif;color:#64748b;background:#f1f5f9;border-top:1px solid #e2e8f0;text-align:right" dir="ltr"><a href="https://coddy.tech/embed" target="_blank" rel="noopener" style="color:#0077ff;font-weight:600;text-decoration:none;">Coddy</a> 提供</figcaption></figure>どんなサイトでも無料で利用できます。ほかの人もエディタを見つけられるよう「Powered by Coddy」リンクは残してください。お願いはそれだけです。
実際に動かしてみる
ページに貼ったときと同じ本物の埋め込みです。どれでも「実行」を押してみてください。
名前と年齢を尋ね、答えを1つずつ待ちます。
Coddy のエディターを埋め込む理由
本物のコードを実行
読者はコードを編集して「実行」を押します。Pythonは読者のブラウザでそのまま動き、input()用のライブコンソールとturtleの描画に対応。ほかの言語はCoddyの隔離された実行環境で動き、出力、stdin、コマンドライン引数に対応します。
15以上の言語
Python、JavaScript、TypeScript、Java、C、C++、C#、Go、Ruby、Rust、PHP、SQL など。さらに、ライブプレビュー付きのHTMLとCSS、matplotlibによるPythonのグラフにも対応。1つのエディター、1つの埋め込みパターン。
ライト・ダークテーマ
theme パラメーターでサイトに合わせるか、auto に設定すれば、エディターは各訪問者のシステム設定に従います。
設定ゼロ
アカウントも、API キーも、インストールする JavaScript も不要。iframe タグを1つコピーすれば、HTML が使えるあらゆる場所でエディターが動作します。
仕組み
1. 設定する
言語、テーマ、レイアウトを選び、エディター読み込み時に読者が目にする開始コードを貼り付けます。
2. iframe をコピーする
ビルダーが、設定を URL にエンコードした1つの <iframe> タグを生成します。それをコピーします。
3. 貼り付ける
iframe を HTML、Markdown、CMS、ドキュメントページに配置します。エディターは即座に表示され、すぐに実行できる状態になります。
カスタマイズパラメーター
埋め込みは iframe URL のクエリ文字列だけで完全に設定されます。上のビルダーが自動で設定しますが、手動で編集することもできます。
| パラメータ | 値 | 説明 |
|---|---|---|
lang | python, javascript, java, sql, html, matplotlib, cpp, ... | エディターが実行する言語。デフォルトは python。 |
theme | light, dark, auto | カラーテーマ。auto は訪問者のシステム設定に従います。デフォルトは auto。 |
code | base64 string | エディター読み込み時に表示される開始コードの URL セーフな base64。 |
layout | side, stacked | エディターと出力を左右に並べるか、縦に積み重ねます。デフォルトは side。 |
stdin | base64 string | 実行時にプログラムへ渡す任意の標準入力。Pythonは読者にその場で尋ねるため、これを使うのはサーバーで実行するときだけです。 |
よくある質問
埋め込み可能なコードエディターは無料ですか？
はい。埋め込みエディターは、どんなウェブサイトでも完全に無料で使えます。各埋め込みには小さな「Powered by Coddy」リンクが含まれます。ほかの人もエディターを見つけられるよう、このリンクは残してください。お返しにお願いするのはこのリンクだけです。
読者がコードを実行するのに Coddy アカウントは必要ですか？
いいえ。誰でもログインなしで埋め込みエディターのコードを編集・実行できます。Pythonは読者のブラウザで、ほかの言語はCoddyの隔離された実行環境で動きます。
どのプログラミング言語に対応していますか？
Python、JavaScript、TypeScript、Java、C、C++、C#、Go、Ruby、Rust、PHP、SQL、R など。さらに、ライブプレビュー付きのHTMLとCSS、matplotlibによるPythonのグラフにも対応しています。1つの埋め込みにつき1言語です。
エディターを自分のサイトのテーマに合わせられますか？
はい。theme パラメーターを light または dark に設定するとテーマを固定でき、auto にすると各訪問者のシステム設定に従います。
どんなウェブサイトでも埋め込みは動作しますか？
はい。標準的な iframe なので、素の HTML、Markdown、ほとんどの CMS（WordPress、Ghost、Notion など）、および iframe を許可するドキュメントツールで動作します。