2015年03月01日

ライブドアブログ(@livedoorblog)でMarkdown形式と上手く付き合う方法

このエントリーをはてなブックマークに追加

ライブドアブログ(livedoor Blog)は、Markdownで書けない

この内容には背景説明が必要だ。

背景1: Markdown生活

GitHubを本格利用し始めた4年前辺りから、Markdown形式でドキュメントを書いている。Markdownは実に単純な形式・規則であり、気持ちよく執筆作業を行える。そして、すっかりMarkdownに慣れてしまった身体では、HTMLを書くのは苦行に近い...。本来書きたい事を書く為の時間だけでなく、HTMLによる整形が、執筆作業の邪魔をする。

背景2: ライブドアブログ(livedoor Blog)を本ブログでは利用している

記事投稿画面のエディタ形式を変える - livedoor Blog ヘルプセンターより(2015/03/01現在):

記事投稿画面のエディタ部分(本文を入力する部分)は、デフォルトでは記事の見た目そのままに近い表示がされる「HTMLエディタ」になっていますが、右上の「HTMLタグ編集」をクリックすると、HTMLタグを直接編集できる画面に切り替えることができます。

エディタの種類は、HTMLかシンプルの2種類。Markdownは対応してないのである。そのうち対応してくれえるのかも知れない。

背景3: 移行か、継続か

Markdown対応ブログサービスへの移行を考えた事もある。サービス移行先候補を使ってみると、無料プラン・有料プランに限らず、上手くURIを引き継げないなどの課題が出て来た。どうにかして・思い切って移行するか、それとも、ライブドアブログを継続利用するか...。検討した結果、移行によるデメリットが大きかったので、ライブドアブログ継続利用に落ち着いた。しかしながら、相変わらずMarkdown形式で書きたかったのである。

どうにかしてMarkdownで書く

MarkdownをHTMLに変換できさえすれば、ほぼ解決する。幾つか試した中で辿り着いたのが、以下の執筆から出稿までのフロー。

  1. Dillingerを使う
    1. Markdownで記述
    2. HTML形式で出力
  2. 出力されたHTMLソースを表示
  3. <body></body> に挟まれた領域をコピー
  4. コピーした内容を、livedoorブログの記事領域に貼り付けて投稿

それぞれの手順内容を補足して行く。

手順1: Dillingerを使いMarkdownで記述しHTMLで出力

Dillingerは、無料で利用可能(2015/03/01現在)。アクセスすると直ぐに利用可能で、以下の様な編集画面が表示される。

  • 左ペイン: Markdown記述領域
  • 右ペイン: プレビュー内容

基本的には左ペインにMarkdown形式で記述して行く。記述した内容は随時プレビューされるので、レンダリング後の状態と、Markdown的に間違いがあるのかどうかを、同時に確認出来る。

手順2: 出力されたHTMLソースを表示

切りの良い所まで書けたら、

  1. メニューバーのEXPORT ASをクリックして開き、
  2. HTMLを選択すると、
  3. HTMLが自動的にダウンロードされる
手順3: <body></body> に挟まれた領域をコピー

  1. ダウンロードされたHTMLをエディタ等で開き、
  2. <body>...</body>で挟まれた領域を選択・コピー
手順4: コピーした内容を、livedoorブログの記事領域に貼り付けて投稿

ここまで来ると、今までのHTMLエディタによる操作と同じである。仮に誤字脱字を見つけた場合は、手順1へ戻り、同じ手順を繰り返す。こうする事によりMakdown対応してないサービスと上手く付き合って行ける。

おまけ: MarkdownをHTMLへ変換するツールの選択

今回紹介した内容ではDillingerだけで完結しているが、自分が一番愛用しているMarkdownエディタサービスは StackEditだ。

このStackeditもMarkdownからHTMLを出力可能だ。しかしながら、StackEditが出力したHTMLには着色やレイアウト用途の余計なHTML要素が含まれている。この余計な要素は、シンプルなHTMLを期待するツールとの相性が悪い。

今回紹介したDillingerでは、シンプルなHTMLを出力してくれる。Markdownに対応してないサービスとの連携に注目した場合は、Dillingerが良い訳である。

あとがき

本エントリでは、Markdownファイル管理については触れていない。例えばMarkdownエディタが持ち合わせている管理機能を使って管理すれば良い。参考ままでに、自分は専用Gitリポジトリで管理している。この管理方法に関する内容は本エントリの主題から逸れるので、触れないでおく。




編集
@hansode at 19:30│Comments(0)TrackBack(0)日常/life hacks 

トラックバックURL

コメントする

このブログにコメントするにはログインが必要です。