ブラウザベースでJavaScriptを実行できるサイトのメモです。だいたいjQueryは取り込んで使える様子。
自分でブラウザでプレビューするには色々制限かかるし、かといってセキュリティ設定甘くするのもな、という感じで探したらあったので、そこから使っています。
なんかブログに埋め込む機能を持っているものもあるようなので、コードのTipsとかを書いたときは、使っていきたい所存です。
というわけで以下、あげていきます。
広告
JsBin
サイトへのリンク:
できること:リアルタイムプレビュー・コンソール表示
横並びにHTML,CSS,JavaScript,Consoleと表示できるのがGoodです。他にも機能があるのかもですが、さくっとプレビューするにはこれ。ただ、ちょっとjQueryとかのライブラリ追加が分かり難いかなあ。
jsFiddle
サイトへのリンク:
できること:その場での保存とプレビュー・コンソールは開発ツールから残る・forkなどの共有機能が充実
コードを共有するためのサイトらしい。なおティラノスクリプトではjQuery2.0.3なので、外部CDNから色々追加したりして使っています。
あと見やすさ。すごい見やすい。過去にバックするのも、アドレスの数字をバックさせるだけでやりやすい。
個人的に名前も好きです。
jsdo.it
サイトへのリンク:
できること:ファイル保持と、保存と、プレビュー。ライブラリは数が少ない…かな? まあjQueryだけでいえばCDNからとかでなんとかなるでしょう。ファイルをドラッグドロップでなんとかできるようですし。
みやすさだと上2つかなあ。でも、日本製だし、その辺の安心感はあるかと思います。面白法人カヤックさんってなんか色々作ってるんだなあ感。
CodePen
サイトへのリンク:
できること:プレビューと保存と共有。
ばーっとサンプルなんかを見せるのにいいかもしれません。というか、以前jQueryのプラグイン関係で見かけましたが、その場合は使い方ごとコードになってました。いろんなことができるもんだ。
トップページにいろんなコードのプレビューが出てたりします。よりプレビューとか紹介に特化している印象。
paiza.IO
サイトへのリンク:
できること:ファイルホスティング、いろんな言語の実行
HTMLとCSSとJavaScriptを組み合わせたやつ書くのには向いてないかなという印象。割と私には使い難かったです。
番外
cloud9
サイトへのリンク:
できること:だいたいなんでも
こちらわりと何でも出来るサイトになります。というか、あれです。ブラウザベースの開発環境です。ちょっと書いて実行って言うより、ゴリゴリ開発できます。
WebIDEというそうです。時代は進歩したものですね。
尚探した理由としては、ティラノスクリプトの設定画面をカスタムしたかったときに、ティラノライダーだけだと不便だったからという理由です。サクサク反映プレビューできるのは実に良いものです。