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

Power今回は、私がBloggerを更新するために使っている方法をすべて紹介してみます。この手の情報は、今までも色々と紹介してきましたが、ユーザーの方々と接するうちに、分かりにくいんじゃないかと思いました。よって、今回は、もう少し丁寧な説明で解説していこうと思います。
photo credit: tylermhawkins



ブログ更新の様子




必要なもの


Mac


Xcode

Xcode CommandLine Tool

MacPort

$ sudo port install git vim googlecl wget youtube-dl 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 youtube-dl 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 youtube-dl 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 ファイル名
# ファイルに実行権限を与えるコマンドです。今回作成するシェルスクリプトには、すべてこのコマンドを実行しましょう。



音楽や動画を流す


私は、ブログを書く時、音楽や動画を見ながら、ダラダラと書くことが多いですね。ということで、音楽や動画を再生する方法を紹介します。なお、音楽は初音ミク、動画はドットインストールというプログラミング言語の学習動画をおすすめします。
mkdir -p ~/Movies/dt/ && cd ~/Movies/dt/ && wget -r http://dotinstall.com/lessons
 
ls ~/Movies/dt/dotinstall.com/lessons/ > ~/Movies/dt/lesson.txt && echo "alias lesson-ls='cd ~/Movies/dt/ && vim lesson.txt'" >> ~/.zshrc && echo "alias lesson-dl='~/Movies/dt/lesson-dl'" >> ~/.zshrc && cd ~/Movies/dt/ && source ~/.zshrc



#フォルダ内にあるファイルのパスをmylistに抽出する(ただし、隠しファイルは含まない)
alias mylist='find `pwd` -maxdepth 1 -mindepth 1 | grep -v "\/\." > mylist'

# ~/Music/fav/ にあるファイルを音声のみで再生する
alias mu='cd ~/Music/fav && touch mylist.test && rm mylist* && mylist && mplayer -playlist mylist -novideo -loop 20'

# ドットインストールのダウンロードから再生まで
# help : 'lesson'コマンドを実行することで、リストにあるレッスンをクリップボードにコピーし、Vimを閉じると、レッスンをダウンロードし、プレイリスト再生することができる
alias lesson-ls='cd ~/Movies/dt/ && vim lesson.txt'
alias lesson-dl='~/Movies/dt/lesson-dl'



そして、以下のようなシェルスクリプトを作成し、実行権限 chmod +x lesson-dl を与えます。

#!/bin/zsh
until cd ~/Movies/dt/dotinstall.com/lessons/"$1" && touch test.mp4 test.part && rm *.mp4 *.part && cat [0-9]* [0-9]* > filename.txt && grep videoId filename.txt > videoid.txt && sed "s|videoId: '|http://jp.youtube.com/watch?v=|" videoid.txt > url.txt && sed "s/',//g" url.txt > url2.txt && youtube-dl -A -t -a url2.txt && mkdir -p ~/Movies/dt/"$1" && mv *.mp4 ~/Movies/dt/"$1" && cd ~/Movies/dt/"$1" && find `pwd` -maxdepth 1 -mindepth 1 | grep -v "\/\." > mylist && mplayer -playlist mylist -x 680 -y 360 -geometry +1+40 do echo "ダウンロードが失敗しました。もう一度ダウンロードします。終了する場合は、Ctrl+Cを押してください。" done



以上の手順を踏むことで、 lesson-ls とすることで、ダウンロードするレッスンを選択し(Vimが起動しますので、Downloadしたいものをyyでコピーでもしてください)、 lesson-dl 貼り付け とすることで、レッスンをダウンロードし、再生できます。例えば、 Ruby について学びたければ、lesson-dl basic_ruby となります。


dotinstall

なお、もしレッスン一覧(lesson.txt)にあるレッスンをヤンクして使用する場合は、以下の Vim 設定を忘れないでください。

" 無名レジスタに入るデータを、*レジスタにも入れる。
:set clipboard+=unnamed


なお、以下のようにエイリアスを設定しておけば、lesson コマンド一発で、リストにあるレッスンをコピーし、終了すると、コピーしたレッスンを自動ダウンロードしてくれます。

alias lesson='lesson-ls && pbpaste | xargs ./lesson-dl'




アイキャッチ画像の使用



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



なお、完璧なプレビューを行いたい場合は、テンプレートを上下に分けてコンテンツに挟み込んで保存する手法を採用してください。


#!/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 && cat temp_gen2.html >> temp.html && open -a Safari temp.html



" テンプレート(上)
temp_gen.html

" 記事 (~/blog/blogpost.html の改行を < br/ > に変換したもの)
post.test

" テンプレート (下)
temp_gen2.html

" すべてを結合する
temp.html


結合方法

cp -f temp_gen.html temp.html && cat post.test >> temp.html && cat temp_gen2.html >> temp.html

これで、カラムやフッターなどを含む完璧なプレビューを行えると思います(たぶん...)。私は簡易プレビューしか行いませんので、実はこの方法を使ってなかったり...。