ブログにソースコードを載せたい js実行環境

コードの出力結果も確認できるWebサービス

前回:ブログにコードを載せたい 別法

https://weekend-v.work/blog/wp/archives/22

Code Penは、HTML,CSS,jsを書けて、すぐに出力結果を確認できる。

デバッグもあり、cssプリプロセッサにも対応、ブログに貼り付けて共有できる優れものである。

そういったオンラインエディタは、Code Pen以外にもいくつかあった。

  • JsBin

これは、有料アカウントでないと、シェアはできない。

良いところは、貼り付けた先で、誰でも編集でき、すぐに出力結果に反映されるところだろう。

さらに、Gistからのimport,exportにも対応している。

JS Bin on jsbin.com

有料アカウントでなければ表示されない。

JsBinのサイトで、出力結果だけ確認するなら他のサイトと変わらないだろう。

  • Plunker

このサイトは他の人が書いたコードを一覧で見ることができ、チャットスペースなどもある。

ライブラリの導入も右のメニューから可能。

http://embed.plnkr.co/Ss7YyqZPOwyBUuFipmYp/
URLでも共有できる。

plunkerの埋め込み方がわからない。。。。。。。

  • jsfinddle

アカウント作らないと共有はできない。

使いやすいと言えば使いやすい。

コードを書いて、Saveして、 Forkすると、メニューにEmbedが出るので、そこからスクリプトタグをコピーして、テキストエディタに貼り付ける。

  • CodeSandBox

登録不要、自分でファイルを作りコードを書いていくタイプ。

Githubとの連携、デプロイ、共有と色々できる。

共有はShareを押すと、URLやiframeタグが出てくるので、それを貼り付ける。

これも、ほかと同様、jsを動かせます。

そして、共有もできるのですが、Embed コードがなかなか出てこないので、今回は、貼り付け出来ませんでした。

以上、有名どころのオンラインエディタでした。

参考:

http://senta.me/blog/2015-03-08/html5-code-playground/