vimでEmmetなCoffeeScriptとjavascriptのプレビューエディタを作ってみた

結構前に自分達で使うために弟と作ったものですが、せっかくなので公開します。
CoffeeScriptとjavascriptの練習をするのによかったら使ってみてください。

js用のemeco

coffee用のemecoffee

エディタにはCodeMirrorを使用しています。

使用にあたって、注意点があります。

・Macを前提に、CocoaとEmmetをガンガン使うことを想定して作りました
・エディタはvimです
・矩形ビジュアルモードがありません
・テキストオブジェクトの操作も全然充実していません

Emmetについては、チートシートと、CodeMirrorのEmmetを参照してください。

vimの操作方法がわからない方は、

$ vimtutor

とコマンドを打てば、vimの基本操作のチュートリアルが開きます。
emecoと契約してvimmerになってよ！

ソースコードはここにあります。
cloneしたら、htmlをブラウザで開けてみてください。

画面左側がエディタで、右側が表示用ブラウザです。
画面を開いた時点でhtmlエディタにフォーカスがあたってます。

操作方法の説明はヘッダーのロゴの右側の「What is emeco?」をクリックしてください。
こんなんが出ます。

vimのemmet展開なのに、キーバインドが<C-y>,でない点に関しては目をつぶってくださいｗ

htmlとcssは、打鍵のたびに反映します。
jsとcoffeeは実行時に反映します。

Emecoのcss、js、coffeeのエディタに書いたソースは、htmlエディタにscriptタグやlinkタグを書かなくても右のブラウザ上で反映されるようになってます。
また、jQueryとbootstrap3が最初から動くようになっています。

エディタ上部のLoad fileは、ローカルのファイルを読み込んで開いているエディタに内容を書き出します。
Saveは<C-s>でも代用可能で、開いているエディタをローカルに保存します。
coffee、jsのときのみ表示されるRunは、<C-r>でも代用可能で、コードを実行します。

説明ばっかりじゃよくわからないと思うので、実際に使ってみましょう。
ここからはemmet初心者を対象に、emmetの入力まで書いていこうと思います。
説明が丁寧すぎてくどいので、慣れている方は戻る推奨です。

emecoffee.htmlを起動します。
起動時は、htmlエディタにフォーカスが当たっています。

iでインサートモードにして、html:5と入力してtabを押してください。
emmetが展開されて、こうなります。

head内のtitleにカーソルが当たっますが、とりあえずここはどうでもいいので、bodyの中を書き換えます。
vimmerがカーソル移動をnomalモードで行うことは世界の常識ですが、emecoを使うときは、<C-f>、<C-b>、<C-n>、<C-p>を使っての移動もオススメです。

bodyタグの中にカーソルを移動したら、ヘッダーを作ってみましょう。
左側にh2を置いてロゴ風に、右側にgoogleへのリンクでも貼って雰囲気を出します。
それでは、header>h2#logo+a[href="http://www.google.com"]と入力して、カーソルを行末に移動し、tabを押してください。
行末への移動も、<C-c&gtAと<C-e>どちらでもいいです。
こうなります。

タグの中身を適当に埋めます。
emmet展開した時点でh2の中にカーソルがあたっているので、emeco練習とでも入力して、Ctrlとoptionと右を同時押ししてください。aタグの中にカーソルが移動します。Ctrl-option-右左でタグ間を移動できます。
aタグの中にはgoogleとでも書いておきます。
こうなります。

htmlが反映されてます。

ヘッダーが用意出来たので、画面左側にサイドバーを置きましょう。
サイトバーにはとりあえず、amazonへのリンクでも入れておきます。
それだけでは寂しいので、pタグにサイドバーと書いておきます。
<C-c>でnomalモードに移行して、joと入力してください。ヘッダーの下から入力ができます。見やすくするため、１行開けます。enterを押しましょう。
そこに、div#sidebar>p+a[href="http://www.amazon.co.jp"]と入力し、カーソルを末尾に移動した後、tabを押してください。
こうなります。

pタグの中にサイドバー、aタグの中にamazonと書いておきます。

最後に、main領域を作って、canvasを置きます。
一行開けて、div#main>canvas#cv[width=500 height=500]と入力してemmetを展開して下さい。

htmlとプレビュー画面はこうなりました。

次は、cssを書きます。
htmlエディタにフォーカスがあたっている状態で<C-t>を押すと、cssエディタに移動します。
こんな感じ

最初にヘッダーをそれっぽくします。
header {}をこんな感じにして中にカーソルを合わせて、スペースを２回押してください。

準備ができたら、cssを書きましょう。
背景色を設定します。bgcと入力してtabを押してください。
bacground-color: #fff;になるので、#fffをdarkblueに書き換えます。
darkblueのeを入力した瞬間に色が変わると思います。

上の隙間がキモいです。ピッタリくっつけましょう。
<C-c&gtoで下の行から入力を開始して、po:aと入力してtabを押してください。
こうなります。

形が大変なことになりました。
画面の端まで伸ばしましょう。
下の行から入力を開始して、w:100%と入力してtabを押してください。
こうなります。

h2とaタグが縦に並んじゃってるので、横に並べましょう。
下の行に移動して、dと入力してtabを押した後、blockをflexに変更してください。
変更した瞬間にgoogleが横に行きます。
ついでに、googleを右端に持って行きましょう。
下の行に、justify-content: space-between;と入力します。emmetが見当たらなかったですｗ
これでgoogleが右端に行きました。
ブラウザにカーソルを乗せて、左にスワイプすると、ブラウザが移動します。

配置はこんなもんにして、文字の色を変えましょう。
下の行に、c<Tab>と入力して、#000をsnowにします。

次はh2をいい感じに配置します。

#logo {

}

の形を作り、中にml<Tab>1em、mt<Tab>0.3emと入力してください。
こうなります。

これでヘッダーは終わりにします。
次はサイドバーを配置します。
今までに入力したプロパティは入れちゃいます。

#sidebar {
  position: absolute;
  margin-top: 10em;
  margin-left: 1em;
}

次に、ボーダーを引きます。
bd<Tab>でborder: ;を入力して、5px solid lightgrayと入力してください。
こうなります。

このままじゃごついしバーっぽくないので、ボーダーの角を丸めて、長くします。
border-radius: 10px;と入力してください。
本物のvimではbdraで行けるんですが、emecoでは行けませんでしたｗ
そうしたら、h:30%<Tab>で長くしましょう。
サイドバーはこんな感じ。

cssの最後はキャンバスの配置です。
#mainをいじって配置したいところですが、先にキャンバスに色をつけてどこにあるかわかるようにします。

#cv {
  background-color: black;
}

こんなことになりました。

かぶらないように配置しましょう。
#cvの上に以下のコードを配置します。

#main {
  position: absolute;
  margin-top: 10em;
  margin-left: 15em;
}

最終的にこうなりました。

最後にCoffeeScriptでキャンバスをいじります。
キャンバスをクリックしたら左から右に丸が移動するコードを書いてみます。
CoffeeScriptはEmmetがないので、まとまった単位でコードを書きます。

まず、全てのDOMの読み込みが終了したら動くように、$.readyを書きます。

$ ->

次に、クリックするたびにDOMを取得するのもめんどくさいので、広いスコープでキャンバスを取っておきます。

  # キャンバスを取得
  cv = $('#cv')[0]
  ctx = cv.getContext '2d'

次に、丸を左から右に移動する関数を書きます。
関数を書く前に、話を簡単にするため、広いスコープに円のx座標とタイマーIDを取っておきます。

  # 円のx座標とタイマーID
  circleX = 0
  timerID = 0

それでは、関数本体を書きます。

  moveCircle = ->
    # キャンバスを初期化
    ctx.clearRect 0, 0, 500, 500

    # 円が画面外に移動したら終了
    if circleX > 500
      circleX = 0
      clearInterval timerID
      return null

    # 白い円を描画
    ctx.fillStyle = 'white'
    ctx.beginPath()
    ctx.arc circleX, 250, 10, 0, Math.PI * 2, false
    ctx.fill()
    
    # 円のx座標を足す
    circleX += 10

clearIntervalなどの関数は、入力の途中で<C-y>を押せば入力補助ができます。

そうしたら、クリックイベントにイベントハンドラをセットします。
繰り返し関数を呼ぶため、setIntervalを使います。

  # キャンバスにイベントハンドラをセット
  $(cv).on 'click', ->
    timerID = setInteval moveCircle, 10

入力が終わったら、<C-r>かRunボタンをクリックしてください。
CoffeeScriptが実行されます。

実行したら、キャンバスをクリックしてください。
左から右に円がスーッと移動します。

ひと通り完成したので、保存しましょう。
<C-s>を押してください。

こんな感じになります。

適当なファイル名を入力して、enterかOKを押してください。
拡張子は入れても入れなくてもいいです。
入れない場合、開いているエディタの演算子が補完されます。

こんな感じにクライアントサイドのプログラミングをするときにちゃちゃっと使っていただけると幸いです。