株式会社EC studioの技術ブログ

twitterを使っていて、デスクトップのキャプチャ画像を
つぶやきたい時がよくありませんか？

[キャプチャ画像の例]

通常だとtwitterにつぶやくまではこんな手順ではないでしょうか。

1.キャプチャしたい状態を準備
2.PrintScreenなどでキャプチャ
3.画像編集ソフトで切り抜いてファイル保存
4.twitpicを開いてログイン
5.twitpicでファイルアップロード
6.twitterでURLをつぶやく

うーん、手間です。。

キャプチャソフトを使ったり、twitterクライアントを
使えば少しは楽になりますが、いちいちファイルを
保存してアップというのがそもそも面倒です。

twitterなのでもっと気軽にさくっとつぶやきたいところです。

というわけでいろいろとツールを組み合わせて、
超高速でtwitterへキャプチャ画像をアップする仕組みを
作ってみました。

今回の完成品

ショートカットキーをたたくと

カーソルが十字にかわり、

ドラッグして範囲指定すると

即座にtwitpicにアップされ、画像のプレビュー画面が表示されます。
(http://twitpic.com/xxxxx をクリックするとtwitpicが開きます)

ここから、「この画像をツイートする」をクリックすると、

twitterが開き、そのURLがすでに入力された状態になります。
あとはコメントを書いてpostすればok！

というものを作ってみました。
キャプチャをtwitterへつぶやくまでにかかる時間はたった数秒です。

デスクトップのキャプチャソフトと、twitpicのAPIを連携させて実現しています。
スクリプトを改造すればtwitpic以外のサービス(tumblr,flickrなど)に
アップしたりなども自在なので、なかなか面白い仕組みが
できたのではないかと思います。

では、さっそく作り方を説明します！

仕組み

仕組みとしては、

・キャプチャソフトのGyazo
・twitpicアップロード用の自作PHPスクリプト

を組み合わせています。

■Gyazoについて

Gyazoは

http://gyazo.com/ja

で配布されている、スクリーンショットの超簡単キャプチャソフトです。

キャプチャしたい範囲を選ぶだけで、
即座にサーバーへ画像をアップロードしてくれます。

ただ、Gyazoそのままでは

・アップロードされるURLの文字数がとても長い
・アップロードした画像は(いまのところ)削除出来ない
・アップロードされるサーバーが固定(gyazoのサーバー)

など少しtwitterでは使いづらい部分があるので、
そこを自作のPHPスクリプトで補います。

また、今回はGyazoを改造したGyazowin+を使用します。

Gyazowin+は本家版に対し、

・アップロード先の変更
・Basic認証・SSLの対応
・確認ダイアログの表示

の機能が追加されており、これらの機能を使って
twitpicへのアップロードを実現します。

■PHPスクリプトについて

PHPスクリプトでは、Gyazowin+からアップロードされた
ファイルを受け取り、そのままtwitpicのAPIを使って
アップロードします。

twitpicへアップロードした後は、プレビュー画面(下記)を表示して、

画像を確認後twitterへすぐにツイートできるようにしています。
(失敗キャプチャもあるかもなので、一度確認画面を挟んでいます)

作り方1:PHPスクリプトをアップロード

まずPHPスクリプトをダウンロードしてください。

gyazopic.php (zipファイルをダウンロード)

ダウンロードしたら解凍し、スクリプトの頭にある
下記の設定部分を編集してください。

$usernameにtwitterユーザー名、
$passwordにパスワードを入れます。

(例)

編集後、自分のサーバーの好きな箇所へ
アップロードしてください。

作り方2:Gyazowin+をダウンロード

次に、配布サイトよりgyazowin+をダウンロードします。

http://d.hatena.ne.jp/nvsofts/20090321/1237619040

好きなフォルダへ解凍すればokです。

次に、解凍したフォルダの中にある
gyazowin+.ini をメモ帳などで編集します。

upload_serverに、PHPスクリプトを設置するドメイン名、
upload_pathに、ドメイン以降のファイルパスを記述します。

これで設定は完了です！

ショートカットキーを設定する

gyazowin+.exe を右クリックしてショートカットを作成し、
ショートカットを右クリック→プロパティを開きます。

ショートカットキーに、好きなキーをセットします。

あとは、そのショートカットキーを押せば、
カーソルが十字に変わり、範囲指定すれば
twitpicへと即座にアップロードされます！
(※キャンセルしたい場合は右クリック)

おまけ：活用方法

今回使用したGyazoは、即座にキャプチャファイルをサーバーへ
POSTすることができるので、様々な活用方法が考えられるのではないかと思います。

Google Documentへとアップロードしたり、Blogに即postしたり、
tumblrに投げたり、flickrへ保存したり、、、、

社内のサポートツールにも使えるかもしれませんね。
EC studioではこのGyazoを使ってサイト制作やシステム開発の時の
ラフ画像や、トラブル発生時のキャプチャなどをやりとりしています。
(チャットでURLを送りあう)

今回作ったPHPスクリプトは100行程度のとても簡単なものなので、
ぜひ改造して自分に使いやすい仕組みを作ってみてください！

ご要望やご質問、感想などがあれば私のtwitterまでどうぞ！
(http://twitter.com/msk_masaki)

---

[告知]
EC studioで本を出版することになりました！
EC studioでiPhoneとtwitterを全社導入した時の事例や、
Google Appsの活用法などを詳しくまとめています。
Google 辻野社長との対談も収録！
※Amazon総合ランキング1位獲得しました！

詳しくはこちらの詳細ページをご覧下さい！

関連した記事：

• twitterの興味のあるつぶやき(ツイート)を自動で収集する仕組みを作ってみました