Blogger投稿Tips

Macbook Air, pt. 2ここでは、Bloggerへの投稿に便利なツールを紹介していきたいと思います。執筆環境はできる限り簡単でシンプルなものが良いと思うので、皆様のBlogger環境の構築に少しでもお役に立てればと思います。
photo credit: Marcin Wichary


Blogger.vim

Blogger.vimを導入することで、Vim EditorからBloggerへの投稿ができます。また、Blogger.vimは、Markdownで書いたものをHTMLに変換して投稿できるので、非常に便利です。ここでは、Bloggerへの投稿方法と投稿した記事を編集する方法、そして、Markdown記法について紹介していきたいと思います。

sudo port install pandoc

gem install nokogiri

gem install net-https-wrapper

sudo port install git


なお、MacPortというパッケージ管理システムをインストールしていない場合は、MacPortをダウンロードし、インストールします。また、MacPortの動作には、Xcodeが必要になることがあります。よって、Xcodeをインストールしておきましょう。さらに、Xcodeを起動して、「Preferences…」→「Downloads」→「Command Line Tools」と進み、インストールしておくと便利です。

その他、RubyGemsがインストールされていない場合は、以下のようにします。
sudo port install rb-rubygems


後は、Vim Pluginのインストールと設定です。必要なプラグインをVundleを使ってインストールしていきます。
git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle
 
echo "source ~/.vim/bundle/vundle/test/minirc.vim" >> ~/.vimrc
 
vim ~/.vim/bundle/vundle/test/minirc.vim


そして、~/.vim/bundle/vundle/test/minirc.vimを以下のように編集します。

set nocompatible
syntax on
filetype off
set rtp+=~/.vim/bundle/vundle/
call vundle#rc()
" プラグインの管理
Bundle 'gmarik/vundle'
 
" gitリポジトリの内容を参照する
Bundle 'kana/vim-metarw'
 
" bloggerに投稿する
Bundle 'ujihisa/blogger.vim'
 
" プラグインの読み込みパスを変更
Bundle 'tpope/vim-pathogen'
 
filetype plugin indent on


最後に、Vimコマンドである:BundleInstallを実行すれば、Vim Pluginがインストールされます。

後は、プラグインに必要な設定を行なっていきます。具体的には、Blogger.vimの動作に必要なBloggerアカウント情報などを設定ファイルに書いていきます。~/.vimrcに以下を追記します。なお、your_blogid_hereの部分、つまりブログIDは、ブログの管理画面のURLを見れば分かると思います。

let g:blogger_blogid = 'your_blogid_here'
let g:blogger_email = 'your_email_here'
let g:blogger_pass = 'your_blogger_password_here'


もし起動しない場合は、以下の手順を試してみましょう。
git clone https://github.com/ujihisa/blogger.vim.git

cd blogger.vim

mkdir -p ~/.vim/autoload/metarw/

cp autoload/metarw/blogger.vim ~/.vim/autoload/metarw/ && cp autoload/metarw/blogger.rb ~/.vim/autoload/metarw/

which ruby

echo "let g:blogger_ruby_path = '[which ruby]で調べたパスを記入する'" >> ~/.vimrc


使い方は簡単です。以下のコマンドを入力するだけです。Vim上からBloggerへの投稿や過去の記事を取得し、編集ができたりします。



#Bloggerに投稿する
:w blogger:create

#Bloggerのリストを取得する
:e blogger:list


Gist.vim

Gist.vimを使用することで、Codeを簡単に投稿したり、ブログに埋め込んだりすることができます。ここでは、Gist.vimを使って、GistにCodeを投稿し、それをブログに埋め込むまでを紹介していきたいと思います。

ただし、Gistを利用するには、GitHubへの登録が必要になります。GitHubのアカウントをお持ちでない方は、登録しておきましょう。

Bundle 'mattn/gist-vim'


:BundleInstallも忘れずに。以下この手順については、省略します。

次に、ドキュメントにあるように、必要な物を用意します。以下のコマンドを実行してください。

% mkdir ~/.vim/cookies && touch ~/.vim/cookies/github

そして、設定ファイルに以下を追記します。
let g:gist_clip_command = 'pbcopy'
let g:gist_detect_filetype = 1
let g:github_user = 'usrename'


これで、コードを書いて、:Gistなどとすると、Gistへの投稿が完了し、URLがクリップボードに取得されます。



また、以下を設定ファイルに書くことで、クリップボードにGistへのURLが保存されている状態で:PasteGistを実行すれば、GistへのURLが埋め込みコードに変換されます。これに関しては、Gist.vimの導入とヘルパースクリプトの作成がとても参考になります。ここに載っているコードを簡単にではありますが、改良してみました。

" PasteGist
func! s:paste_gist_tag()
  let mx = 'http[s]\?://gist.github.com/\([0-9]\+\)'
  " +または"レジスタの中身を検索する
  let regs = [@+,@"]
  for r in regs
    let mlist = matchlist(r, mx)
    if ( len(mlist) > 2 )
      "カーソル行に挿入
      exe "normal! O<script src='https://gist.github.com/" . mlist[1] . ".js'></script>"
      return
    endif
  endif
endfunc
command! -nargs=0 PasteGist     call paste_gist_tag()


これで、Vim上からGistへコードを投稿し、ブログへの埋め込みコードを取得することができるようになります。



Zencoding-vim

Zencoding-vimとは、省略記法でHTMLへの変換を実現するVim Pluginのことです。Zencoding-vimは、ブログをやっている人なら便利に使えると思います。

Bundle 'mattn/zencoding-vim'


私がよく使う記法は、以下のものです。記法を入力した後に、C-y-,を入力すると、記法がHTMLに変換されます。
span:code

↓

<span class="code"></span>


【続きを読む】を設置する




【続きを読む】を設置するには、以下のタグが便利だと思います。まあ、あんまり良くないやり方ですが...。

#区切りを入れるタグ
</br>
<!--more--></br>

#画像を挿入するタグ(右に文字を入れる)
<img src="ここに画像URLを入れる" align="left">ここに文字を入れる<
;br clear="all">

#つまり、こうなります。
<img src="ここに画像URLを入れる" align="left">ここに文字を入れる<
;br clear="all">
</br>
<!--more--></br>


これは、自分の場合、文章冒頭に入れる定形になりそうなので、neocomplcacheでスニペットを自作しておくと便利だと思いました。

画像をアップロードする

画像をアップロードするには、GoogleCLが便利です。BloggerへのPostもできますが、私は、主に画像のアップロードに使っています。GoogleCLをインストールするには、以下のコマンドを実行します。

% sudo port install googlecl

後は、Shellの設定ファイルに以下のようなエイリアス(ショートカット)を設定おけば、picasaというコマンド一発で、特定のフォルダに入れた画像ファイルを一括アップロードできます。

alias picasa='google picasa post -n "blogger" ~/Pictures/blogger/* && rm ~/Pictures/blogger/*'


このエイリアスは、picasaを実行すると、~/Pictures/bloggerフォルダにあるファイルをPicasaに一括アップロードし、アップロードした後は、~/Pictures/bloggerフォルダにあるファイルをすべて削除するというものです。



以下のエイリアスを設定することで、picasaコマンドを実行すると、特定のフォルダ~/Pictures/picasaに保存した画像ファイルをPicasaにアップロードすることができます。

alias picasa='touch ~/Pictures/picasa/test.html && rm ~/Pictures/picasa/*.html && google picasa post -n "picasa" ~/Pictures/picasa/*.png && rm ~/Pictures/picasa/*.png && google picasa list -n "picasa" --delimiter " " > ~/Pictures/picasa/img_link.html && vim ~/Pictures/picasa/img_link.html'


ファイルを削除するかどうかを聞かれた後は、テキストファイルが開きますが、ここに表示されたURLを既定のブラウザで開きます。なお、URLを開くには、以下の設定が必要になります。

let g:netrw_nogx = 1 " disable netrw's gx mapping.
nmap gx <Plug>(openbrowser-smart-search)
vmap gx <Plug>(openbrowser-smart-search)


また、open-browser.vimをインストールしていない場合は、当該`Vim Plugin`をインストールします。

Bundle 'tyru/open-browser.vim'


URL上でgxを押すと、当該URLを既定のブラウザで開けます。

この作業では最終段階であるPicasaの`Web Page`から画像ファイルの直リンクを取得するのがあまりに面倒で好きではありません。これについては、そのうち改善したいと思っています。なお、`Editor`にEmacsを使っている人は、org-modeが便利です。

画像をアップロードする前にやっておくこと

画像をアップロードする前には、EXIF情報を削除することをおすすめします。EXIF情報とは、一般的に画像に含まれる様々な情報のことで、GPS位置情報も含まれます。
TIFF形式で画像についての情報や撮影日時などの付加情報を記録できるほか、縮小画像(サムネイル)を記録することができる。

http://e-words.jp/w/Exif.html

このため、画像をアップロードする前には削除するのが決まりの手順ということになります。ここで、EXIF情報を一括削除する方法を紹介します。exiftoolというものを使います。

brew install exiftool


フォルダ内にある画像のEXIF情報を一括削除するには、以下のコマンドを実行します。

exiftool -overwrite_original -all= ディレクトリ名


ここで、例えば、アップロードする前にこの作業を自動化するには、以下のようなエイリアスを設定するとお勧めです。

alias picasa='exiftool -overwrite_original -all= ~/Pictures/picasa && touch ~/Pictures/picasa/test.html && rm ~/Pictures/picasa/*.html && google picasa post -n "picasa" ~/Pictures/picasa/*.png && rm ~/Pictures/picasa/*.png && google picasa list -n "picasa" --delimiter " " > ~/Pictures/picasa/img_link.html && vim ~/Pictures/picasa/img_link.html'


アイキャッチ画像を挿入する

個人的には、これが一番厄介な手順になります。基本的には、画像共有サイトであるFlickrの画像を使うのですが、Photo Pinで検索するのがお勧めです。



上のマークがついている場合は、原作者の名前と当該画像へのURLを表示すれば、画像をブログに使用することができます。

Photo Pinが生成するタグは、例えば、以下のようなものが自動生成されるようになっています。

photo credit: Computer Science Geek via photo pin cc

よって、見た目も考慮し、私は以下のような形でアイキャッチ画像を使用します。




<img src="Flickrの画像URL" width="240" height="160" alt="Macbook Air, pt. 2" align="left">文章入力<br clear="all">
<font size="1">photo credit: <a href="http://www.flickr.com/photos/mwichary/2196088153/">Marcin Wichary</a></font>
<br />


やはりソースは分かりやすい形で載せたほうがいいように思います。読者としても、これがどこからの情報かというのは気になるところだと思いますので。

GoogleCLからのPost

最初に、 Blogger.vim という`Vim Plugin`を紹介したと思いますが、Markdownは軽量言語にすぎません。よって、細かいところは表現できず、単に基本を素早く表現できるようにするためだけのものです。したがって、表現には限界があります。しかし、Blogger.vim を使ってMarkdown記法で書いたものを投稿した場合、その書式に従っていたとしても、形が崩れてしまうことがあります。

例えば、Markdownでは、<div>要素で囲い、前後を空行で埋めると、その要素の中では、HTMLがそのまま表現されます。しかし、私の場合、これを用いても回避できないエラーが`Blogger.vim`に出て投稿できないことがあります。

よって、そのような場合は、GoogleCLを使用して、BloggerにPostしましょう。

google blogger post --blog "MBA-HACK" --title "test" --user "xxx@gmail.com"  --tags "blogger" test.txt


なお、1行目はタイトルになるようですが、オプションを付けて指定しておかないと、2回繰り返されるようです。

Markdown

Markdownとは、Markdown形式で書かれたテキストをHTMLに変換してくれるツールのことです。

brew install markdown


使い方は簡単で、 markdown test.md > test.html のようにテキストを指定するだけです。

markdown

Markdownで書いたものをPreviewする



w3mMarkdown をインストールしている状態で、~/.zshrcに以下の設定を追記します。



これで、Markdownで書いたテキストを markdown_preview で指定するとプレビューできるようになります。

html2text

時に、Markdownでどのように書くのか忘れてしまうことがあります。そんな時は、 html2text がお勧めです。これは、HTMLをMarkdownで書くとどのようになるかを表示してくれます。

git clone https://github.com/aaronsw/html2text.git

cd html2text

python html2text.py https://github.com/aaronsw/html2text


html2text


BloggerPost時に区切りタグが変換される問題を回避する


BloggerPost時には、区切りタグが変換されてしまい もっと読む がうまく表示できません。しかし、この問題を回避する方法は私が知るかぎりで3つあります。


ひとつは、以下のように2つのタグを連続して使用する方法です。

<!--more--><!--more-->



これが私が使用している方法です。また、他にも 記事中に more があった場合、記事の指定箇所を使う方法 AppleScript で自動変換する方法 があります。私はどちらも試していませんが、どちらも非常に便利だと思います。


使用する画像は事前に調べておこう


記事で使用するアイキャッチ画像は、私の場合、事前のブラウジングで探したものを Simplenote に保存するようにしています。


simplenote_vim


その場合、 w3m ではなく、 Chrome を使います。画像の検索をする場合、テキストブラウザを使用する必要性もなければ、その意味もないと考えているからです。


chrome_photopin


GoogleCL/Blogger用のシェルスクリプト


私は、Bloggerへのポストに GoogleCL を使用しています。しかし、毎回必要なオプションを付けてコマンドを実行しなければならないため、 シェルスクリプトを作成しています。


#!/usr/bin/perl
use utf8;

my $blog = "My Blog";
my $tf = "/tmp/blogger-post.tmp";

while (my $f = shift) {
print "Posting $f ...n";
open(IN, "<:utf8", $f) || die "Cannot open $f : $!n";
my $title = <IN>;
chomp $title;
(length($title) > 0) || die "Title is emptyn";
my $tags = <IN>;
chomp $tags;
open(OUT, ">:utf8", $tf) || die "Cannot write to $tf : $!n";
while (<IN>) {
print OUT;
}
close IN;
close OUT;
my $r = system("google blogger post --blog="$blog" ".
"--draft -n "$title" -t "$tags" $tf");
unlink $tf;
exit 1 if ($r ne 0);
}



私の場合はもっと簡単なものを使用しています。 blogpost <タイトル> <タグ> <ディレクトリ>のように使います。


google blogger post --blog "MBA-HACK" --title "$1"  --tags "$2" $3



neocomplcacheでスニペットを自作する方法

今回は、 neocomplcache でスニペットを自作する方法を紹介します。スニペットとは、補完関数のようなもので、ブログの更新にも便利です。

まずは、必要なプラグインをインストールします。


Bundle 'Shougo/neocomplcache-snippets-complete'



そして、 :NeoComplCacheEditSnippets というコマンドを実行します。すると、スニペットを編集できます。


スニペットの書き方は、以下のようになります。


snippet code
abbr <pre class="brush: html;">
prev_word
<pre class="brush: shell; highlight: [0]; title: '${1}';"></pre>


neocomplcache_snippets


まず、 snippet で補完に必要なキーワードを指定します。そして、 abbr で表示される文字を指定します。 prev_word 以下に展開される内容を指定します。なお、 ${1,2,3} を入れることで、展開後の移動先を指定します。

また、設定ファイルに以下の様な内容を書いておくと、更に便利にスニペット補完が使えます。


" ユーザー定義スニペット保存ディレクトリ
let g:neocomplcache_snippets_dir = $HOME.'/.vim/snippets'

" スニペット
imap <silent>LK <Plug>(neocomplcache_snippets_expand)
smap <silent>LK <Plug>(neocomplcache_snippets_expand)

" :NeoComplCacheEditSnippets
noremap es :<C-u>NeoComplCacheEditSnippets<CR>



これで、指定したキーワードを入力し、 LK を押すと、指定した文字列が展開されます。


neocomplcache_snippets

HTMLの特殊文字を変換する方法

HTMLは、特定の文字列をそのまま表示することはできません。よって、そのような文字列を表示するには、ちゃんと表示出来るように変換する必要があります。以下の方法で簡単に変換できます。

mkdir -p ~/.vim/plugin

curl http://www.serendip.ws/resource/str2htmlentity.vim > ~/.vim/plugin/str2htmlentity.vim


そして、以下の内容を 設定ファイル に追記します。


vmap <silent> sx :Str2HtmlEntity<cr>
vmap <silent> sr :Entity2HtmlString<cr>



これで、変換したい文字列をビジュアルモードで選択し、 sx を押すHTMLで表示できる形で文字列が変換されます。

str2html



Twitterとの連携



私は、ブログの記事を書くのに必要な情報をTwitterに上げることがあります。その理由は、主に情報収集は、iPhoneとTwitterを利用していて、パソコンとスマホの役割分担を明確化させているためです。


私は、情報収集は、隙間の時間を使って、iPhoneでやることにしています。そして、パソコンを触れるときは、パソコンでしかできないこと、または、スマホでは時間がかかってしまうことをやることにしています。


と言っても、私は、パソコン初心者なので、パソコンでやることといってもたかが知れていますが。

Safariを使ったHTMLプレビュー



まずは、 Vimの設定ファイルに以下を追記します。


" F5でHTMLのプレビュー Safari
nnoremap <F5> :!open -a Safari %<CR><CR>



そして、このままでは、文字化けが発生してしまうため、 Safari設定 を変更します。


具体的には、環境設定 > 詳細 > デフォルトのテキストエンコーディング を utf-8 に変更します。


safari_utf8

これで、Vim上でHTMLファイルを保存:wし、F5を押すと、Safariで簡易プレビューされます。

Bloggerへのポスト

以下のシェルスクリプトをパスの通った場所echo $PATHに保存することで、blog <タイトル> <タグ> <ディレクトリ>とすれば、Bloggerにポストできます。なお、"MBA-HACK"の場所には、自分のブログタイトルを入れてください。

#!/bin/bash
google blogger post --blog "MBA-HACK" --title "$1"  --tags "$2" $3


YouTubeへのポスト

youtube_postとすれば、~/Movies/youtube/に保存した動画をYouTubeにアップロードします。その後、YouTubeにアップロードした動画リストを開きます。

alias youtube_post='touch ~/Movies/youtube/test.html && rm ~/Movies/youtube/*.html && google youtube post --category People ~/Movies/youtube/*.mov && rm ~/Movies/youtube/*.mov && google youtube list --delimiter " " > ~/Movies/youtube/url.html && vim ~/Movies/youtube/url.html'


撮影に関して

今回のビデオ撮影は、QuickTime Playerで行いましたが、記事の作成から投稿までの操作は、ミスだらけです。やっぱりビデオ撮影というのはかなり難しいですね。緊張していつもどおり出来なかったり、マシンがいつもより重かったり(撮影しているためだと思います)、色々トラブルが絶えませんでした。


ブログに貼る画像を圧縮する方法

ブログで使用する画像は圧縮すべきか?


画像のサイズが大きいと、スマホでは、記事が読みづらいらしいです。


今後も、このブログはパソコンで読んで欲しいと思っているので、スマホのテンプレートをカスタマイズすることは考えていません。


しかし、最低限の配慮はしたほうがよさそうなので、ブログで使用する画像をアップロードする際は、画像を圧縮してみることにします。


画像の圧縮手順


今回、画像を圧縮する際に確認した作業をまとめてみようと思います。


mkdir work && cd work/ && wkhtmltoimage http://mba-hack.blogspot.jp/2012/08/blogicat.html img.jpg

convert img.jpg img.png

cp img.png img1.png

mogrify -quality 75 img1.png

ls -lh

display img.png & display img1.png &



まず、比較するために画像でもダウンロードして、それをコピーします。そして、 mogrify コマンドで圧縮を実行した後、サイズや見た目を確認します。


比較の結果


サイズ : 9.6K→2.6K






サイズはかなり圧縮されているように感じますが、拡大してみた結果、あまり変わらないような気がします。


ということで、画像をアップロードする際は、このコマンドを実行することにしてみます。


mogrify -quality 75 *.png


比較はもっと分かりやすい画像のほうが良かったかも...。皆様はできるだけ派手な画像で比較したほうが分かりやすいかもです。なお、 ImageMagick をインストールしていない場合は、 brew install imagemagick とでもし、インストールしてください。


アイキャッチ画像のまとめページを作った

ここでは、アイキャッチ画像のまとめページを作ったことに伴い、その使用法を紹介していこうと思います。

# 作業ディレクトリの作成
mkdir ~/blog/

# ページのダウンロード
cd ~/blog/ && touch blogicat.test && rm blogicat* && curl -o blogicat.html http://mba-hack.blogspot.jp/2012/08/blogicat.html && wkhtmltoimage http://mba-hack.blogspot.jp/2012/08/blogicat.html blogicat.jpg

# ページの閲覧とHTMLの取得
cd ~/blog/ && display blogicat.jpg & vim blogicat.html


なお、wkhtmltoimage などはインストールしておいてください。これは、WebページをPDFやJPGで保存することができるアプリです。



後は、X11を操作し、ブログに使いたい画像があった場合は、blogicat.html/ を押し、検索します。具体的には、ID検索やタグ検索が便利です。使用中のタグは、 #! で検索してください。なお、上のコマンドには、エイリアスなどを設定しておくと便利かもしれません。



私がBloggerを更新するときに使っている方法まとめ

重複する内容もあろうかと思いますが、以下にもう一度、私がBloggerを更新するときに使っている方法をまとめてみようと思います。

ブログ更新の様子




必要なもの


Mac


Xcode

Xcode CommandLine Tool

MacPort

$ sudo port install git vim googlecl wget imagemagick exiftool

$ mkdir -p ~/blog ~/Movies/youtube ~/Pictures/picasa

$ chsh -s /bin/zsh && touch ~/.zshrc && exec $SHELL

$ git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle

$ vim ~/.vim/bundle/vundle/test/minirc.vim


Ubuntu



$ sudo apt-get install -y zsh git vim googlecl wget imagemagick exiftool

$ mkdir -p ~/blog ~/Movies/youtube ~/Pictures/picasa

$ chsh -s /bin/zsh && touch ~/.zshrc && exec $SHELL

$ git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle

$ vim ~/.vim/bundle/vundle/test/minirc.vim


Windows


Cygwin

$ apt-cyg install mintty (なくてもいいけど、おすすめ)

$ apt-cyg install git zsh vim googlecl wget imagemagick exiftool

$ mkdir -p ~/blog ~/Movies/youtube ~/Pictures/picasa

$ git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle

$ vim ~/.vim/bundle/vundle/test/minirc.vim

デフォルトシェルを変更する方法


共通


vim ~/.vim/bundle/vundle/test/minirc.vim

set nocompatible
syntax on
filetype off
set rtp+=~/.vim/bundle/vundle/
call vundle#rc()
Bundle 'gmarik/vundle'

" open-browser.vim
Bundle 'tyru/open-browser.vim'

" TweetVim
Bundle 'basyura/TweetVim'
Bundle 'mattn/webapi-vim'
Bundle 'basyura/twibill.vim'
Bundle 'h1mesuke/unite-outline'
Bundle 'basyura/bitly.vim'

filetype plugin indent on


:BundleInstallを実行すると、プラグインがインストールされます。


vimpu


必要な知識


$ echo $PATH
# パスを調べるコマンドです。ここに表示されたフォルダ内にシェルスクリプトを保存するようにしましょう。

$ exec $SHELL
# シェルを再起動するコマンドです。設定を反映させるには、このコマンドを実行しましょう。

$ chmod +x ファイル名
# ファイルに実行権限を与えるコマンドです。今回作成するシェルスクリプトには、すべてこのコマンドを実行しましょう。



アイキャッチ画像の使用


alias blogicat_dl='cd ~/blog/ && touch blogicat.test && rm blogicat* && curl -o blogicat.html http://mba-hack.blogspot.jp/2012/08/blogicat.html && wkhtmltoimage http://mba-hack.blogspot.jp/2012/08/blogicat.html blogicat.jpg'



blogicat-dlでアイキャッチ画像をまとめたページを .jpg.htmlで保存することができます。

alias blogicat='cd ~/blog/ && display blogicat.jpg & vim blogicat.html'



blogicatで上でダウンロードしたアイキャッチ画像ページを開くことができます。


通常の使い方は、当該ページが更新されたら、 blogicat-dを実行しますが、それ以外は、 blogicat-dを実行します。使用したい画像が見つかったら、 blogicat.htmlをID検索し、コードをコピーでもしましょう。


Bloggerへのポスト


alias blogger='blogicat && cd ~/blog/ && touch blogpost.test.html && rm blogpost* && vim blogpost.html && pbpaste | xargs blogger_post'


アイキャッチ画像を選択しない場合は、以下のようにします。

alias blogger='cd ~/blog/ && touch blogpost.test.html && rm blogpost* && vim blogpost.html && pbpaste | xargs blogger_post'



以下のシェルスクリプトをパスの通った場所に保存します。

#!/bin/zsh
google blogger post --blog "MBA-HACK" --title "$1"  --tags "$2" ~/blog/blogpost.html && google blogger --blog "MBA-HACK" list --delimiter " " > ~/blog/mba_hack_list.html && vim -c "e ~/blog/mba_hack_list.html" +/http && rm ~/blog/mba_hack_list.html



これは、何をしているのかというと、まず、アイキャッチ画像のページを表示し(blogicatを事前に実行しておくこと)、そのページをHTMLで開きます。そして、 ~/blog/blogpost.html を開き、編集が終わったら、クリップボードにある文字列を blogger_postに渡します。


blogger_postは、タイトルとタグを引きとり、 ~/blog/blogpost.html を Blogger にポストします。その後、リストを ~/blog/mba_hack_list.htmlとしてダウンロードし、ダウンロードしたあと Vim で開きます。ここで、ファイルを開くときに、 httpという文字列の検索を実行しておきます。


これで、 bloggerコマンド一発で、使用するアイキャッチ画像を選択し、記事を書いて、それを保存し、 'タイトル' タグをコピーして ~/blog/blogpost.htmlを閉じることで、 Blogger へのポストが完了します。


また、ポストした後も、自動でリストを表示してくれるので、瞬時に投稿した記事へアクセスすることができます。


簡単にアクセスするには、以下の設定を ~/vimrc に追記し、 カーソル下にURLがある状態で、 gxを押します。すると、既定のブラウザで、ページを開くことができます。

" カーソル下のURLを開く
let g:netrw_nogx = 1 " disable netrw's gx mapping.
nmap gx <Plug>(openbrowser-smart-search)
vmap gx <Plug>(openbrowser-smart-search)


画像の編集


alias skitch='open -a Skitch'



画像ファイルの編集は、もっぱら Skitch で行います。 ImageMagick で編集してもいいのですが、モザイクをかけるなどの一括処理以外の場合は、画像編集系は、GUIアプリのほうがやりやすいですね。以下のようにファイルを指定すれば、編集できます。

skitch ~/Pictures/picasa/img.png


また、スクリーンショットを撮影した場合、保存は、 Ctrl+Eです。


画像を一括アップロード


alias picasa='cd ~/Pictures/picasa/ && mogrify -quality 75 *.png && exiftool -overwrite_original -all= ~/Pictures/picasa && touch ~/Pictures/picasa/test.html && rm ~/Pictures/picasa/*.html && google picasa post -n "picasa" ~/Pictures/picasa/*.png && rm ~/Pictures/picasa/*.png && google picasa list -n "picasa" --delimiter " " > ~/Pictures/picasa/img_link.html && vim -c "e ~/Pictures/picasa/img_link.html" +/http'



picasaコマンドを実行すると、 ~/Pictures/picasa/ にある .png ファイルをすべて Picasa にアップロードすることができます。ファイルをアップロードした後は、リストを開きます。


なお、ファイルをアップロードする際は、EXIF情報の削除とファイルの圧縮を自動で行なっています。また、ファイルをアップロードした後は、アップロードしたファイルを全て削除するように設定されているので、注意が必要です。


Twitterに上げた情報を検索する


#!/bin/zsh
vim -c "TweetVimSearch from:PSP_T '$1'" +/http



tsで自身のツイートを検索できます。


プレビューを行う


まず、自身のページを以下のようにしてダウンロードします。どのページでもいいです。

cd ~/blog/ && curl -o temp_gen.html http://mba-hack.blogspot.jp/2012/08/blogicat.html



そして、先ほどダウンロードしたページを編集します。具体的には、 <a name='xxxxxxxxxxxxxxxx'></a> 以下を削除し、保存します。ただし、これは、テンプレートによって異なるかもしれませんので、自身の環境にあわせてください。


あとは、以下の設定を施すと、Vimで編集中に <Leader>br を押すと、 Safari でプレビューされます。

#!/bin/zsh
cd ~/blog/ && cp -f temp_gen.html temp.html && touch id234.test && rm *.test && sed -e "s/^$/<br\/>/g" blogpost.html > post.test && cat post.test >> temp.html && open -a Safari temp.html


" <Leader>br でHTMLをプレビューする
nnoremap <Leader>br <Esc>:!mba_hack_preview<CR>



safari