paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

【ブログが書きやすい】快適なMarkdownエディタはどれか!?

f:id:paiza:20140712194904j:plainこんにちは、吉岡(@)です。 開発関連のブログを書いていますが、長い文章をブラウザ上で編集していると編集画面が小さかったり、オフラインで編集できないことが気になり始めます。そんな時はブログ編集用のアプリケーションを使うと快適にブログを書くことができます。

ここでは、特にソースコードを含むような開発関連記事をMac OS X上でMarkdownで書く場合に、どのようなエディタが使いやすいか比べてみました。

■Kobito

オススメ度:★★☆

Kobitoは基本的にはQiitaの記事を書くためのアプリケーションですが、Markdown編集ができるので、ブログ記事作成にも利用できます。編集画面とリアルタイムプレビュー画面が隣り合っているため、プレビューしながら書く場合に便利です。 ただ、ソースコードを含むような1000行程度の記事を書いていると非常に遅くなってきます。長い記事を書く場合には使いにくいかもしれません。また、ブログ記事はテキストデータではなく専用のファイルに保存されますので、そのままファイルとして利用することはできません。

f:id:paiza:20150728111717p:plain

参照

Atom

オススメ度:★★☆

JavaScriptでカスタマイズできるエディタですが、Markdownにも対応しています。基本的には軽快なエディタで、control+shift+Mでリアルタイムプレビューができるようになります。ただ、こちらもソースコードを含む長い文章を書くと遅くなってきます。GitHub issueで課題として上がっていますが、現時点では修正されていないようです。(813 line markdown file: too slow to work with when preview is open #197)

f:id:paiza:20150728111803p:plain

参照

■MarsEdit

オススメ度:★☆☆

ブロガー御用達のエディタです。WordpressやAtomPubなど主要ブログに対応しており、ボタン1つで投稿することができます。 Markdownにも一応対応していますが、「コード」表記のシンタックスハイライトに対応していません。またMarkdown形式で投稿するのではなく、HTMLに変換してから投稿する形になりますので、ブラウザ等で後から編集すると同期が困難にはなるかもしれません。

f:id:paiza:20150728111828p:plain

参照

Sublime Text+Markdown Preview+LiveReload

オススメ度:★☆☆

Sublime Textはプログラマ御用達のエディタで拡張機能が豊富です。Markdown Preview/LiveReloadパッケージをインストールし、ブラウザにLivereloadプラグインをインストールします。Alt-Mでプレビューができるようになり、プレビュー結果はリアルタイムで反映されるようになります。「なります」と書きましたが正しく動作させることはできませんでした。プレビューを反映するには保存する必要があるようです。また、Node.jsなどで別途開発を行っている場合、そちらのライブリロードと干渉して、LiveReloadを実行することができませんでした。

参照

Sublime Text+OmniMarkupPreview

オススメ度:★★★

Sublime TextにOmniMarkupPreviewをインストールすることでも、Markdown編集結果をリアルタイムにプレビューすることができます。Command-Alt-Oでプレビューされ、入力する端からリアリタムに編集結果が反映されます。こちらではNode.jsのLiveReloadとは別ポートで動いていて干渉しませんし、ソースコード表記にも対応しており、記事が長くなっても遅くなることはありません。設定すれば"[TOC]"表記で目次を自動生成することもできます。ただし、プレビューはブラウザで行いますので別ウインドウになり、スクロール位置を自動で同期することはできません。本記事もこの構成で書いています。

f:id:paiza:20150728111846p:plain

参照

■Marxi.co

オススメ度:★★☆

ウェブ上で動作するMarkdownエディタです、編集結果をリアルタイムでプレビューしてくれます。ブラウザの表示画面全体を使うので編集しやすく、また非常に軽快に動作します。リアルタイムプレビュー付きのエディタでは、編集画面上のスクロール位置とプレビュー画面のスクロール位置がずれることがよくありますが、Marxi.coではスクロール位置のずれがほとんどないのもすばらしいです。Evernoteと連携しており、編集結果をEvernoteに自動保存することができます。ただし、Evernote側ではMarkdownを編集することはできません。またブラウザ上で動作するのでオフラインでは利用できません。

f:id:paiza:20150728132920p:plain

参照

■Mou

オススメ度:★☆☆

マークダウン専用のエディタ。左半分で編集、右半分でリアルタイムプレビューをしてくれるMarkdownに特化したシンプルなツールです。なぜか縦書きで編集もできます。ただ、1000行程度になると遅くなってきます。また、「```javascript」のような言語を指定したソースコード埋め込みフォーマットは認識できません。Ver1.0が8月にリリース予定ですので今後にも期待です。

f:id:paiza:20150729105812p:plain

参照

■MacDown

オススメ度:★★★

Mouを参考に1から作られたマークダウン専用エディタ。Mou同様に左半分で編集、右半分でリアルタイムプレビューをしてくれます。編集量が増えても警戒に動作します。また「```javascript」のような言語指定のソースコード埋め込みフォーマットにも対応しています(プレビューで色は付きません)。オープンソースです。長い文章では編集画面とプレビューの同期位置がずれることがありますが、その場合はプリファレンスで同期を一時的に無効にできます。

f:id:paiza:20150729110859p:plain

参照

■まとめ

ここでは私が試したMac OS X上でのMarkdownエディタについて紹介しました。今回はソースコードを含む長めのブログについて調べてみました。当面Sublime Text+OmniMarkupPreviewで試してみたいと思います。ブログの書き方によって快適なアプリケーションは変わってくると思いますので、いろいろ試して快適なブログ環境を探してみるといいと思います。




paizaではITエンジニアとしてのスキルレベル測定(9言語に対応)や、プログラミング問題による学習コンテンツ(paiza Learning)を提供(こちらは21言語に対応)しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp