JSFiddleの埋め込みで「Result」を最初に表示する方法
技術ブログなどでJSFiddleを埋め込む際、デフォルトではJavaScriptのコードが表示されますが、読者にはまず「実行結果（Result）」を見せたい場面も多いですよね。
実は、埋め込みURLを少し書き換えるだけで、表示するタブの種類や順番、さらには配色テーマまで自由にカスタマイズできます。
今回は、公式の仕様に基づいた正しいカスタマイズ方法と、記事の品質を保つための「バージョンの固定」について解説します。
基本のURL構造を確認
JSFiddleの埋め込み用URL（src属性の中身）は、基本的に以下の構造になっています。
//jsfiddle.net/ユーザー名/フィドルID/embedded/タブの順序/テーマ/この /embedded/ より後ろの部分を編集することで、表示をコントロールします。
1. Result（実行結果）を先頭にする方法
Resultタブを一番最初に表示させたい場合は、/embedded/ の直後に result を先頭にしたリストをカンマ区切りで記述します。
例えば、「Result → JS → HTML → CSS」 の順でタブを並べたい場合のURL末尾は以下のようになります。
/embedded/result,js,html,css/埋め込みコードの記述例
実際にiframeタグとして記述すると、以下のようになります。
<iframe width="100%" height="300" src="//jsfiddle.net/shianly/jgoahb26/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>- ポイント： 指定したタブだけが表示されます。不要なタブ（例えばCSSなど）を表示したくない場合は、リストから外せば非表示にできます。
2. ダークモードに変更する方法
コードを見やすくするために「ダークモード」にしたい場合は、タブの指定のさらに後ろに /dark/ を追加します。
/embedded/result,js,html,css/dark/逆にライトモード（白背景）にしたい場合は /light/ と書くか、テーマ部分を省略すればデフォルトでライトモードになります。
3. 【重要】バージョン（リビジョン）を固定して表示崩れを防ぐ
参考サイトなどではあまり触れられていませんが、公式情報を踏まえた重要なポイントとして「バージョン（リビジョン）番号」の指定があります。
JSFiddleで「Save」や「Update」を押すと、URLのフィドルIDの後に /1/, /2/ といった数字が付きます。
- 番号あり：
//jsfiddle.net/ユーザー名/ID/1/embedded/...
→ その時点のコードが保存された特定の状態が表示されます。 - 番号なし：
//jsfiddle.net/ユーザー名/ID/embedded/...
→ 常にそのフィドルの「最新の状態」が表示されます。
ブログ記事の場合、後でコードをいじってしまって記事の内容と食い違わないように、バージョン番号を含んだURLを埋め込むことを強くおすすめします。
まとめ
JSFiddleの埋め込みをカスタマイズする際は、以下のルールを覚えておけば完璧です。
- 順序を変える：
/embedded/result,js,html,css/のように記述 - 色を変える： 末尾に
/dark/を追加 - 内容を固定する： IDの後ろにバージョン番号（
/1/など）を含める
読者にとって見やすいデモ画面を作るために、ぜひ活用してみてください。
よくある質問
- Result（実行結果）だけを表示させることはできますか？
- はい、可能です。URLの末尾を
.../embedded/result/のように、resultだけを指定してください。記述しなかったタブ（HTMLやCSSなど）はすべて非表示になり、スッキリとした見た目になります。 - 埋め込み画面のサイズ（高さや幅）を変更したいです
- サイズの変更はURLの書き換えではなく、
<iframe>タグの属性で行います。コード内のwidth="100%"やheight="300"の数値を、ご自身のブログのレイアウトに合わせて変更してください（例：height="500"など）。 - 他の人が作成した公開フィドルでも、同じようにカスタマイズできますか？
- はい、可能です。Public（公開）に設定されているフィドルであれば、URLの構造は同じです。紹介したい他者のコードでも、同様の手順で表示タブやテーマをカスタマイズして埋め込むことができます。
- 常に「最新のコード」を表示させたい場合はどうすればいいですか？
- URL内にあるバージョン番号（
/1/など）を削除し、//jsfiddle.net/ユーザー名/ID/embedded/...の形式にして埋め込んでください。これで常に最新の保存状態が反映されます。ただし、後から大きくコードを変更すると記事の解説と合わなくなる可能性があるため、ご注意ください。 - WordPressを使っていますが、URLをそのまま貼り付けるだけでカスタマイズは反映されますか？
- WordPressのバージョンや設定によりますが、URLを直接貼り付ける（oEmbed機能を利用する）だけでは、タブの順序などの細かい指定が反映されないことがあります。確実にカスタマイズを反映させたい場合は、「カスタムHTML」ブロックなどを使用して、
<iframe>タグのコードごと貼り付けることをおすすめします。
