javascript:jsfiddle [ともやん・どっと・ねっと]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== JSFiddle - Code Playground ======
{{:javascript:jsfiddle-logo.png?200|JSFiddle Logo}}\\
[[https://commons.m.wikimedia.org/wiki/File:Jsfiddle-logo.png|File:Jsfiddle-logo.png - Wikimedia Commons]] より\\

本家: [[https://jsfiddle.net/|JSFiddle - Code Playground]]\\
ドキュメント: [[https://docs.jsfiddle.net/|JSFiddle Docs & Help - JSFiddle Docs]]\\

===== Web ページへの埋め込み =====

==== 埋め込み URL の形式 ====
<WRAP mincode>
<code javascript>
<script async src="//jsfiddle.net/<user id>/<fiddle id>/<version number>/[iframe: embedded|script: embed]/[tabs: js,html,css,result,resources]/[Visual: light/|dark/]"></script>
</code>
</WRAP>

==== <iframe> タグでの埋め込み ====
<WRAP mincode>
<code html>
<iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</code>
</WRAP>
<WRAP jsfiddle><html>
<iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html></WRAP>

==== <script> タグでの埋め込み ====
**<script>** タグで埋め込む場合は、**%%<div>%%** でラップして **<iframe>** の高さを指定する。\\
<WRAP mincode><code html>
<style>
  .embed_jsfiddle iframe {
    height: 400px;
  }
</style>
<div class="embed_jsfiddle">
  <script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/dark/"></script>
</div>
</code></WRAP>
<WRAP jsfiddle><html>
  <style>
    .embed_jsfiddle iframe {
      height: 400px;
    }
  </style>
  <div class="embed_jsfiddle">
    <script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/dark/"></script>
  </div>
</html></WRAP>
参考: [[sof>questions/43751317/how-do-you-embed-a-jsfiddle-as-an-iframe-in-html-only|How do you embed a JsFiddle as an iFrame in HTML only?]]\\

==== タブの順番および有効/無効の設定 ====
※ URL に <html><code>js,html,css,result,resources/dark/</code></html> を指定する。\\

**Result | HTML | CSS | JavaScript | Resources (External resources)** のタブ順\\
<WRAP mincode>
<code javascript>
<script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/result,html,css,js,resources/dark/"></script>
</code>
</WRAP>
<WRAP jsfiddle><html>
<iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/result,html,css,js,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html></WRAP>

**JavaScriptt | HTML | Resul** のみのタブ表示\\
<WRAP mincode>
<code javascript>
<script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,result/dark/"></script>
</code>
</WRAP>
<WRAP jsfiddle><html>
<iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html></WRAP>

参照: [[https://docs.jsfiddle.net/external-resources|External resources - JSFiddle Docs]]\\
　[[https://docs.jsfiddle.net/embedding-fiddles#changing-tabs-order|Changing tabs order - Embedding fiddles - JSFiddle Docs|]]\\

==== ライト/ダーク アピアランスの設定 ====
ライト アピアランス (URL の <html><code>light/</code></html> は省略できる)\\
<WRAP mincode><code javascript>
<script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/light/"></script>
</code></WRAP>

<WRAP jsfiddle><html>
<iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html></WRAP>

ダーク アピアランス (URL に <html><code>dark/</code></html> を付け加える)\\
<WRAP mincode><code javascript>
<script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/dark/"></script>
</code></WRAP>

<WRAP jsfiddle><html>
<iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html></WRAP>

==== ベースとして設定 (Set as base) ====
fiddle を更新していくと version 管理されているが、そのバージョンをベースとして設定すると URL にバージョン(**<version number>**)を指定しない限りはデフォルトでベースを参照するようになる。\\
<WRAP mincode><code javascript>
<script async src="//jsfiddle.net/<user id>/<fiddle id>/<version number>/[iframe: embedded|script: embed]/[tabs: js,html,css,result,resources]/[Visual: light/|dark/]"></script>
</code></WRAP>

ベースバージョンを表示\\
<WRAP mincode><code html>
<script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/result,html,js,resources/"></script>
</code></WRAP>
<WRAP jsfiddle><html>
<iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/result,html,js,resources/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html></WRAP>

バージョン 35 を表示 (バージョン 35 をベースにしたい場合はバージョン 35 の URL にアクセスして **[ベースとして設定] (Set as base)** をクリックする)\\
<WRAP mincode><code html>
<script async src="//jsfiddle.net/tomoyan596/af54jpzy/35/embed/result,html,js,resources/"></script>
</code></WRAP>
<WRAP jsfiddle><html>
<iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/35/embedded/result,html,js,resources/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html></WRAP>

バージョン 10 を表示\\
<WRAP mincode><code html>
<script async src="//jsfiddle.net/tomoyan596/af54jpzy/10/embed/result,html,js,resources/"></script>
</code></WRAP>
<WRAP jsfiddle><html>
<iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/10/embedded/result,html,js,resources/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html></WRAP>
参照: [[https://docs.jsfiddle.net/getting-started#setting-fiddle-as-base-version|Setting fiddle as Base Version - Getting started - JSFiddle Docs]]\\

===== レスポンシブ対応 =====
JSFiddle の埋め込みは表示幅が足りないと崩れる😅\\
スマホでは特に表示幅が足りないから崩れる😇\\
**JavaScript | HTML | CSS | JavaScript | Result | Resources (External resources)** のタブをすべて表示すると折り返して <wrap em>CSS | Result | Resources</wrap> がコードに被って台無しに…😱😇\\
<html>
<style>
  .wrap_smart-device {
    width: 340px;
    border: solid 3px;
    border-color: lightgreen;
    box-sizing: border-box;
  }
  .wrap_smart-device p.header {
    padding: 6px;
  }
  .wrap_smart-device div {
    padding: 0;
  }
  .jsfiddle_frame {
    transform: scale(1.014);
    transform-origin: top left;
  }
  .wrap_iframe_trim {
    width: 97%;
    overflow: hidden;
  }
  /*.wrap_smart-device p:empty,
  .wrap_smart-device p:blank {
    padding: 0;
  }*/
</style>
</html>

JSFiddle の [**< > Embed**] が生成する標準的なスニペットの例で、画面表示幅が <html><code>340px</code></html> のスマホなどの場合...🤔\\
<WRAP smart-device>
<WRAP mincode><code javascript>
<iframe width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</code></WRAP>
<html>
<iframe width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html>
</WRAP>

JSFiddle のタブをすべて表示した状態でも、折り返してコードに被らない為には、最低でも表示幅が <html><code>480px</code></html> は必要です🤔\\
<WRAP smart-device>
<WRAP mincode><code javascript>
<iframe width="480" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</code></WRAP>
<html>
<iframe class="jsfiddle_frame" width="480" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html>
</WRAP>

<html>
<style>
  .wrap_iframe_min-width1 iframe {
    min-width: 490px;
    border: solid 3px;
    border-color: hotpink;
    box-sizing: border-box;
  }
  .wrap_iframe_min-width1 {
    overflow-x: scroll;
  }
</style>
</html>

JSFiddle の標準的なスニペットが崩れないように対処する方法は、<html><code>iframe</code></html> タグに CSS で <html><code>min-width: 490px;</code></html> 指定して、<html><code>overflow-x: scroll;</code></html> を指定した <html><code>div</code></html> タグで <html><code>iframe</code></html> をラップしてスクロール可能にします🤤\\
<WRAP smart-device>
<WRAP mincode><code css>
<style>
  .iframe_min-width1 iframe {
    min-width: 490px;
    border: solid 3px;
    border-color: hotpink;
    box-sizing: border-box;
  }
  .iframe_min-width1 {
    overflow-x: scroll;
  }
</style>
<div class="iframe_min-width1">
  <iframe width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</div>
</code></WRAP>
<WRAP iframe_min-width1><html>
<iframe class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html></WRAP>
</WRAP>

同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭\\
<WRAP iframe_trim>
<WRAP iframe_min-width1><html>
<iframe class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html></WRAP>
</WRAP>

<html>
<style>
  .wrap_iframe_min-width2 iframe {
    min-width: 490px;
    border: solid 3px;
    border-color: hotpink;
    box-sizing: border-box;
  }
  .wrap_iframe_min-width2 {
    overflow-x: scroll;
  }
  @media (min-width: 433px) { /* >= 425px -> 433px */
  .wrap_iframe_min-width2 {
    overflow-x: hidden;
  }
  }
  @media (max-width: 490px) { /* <= 490px */
  .wrap_iframe_min-width2 {
    /* overflow-x: hidden; */
  }
  }
</style>
</html>

<WRAP smart-device>
<WRAP iframe_min-width2><html>
<p class="header">
Screen Resolution: <code id="screen_resolution"></code> pixel<br>
Browser Resolution: <code id="browser_resolution"></code> pixel
</p>
<!-- DokuWiki <html> 構文の空 <p> タグ要素の生成を抑制 Start -->
</p><!-- <html> 一旦終了 -->
<p><!-- <html> 再開始 -->
<!-- DokuWiki <html> 構文の空 <p> タグ要素の生成を抑制 End -->
<script>
  "use strict";
  let codeScreenResolution = document.getElementById('screen_resolution');
  let codeBrowserResolution = document.getElementById('browser_resolution');
  codeScreenResolution.innerText = screen.width + ' x ' + screen.height;
  codeBrowserResolution.innerText = window.innerWidth + ' x ' + window.innerHeight;
</script>
<iframe class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html></WRAP>
</WRAP>

<WRAP iframe_trim>
<WRAP iframe_min-width2><html>
<iframe class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</html></WRAP>
</WRAP>

===== パラメータ =====
<html>
<iframe id="jsfiddle001" class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/4vw7e2j5/embedded/result,js,html,css,resources/dark/?param1=value1&param2=value2" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
<script>
  let iframe = document.getElementById("jsfiddle001");
  iframe.contentWindow.hoge = "受け渡す値";
  window.hoge = "受け渡す値";
</script>
</html>
===== 参考文献 =====
[[https://codysaylor.com/notes/comparing-codepen-jsfiddle-cssdeck-liveweave-jsbin-dabblet/|Comparing Codepen, JSFiddle, JSBin, Glitch, Plunkr, CSSDeck, Liveweave, Dabblet | Cody Saylor]]\\