きよくらの備忘録

「三日坊主と呼ばせない!日記」改め。主にソフトウェア開発関連の話題。

MarkdownエディタとしてのVS Online ”monaco”

本エントリは Visual Studioアドベントカレンダー 2014 2日目対応のエントリです。

今回は、ブラウザ上で動作する開発環境Visual Studio Online ”monaco”を "ブラウザで動作する高機能Markdownエディタ(Gitにも普通に対応!)"という観点でご紹介してみたいと思います("Visual Studio" OnlineなのでOKですよね(ォ )。

 

Visual Studio Online ”monaco”とは?

ググると色々記事は出てくると思いますし、今回は時間の都合上割愛。 例えばこちらの記事などを見ていただくと色々と詳しく解説されていると思います。

 

Markdownエディタとしてのmonaco

そのmonacoなのですが、Markdownエディタとしてもかなりいい感じです。個人的にはクライアントにインストールするタイプのMarkdownエディタと比較しても割とそん色がないんじゃないかと思っています。どのあたりがいい感じなのかを、以下でご紹介していきたいと思います。

 

MD記法のシンタックスハイライト

まずはMD記法のシンタックスハイライトに対応している点です。こんな感じでハイライトしてくれます。

f:id:kiyokura:20141201213936p:plain

まあこれくらいはMarkdownエディタとしてはあっても当たり前かもしれません。が、もちろん、これだけではありません。

 

コードブロック内の言語ごとのシンタックスハイライト

三連バッククォート『```』で囲むコードブロックにて、言語を指定するとその言語に沿ったシンタックスハイライトをやってくれます。 f:id:kiyokura:20141201213937p:plain

どの程度の言語に対抗しているのかの詳細は把握していないのですが、軽く試した範囲では、JavaScript / C# / VB.NET / python / ruby / html / xml / PHP あたりはできてるっぽいです。おそらくはmonaco自身が対応している言語ならだいたい行けるんじゃないかと思ってます(monacoの対応言語は此方の記事などを参照)。

 

プレビュー機能

monacoの持つプレビュー機能はmarkdownについても有効です。スタイルが若干微妙なのでこのあたり改善を期待したいところですが、雰囲気は十分わかると思います。

f:id:kiyokura:20141201213938p:plain

 

自動保存

monacoは基本的には自動保存されます。保存し忘れで消えた!なんてこともありません。

 

並列プレビュー

また、monacoではファイルを並べて編集することができます。この機能を利用し、一方をプレビューにすると……。編集しつつ、リアルタイムに近い感覚でプレビューが表示されます。

f:id:kiyokura:20141201213939p:plain

 

Git環境としてのmonaco

エディタとしての機能もさることながら、monacoが本領を発揮するのはgitを絡めて使うケースです。 monacoの環境はgitのローカルリポジトリとして機能します。github等のリモートリポジトリからCloneしてくることもできますし、単体のリポジトリとしても利用できます。

 

コンソールによるgit操作

monacoにはCUIのコンソールがあり、コマンドによりgitの操作を行うことができます。コード補完も利くので割と快適です。

f:id:kiyokura:20141201213940p:plain

 

GUIによるgit操作

monacoのGUIにはいくつかGitの操作をサポートしています。 ステージングやコミット、ブランチの切り替え、push/pullなどはGUIからも実行することができます。コマンドラインに不慣れな人でもある程度の操作はGUIだけで完結できるのではないでしょうか。

f:id:kiyokura:20141201213941p:plain

 

注意点

私的にはとても便利で素敵なmonacoですが、一点、注意していただきたい点があります。それは、この環境が『Azure WebSiteであり、Webサーバとして公開されていること』です。

とはいえ、規定ではmdファイルはブラウザからアクセスできませんので、そこは心配しなくても大丈夫。ただし、画像ファイルやテキストファイル(.txt)などはそのままでは(URLさえ知っていれば)ブラウザからそのままアクセスできてしまいます。 気になる場合は、何らかの認証、例えば Azure WebSitesの構成の「認証/承認」の設定を行うなどしておけば良いのではないかと思います。

 

まとめ

ごく簡単な紹介でしたが、いかがでしょうか? 私はこのmonaco環境にgithubやgitbucketのリポジトリをクローンし、ドキュメントやメモのローカルリポジトリ兼エディタとして利用しています。『githubにもブラウザで動作するテキストエディタあるやん?』と思われるかもしれません。……それはそうなんですが、アレだと保存=コミットなので、それを避けたいときにはちょっと…というのがあったりなかったり。

 

その他、(私はまだそこまでやっていないのですが、)このmonacoではnode.jsが普通に動くので、nodeを使ってなにかを加工したり(例えばmdからhtmlを生成したりとか?)GruntとかGulpとかも使って……と、夢が広がる……かもしれません。

とりあえず無料で使うことができるので、気になった方は是非試してみてくださいませ。