僕は、HTMLやCSSを書くとき、コードを長々と打ち込むのが面倒くさいので、Emmetを利用しないとあまり書く気がしません。
Emmetとは、短いコードを書いて展開することで効率よく編集できるツールなんですが、これで1度楽を覚えると、もう前には戻れません。
ですので、僕はHTML・CSSを編集するときは、Emmetが利用できる以下のテキストエディターを利用しています。
- Sublime Text
- EmEditor(プラグインでEmmetの前身、Zen-Codingが使える)
ただ、これらのエディターは、ガッツリ書く時は便利なんですが、数行程度のCSSのカスタマイズコードだけ書きたいときなどは、「新規ファイルを作成→一覧から書式をCSSに選択」という作業をする必要があるので、ちょびっとだけ面倒です。
そんな、「ちょっと面倒だな」と日々思っていた時に、jsdo.itというサービスを知り、使ってみたら、これがとても良かったので紹介です。
目次
jsdo.itとは
jsdo.it は、ブラウザ上でJavaScript、 HTML5、 CSSを書き、共有するサービスです
サイトのトップにはこうあります。
jsdo.itはWEBデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのための、コードコミュニティです。
書いたその場で動かせるオンラインエディターだから、コードはWeb上に保存、作品として公開できます。
基本的には、コードを書いて作品として公開するコードコミュニティーです。
けれど、ちょっとしたJavaScript, HTML5, CSSを書いて動作テストする環境としても優秀です。
jsdo.itに無料登録して、コーディング画面に行くと以下のような作りになっています。
主に画面は、コードなどを書く「エディター部分」とテスト動作を確認する「動作確認部分」にわかれています。
この、「エディター部分」の「HTML」と「CSS」ではデフォルトの状態でEmmetが利用できます。
これが、ちょっとしたHTMLやCSSを書きたいときに重宝します。
Emmetを利用してみる
jsdo.itで試しにEmmetを利用してみます。
HTMLで利用
例えば、10個の順序なしリストを作るとします。
そのときは、エディターのHTMLタグを選択して、エディターに以下のように入力してタブキーをします。
ul>li*10
タブキーを押すと、以下のように展開されます。
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
このように、少ないコードでHTMLを書くことができます。
CSSでの利用
CSSで、あるクラスにボーダーを設定するとします。
CSSを書くときは、CSSタブを選択し、以下のように入力し、タブキーを押します。
.hoge{ bd+ }
タブキーを押すと以下のように展開されます。
.hoge{ border: 1px solid #000; }
Emmetは、このように短縮コードを打ち込んで、タブキーを押して展開させることで、少ないコードでより効率よくコードを書くことができます。
今回紹介したものは、極々一部のものでEmmetでは、ほぼ全てのHTML要素とCSSプロパティで短縮コードが使えます。
詳しくは、以下のチートシート(コード表)に全て書いてあります。慣れないうちは、これを見ながら打っているうちに利用頻度が多いものは、自然と覚えます。
その他にも、JavaScriptをJSX、CofeeScript、TypeScriptで書いたり、CSSをSCSS、LESSで書いて動作確認することもできるのでコードを手軽に書く仕組みがそろっています。
jsdo.itのおすすめな設定
jsdo.itの設定でいくつか便利だったものを紹介します。
コードを非公開にする
jsdo.itは、基本コード共有サイトなので書いたコードはパブリックになりますが、コードを公開しないプライベートモードにも設定できます。無料の国産サービスで、コードの非公開が設定できるのはここくらいではないかと思います。
プライベートモードにするには、「Properties」ボタンを押します。
あとは設定画面の一番下の方にある「Visibility」の「Private」にチェックを入れるだけです。
エディターのテーマを変更
あと、通常は以下のように白地に黒色で表示されるエディターのカラーテーマも「▲」ボタンから変更できます。
「▲」ボタンを押すと、以下のように3つの中からテーマが選択できるので、好きなものを選択します。
- Default
- Ambiance
- Blackboard
以下のように目に優しいテーマに変更することもできます。
jsdo.itへの登録方法
jsdo.itは、会員制なので無料登録しないと利用できません。
登録制なので、いろいろと面倒くさい個人情報とかを記入しなければいけないのかと思ったら、SNSアカウントを持っていれば、一切キーボードを打つことなく登録することができます。
登録の一連の作業を紹介しておきます。
jsdo.itトップに移動したら、まずは赤色の「Start Coding」ボタンを押します。
あとは好きなサービスの認証からログインすればOKです。
僕は、Twitterのアカウントでログインしました。
ログイン後は、ユーザー名登録画面が表示されますが、僕はTwitter IDをそのままユーザー名にしたのでテキスト入力をする必要は一切ありませんでした。
まとめ
jsdo.itは、こんな感じで手軽に始めることができます。
僕は使ってみて、以下のような時に便利でした。
- WordPressのちょっとしたCSSカスタマイズコードを書いて管理画面から適用するとき
- 掲示板やフォーラムなどにHTML・CSSの使い捨てコードを書き込むとき
- 使い慣れたエディターがない環境でコードを書くとき
もちろん、いつも使い慣れているエディターとまではいきませんが、Windowsのメモ帳などに書くよりは、かなり手軽にコードを書くことができます。