gyazo+fotolife - uehaj's blog

画面キャプチャを多用した分かりやすいソフトウェアの設定方法とかインストールの詳しい解説記事をブログに書いてるひとがいらっしゃいます。自分もやりたかったのですが、画像をトリミングしてアップロードとか面倒だなーと思ってました。簡単にできるツールなどが無いかと調べてみたところ、ブログ編集に特化したWindows Live Writerなるものがあるらしいですが、WordPressとか対応だし、hatenaの場合結局fotolifeにアップロードしないと行けないのでうまくいかない（もしくは面倒）と思われます。だいたいWindows専用じゃないか。

ということでさらに調べたところ、MacOS用の超簡単画像アップローダgyazo.appをfotolife対応にする、「はてなフォトライフにpostするgyazoを書いた」という記事を見つけて、これが良さそうだと思って、やってみました。結果として、「Wordで書きながらキャプチャをぺたぺた・・」というわけには行かないですが、それなりに簡単になりました。

やってみたので何か解説したいのですが、こういうときに限って解説するものを思いつかない・・。そうだ、上のgyazoの設定の手順自体を解説してみよう。

gyazoのインストール

gyazo.appをここからインストール。

Gyazoは切れ味鋭い超単機能ソフト。これが今まで存在しなかったというのも驚き。

より使いやすくするために、こちらの設定も合わせて行いたい。

改造

こちらを見てgyazoを改造する。中身はRubyなんですね。へー。

追加改造

ただそのままではfotolifeのURLが変わったせいか？うまく行かなかったので、scriptをさらに修正します。最後のurl変数への代入を以下のようにします。

(変更前)

url = "http://img.f.hatena.ne.jp/images/fotolife/#{head}/#{userid}/#{date}/#{num}_original.png"

(変更後)

url = "http://f.hatena.ne.jp/#{userid}/#{num}"

さらに、クリップボードにコピーする文字列を、URLではなく、はてな記法にしておきます。

(変更前)

system "echo #{url} | pbcopy"

(変更後)

hatena_markup = "[f:id:#{userid}:${num}p:image]"
system "echo #{hatena_markup} | pbcopy"

まとめ

まとめると、scriptの最後の方は以下のようになります。

おっと、画像ではコピペできないか。

url = "http://f.hatena.ne.jp/#{userid}/#{num}"
hatena_markup = "[f:id:#{userid}:#{num}p:image]"
system "echo #{hatena_markup} | pbcopy"
system "open #{url}"

です。使ってみて思ったのですが、ブログ編集用に特化するなら、指定した画像をブラウザで開くためのsystem "open .. の行は不要（邪魔）かもしれませんね。

使い勝手はなかなかよい。でもやりすぎ注意だ（Webのキャプチャ画像が多すぎると、本文と引用がどちらかわかりにくくなって読みにくい。この記事のように・・）。
もっと良い方法があったら知りたいですが。

はてなスクリーンショット拡張との比較

とここまで書いて記事を投稿したら、「お知らせ」に、はてなスクリーンショット拡張なるものがあるとかタイミング良く表示されてびっくり。でも調べると、キャプチャできるのはブラウザの内部だけだし、はてな記法にしてくれるわけでもないんで、今回紹介した方法の方が私にとっては有用です。