2015年4月30日木曜日

ACE editor で ライブビュー可能な markdownエディタ を語りき

概要

 JavaScriptの有名どころ ACE を使ってコーディング少なく markdown編集アプリを作る

対象者

 markdwonを使うだけなら誰でも。つかうのも JavaScript初心者

背景

 最近cloud9 IDEやEclipse Orionなどの、WEB上でソフト開発をする webide なるものが気になって仕方ないのだけれども、今日のニュースで「Visual Studio Code が Mac や Linux で動く」という話を聞き、今どき専用のイメージを作るってのは無いだろうと軽く違和感を感じた。[しばやん雑記]を見て納得。かいつまんでしまうと、Github Atom, Node.js+chromium とJavaScriptで作られてるようだ。実際のコンパイラの部分は不明だが、IDEのほとんどがそれで済むというのは、時代は変わったのだろう。
 彼らの進む方向にも興味があったが、それはそれで深いので置いておき、前述の cloude9 IDEのバックエンドであるACEを使った簡単なアプリを作ってみて、JavaScriptは簡単だと理解してもらおう。

 それには我が社でも最近はやってきてる(と信じている) markdown形式のドキュメントエディタを作ってみるのが良いだろう。ライブビューできればなおさら良い。Web形式のライブビューエディタは、DillingerMarkdown Edit があるがライブビューとスクロール同期が甘いか無いレベル。理由はわからなくないが、わからないことにして作ってみる


完成形


作ったものをgithubの「 ここ 」にアップしているが、プログラムはレイアウトのHTML含めても100行も行かないのにそれなり。
ダウンロードして、index.htmlを開けば、おうちでも使える。



実装


非常にシンプルなので、 「gitのソース」を見てもらったほうが早いのだが、必要なところをかいつまんで説明する。
(gist-itというのをはじめて使っているので行数が出ないのは許してもらいたい)

左側のエディタを作る


ACEは「pre」タグに挟まれた物を


と設定することで、markdownのシンタックスで強調表示してくれる。(ここでは、aceのエディタをeditorという変数に入れてます)
これで完成。実にシンプル


右側のライブビューを作る


ライブビューとは、変更がある度にプレビューを更新すること。ACE側が変更時にコールバック関数を呼ぶので、その中で文章をmarkdwonに変換して右側に貼り付ける

一番めんどくさいと思われたスクロールもこれまた、コールバックで処理を詰めれば終わり

これで完成。

結論

というわけで、拍子抜けするほど簡単。これは言うまでもなくJavaScriptには山のようにソフトウェア資産があること。それを効率的につなぎ合わせたに過ぎない。先人に感謝しつつ。久しぶりの更新を終わろう