capture.atom.js ブラウザでキャプチャしてはてなフォトライフにアップロードするJSActionsスクリプト v.0.0.2b

Share On Tumblr! するときに、サイトのロゴとかはだいたいタグの背景画像として設定されていているので選択できないし、さらに特定の背景色を前提にして画像が作られていたりするのでブラウザでレンダリングした状態でないときれいに表示されないので、ブラウザ上でスクリーンショットをとって、それをそのままatomでアップロードするJSActionsスクリプトをつくりました。

2007.12.1 v.0.0.2b

jsactions_2007112102a1で動かなくなっていたのを修正しました。

2007.11.29 v.0.0.2a

Firebugがインストールされていないときにエラーが出ることがあるのを修正しました。あと本文中で設定ファイルをcapture.conf.jsにしてくださいと書いていたところがあったのは間違いで正しくはcapture.atom.confでした。taizoooさんに間違いを指摘していただきました。ありがとうございます。ご迷惑おかけしました…

2007.8.13 v.0.0.2

文字化けするのとリンクされてるところをクリックしたときに飛んじゃうのを直しました。あとESCを押すとキャンセルできるようにしました。

ブラウザの中限定だけど、キャプチャしたのがそのままサーバに残ってくれるかんじはtumblelogingに近くてやみつきになるかも。DTYBYWL の背景になってるタイルがかわいい、と思ったらすぐキャプチャしてそれがそのままサーバに保存されるのは快適。もうちょっと細工してアップロードしたやつをtumblrにpostできるようにしたいです。

ダウンロード

capture.atom.js

設定

ダウンロードしたcapture.atom.jsをJSActionsのglobalフォルダに保存します。次に、そのひとつ上のフォルダ(JSActionsのglobalとかselectionとかのフォルダがあるフォルダです)に capture.atom.conf というファイルを作ってサーバの認証情報とatomのエンドポイントを書きます。
API経由だと幅450px以上になると勝手に縮小しちゃって汚くなるんだけど([設定]で画像サイズの数字を2400とかにすれば2400までは縮小されずにすみます) atom + WSSE でつくるのが簡単だったはてなフォトライフだと

( {
        username: 'ku0522',
        password: '********',
        postUri: 'http://f.hatena.ne.jp/atom/post'
} ) ;

こんなかんじ。jsでそのまま読み込んでいるのではじめと終わりの ( { } ) は重要です。ないと動きません。

実行してキャプチャしたいところを囲む

JSActionsからcapture.atom.jsを実行すると、表示しているページ上で範囲選択ができるようになります。今のところリンクになっているところをクリックするとページが切り替わっちゃうんですがそのうちなんとかします。

今回ターゲットにするのは、デジタルで変なことをやってるひとをフィーチャーしているらしいreboot 9.0というデンマークのサイトのロゴ。
もともと Ponoko – Make it Real っていうへんな名前の Etsy :: Your place to buy and sell all things handmade みたいな手作り品マーケットプレイス(まだオープンしてないけどデザインとブログからして、ファンシーで手作り感溢れるものが多いetsyよりも完成度が高くてクールなものが多くなりそう)の(違いました。MAKE: Japan: 三次元オンデマンド製造販売代行サービスにponokoについて触れられています)サイトのブログ が How to Create a 3D Printer in 3 Weeks | Ponoko – Blog みたいなデジタル的に立体を作る、みたいな話がよく書かれていておもしろいのでウォッチしていたときに読んだ Are Products People too? | Ponoko – Blog で知りました。個人的にはラッピングピンみたいなのに糸を巻き付けて立体を作り出すものらしい entangled – a photoset on Flickr とかすごいきになります。

平面でしかもコンピュータ上の話に戻して、上の画像みたいにしてキャプチャしたい範囲をクリックして青い四角で囲みます。

保存

キャプチャしたい範囲を囲むと capture.atom.conf の設定に従ってキャプチャしたデータがatomでPOSTされます。そして保存が終わると右上にHTTPのレスポンスが表示されます。

クリックすると保存した画像のページに繋がります。

capture.atom.js でたのしいはてなフォトライフを！

忘れてた。日本語のタイトルがついてるページだと、文字コードがUTF8(EUC_JPかも)じゃなかったときに化けます。たぶん今から直します。と思ったら はてなフォトライフAtomAPIとは – はてなダイアリー に文字コードについて書かれていなかったのでそのうち直します。直しました。

あとたぶんページに表示してるdocumentのmousedownイベントじゃなくて、全体のイベントをハンドルできるようなのがありそう。今は全体じゃなくてdocumentのをとっているので中にiframeとかがあるとその部分はクリックしても反応しない。調べる。そういうのはないっぽい。preventDefaultしました。

謝辞

キャプチャ部分は SCRAPBLOG : canvas要素によるWebページのスクリーンショット保存機能 のコードをベースにちょっと変えて使わせていただいてます。ありがとうございます。ためしているときにcanvasのdisplayをnoneにしてもキャプチャできた気がするのでそのへん検証してまた書こうと思います。

atom + WSSE 部分は、朝の6時にWSSEをjsで実装しないといけないことに気がついて泣きそうだったところを助けてくれたamachangさんのライブラリをちょこっと書き加えて使っています。ありがとうございます。朝の６時までふつうに働いているのかと思ってはじめ驚愕しましたが朝まで飲んでただけでちょっと安心しました。それでもやっぱり自分には朝まで飲む元気がないなと思いましたけど….(たしか同い年なんです自分より5つくらい若かったです)