こんにちは、吉岡(@yoshiokatsuneo)です。
開発関連のブログを書いていますが、長い文章をブラウザ上で編集していると編集画面が小さかったり、オフラインで編集できないことが気になり始めます。そんな時はブログ編集用のアプリケーションを使うと快適にブログを書くことができます。
ここでは、特にソースコードを含むような開発関連記事をMac OS X上でMarkdownで書く場合に、どのようなエディタが使いやすいか比べてみました。
■Kobito
オススメ度：★★☆
Kobitoは基本的にはQiitaの記事を書くためのアプリケーションですが、Markdown編集ができるので、ブログ記事作成にも利用できます。編集画面とリアルタイムプレビュー画面が隣り合っているため、プレビューしながら書く場合に便利です。 ただ、ソースコードを含むような1000行程度の記事を書いていると非常に遅くなってきます。長い記事を書く場合には使いにくいかもしれません。また、ブログ記事はテキストデータではなく専用のファイルに保存されますので、そのままファイルとして利用することはできません。
参照
■Atom
オススメ度：★★☆
JavaScriptでカスタマイズできるエディタですが、Markdownにも対応しています。基本的には軽快なエディタで、control+shift+Mでリアルタイムプレビューができるようになります。ただ、こちらもソースコードを含む長い文章を書くと遅くなってきます。GitHub issueで課題として上がっていますが、現時点では修正されていないようです。(813 line markdown file: too slow to work with when preview is open #197)
参照
■MarsEdit
オススメ度：★☆☆
ブロガー御用達のエディタです。WordpressやAtomPubなど主要ブログに対応しており、ボタン１つで投稿することができます。 Markdownにも一応対応していますが、「コード」表記のシンタックスハイライトに対応していません。またMarkdown形式で投稿するのではなく、HTMLに変換してから投稿する形になりますので、ブラウザ等で後から編集すると同期が困難にはなるかもしれません。
参照
■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]"表記で目次を自動生成することもできます。ただし、プレビューはブラウザで行いますので別ウインドウになり、スクロール位置を自動で同期することはできません。本記事もこの構成で書いています。
参照
- MacにOmniMarkupPreviewerをインストールする方法とその使い方
- Sublime TextでMarkdownを快適に書くためのプラグインと設定
- http://mersy.github.io/tocOnOmniMarkupPreviewer.html
- GitHub - timonwong/OmniMarkupPreviewer: Sublime Text 2&3 plugin to live preview markup files, supported (not limited to) markup formats are markdown, reStructuredText, WikiCreole and textile.
- Sublime Text - A sophisticated text editor for code, markup and prose
■Marxi.co
オススメ度：★★☆
ウェブ上で動作するMarkdownエディタです、編集結果をリアルタイムでプレビューしてくれます。ブラウザの表示画面全体を使うので編集しやすく、また非常に軽快に動作します。リアルタイムプレビュー付きのエディタでは、編集画面上のスクロール位置とプレビュー画面のスクロール位置がずれることがよくありますが、Marxi.coではスクロール位置のずれがほとんどないのもすばらしいです。Evernoteと連携しており、編集結果をEvernoteに自動保存することができます。ただし、Evernote側ではMarkdownを編集することはできません。またブラウザ上で動作するのでオフラインでは利用できません。
参照
■Mou
オススメ度：★☆☆
マークダウン専用のエディタ。左半分で編集、右半分でリアルタイムプレビューをしてくれるMarkdownに特化したシンプルなツールです。なぜか縦書きで編集もできます。ただ、1000行程度になると遅くなってきます。また、「```javascript」のような言語を指定したソースコード埋め込みフォーマットは認識できません。Ver1.0が8月にリリース予定ですので今後にも期待です。
参照
■MacDown
オススメ度：★★★
Mouを参考に１から作られたマークダウン専用エディタ。Mou同様に左半分で編集、右半分でリアルタイムプレビューをしてくれます。編集量が増えても警戒に動作します。また「```javascript」のような言語指定のソースコード埋め込みフォーマットにも対応しています(プレビューで色は付きません)。オープンソースです。長い文章では編集画面とプレビューの同期位置がずれることがありますが、その場合はプリファレンスで同期を一時的に無効にできます。
参照
■まとめ
ここでは私が試したMac OS X上でのMarkdownエディタについて紹介しました。今回はソースコードを含む長めのブログについて調べてみました。当面Sublime Text+OmniMarkupPreviewで試してみたいと思います。ブログの書き方によって快適なアプリケーションは変わってくると思いますので、いろいろ試して快適なブログ環境を探してみるといいと思います。
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
