虎之助の徒然記

Markdown初心者が、はてなブログをemacsで書く

ガジェット・ＩＴ

Alexaにはまりました。便利ですよ～。近いうちに記事を書きますね。

　はてなブログの初心者です。これまで、はてな記法を使ってブラウザで記事を書いていましたが、エディタに慣れないのに加えて、反応が遅く、時々、書きかけの記事が飛んでしまうなどと我慢ができなくなって、はてな記法からmarkdown記法に移行し、emacsで編集することを決意しました。

　そうは言っても、markdownについては全く知らないずぶの素人です。環境構築と、はてな投稿までの流れをまとめようと思います。基本的には、emacsで編集・プレビューし、はてなブログにインポートして、はてなのWebのGUIで図の引用や体裁を整えるというフローです。

1. markdown編集環境の構築

1.1 markdown編集環境の条件

　構築する編集環境の条件は、以下の通り。

  • OSは、ubuntu (できれば、raspbianも)
  • emacsエディタで原稿が書けること。
  • 基本的な操作はCUIであること。

　調べると、いろいろと出てきますが、emacsで良く使われるのは、markdown-mode.elのようです。

　markdown-mode.elの公式ページ: http://jblevins.org/projects/markdown-mode/

　今回は、ubuntuの15.10にmarkdown-mode.elをインストールして、この記事 を書きました。

1.2 markdown-mode.elのインストール

　ubuntuのレポジトリにmarkdown-modeがないかと調べてみると、 emacs-goodies-el パッケージに入っていました。よって、apt-getでインストー ル。

$ apt-cache search markdown-mode
  emacs-goodies-el - Miscellaneous add-ons for Emacs
$ apt-cache show emacs-goodies-el | grep markdown-mode
  markdown-mode - major mode for editing Markdown files;
$ sudo apt-get install markdown emacs-goodies-el

　markdown-mode.elのバージョンは、2.0(2013-3-18)でした。最新 の2.1(2016-01-09) に比べると少し古いバージョンですが、凝ったことをする わけではないので、十分でしょう。

　.emacsの編集はなし。.emacsを編集して便利にカスタマイズするのが良いの でしょうが、いろいろなところで環境構築していると、個別に設定するのが面倒になっ てきて、できるだけカスタマイズせずに使うようになっています。

　マシンの設定は、これで完了。検索して調べてみると、markdown環境の構築 は難しそうだなぁと思っていましたが、あっさり終わってしまいました。後は 使い方を覚えるだけです。

2. emacsで原稿を書く

2.1 emacsを起動する

　emacsを起動して、原稿を書く。拡張子は.mdとするのがお作法みたい。ここでは、foo.mdにしています。

$ emcas -nw foo.md

　"M-x markdown-mode"でmarkdownモードに入り編集します。...が、ちょっと面倒だったので、.emacsに以下を追加。拡張子mdのファイルは自動的に markdownモードになります。

(add-to-list 'auto-mode-alist'("\\.md\\'" . markdown-mode))

2.2 markdown文法で編集

　はてなブログのGUIで試し書きすれば、基本的な文法は分かりますので、マニュアルはほとんど読まずに記事を書けそうです。

例えば、2節は以下のコードで書いています。ASINによるAmazon商品の引用もできます。

### 2. emacsで原稿を書く

#### 2.1 emacsを起動する
　emacsを起動して、原稿を書く。拡張子は.mdとするのがお作法みたい。ここでは、foo.mdにしています。

 ```
 $ emcas -nw foo.md
 ```

　"M-x markdown-mode"でmarkdownモードに入り編集します。...が、ちょっと面倒だったので、.emacsに以下を追加。拡張子mdのファイルは自動的に
markdownモードになります。

 ``` 
(add-to-list 'auto-mode-alist'("\\.md\\'" . markdown-mode))
 ```

#### 2.2 markdown文法で編集

　はてなブログのGUIで試し書きすれば、基本的な文法は分かりますので、マニュアルはほとんど読まずに記事を書けそうです。

* 日本語Markdownユーザ会: [http://www.markdown.jp/]
* markdown文法のマニュアル：[http://adiary.org/v3man/Markdown/syntax]
* [http://igcn.hateblo.jp/entry/2016/02/14/073123:title]
* markdownのマニュアル本：[asin:4777518329:detail]

2.3 htmlに変換し、ブラウザでプレビュー

　emacsのショートカットコマンドを使って、プレビューします。　HTMLへの変換は、/usr/bin/markdownコマンドが実行しているので、markdownパッケージをインストールしていないと、エラーします。

  • "C-c C-c p"(markdown-preview)
    ブラウザ(firefox)が立ち上がり、/tmpに書きだされたhtmlファイルを表示する。 ファイル名は、/tmp/burl10957TGR.htmlといったファイル名で、10957のところはemacsのプロセスIDのようです。
  • "C-c C-c e"(markdown-export)
    編集しているfoo.mdを変換し、foo.htmlに出力します。
  • "C-c C-c v"(markdown-export-and-preview)
    foo.htmlを出力し、そのファイルをブラウザで開いて表示する(新しいタブで表示する)。

　その他のmarkdown-modeのショートカットキーは"C-c C-h"で表示できます。

　markdown-export-and-previewでブラウザに表示して、それ以降は、makdown-exportでファイル更新、ブラウザでリロード、といった使い方になりそうです。markdown-previewの場合、プレビュー毎に新たなタブが生成されるので、ときどきタブを閉じる必要があります。また、markdown-previewは開いたタブの先頭から原稿を表示するのに対して、markdown-exportしてリロードだと、前回のプレビュー位置で表示されるので、ブラウザをスクロールする必要がなくなります。

(追記) 暫く使ってみたら、"C-c C-c e"(markdown-export)は、かなり多用するので、打ちやすいように"C-c C-c C-e"にもコマンドをアサインしました。.emacsには、以下を追加。

(require 'markdown-mode)
(define-key markdown-mode-map (kbd "\C-c \C-c \C-e") 'markdown-export)

f:id:toranosuke_blog:20160516155654p:plain
左がemacs、右がfireroxのウィンドウ。ほとんどはemacs画面で作業し、プレビューするときだけ、マウスを動かして、firefoxのリロードボタンを押します。マウス作業がほとんどないので、文章作成に集中できます。加えて、肩こり持ちには健康的。

3. はてなブログで編集

画像入力、文字修飾、最終的な校閲をはてなブログのGUIで行いました。

3.1 markdownファイルのImport

　markdownファイルのインポートの仕方が分からなかったので、コピペで、はてなブログにインポート。emacs -nw だとコピペが面倒なので、このときだけはnwオプションなしのGUIベースのemacsで作業しました。

3.2 はてなブログで原稿を仕上げる

　画像のインポートは、はてなブログGUIでやるしかなさそうです。文字修飾は、markdown文法を勉強すれば、いろいろできるようですが、markdown素人には、markdown文法で直書きするよりGUIベースの方が分かりやすいです。

4. はてなブログの原稿をバックアップ

markdown原稿とMT(MovableType)形式でバックアップする。

  • Markdown原稿の保存：はてなで編集した原稿をコピペで、emacsに戻して、保存する。
  • MT形式の保存：公開した記事をはてなのExport機能で保存。
    全記事をダウンロードしてしまうようなので、emacsで該当する記事のみを切り出して、保存する。
f:id:toranosuke_blog:20160517083034p:plain:w400
このページのずうっと下にエクスポートの項目がある。
f:id:toranosuke_blog:20160517083046p:plain:w400

参考：http://staff.hatenablog.com/entry/2014/08/22/180000
* ダウンロードしたMT形式のファイルのこの記事の部分は、途中で途切れていました。この機能、正常に動作しているのでしょうか？

5. おわりに

　これまで、はてなブログのGUIではてな記法を使ってきましたが、Markdownに移行することで、emacsで安心・快適・効率的に記事を書けるようになりました。環境構築は難しそうだったので、移行に躊躇していましたが、やってみれば案外簡単。emacs環境で記事が書けるようになったのが嬉しいです。

2016/5/16

(追記:20016/5/21) 　raspberry piでも、問題なく動きました。 但し、"C-c C-c p"(markdown-preview)で立ち上がるのは、firefox(iceweasel)ではなく、 Leafpadでした。"C-c C-c v"(markdown-export-and-preview)ではfirefoxが立ち上がります。

　はてな原稿のhtmlのプレビュー程度であれば、iceweaselも十分高速なので、pi3ははてな原稿の編集マシンとしては実用的に使えそうです。

関連記事

toranosuke_blog

コメントを書く