読者です 読者をやめる 読者になる 読者になる

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

Sublime Textから卒業?オンラインエディタのJS Binが便利すぎる

エディタ ツール

結構前からあるツールのようだが、便利だと思ったので書いておく。
ネットを見ていて「このコード試してみたいな」ということは良くある。で、その都度HTMLファイルを作成し、エディタで編集し、ブラウザで開くとしていると結構手間。


そんな手間を省いてくれるのがこのツール。その名も「JS Bin」。

JS Bin


HTML/CSS/JS用のオンラインエディタは結構存在すると思うが、以下の特徴がすばらしい。

JS Binのすばらしい特徴


各言語、コンソール、出力結果が1画面にまとまっている


僕にとって一番重要。いくつかの言語に対応していていも、それぞれ個別ページでの編集だと行ったり来たりに時間がかかる。その点JS Binは1画面に全てがまとまっているので、余計な手間がかからずノンストレス。


表示の切り替えがワンクリック


各言語やコンソール、結果の表示ON/OFFがワンクリックで可能。ドロップダウンメニューなどが多用されているサイトはよくあるが、あれって結構手間だよね。


リアルタイムに出力結果へ反映


ボタンを押す、ショートカットを実行する必要なく、コーディングしたとたんに結果へ反映。便利だなー。


JS Binにコードを保存可能


要ユーザー登録だが、作成したコードをJS Binに保存することが出来る。ブラウザさえあればどこからでもコーディング可能。Dropboxに頼らなくて良いのか。すばらしい。


コードをHTMLファイルとしてダウンロード可能


JS Binでコーディングしたコードは1つのHTMLファイルとしてダウンロードすることが可能(CSS、JSもstyleタグ、scriptタグで囲まれHTMLファイルに書き込まれる)。


僕はメインエディタとしてSublime Textを使っているが、HTML/CSS/JSの簡単なコーディングは全てこのJS Binに置き換わりそう。タイトルはさすがに言いすぎた。Sublime Text大好き、卒業できませんごめんなさい。


以下にJS Binで使えるショートカットをまとめておく(Helpにショートカットが記載されているが、英語なので日本語訳した)。ちなみに僕はWindowsユーザーなので、Macでは異なるかもしれない。

ショートカット


ctrl + [num]


アクティブにするエリアの選択、または表示ON/OFF。"ctrl + 1"はHTML、"ctrl + 2"はCSS、"ctrl + 3"はJS、"ctrl + 4"はコンソール、"ctrl + 5"は結果。


esc, ctrl + [num]


escを押すと、直後のJS Binでのctrl + [num]ショートカットを無効化する。これはブラウザのショートカットを使用出来るようにするため(Chromeだとctrl + [num]はタブ切り替えのショートカット)。


ctrl + enter


JSの実行。


Ctrl + l


コンソールのクリア。


ctrl + \


ナビゲーションバーを表示/非表示。


ctrl + /


カーソル行をコメントアウトする。文字列を選択している場合は、その文字列のみコメントアウト。


cmd + [


インデント。


cmd + ]


インデント解除。


tab


入力補完。JSのみ候補表示&入力補完。HTMLはタグ化、CSSは: ;を補完。


ctrl + s


コードを保存。
(要ユーザー登録(?))


ctrl + shift + s


現在のコードを元に新規ファイル作成。
(要ユーザー登録)


いいツールを見つけると嬉しいよね。僕はブラウザに一行だけブックマックバーを設けており、このスペースに配置するサイトを厳選している。JS Binはもちろん配置した。

広告を非表示にする