Markdown エディタ『kobito』をブログエディタ代わりに使ってみる

WYSIWYG に馴染めないことと HTML タグを多用することからブログの記事はいつもタグ手打ちで書いています。短い文章ならいいんですが長い文章になるとブログエディタのような狭い領域では文章整理が難しい。BlueGriffon を使ったりすることもあるけどまだ不安定。そろそろ他の対策を考えることにしました。

理想のブログエディタは Markdown なんですが、ブログサービスで採用しているところなんてほとんどありません(MovableType なら入ってるのに…)。それなら「とりあえず Markdown で書けて HTML で出力出来るエディターを…」ということで Mac 対応の Markdown エディタ探しの旅へ。


App Store で「Markdown」検索。されど品揃え少なし。

まずは App Store で「Markdown」を検索です。何種類か出てきましたが無料のものはありませんでした。しかも価格がほとんど500円以上で試用なしで購入するのはちょっと気が引けるぁ…。

じゃあググりますか。

というわけでお次は Google へ。無料で使えて評価が高かったのは『Mou』。しかし、これは 10.7 以上推奨だったので自分の雪豹では使えず。

他にもブラウザで利用出来る『Jon Come | Expreiments | Markdown Editor』というのもありました。こちらは書いたものを HTML でダウンロードすることも可能。しかし、オンラインでしか使えないのはちょっと厳しいので今回はパス。う〜ん、Evernote が Markdown に対応してればいいんですけどね。

こびと?それはなんぞ?

Kobito

更に調べてみると『Kobito』というエディタを発見。レビューを見てもなかなかいい感じだし、製品案内を見てもいい感じ。利用するには製作元の Qiita(キータ)というプログラマーのコミュニティにユーザー登録する必要はあるけど Twitter のアカウントなどで登録が出来るから簡単。よし、これを試してみよう。

Twitter のアカウントで Qiita に登録。そして、小人を攫うかの如く光の早さでダウンロード(笑)では早速、Kobito を使ってみた感想を書いてみようと思います。

これは、素晴らしい(嬉)

※マジ

Markdown で書いたものがリアルタイムでプレビューされるし、コード部分にはシンタックスハイライトも適用される(しかも GitHub ライクなスタイルで見易い)。そして軽い。

こちらはアプリケーションにサンプルとして入っている Markdown 記法のチートシート。左カラムに書いた Markdown が右カラムでリアルタイムプレビューされます(フォントサイズとか色とかは CSS で変更出来る)。

もうこれで充分です。ありがとうございます。ごちそうさまでした。

ところで Markdown って?

HTML に比べるとマイナーだと思うのですがいわゆるマークアップ言語のひとつです。

HTML では <h1></h1><p></p> など、マークアップの為の「タグ」を知っておく必要があります(WYSIWYGとかのブログエディタなら文字入力が出来ればいいけど)。終了タグが必要なものに関してはどこに挿入するかといった規則も知っておく必要があります。まぁとにかく面倒くさいのです。

Markdown では主に記号とインデントでマークアップしていきます。ブロック要素に関しては終了タグの挿入が不要です。いくつか HTML と比較した例を挙げます。違う記号でも同じ動作をするものがあります。

HTML Markdown
<h1>見出し1</h1>
<h2>見出し2</h2>
#見出し1
##見出し2
<p>段落</p> (自動挿入)
<em>強調</em> *強調*
_強調_
<strong>強調</strong> **強調**
__強調__
<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>
* リスト1
* リスト2
<a href="URL">テキスト</a> [テキスト](URL)
<img src="URL" alt="代替えテキスト" /> ![代替えテキスト](URL)

マークアップの詳細は Daring FireballWikipedia に載っています。

HTML よりも圧倒的にマークアップがしやすいのがわかります。Wiki 記法とも似てますね。

ブログエディタとして Kobito を使うためのなにか

とりあえずこれから Kobito をブログエディタとして使っていくわけですが、いくつか気になったというかこれどうするの的なハウトゥなことを書いておきます。

ブログに転記するためのHTMLへの書き出し方

Kobito には本文だけの HTML をエクスポートする機能はついていないようです(当たり前か)。しかし、プレビューのエンジンに Webkit を使っているようなので Google Chrome と同じようにインスペクタが表示出来ます。

Markdown のプレビュー画面を右クリックして Inspect Elements を選択。

Kobito

インスペクタが表示されたら <body> タグを右クリックして "Copy as HTML" を選択すれば <body> から </body> までの HTML がクリップボードにコピーされます。それをブログのエディタに貼り付けて、<body></body> は取り除いておきます。

Kobito

シンタックスハイライト部分の Kobito 独自のタグ属性とかもコピーしちゃいますが同じ名前を使ってる場合を除いて特に問題にならないかと。

あと、上の画面のようにインスペクタをウィンドウ表示にしたら元に戻す時にクラッシュして戻せなくなりました。~/.Library/Preferences/com.qiita.Kobito.plist を削除することで直ります(ログイン情報とかも消えるので忘れた人は注意した方がいいかも)。

Markdown 記法以外の HTML タグを使うには?

Markdown の記法は全てのタグの数だけ用意されているわけではありません。例えば <table> とか <dl> とか。でもこれはエディタ部分に生の HTML を書けばOK。

<table style="width:100%;table-layout:fixed">
<tbody>
<tr>
<td>セル1</td>
<td>セル2</td>
<td>セル3</td>
<td>セル4</td>
<td>セル5</td>
<td>セル6</td></tr>
<tr>
<td>セル1</td>
<td>セル2</td>
<td>セル3</td>
<td colspan="3" style="text-align:center">セル4</td></tr></tbody></table>
セル1 セル2 セル3 セル4 セル5 セル6
セル1 セル2 セル3 セル4

idclass などの属性もそのまま継承しますし、style 属性で直接スタイルを指定することも可能です。こうして考えると普通の HTML エディタとしても使えそうです。

また、Kobito エディタ内で書いたスクリプトなどは自動的にハイライト用の <span> で囲まれるため、CSS を読み込めばハイライトを維持したままブログに転記出来ます。JavaScript を使うよりも軽くていいですね。

Facebook にアップロードした写真をブログで使う

ブログの画像アップロード機能って全然使えないし、退会したら今までの写真が全部台無しになるので最近は画像を Facebook や Picasa から呼び出しています。Picasa も Facebook も外部ドメインからの画像の呼び出しにも対応しているので URL がわかればそのまま転載出来ます。

Picasa は埋め込み用のタグを発行してくれますが、Facebook はダウンロードリンクしかないのでブラウザで画像のURLをコピーして貼り付けます。HTML では <img src="" alt="" /> と長々と書かなくてはいけないのですが Markdown は ! と括弧だけ。title 属性や、ついつい省いてしまいがちな alt 属性を設定しやすいのも良いですね。

![Facebookの画像](https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash4/s640x640/375225_255247694538329_1708075323_n.jpg "Facebookの画像")

Facebookの画像

ちなみに Facebook の画像は URL で何段階かにリサイズできます。詳しくはこちらの記事をどうぞ。

Kobito が書き出した HTML って SEO 的にどうなの?

普通に綺麗でシンプルな HTML です(そもそも Markdown がシンプルだからだけど)。HTML を全部 W3C のバリデーションサービスに丸投げしたら "This document was successfully checked as HTML5!" で、エラーはありませんでした。デタラメな HTML を書くよりは全然いいんじゃないかと。それが実際にどれほど効果があるかはわかりませんが。


今回の方法はブログサービス側の自動改行を無効にしなくてはいけなので、アメブロとか自動改行を無効に出来ないサービスの場合は取り除かなくてはいけないかもしれません(アメブロはそろそろエディタ改善されたの?)。

とにかくサーバーにポストせずにプレビューが出来るのは非常に助かります。タグの省略や文章、画像の確認が出来るだけ記事作成がスムーズに進みますよ。