2014年夏、使用中のMarkdownエディタとツール

2015年9月11日Web制作, アプリケーション, ブログChrome, iPhoneアプリ, Markdown

猿も人並みに、Markdown記法なるものを使うようになりました。
記法として他によく知られているのは、はてな記法とか、Wikipediaの編集画面で使われている記法でしょうか。

ウィキ(ハワイ語: Wiki)あるいはウィキウィキ(ハワイ語: WikiWiki)とは、ウェブブラウザを利用してWebサーバ上のハイパーテキスト文書を書き換えるシステムの一種である。【中略】大抵のウィキはそれぞれ独自のマークアップ構文を策定していて、ウィキが扱う文書はその構文に従って記述され、そのまま文書ファイルとして保存される。そして文書が閲覧されるときには、文書内に記述されたマークアップはウィキプログラムによって適切なHTML形式に変換されて、ウェブブラウザはその変換されたHTML文書を表示することになる。(ウィキ – Wikipedia

人もすなるMarkdown記法

要するにどのホゲホゲ記法も「ルールに則ってちゃちゃっと書けば、ブラウザで見やすく整形表示される」のがお仕事。「軽量マークアップ言語」といわれるものです。

Wikipediaなりはてなブログなり、こうしたマークアップ記法を採用しているサービスを使うときにはもちろん使えばよいのですが、普段のメモ書きでも使ってみたらどうですかという話が以下。

Markdown文書を作成・保存する

上述の記法でもってだばだば書いて、.txtなり.mdなり.mdownなり…の拡張子で保存すればMarkdown文書のできあがり。

ちなみにMacのアプリケーション Byword の拡張子はMarkdown形式が.txt、リッチテキスト形式が.rtfです。アプリによって作成されるファイルや読み込めるファイルの拡張子に違いがあると思うので、それはあれしてください。

Markdown文書をプレビューできる多くのChrome拡張では、.txt拡張子だとMarkdownを認識してくれなかったですけどもね。

Markdown文書をプレビューする

HTMLのようにブラウザにドロップすればレンダリングしてくれるわけではないので、整形プレビュー機能があるアプリケーションを入手するとか、使っているブラウザにプレビュー用の拡張機能を入れるなどの準備は必要です。ただMarkdownで書かれたテキストって

こんな感じなので、(拡張子をtxtにしておけば)ただのテキストエディタでも普通に読めます。Webっぽい用途でなくても、メモ書きはすべてこの記法で書いておけば統一感があって綺麗。

ということで、コーディングのちょっとした覚え書きやブログの下書き、ちょっとしたメモ書きも最近はMarkdownで書いちゃっています。見出しとかリストとかリンクとかコードとか、そんな簡単なものしか使っていないですけどね。

使用中のMarkdownアプリ

私がWindowsユーザだった昔、機能的には大差ない無料のテキストエディタを端から落としまくって手に馴染むツールを探し求めたときのように、使いやすそうなMarkdownエディタ、ツールを探すのがマイブーム。

そんなわけで、ここから本題。Markdown文書の編集や閲覧に使っているアプリの類を挙げていきます。ファイルはすべてDropboxに置いているので、エディタについてはMac・iOS・Android間で編集できることが前提です。

Markdown記法を使うきっかけ、Byword

Bywordとの馴れ初め、それは…と話せば長くなりますのでやめました。(下書きを書いてみたけど、あまりにどうでもいいうんこ記事に仕上がったため)

左が編集画面、右がプレビューです。Bywordはシングルウィンドウなので、プレビューは画面が切り替わる形になります。ふわっと。

Byword

このあとのアプリケーションもそうですが、cssは少々いじっているので完全なデフォルトとは異なります。キャプチャは参考までにどうぞ。

Byword

Byword App

価格: ¥1,000, 開発: Metaclassy, Lda, カテゴリ: 仕事効率化

主にブログ下書きやメモ。こちらMac版。

Byword

Byword App

価格: ¥500, 開発: Metaclassy, Lda, カテゴリ: 仕事効率化

こちらiOS版。

Qiitaを利用しない貴方でも! Kobito

Kobito

Kobito
プログラミングのメモやスニペットの記録に最適なMacアプリ。

Qiita(プログラムのソース、ノウハウ、メモなど技術情報SNS)」への投稿機能があるMarkdownエディタなのですが、ほとんどは自分用のソースコード混じりの覚え書き用途です。

Kobito

左が編集画面、右がプレビュー画面の平均的な形。次期バージョンではデータベースをDropboxに置いて同期をとることができるようになる、でしょう。(この前までベータテストやってました)

付けたタグのショートカットがあればなお使いやすいんですけどねー

その他Mac用アプリケーション

最近、verdarさんのところで紹介されていたので入れてみたやつ。(ソースコードのシンタックスハイライトが賢いMarkdownエディタ『MacDown』 – Macの手書き説明書

MacDown

MacDown
MacDown is an open source Markdown editor for OS X, released under the MIT License. It is heavily influenced by Chen Luo’s Mou.

「MacDown」はオープンソースのMac用Markdownエディタ。同種のソフトとして有名なMouの影響を受けて作られた(Mac用のオープンソースなMarkdownエディタ「MacDown」

Mouは前に使ってみて、申し訳なくもあまりピンと来なかったのですが、これはあなどれなかった。エディタ画面でも色分けされていて見やすい使いやすい、サクサク。

MacDown

ガリガリ書くだけならBywordなんですが、プレビューもリアルタイムで横目で見つつ…となるとこちらが便利。無料でこれだけできれば御の字。

LightPaper

LightPaper
LightPaper is a simple, beautiful, powerful yet free Text Editor for passionate writers.

MacDownのおかげでめっきり出番が減ったのがこちら。ごめんなさい…。そのうちアプリケーションフォルダからいなくなるのではないかと…

LightPaper

あと、すっかり忘れてました。クロスプラットフォームで使えるSublime TextもMarkdown書類を扱えましたね。シンタックスハイライトは3では標準だったんだろうか、特にパッケージを入れた覚えがないんだけども。

Sublime Text 3

iOS、Android用アプリ

iPhoneなら前述のBywordですが、iPadではこちら。

Nocs™ — text editor with Dropbox and Markdown

Nocs™ — text editor with Dropbox and Markdown App

価格: 無料, 開発: WISD, カテゴリ: 仕事効率化

fontにSource Code Proが選べて、設定項目も多彩。ユニバーサルなのでiPhoneでも使えますが、ちょっとまだデザインがiOS6のままといいますか。

さらに機能を追加したいならアプリ内課金となるんですけどいくらだったか忘れました。合わせて数百円だったかと…

Nocs

課金した結果なのか、無料の状態でかわかりませんが、これhtmlもプレビューできたんですね、知らなかった。cssもちゃんと読んでてスタイルが効いてる。

そのほか “Markdown記法「も」使えるアプリ” として、するぷろ(iPhone, iPad)やDay One(Mac, iPhone, iPad)など。

また、AndroidのMarkdownアプリはDraftをチョイスしました。頻度が高くないから無料で探したんだけど、Dropbox連携もできるとなるとなかなかよいのがなくて…

Chrome拡張

作成・編集はアプリでやるので、拡張にやってもらうのはプレビューやリンクコピーなどがメインです。編集もできる拡張や、オンラインエディタもたくさんありますけどね。

  • Markdown Preview Plus → Markdown文書のプレビュー。扱えるファイル形式が多彩なのと、カスタムcssが使えるのが特長。ただ今日気づいちゃったんですが、これバックスラッシュのエスケープが効かないや。あれー
  • Copy as Markdown → リンクや開いているタブ、画像などをMarkdown形式でクリップボードにコピー。主に画像用。
  • KeyConfig → 「開いているページをテキストリンクの形で」クリップボードにコピーするアクションを設定
  • Create Link → 「開いているページタイトルとURL」「選択箇所を引用、リンク付き」の形でクリップボードにコピーするFormatsを設定

オマケ:Windowsで使えるMarkdownエディタ

Windowsのフリーソフトって、ピンからキリまでなんでもあるっていう印象だったんですけど、ことMarkdownツールとなるとこれ!っていうのがないような。

どれも使ったことはないので、参考まで。

Markdownアプリ 表示確認用サンプル

新しいアプリを入れたとき、Markdownの書式が一式揃ったサンプル.mdがあると便利だなーと思い、ちょびっと作ってQiitaに投稿しています。

よろしければどうぞ。

例の(Typewriter Keyboardでタイピング音をカスタマイズ)アプリのおかげもあってパタパタカタカタにぎやかに、文章を打つ自体が楽しくて不完全にネタばかり溜まっていくけど忙しくて全然ブログなんか更新できてねえよ。(キレない