先日、コードの動作をサクッとチェックができるjsdo.itというサービスを使ったら、ちょっとしたテストが手軽になりました。
で、こういったサービスには、動作チェックしたコードをブログなどに埋め込んで、動作状態を不特定多数の人に共有し、見てもらう機能もあります。
僕もせっかく最近こういったサービスを使い始めたので、コードをテストした時は、ブログ記事に埋め込んで共有して再利用できたらいいかなと思っています。
ただ、こういった動作テストサービスは結構ありますが、記事に埋め込んで、表示させるにしても、なるべく自分好みで訪問者に見やすいものが望ましいです。
なので、いろいろあるサービスの埋め込み動作を、比べるため以下にまとめてみました。
photo by Dmitry Baranovskiy
目次
jsdo.it
無料で使用できる国産サービス。動作テストと埋め込み表示は、登録しないと利用できません。Emmet利用可。
埋め込み動作
デフォルトでは上記のような表示になります。カラムの幅に合わせるには、幅などを設定してる必要があります。
埋め込みオプション
埋め込みは、どのタブを表示するかや、幅と高さを指定することができます。
CodePen
最近最もよく見かけるのがCodePenです。登録しなくても、動作確認を行うことができますが、無料登録をすると埋め込みも使えるようになります。Emmet利用可。
埋め込み動作
See the Pen jEWENe by yh (@yhira) on CodePen.
こちらは、デフォルトでカラム幅いっぱいに埋め込みエリアが表示されます。デフォルト状態でかなり見やすくなっています。
埋め込みオプション
埋め込みオプションも豊富で、テーマの変更、デフォルト表示タブ、アニメーション、表示エリアのデザイン変更なども行うことができます。
JSFiddle
JavaScriptライブラリが豊富なテストサイト。こちらは、登録をせずとも利用することができ、埋め込みも行うことができます。Emmet利用可。
埋め込み動作
こちらはコードを編集して動作オプションを変更する必要があります。上のものは何もしていないデフォルトのものです。
埋め込みオプション
埋め込みオプションは、Embedding the fiddleを参考に自前で行わなければなりません。
動作結果をアクティブにして、CSSとHTMLタグのみ表示とする場合は、以下のように書きます。
<iframe height="300" src="http://jsfiddle.net/ooswvarx/embedded/result,css,html" frameborder="0" width="100%" allowfullscreen="allowfullscreen"></iframe>
URLは、赤字部分を追加しています。
http://jsfiddle.net/ooswvarx/embedded/result,css,html
JS Bin
JS Bin – Collaborative JavaScript Debugging
登録不要で、動作テストや埋め込みを行うことができます。スッキリとしたデザインで、パネルの表示/非表示を切り替えることができます。Emmet利用可。
埋め込み動作
タブの表示非表示を、閲覧ユーザーが切り替えられるのが特徴です。あと、コンソール表示があるのでエラーも表示させることができます。
埋め込みオプション
埋め込みオプションでは、表示するタブを切り替えることができます。
CSSDeck
登録なしで動作テストはできますが、埋め込みを行うときはユーザー登録が必要です。Emmet利用可。
埋め込み動作
こちらは、JavaScriptなど記入していない場合は、自動的に表示されないようになります。こちらも表示/非表示を切り替えるタイプのタブです。スッキリとしたシンプルな機能で見やすいです。
埋め込みオプション
現時点では、埋め込みオプションは見当たりませんでした。
Html5 Snippet
登録不要で動作テストを行うことができます。ただ、ブログなどに埋め込むには、Google認証などからログインする必要があります。このサービスは、Emmetが利用できません。
埋め込み動作
埋め込みは、行うことはできるのですが、サイトのヘッダーに外部ファイルを呼び出して、さらにjQueryコードを記入する必要があったりして結構面倒くさいです。
結構編集が必要だったので、面倒くさくて載せませんでした。
まとめ
サイトに埋め込み機能がついている主なサービスはこのような感じです。
ブログなどで動作コードを埋め込んで動作表示させたい場合、これらのサービスは重宝します。
中でも、ユーザー登録して利用するなら以下の順が、編集のしやすさ、埋め込み設定のしやすさ、読者の見やすさの観点からお勧めです。
ユーザー登録とか面倒くさいという場合には、以下の順がお勧めです。
ここに紹介したものは全てEmmetが利用できるので、コードをサクサク編集して動作確認することができるので、ちょっとしたコードを試したり、公開したいときにはお勧めです。
なお今回は比較用テスト素材として、以下を利用させてもらいました。
