| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン |
| javascript:jsfiddle [2022/09/17 04:50] – [レスポンシブ対応] ともやん | javascript:jsfiddle [2024/09/03 18:09] (現在) – [ベースとして設定 (Set as base)] ともやん |
|---|
| |
| ==== ライト/ダーク アピアランスの設定 ==== | ==== ライト/ダーク アピアランスの設定 ==== |
| <WRAP mincode> | |
| ライト アピアランス (URL の <html><code>light/</code></html> は省略できる)\\ | ライト アピアランス (URL の <html><code>light/</code></html> は省略できる)\\ |
| <code javascript> | <WRAP mincode><code javascript> |
| <script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/light/"></script> | <script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/light/"></script> |
| </code> | </code></WRAP> |
| <WRAP jsfiddle><html> | <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> | <iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe> |
| |
| ダーク アピアランス (URL に <html><code>dark/</code></html> を付け加える)\\ | ダーク アピアランス (URL に <html><code>dark/</code></html> を付け加える)\\ |
| <code javascript> | <WRAP mincode><code javascript> |
| <script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/dark/"></script> | <script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/dark/"></script> |
| </code> | </code></WRAP> |
| <WRAP jsfiddle><html> | <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> | <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> | </html></WRAP> |
| </WRAP> | |
| |
| ==== ベースとして設定 (Set as base) ==== | ==== ベースとして設定 (Set as base) ==== |
| fiddle を更新していくと version 管理されているが、そのバージョンをベースとして設定すると URL にバージョン(**<version number>**)を指定しない限りはデフォルトでベースを参照するようになる。\\ | fiddle を更新していくと version 管理されているが、そのバージョンをベースとして設定すると URL にバージョン(**<version number>**)を指定しない限りはデフォルトでベースを参照するようになる。\\ |
| <WRAP mincode> | <WRAP mincode><code javascript> |
| <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> | <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> | </code></WRAP> |
| </WRAP> | |
| |
| <WRAP mincode> | |
| ベースバージョンを表示\\ | ベースバージョンを表示\\ |
| <code html> | <WRAP mincode><code html> |
| <script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/result,html,js,resources/"></script> | <script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/result,html,js,resources/"></script> |
| </code> | </code></WRAP> |
| <WRAP jsfiddle><html> | <WRAP jsfiddle><html> |
| <iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/result,html,js,resources/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe> | <iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/result,html,js,resources/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe> |
| |
| バージョン 35 を表示 (バージョン 35 をベースにしたい場合はバージョン 35 の URL にアクセスして **[ベースとして設定] (Set as base)** をクリックする)\\ | バージョン 35 を表示 (バージョン 35 をベースにしたい場合はバージョン 35 の URL にアクセスして **[ベースとして設定] (Set as base)** をクリックする)\\ |
| <code html> | <WRAP mincode><code html> |
| <script async src="//jsfiddle.net/tomoyan596/af54jpzy/35/embed/result,html,js,resources/"></script> | <script async src="//jsfiddle.net/tomoyan596/af54jpzy/35/embed/result,html,js,resources/"></script> |
| </code> | </code></WRAP> |
| <WRAP jsfiddle><html> | <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> | <iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/35/embedded/result,html,js,resources/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe> |
| |
| バージョン 10 を表示\\ | バージョン 10 を表示\\ |
| <code html> | <WRAP mincode><code html> |
| <script async src="//jsfiddle.net/tomoyan596/af54jpzy/10/embed/result,html,js,resources/"></script> | <script async src="//jsfiddle.net/tomoyan596/af54jpzy/10/embed/result,html,js,resources/"></script> |
| </code> | </code></WRAP> |
| <WRAP jsfiddle><html> | <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> | <iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/10/embedded/result,html,js,resources/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe> |
| </html></WRAP> | </html></WRAP> |
| </WRAP> | |
| 参照: [[https://docs.jsfiddle.net/getting-started#setting-fiddle-as-base-version|Setting fiddle as Base Version - Getting started - JSFiddle Docs]]\\ | 参照: [[https://docs.jsfiddle.net/getting-started#setting-fiddle-as-base-version|Setting fiddle as Base Version - Getting started - JSFiddle Docs]]\\ |
| |
| </html></WRAP> | </html></WRAP> |
| </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¶m2=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]]\\ | [[https://codysaylor.com/notes/comparing-codepen-jsfiddle-cssdeck-liveweave-jsbin-dabblet/|Comparing Codepen, JSFiddle, JSBin, Glitch, Plunkr, CSSDeck, Liveweave, Dabblet | Cody Saylor]]\\ |
| |