JavaScriptのエディタ、Aceがなかなかすごい件
※2013年6月22日追記※
なぜかこの記事に「javascript エディタ」の検索ワードで来る人が非常に多く記事内容とマッチしておらず申し訳ないので、javascriptの開発環境を求めて来てしまった人用のまとめを作っておきました。
JavaScriptのエディタ/IDEまとめ
http://matome.naver.jp/odai/2137182325409098101
上のまとめはJavaScript製エディタを求めてきた人用のリンクも少し置いてあります。
ちなみに自分はチープな開発環境なため、IDEやKomodo Editは重いのでEmEditorとSublime Text使ってます。
※ここまで※
既にいろんなレビューは出ているけど、俺は今日たまたま知ったのでメモがてら。
JavaScriptのコードエディタで、Aceってのがある。
http://ajaxorg.github.io/ace/
MOONGIFTも結構早くにレビューしてた。
http://www.moongift.jp/2011/09/20110904/
すんごいざっくりだけどね。
今日触った感じ、これまで見たWebエディタの中で群を抜いてよかった気がしたので、メモがてら。
Aceを使ったjgame.jsのPlayGround
論より証拠というかなんというか、Aceを使ったjgame.jsのPlayGroundを作ってみたのでまあ見てくれ。
http://tsuge.sub.jp/jgame.js/jgeditor/
これの、
左側にあるやつがうわさのAceだ。
なんだこのSublime Textって感じだけど、俺がテーマをSublime Textに合わせただけ。
AceはTypeScriptのマークアップもデフォルトで入ってる分、Sublime Textより出来る人なイメージ。
非常にさくさく動くので見てやってほしい。これまでのリッチテキストエディタ系のイメージと大分違う。
400万行まで編集出来ると豪語してるらしい。
Aceを使ったTypeScriptのPlayGround
jgame.jsのはまあそれはそれとして、俺が一夜漬けで作ったこんなのよりAceを使ったTypeScriptのPlayGroundって意味だと、もっとすごいのがある。
これだ。
http://hi104.github.com/typescript-playground-on-ace/
動作がいまいち安定しないけど、これの何がすごいって「入力補完」が出てくる。
これ出せたらTypeScript最強でしょうと。
こんなレベルのJavaScriptエディタ今まであったっけ。
もうちょっと動作安定してくれたらすごいものだよこれは。日本人が作ったみたい*1。
俺も時間出来たら、jgame.jsのPlayGroundに組み込めないかやってみようかなと思う。
Aceの使い方
そんなすごいAce君だけど、公式サイトが日本人には鬼門でちょっと使いにくい。
http://ajaxorg.github.io/ace/
公式から辿れるAceのリポジトリはgithubにある。
https://github.com/ajaxorg/ace
あるんだけど、ここは無視して、こっちを落とそう。
https://github.com/ajaxorg/ace-builds
画面左上の方のZIP辺りでどうぞ。
この中に入ってるsrc、src-noconflict、src-min、src-min-noconflictのどれかを使う。minが好きならminで。
noconflictとsrcの違いは、noconflictは衝突しないようrequireとかdefineとかの関数にも名前空間としてaceっていうのを切って、srcは切ってない。よくわからなければsrc-noconflictがお薦め。
buildの中身を落とすとeditor.htmlってのが同梱されているので、それと似たような感じのコードを書けば出来上がり。
エディタのデータをとるにはeditor.getValue()でとれるとか、ショートカットの拡張も結構自在だとか、その辺のはjgame.jsのPlayGroundサンプルが参考になると思うので、適当にソース覗いていただければということで。
そろそろフルHTML5の世界の始まりではないかなと
俺がHTML5に専念している理由って、iPhone主導でネイティブアプリ中心になったスマフォの時代って長く続かず、いずれHTML5だらけになるんじゃないかと思っていたからではあるんだけど、正直もうちょい先だと思ってた。
でもAce見たらもうローカルで動かすSublime Text2からAceに移行するのにそんな困る事ないし、いつの間にかすぐそこまで来てんじゃないかなと。
1, 2年とか。無いかな。
*1:AceではなくAce+TypeScriptを日本人が作ったという意味