コードの出力結果も確認できるWebサービス
前回:ブログにコードを載せたい 別法
https://weekend-v.work/blog/wp/archives/22
Code Penは、HTML,CSS,jsを書けて、すぐに出力結果を確認できる。
デバッグもあり、cssプリプロセッサにも対応、ブログに貼り付けて共有できる優れものである。
そういったオンラインエディタは、Code Pen以外にもいくつかあった。
-
JsBin
これは、有料アカウントでないと、シェアはできない。
良いところは、貼り付けた先で、誰でも編集でき、すぐに出力結果に反映されるところだろう。
さらに、Gistからのimport,exportにも対応している。
有料アカウントでなければ表示されない。
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/