カカリアスタジオブログ

Happy Elementsのゲームブランド「カカリアスタジオ」の公式ブログです。

Bloggerに快適に投稿するたった1つの方法

blog

はじめに

はじめまして。Happy Elements株式会社のクズエンジニアの西村(a.k.a Sixeight)と申します。
どうぞよろしくお願いします。
持ち回りで会社ブログを書くことになったのですが、個人的にこのbloggerはあまり使い勝手が良くないと思っています。 個人ブログもやっていたのですが、更新が面倒くさくて放置してしまっています。 しかしながら、書きたくないと言っていられる状況でなくなってしまったので、快適に投稿出来るような環境を整えました。 今回はそのことについて書くことで、お茶を濁させて頂きます。

前提

ブログのように日常的に書くものは、日常的に使っているもので書くのが一番だと思います。 僕は仕事の大半をVimで行なっているため、今回はVimから快適に投稿出来る方法を模索しました。
今回は投稿にujihisaさんのblogger.vim、執筆中のMarkdownのプレビューにquickrunを使うことにしました。 どうも先駆者がいらっしゃるようで、今回の内容のほとんどがこちらのエントリ(VimからBloggerへ快適に投稿できるようにする)で解説されております。 もう、この記事いらないじゃないかと思ったのですが、一部手順が異なるのと細かい点に触れつつ、僕の作業まとめとして記述させて頂きます。
この記事は Mac + MacVim + Homebrew + rbenv な環境を想定しています。

プレビュー

quickrunをご存知ですか。さまざまなコマンドをvim上で実行して結果を出力用のbufferを開き表示します。Vimでプログラミングをされていて、quickrunを使用されていない方はいますぐ導入すべき必須pluginです。ujihisaさんが最初のバージョンを書かれましたが、現在はthincaさんがフルスクラッチで書き直されたものが主流となっています。 今回はこのquickrunを利用して、Markdown形式で執筆中の記事をブラウザで実際に表示して確認してみます。

pandocのインストール

Markdownで記述したものをHTMLへ変換するためにpandocを使用します。個人的にはRedcarpetを使いたかったのですが、pandocのようにDOCTYPEなどを自動で追加してくれず、日本語が文字化けする問題を解決出来なかったため断念しました。
pandocはHomebrewでは提供されていないため、まずは、HomebrewでCabalをインストールして、その後Cabalを使ってpandocをインストールします。

$ brew install cabal-install
$ cabal update
$ cabal install pandoc

quickrunの導入

pandocの準備が出来たので、quickrunをインストールします。一般的なVim使いの方はすでにインストールされているかと思いますので読み飛してください。 Vundleを使います。モダンな方はneobundle.vimを使うようですが、個人的にはVundleのシンプルUIに満足しており、neoという名前に抵抗があるという宗教的な理由でVundleを使い続けています。(もちろんneocomplcacheは必須なため使用しています。) Vundleについては過去に書いたエントリがあるので、そちらを参照してください。(Hack #215: Vundle で plugin をモダンに管理する)
インストールは簡単で、~/.vimrcに以下を追加して、:BundleInstallとすると完了します。今回はquickrunのbrowser outputterを使用するために、open-browser.vimを、MarkdownのSyntax Highlightのために、vim-markdownもインストールします。

Bundle 'thinca/vim-quickrun'
Bundle 'tyru/open-browser.vim'
Bundle 'hallison/vim-markdown'

quickrunの設定

最後に、Markdown形式のファイルを開いているときにquickrunを実行することで、HTMLに変換したものをブラウザで表示出来るように設定します。 設定はHack #230: Markdown形式の文書を書く2 (quickrun0.5.0対応版)の通りにすると問題ないかと思います。

let g:quickrun_config = {}
let g:quickrun_config['markdown'] = {
       'type': 'markdown/pandoc',
       'outputter': 'browser',
       'cmdopt': '-s'
       }

実行

Markdown形式のファイルを編集中に以下のコマンドを入力することで、ブラウザが起動し変換されたHTMLが表示されれば成功です。

<leader>r

blogger.vim

先述のようにblogger.vimを使用します。これは自信もBloggerを使用されているujihisaさんが僕のように投稿を楽にしたいという思いから阪急電車の中で書き始められたpluginです。 以下のものに依存しているため用意しておく必要があります。

  • vim 7.2+
    • metarw 0.0.3+
  • ruby 1.9.2+
    • (gem) nokogiri 1.4.2+
    • (gem) net-https-wrapper
  • pandoc 1.2+

metarwのインストール

metarwは、VimのRead/Writeを抽象化してなんでもかんでもVimで読み書きしようというpluginです。(あってます?) blogger.vimはこれを用いて、Blogerへの投稿や、記事の取得を行ないます。
これもVundleを使います。以下の~/.vimrcに追加して:VundleInstallで。

Bundle 'metarw'

Rubyまわりの準備

blogger.vimはblogger.rbというRubyのスクリプトを使っています。
Rubyはとりあえず1.9.2を使っておきます。(普段使いは1.9.3を使いましょう) ふつうにrbenvでインストールします。

$ rbenv install
usage: rbenv install VERSION
       rbenv install /path/to/definition

Available versions:
    ...
    1.9.2-p320
    ...
$ rbenv install 1.9.2-p320

依存gemも特に難しいことはなくRubyGemsでインストールします。

$ rbenv shell 1.9.2-p320
$ gem install nokogiri --no-rdoc --no-ri
$ gem install net-https-wrapper --no-rdoc --no-ri

pandoc

pandocはさきほどインストールしているので問題なしです。

設定

最後にblogger.vimの設定を行ないます。公式の設定に習い以下のように~/.vimrcに記述します。

let g:blogger_blogid = 'your_blogid_here'
let g:blogger_email = 'your_email_here'
let g:blogger_pass = 'your_blogger_password_here'
let g:blogger_ruby_path = '/path/to/ruby'

blogidはBloggerの編集画面などのURLに含まれるblogIDというパラメータの値です。 メールアドレスとパスワードはBloggerのアカウントのものを記述してください。 (.vimrcをgithubに上げられている方はこのあたりは別のファイルに切り出した方が良さそう。)
最後のRubyのパスですが、rbenvを使っている場合はversionsディレクトリ以下のrubyを指定しておくと、バージョンを固定出来ます。 1.9.2-p320の場合は以下のような感じ

let g:blogger_ruby_path = '/Users/yourname/.rbenv/versions/1.9.2-p320/bin/ruby'

これですべての準備が出来ました。

使ってみる

では、公式のドキュメントに習ってblogger.vimを使ってみましょう。

記事の一覧の取得

以下のようにすることで記事の一覧が取得出来ます。タイトルの一覧が表示されますので、開きたい行にカーソルを合せて<Enter>を入力することで開くことが出来ます。この時、pandocを用いてHTMLをMarkdown形式に変換して表示してくれるため、そのまま編集することが出来ます。

:e blogger:list

投稿する

投稿するには適当なbufferを開いておもむろにMarkdown形式で記事を書きます。この時一行目がタイトルになります。 またタイトルの先頭にDRAFTと付けることで、下書き状態で投稿することも出来ます。 quickrunを使用してプレビューしつつ記事を書き上げます。
記事が完成したら、以下のようにすることでBloggerに投稿されます。

:w blogger:create

どうですか、投稿されました? エラーが出た場合は以下のようにすることで回避出来るようです。

:w! blogger:create

DRAFTの状態で投稿して、実際にBlogger上でプレビューすることで微調整を行なってから投稿するのが良さ気です。

最後に

だらだらと作業ログを書きましたが、まだ一度も投稿しておらずこの記事がうまく投稿されることで、この記事の正当性が証明される仕組みとなっております。 これで快適にブログを書くことが出来るようになり、ばんばんと良記事を書けるようになるでしょう。
一部の人が喜びそうなネタを選びつつ書いていきたいと思います。今後ともお付き合い頂けますと幸いです。

参考URL

お詫び

なんかうまくいかなかったので、pandocが掃き出したHTMLを貼り付けました。

© Happy Elements K.K