Category Archives: Tombloo

Tombloo

chromium for tableauでタグをつけたりできるようになりました

前に作ったやつTomblooのないChromeで自分をちょっとGoogle化する chromium for tableauにフォームをつけました。Windowsでもビルドしてみたんですがメニューは出るけど反応しない状態だったので相変わらずOSX版だけしかありません。

右クリックでメニューが出てくるので
Submenu
タグをつけたりしたい時はShare…のほうを選ぶとフォームが出てきて投稿先のサービスを選ぶことができます。
Quickpostform-Sharephoto
上の方の矢印ボタンを押せば(ここ壊れてるみたいで矢印出てきませんすみません…)
Tagging
タグやコメントをつけたりもできます。

いまのところTumblr, delicious, google bookmarks, twitter, はてなブックマークを利用できます。

写真以外のところを右クリックすればふつうにブックマークするのにも使えます。
Quickpostform-Link

ブックマークするのに使うだけならふつうのchromeでもbookmarkletから使うことができます。ブックマークしたいページでブックマークットを押すと上のフォームが表示されるので、タグやコメントを書いてボタンを押せばブックマークすることができます。

インストール

chromium for tableau本体
chromium.r29096.app.zip
tableau(chromium extension)
tableau-0.3.0.crx

使い方

ダウンロードしたchromium.appを起動してtableau-0.3.0.crxにアクセスして拡張機能をインストールしてください。

TomblooのないChromeで自分をちょっとGoogle化する chromium for tableau

chromiumで動くTomblooが作れるようにならない限りchromiumをメインで使えるようにならないので、コードをいじってメニューからTumblrにpostできるようにしたchromiumをつくりました。いまのところOSX(intel)専用です。

About chromium

インストール

chromium for tableau本体
chromium.app.zip
tableau(chromium extension)
tableau-0.2.0.crx

使い方

ダウンロードしたchromium.appを起動してtableau-0.2.0.crxにアクセスして拡張機能をインストールしてください。

Confirmation

--enable-extensionsがデフォルトでオンになっているリビジョン(25962)をベースにしているので、ふつうに起動すれば拡張機能が有効になっています。

tableauがインストールされると右クリックしたときに出てくるコンテキストメニューにShareという項目が追加されます。

画像の上であればShare – Photo
Share Photo

テキストを選択していればShare – Quoteが出てきます。
Share Quote

何もないところだとShare – Linkになります。
あとはそのままメニューから選択すればログインしているTumblrにpostされます。

ソースコード

元のコードとの差分だけアップロードしています。
ku’s tableau at master – GitHub

僕の愛するTomblooがない

僕の愛するTomblooがない Tomblooこそ自分をGoogle化する最強のツール – Future Insight
Google Chrome 4.0(開発版)のBookmark sync + Autopagerizeが非常に快適な件について – Future Insight

自分も最近仕事でなにかを検索したりするのに使うのにはChrome+AutoPatchWorkで文句なしなのですが、それでもTomblooがないのは致命的なのでどうにかしたいとおもっていました。

いまのところchromiumがコンテキストメニューの拡張に対応しておらず、いちおうAPI Wish List (Chromium Developer Documentation)には載っているけれど当分実装されることは期待できなさそうなのでソースコードをいじって作りました。

まだTumblrにしかpostすることができませんがTomblooの最大の特徴は

  • いろいろなサイトからデータを取り出せて
  • いろいろなサイトにpostできる

ところなので、今後それが実現できるようにしたいと思います。

参考

Tomblooこそ自分をGoogle化する最強のツール – Future Insight

難しいところ

chomiumは外側のワク(アドレスバーとかブックマークとか)を管理しているプロセスとHTMLをレンダリングしているプロセスが別なので、クリックされた要素に応じてコンテキストメニューの中身を動的に変える、というのが難しいです。
Firefoxの場合すべてが同じプロセスの中で動いているので、ふつうにextensionからページのDOMツリーにアクセスして中身を読んで、ブラウザのコンテキストメニューを操作することができますが、chromiumの場合プロセスが別々なのでややこしいことをしないといけません。

DOMツリーを持っているのはレンダリングプロセス、メニューの内容を変更するロジックを持っているのはextensionのプロセス、実際にメニューを表示するのはブラウザプロセス、というふうに分かれているので全部IPCで繋いであげる必要があります。

Tomblooハックス – Firefoxのブックマークをlinkとしてポストする

なんだかんだ言ってもFirefox自身のブックマーク機能は最強です。アドレスバーにある星印を1回クリックするだけでブックマークできるので、(ソーシャル)ブックマークしておくほどでもないけど後で見たいとき、タグをつける労力を払うほどでもないもののときなんかにとりあえず星をつけています。

星をつけても当然あとから見たりしないわけで、しばらくすると未整理のブックマークフォルダにはいるのかいらないのかわからないようなブックマークで溢れかえってしまいます。これをなんでもいいからまとめてどこかに突っ込めないかというわけで、ブックマーク管理画面で右クリックしたところにPost with Tomblooというメニューをつけて、ソーシャルブックマークにpostできるようにしてみました。

places context menu

今回はTombloo本体に手を入れないとできなかったので気軽には試せないんですがGitHubにコミットしてあります。

postしたいブックマークを選んでPost with Tomblooを選ぶとふつうにLinkをpostするときに出てくる画面が出てきます。ブックマークを複数選択していれば複数フォームが出てきます。

link quickform

使ってみた感想

FirefoxのブックマークマネージャのUIでタグを入れたりコメントを入れたりしたほうが速いのか、Tomblooのフォームで入れた方が楽なのかで迷ったりするくらいの便利さで、あんまり便利じゃありませんでした。

あとchromeだとどうなってるんだっけと思ってchromeのブックマークマネージャ開けてみたらFirefoxのものとは比べ物にならない快適さでびっくりしました(でも今のところはタグもコメントもキーワードもつけられないので、ページに入っていたキーワードを忘れないようにしないといけません)。Firefox3のブックマークまわりの設計がパフォーマンス的に失敗だといわれているのはよく目にしていたけれど、それがようやく実感できました。

それTomblooでできるよ! Webページのスクリーンショットをとる

みなさまWebページのスクリーンショットを撮るのには何をお使いですか?
あまり知られていませんがTomblooにはページのスクリーンショットを撮る機能がついています。ブラウザで表示しきれない部分も含めてページ全体を撮れるのはもちろん、ブラウザで見えている範囲だけ、マウスで選択した範囲だけ、HTMLの要素単位とスクリーンショットの取り方も豊富です。

photo capture
右クリックで出てくるメニューからPhoto – Captureを選ぶと、下のようなダイアログが出てきます。

Regionを選ぶと、キャプチャする範囲をマウスで選べます。Elementだとマウスを動かすとHTMLの要素単位でハイライトされるのでキャプチャしたい要素を選んでクリックします。Viewを選ぶと今ブラウザに表示されている範囲がキャプチャされます。Pageを選ぶと今表示されていない部分も含めたページ全体がキャプチャされます。

キャプチャしたものをローカルのディスクにPNGで保存できるのはもちろん、そのまま直接FlickrやGyazoやTumblrに投稿することができます。投稿するときにタグやコメントをつければ、投稿先のサービスにもちゃんと反映されるので、ウェブサイトのデザイン集として作って整理することも、マイ魚拓として使うことも可能です。

result on flickr

ただWindowsではFirefoxの問題でFlashがスクリーンショットに映らないです。Flashのページのスクリーンショットをとりたいときは別の何かを使ってください…
新しいバージョンのTomblooでは写るようになってるみたいです。

Tomblooハックス – クリップボードにpostしてAmazonのアフィリエイトリンクを作る

ひさびさのTomblooハックスシリーズ。

今回はポスト先にクリップボードを追加します。
Tomblooはamazonの個別商品ページで商品を認識してamazonアファリエイトのリンクをtumblrなどにpostできますが、直接postせずにエントリの中に入れたいだけの時があります。そういうときにいったんクリップボードにpostしてそれをエントリの中にペーストして使えるようにします。

インストール

clipboard_poster.jsをFirefoxのプロファイルディレクトリにあるtombloo/scriptに下のファイルをコピーします。

つかいかた

LinkQuoteだけpost可能です。

amazonのリンクをclipboard posterにポストすると

こういう見た目になるHTMLがクリップボードにコピーされます。アフィリエイトIDはTomblooで設定したものが入ります。

quoteの場合はblockquoteで囲まれたHTMLが生成されます。

銃と軍馬—— 16世紀にピサロ率いる168人のスペイン部隊が4万人に守られるインカ皇帝を戦闘の末に捕虜にできたのは、これらのためであった事実は知られている。
Amazon.co.jp: 銃・病原菌・鉄〈下巻〉―1万3000年にわたる人類史の謎: ジャレド ダイアモンド, Jared Diamond, 倉骨 彰: 本

Tomblooハックス – Flash SWFからJPEGファイルを取り出す

Spark勉強会 JSplashの資料を公開+α – 最速チュパカブラ研究会を見てpure javascriptでFlashを再生できるなら、Flashの中のオブジェクトも触り放題で長年のTumblrユーザの夢であるFlashの中身をpostできるのでは!

と思ったけど調べてみるとJSplash自体はSWFのパーサを持っているわけではなくて、あらかじめswfmill swf2xml and xml2swfで作ったXMLをJSONで持っておいてそれを使うようになっていました。そこで方向を見失ってとりあえずページの中にあるembedタグのSWFを全部読み込んで中に入っているjpegを一覧表示するものを作ってみました。

使い方

ファイルをダウンロードして、Tomblooのscriptディレクトリに入れたあと、一度Firefoxを再起動して(もしくはTomblooのファイル再読み込みを行って)からCtrl+Shift+DもしくはFirefoxのTomblooのメニューから実行します。

ダウンロード

gist: 18326 — GitHub

scriptディレクトリにコピーする

Tomblooのscriptディレクトリにダウンロードしたswfparser.jsをコピーします。コピーしたらFirefoxを再起動してください。

詳しくはiview for Tomblooscriptディレクトリにコピーするを参照してください。

実行

Flashの表示されているページでCtrl+Shift+Dを押すかFirefoxのメニューのTools/Tombloo/swfparserという項目を選んで実行すると、Flashのファイルから抽出されたJPEGファイルがページ上部に表示されます。下はYahoo! JAPANの右側ブランドパネルFlash広告の例。

yahoo

どうでもいいけどFlashが表示されるサイズよりも大きいjpegファイルが埋まってるものなんですねー。

注意点

  • このスクリプトはSWFファイル自体が内部に持っているJPEGデータを表示するだけなので、Flashが動的に外部から読み込んで表示しているJPEGファイルは取り出せません。
  • いまのところDEFINEBITSJPEG(6), DEFINEBITSJPEG2(21), DEFINEBITSJPEG3(35)で定義されている画像が取り出せます。DEFINEBITSLOSSLESS系はビットマップをWindowsのBMPに変換する方法がよくわからなかったので対応していません。
  • 表示された画像はsrcがdata uriになっているのでTumblrにpostしたりはできません。Tomblooからは31_Tombloo.Service.extractors.jsを適用するとpost可能になります。パッチをTombloo本体にマージしてもらったので次のバージョン(0.3.24)からこのパッチなしにpostできるようになります。
    0.3.24 がリリースされたのでTomblooをアップデートすればpostできます。

iview for Tombloo

iPhoneでtumblrのdashboardやいろんなサイトの写真をただただひたすら見ていくためのiviewは、中ではAutoPagerizeみたいにXPathで定義されたサイトの構造に従って写真を取り出して表示しています。

次のバージョン(0.0.8)で、iview用に書かれたsiteinfoみたいなのを外から読み込んで写真を表示できるようにしようとwedataItem – データベース: iview – wedataに20くらいsiteinfoを書きました。

このsiteinfoを使ってiviewのFirefox+Tomblooバージョンを作りました。tumblrだけでなくwedataに書かれたいろんなサイトでLDRize+reblogCommandと同じようにj/kで移動してtでtumblrにpostすることができます。

追記 2008.11.6

version 0.0.2でdotimpactさんにいただいたiview for Tombloo(+launch piclens) – collisions.doppac.ccを取り込みました。pを押すとPicLensが起動して写真を見ることができるようになっています。

使い方

以下 iview for Tombloo のインストール方法を説明します。ちなみにTombloo本体はHome — tombloo — GitHubの真ん中あたりにあるインストールというところからインストールできます。

ダウンロード

iview.js (version 0.0.2)

scriptディレクトリにコピーする

Tomblooのscriptディレクトリにダウンロードしたiview.jsをコピーします。
このディレクトリはFirefoxのプロファイルディレクトリの中にあります。
WindowsならC:\Documents and Settings\<username>\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\tombloo/script
OSXなら
/Users/<username>/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/tombloo/script
がTomblooのscriptディレクトリです。みつからないときはMozilla – プロファイルを参照して探してみてください。

iview.jsをコピーしたら一度Firefoxを再起動してください。

メニューから開く

再起動するとFirefoxのToolsメニューにあるTomblooiviewという項目が追加されます。

Tombloo ivew action

これを開くとこんな

select image source

ウインドウが開くので、ここから見たいサイトを選んでクリックしてください。

台湾美少女3姉妹 画像ブログみたいに、ひとつのエントリに複数写真が入っているものも

Diefish

English Russiaのように、複数の写真がべつべつのページに入っていてAutoPagerizeで見ていくこともできない構造になっているサイトも

Englishrussia

jを押していくだけで、全部の写真を見ることができます。さらにLDRize+reblogCommandと同じようにtを押すだけでpostすることができます(Tomblooでphotoのデフォルトpost先に設定しているところすべてにpostされます)。

iview for Tomblooのいいところ

iview for Tomblooを使うと、サイトのコンテンツ構造がツリー構造になっていてAutoPagerizeではうまく見ていけないEnglish Russiaストリートスナップ – Fashionsnap.comのようなサイトでもtumblrのdashboardと同じようにjだけで全部見ていけて、なにかがあったらtでshare可能です。

iview for TomblooはiPhoneのiviewみたいに床に寝転がって見るとかはできませんが、ふつうのディスプレイで見られるぶん大きな写真を大きなまま見ることができて、小さい画面では気がつかないような発見があったりします。あと回線もCPUも速いのでストレス無く写真を見ていくことができます。

iviewのsiteinfo

iviewのsiteinfoはItem – データベース: iview – wedataで管理されています。
iviewのsiteinfoはAutoPagerizeに比べて複雑なのに加えて、本来Web::Scraperのようにツリー構造になっているものをwedataで管理するために無理矢理平坦にしていたりして、書くのが難しいですが、もしどこかほかにiviewで見たいサイトがあったりしたら、ぜひ追加しちゃってください。

siteinfoの各項目の意味については、近いうちにまとめて書こうと思います。

注意点

  • 読み込みに時間がかかって5秒くらい写真が表示されないことがあったりします。
  • だいたい大丈夫そうですけど、ページによっては文字化けすることがあるかもしれません。

感想

iPhoneのiviewでsiteinfoが正しく機能するかのテストをすると、時間がかかってめんどくさかったので、siteinfo書くならべつにiPhoneじゃなくていいからFirefox上でやりたい、というのの延長で作りました。

ストリートスナップ – Fashionsnap.comlastnightspartyは、せっかく大きな写真が見られるのにiPhoneだと画面が小さいから小さくしか表示できなくて(大きなのを表示させると展開が重くてひっかかるし落ちたりする)つまんないなーと思ってたのが解決されてよかったです。

個人的にはストリートスナップ – Fashionsnap.comにある、時計と靴写真に当然のように写っている人の肌の人によって違うところが生々しくておもしろくて、えんえんiPhoneのiviewで見たりしてたんですけど、ディスプレイが大きいとさらに細かいところまで見えて楽しいです。

あとiPhoneバージョンをjavascriptで書き直すだけ、仕様を考える必要も無く何も考えずにコードを書くだけよかったので楽で楽しかったです。クロージャが偉大です。

  • javascriptはさくさく書ける
  • 写真が大きくてもレンダリングでもたついたりしない
  • メモリをケチったりしなくても落ちない

Tomblooハックス – reblookmark, retweet とクリップボード

ひとのブックマークを見ていて、自分もそれブックマークしておきたい、というのがあります。

と思っても、一度そのリンク先を開いて、ブックマークレットを呼び出して、自分でタグを書いて、ボタンを押さないといけません。ちょーめんどう。rebookmarkできたら自分でタグとか入れなくて良くてちょーべんり。

Tomblooにはてなブックマークとdel.icio.us用のextracterを作りました。

コード

tombloo/chrome/content/libraryにパッチ、ファイルをコピーします。

rebookmark

はてなブックマーク – COLLECTION & COPYとかをひらいて、リストされているブックマークのどこかをクリックします。そうするとブックマークをLinkのコンテンツとして認識してくれます。

ここから先はふつうのTomblooで何かポストする時と同じ。メニューのShare.../Link HatenaBookmarkを選ぶとウインドウが出てきます。

もともとついていたdescriptionとタグに加えて、via:がつきます。ブラジル方式。
どこにpostしてもいいですがはてなブックマークにpostするとこうなります。

もともとついていたタグもコメントもそのまま。

del.icio.usからも同じようにメニューのShare.../Link del.icio.usからrebookmarkできます。
ちょっとXPathを書けばほかからもrebookmark可能。

もともとつけられているタグ、メモが取り出されるので、あとはふつうと同じようにpostしたいサービスを選んでpostする。del.icio.usにpostしてもいいしはてなブックマークでもいいしtumblrでもいい。

retweet

もうひとつやりたかったのがtwitterで誰かの発言をそのまま発言すること。誰かが”ええーーー”って言った時に自分も”ええーーー”っていいたい気分だったら”ええーーー”って言いたいみたいなかんじ。”えええーーー”だったら自分で入れるの簡単だけど、簡単じゃないやつだと、入れてる間に自分もそれまねして言いたいかんじがなくなっちゃう。

rebookmarkとおんなじかんじで、発言の上で右クリックしたらShare.../Quote Twitter/Timelineっていうのが出てくる。メニューの項目名はてきとう。

あとはいつもとおなじ。

投稿先をtwitterにするとこうなる。

Twitter / 33とtinyurl部分はTomblooのTwitter posterが、受け取ったデータのタイプがlinkだった時に受け取ったメタデータをtwitterにpostできる形式に変換する過程で付加されている。

retweetされたものをretweetしたりすると140文字制限をすぐに超えて破綻する。tumblrでもたくさんreblogされているやつはblockquoteでひどいことになる。

クリップボード

コードを書いているうちに、Windowsのクリップボードを思い出した。

エクセルのセルをクリップボードにコピーして、ノートパッドに貼付けるとセルに入っていた文字列が貼付けられる。これがどうやって実現されているか。”エクセルのセル”という型だったデータがどうやって”ただのテキスト”に変わるのか。

Win32::Clipboard – Interaction with the Windows clipboard – search.cpan.orgのインターフェイスを見ればだいたいの仕組みがわかる。アプリケーションはユーザからコピー要求がきた時に、アプリケーションが現在選択しているデータをクリップボードに登録する。このときデータのフォーマットを一緒に登録する。WindowsはデフォルトでCONSTANTSに書かれているような形式をサポートしている。テキストデータ、ビットマップ、waveなどなど。エクセルのように、独自の形式のデータのときにはあらかじめエクセルのためのフォーマットを登録しておくと、エクセル内部のデータ形式をクリップボードに登録できる。

一方クリップボードからデータをペーストする時、ノートパッドはまずクリップボードにあるデータが、ノートバッドで利用できる形式(テキストデータ)として取得できるかをIsText()で問い合わせる。ここから先は推測。クリップボード(Windows)はノートパッドから問い合わせを受けると、自分が今持っているデータが問い合わされた形式(テキストデータ)に変換できるかを判断する。エクセルによって登録されたフォーマットのデータがテキストデータに変換できるかどうかはエクセルに聞かないとわからないのでエクセル(実際にはエクセルのプロセスじゃなくて登録されたフォーマットに結びつけられたDLLの中の何かだと思う)に聞きにいく。エクセル(のDLL)は問い合わせを受けた型に変換できるかをクリップボード(Windows)に返す。クリップボードはエクセルから変換可能だと言われたので、それをそのままノートパッドに伝える。ノートパッドは変換可能だと言われたので、クリップボードからテキスト形式でデータを取得しようとする。そうするとまたクリップボードはエクセル(のDLL)に今クリップボードにあるデータをテキストデータとして変換するためのリクエストを出す。エクセルはクリップボードのデータをテキストデータに変換して返す。そして最終的にノートパッドに、エクセルのセルデータがテキストデータとして貼付けられる。

ノートパッドで扱うことのできないエクセルのデータが、クリップボードを介してノートパッドで扱えるテキストデータに変換されているように見える(実際にはエクセルがテキストデータにしてほしいと要求されて、エクセルがテキストデータに変換しているはずだ)。

(@IT:Windows TIPS — Tips:クリップボードの中身をのぞき見る方法にはすべての形式でクリップボードにあらかじめ用意されているような書き方がされているが、変換可能な形式は多数あるはずなので、それぞれの形式でデータをあらかじめ用意していたらひどくメモリを浪費するはずなのでそんな実装にはなってないと思う)

TomblooはWindowsのクリップボードと同じ役割を果たしている。

tomblooの中にはextracterとposterというのがあるのだけど、extracterというのはベタなHTMLからメタデータを取り出す。その中には取り出す部分のXPathや取り出したデータをどう加工するかがjavascriptで書かれている。クリップボードとの対比でいくと、このextracterがエクセルにあたる。

例として上で紹介したretweetするときに行われている、twitterから発言のデータをquoteとして取り出してtwitterにpostする場合を考える。
twitterのextracterは、右クリックされた位置を基準にしてブックマークのデータを取り出し、そのデータをTomblooがもともとサポートしているデータ形式のひとつのquoteという型として登録する。ユーザはそのあとそのデータをtwitterにpostするように指定する。

エクセルのセルをコピーしてエクセルに張る時は、ちゃんとエクセル独自のデータ形式である”セル”として貼付けることができるけれど、twitterにpostできるデータはテキストデータだけだ。twitter extracterは発言をquoteとして取り出すけれど、twitterはその取り出されたquote形式のデータを直接受け入れることができない(というかいまのところquote形式を扱えるのはtumblrとそのクローンだけだ)。

でもquote形式のデータをtwitterで扱うことのできるただのテキストデータに変換することは可能だ。Tomblooではその変換を投稿先に指定されたサービスのposterがやっている(Windowsのクリップボードではデータソースであるエクセルがやっていた)。この場合twitterのposterがquote形式のデータをtwitterにpostできるただのテキストデータに変換している。内部的には

{
    item: "Twitter / 33",
    itemUrl: "http://twitter.com/33/statuses/852481203",
    body: "よかった~病気のucnvが戻ってきて、心配したよ"
}

という構造をしているquote形式のデータがtwitter posterによって

"Twitter / 33 http://twitter.com/33/statuses/852481203 よかった~病気のucnvが戻ってきて、心配したよ"

という文字列に変換されてtwitterにpostされている。

post先のサービスがTomblooの中でのデータ形式(Tumblrの持っている7つのデータ形式と同じになっている)と違っていた時には、このようなデータの型変換が行われてpost先のサービスに投稿される。

Quote型をサポートしているサービスとして引用βがある。
Link型をサポートしているサービスは多数ある。ほとんどのソーシャルブックマークはtomblooのlink型データを、セマンティクスを失うことなく保存することができるだろう(すくなくともdel.icio.usとはてなブックマークは可能だ)。

Tombloo上のデータはどんなデータでもテキストデータに変換することができるので(photoやaudioもURLに変換できるから)、はてなダイアリーのようにテキストデータを扱えるサービスは、もともとあったデータ構造は失われてしまうけれけど、どの形式のデータでも保存できる。

ただ、そのもともとのデータ形式が持っているデータを、どのようにただのテキストデータに変換するかは難しい。

@ku 標準的な機能と、拡張の機能の区別が難しいですよね、たとえばはてなにポストするときにclassはどうするのが標準か、reblog情報を取り去っていいのか、全部設定できるようにするか、ツール作者が一定の決めつけをするか、また飲みたいすねー
Twitter / 33: @ku 標準的な機能と、拡張の機能の区別が難しいですよ…

クリップボードの仕組みが参考になると思ったけど、クリップボードはデータソースがフォーマットの変換をやっている。tomblooはposterでやっていて、そしてむしろそのほうがいい。これはクリップボードが、”エクセルのセル”のようなアプリケーション独自のデータ形式を登録できる仕様なのに対して、Tomblooは7つのコンテンツしか存在しないからposterの側で変換が可能なんだと思う。たかだか7つしかないのはわかっているのでextracter側で変換を実装することができる。そしてpostするサービスの特性(140文字しか入らないとか、HTMLは反映されないとか)がWindowsのアプリケーションに比べ例外的なものがあるのでデータソースで一律に変換すると不都合が多い。

reblogはtumblrがtumblr内でデータの形式を保ったままでのextract -> postをpostidを指定するだけで中でやってくれるという機能のことだ。rebookmarkは、ソーシャルブックマークで共通に使われているlink形式のデータをどこかから取り出して、どこかにpostすることだ。

ITmedia エンタープライズ:MSオジーCTO、クリップボードをWeb世界に広げるも同じようなもんだけどhCalとか誰もマークアップしてないしXPathで書いたりするのも困難だ(だってみんな毎回適当に記号入れて表現してるもん)。IE8のWebSliceはどーなってるのかな。

tomblooハックス – share on WordPressにポストするためのMetaWeblog API

アップデート 2008.6.24

mattnさんにいただいたBig Sky :: tomblooハックス90_MetaWeblog.jsのパスワードをパスワードマネージャに保存するパッチを文字化けしないようにしてtombloo – Google Codeにコミットしました。ページのView raw fileのところからダウンロードしてください。

tomblooはtumblr専用のツールではありません。tomblooのポストする先をWordPressに変えればtomblooからWordPressにポストすることができて、自分専用プライベートtumblelogとか、社内でチーム共有のtubmlelogを作ってtomblooからポストすることもできます。MetaWeblog API posterはそのためのパッチです。

ダウンロード

90_MetaWeblog.js (for Firefox3)

設定

  1. 90_MetaWeblog.jsをダウンロードしてプロファイルディレクトリのextensions/tombloo@brasil.to/chrome/content/library/に入れます。
  2. 次にtomblooの設定を変更します。Postersの部分にMetaWeblogを追加してください。tomblooからポストしたときにTumblrと自分のWordPress両方にポストしたいときは (Tumblr|MetaWeblog) WordPressだけにポストしたいときは MetaWeblog にしてください。

    (UIつきバージョン経由でも投稿可能です)

  3. about:configでWordPressのAPIエンドポイントを指定します。ブラウザのアドレスバーにabout:configを入れて、右クリック»New»Stringを選んで extensions.tombloo.posters.MetaWeblog.endpoint という名前で設定を新しく作ります。
    Picture 3-26

    セットする値にはWordPressのAPIエンドポイントを入れます。これはブログのトップページがあるディレクトリのxmlrpc.phpです。ここのブログの場合はトップページがhttp://ido.nu/kuma/なのでエンドポイントはhttp://ido.nu/kuma/xmlrpc.phpになります。

  4. FirefoxにWordPressのユーザ名とパスワードを記憶させてください。このMetaWeblog API posterはここで記憶したユーザ名とパスワードを使ってAPIにアクセスします。ログイン画面はトップページがhttp://ido.nu/kuma/だったらhttp://ido.nu/kuma/wp-login.phpになります。ログインしている状態では表示されないので、記憶されていない場合は一度ログアウトしてからアクセスしてみてください。

Have ♡ fun

長い設定が終わったら後はいつもと同じようにtomblooを使って自分のWordPressにポストすることができます。

wired

タイトルには元のページのタイトルが入ります。ポスト先に使うWordPressにreblogという名前のカテゴリを作っておけば、tomblooから投稿した記事には自動的にreblogというカテゴリが設定されます。 投稿のタイプの名前のカテゴリ(photo, quote, link)も作っておけば、ポストのタイプも投稿時に自動的に設定されます。


既存のWordPressのテーマだとtumblrのようにきれいなみためにはならないですが、たぶん誰かがWordPress用のtumbleloggingに向いたテーマを作ってくれることでしょう。

MovableTypeで利用する場合

MetaWeblog APIはWordPressだけでなくMovableTypeでもサポートされているのでMovableTypeでも使うことができる。ただユーザ名とAPI用パスワードの設定を簡単にはできないので、ファイルに直接書くことになる。

あとがき

tomblooはウェブ上にあるページからtumblrの7つのコンテンツの形式にそってデータを取り出してくる。ユーザは取り出されたtumblr形式のデータをいろいろなところにポストすることができる。FFFFOUND!であったりWe heart itであったりはてなダイアリーであったりローカルのディスクであったり。

いろいろなサービスにAPIが導入された結果、以前はユーザインターフェイスとサービスとがくっついていてなかなかはがせなかったのが、比較的容易にはがせるようになった。結果としてユーザインターフェイスとサービスを好きな組み合わせで使うことが容易になってきている。Gyazoのインターフェイスで撮ったスクリーンショットをtumblrにアップロードするGyamblrみたいなのも極めて容易に作れる。

APIの可能性についてはブロギングプラットホームでいちばんはじめに試行錯誤された。結果としてブロギングプラットホームには様々な投稿用APIが備わっている。投稿するためのツールとウェブ上に存在するページとは完全に切り離すことができる。

自分一人のためのtumblrのクローンを作るのにはNanoGrabbrChyrpのような、フルスクラッチでtumblrのためのエンジンを作る必要はない。伝統的なブロギングプラットホームにかんたんに投稿するためのブックマークレットと、tumbleloggingに適したテーマを用意してあげるだけでできる。

metaWeblogはWordPressとMovableTypeでしかサポートされていないっぽい。atomで作るべきだった。反省。

tomblooハックス – Share on Tumblrした写真を同時にダウンロードしたりもできる DownloadManager poster

Flickrでオリジナルサイズの写真をダウンロードするのって何回もクリックする必要があってすごい面倒なので、FirefoxのダウンロードマネージャにURLを送り込んでダウンロードするためのposterを作りました。とりあえずFirefox3専用。

ダウンロード

90_DownloadManager.js

解説

Tomblooハックス – UIつきバージョン ポスト先にはてなダイアリーを追加するパッチを適用していると、右クリックしてシフトを押しながらどれか適当なtomblooのメニューを選ぶと、ページの一番上にこんなのが出てきます。
あとはボタンを押したら、tomblooがtumblrにpostしたりするのと同じ画像がダウンロードされます。ダウンロード先はよくわかんないけどたぶんfirefoxで設定している場所になる。

UIパッチなしの場合は下の応用に書いてあるtomblooの設定が必要。

応用

Posters


(tumblr|downloadmanager)

と書いておくとshiftとか押したりすることなくshare on tumblrした画像が同時にローカルのディスクにもダウンロードされてきます。

使い捨てのつもりで作ったけど、どこからダウンロードしてきたものなのかもわかるようにメタデータ埋め込んだりすれば意外と役に立つかも。

微妙に新しくなったtumblrでReblogCommandを動くようにするためのパッチ

追記 2008.6.2

ReblogCommandの最新版はcodereposからインストールすることができます。

訂正 2008.4.13

reblogCommandのコード、間違ってたみたいです。修正してます。Tombloo0.1.6で動作確認済。

Tombloo 0.1.3、LDR + Tombloo – 実用でGreasemonkeyからTomblooの機能が利用できるようになっているので、それを使ってrelbogするようにするためのReblogCommandのパッチです。Tomblooの機能に依存しているのでTomblooがないと動かなくなります。

Tomblooにもパッチが必要です。Tomblooは extensions/tombloo/chrome/content/browser.xulgetReblogToken TUMBLR_URL を付け足すだけです。

--- browser.xul 2008-04-12 11:17:16.000000000 +0900
+++ browser.mine.xul    2008-04-12 16:24:51.000000000 +0900
@@ -40,7 +40,7 @@
                        GM_Tombloo.Tombloo.Service = update({}, env.Tombloo.Service,
                                'check share posters extracters'.split(' '));
                        GM_Tombloo.Tumblr = update({}, env.Tumblr,
-                               'post remove getInfo read reblog openTab getLoggedInUser'.split(' '));
+                               'post remove getInfo read reblog openTab getLoggedInUser getReblogToken TUMBLR_URL'.split(' '));
                        GM_Tombloo.FFFFOUND = update({}, env.FFFFOUND,
                                'post remove iLoveThis'.split(' '));
                        GM_Tombloo.Flickr = update({}, env.Flickr,

ReblogCommandのパッチは以下。パッチ済みのファイルをreblogcommand.user.jsに置いておきます。

あ、あと消すためのコマンドも入れました。でもバグっててピンをつけたのと違うやつが消えるっぽいので使わないでください!

pinned-or-current-link|deletePost

で消せます。

Tomblooのreblogメソッドで帰ってくるのがMochiKitのDeferredインスタンスなのですが、それをJsDeferredのDefferedListで扱う必要があるのでトリッキーなことをしています。こういうもともと繋がらないのをなんとかして繋げるの好きだなー。

--- reblogcommand.orig.js  2008-04-12 16:12:20.000000000 +0900
+++ reblogcommand.user.js  2008-04-13 11:15:38.000000000 +0900
@@ -86,26 +86,41 @@
 }
 
 function reblog(aURL){
-  var id  = getIDByPermalink(aURL);
-  var d;
-  with(D()){
-    d = Deferred();
-    if(!id) {
-      wait(0).next(function(){d.call()});
-      return d;
-    }
-  }
-  var url = getURLByID(id);
-  window.Minibuffer.status('ReblogCommand'+id, 'Reblog ...');
-  getSource(url).
-  next(function(res){
-    return postData(url, createPostData( parseParams( convertToHTMLDocument(res.responseText))));
-  }).
-  next(function(){ window.Minibuffer.status('ReblogCommand'+id, 'Reblog ... done.', 100); d.call()}).
-  error(function(){
-    if(confirm('reblog manually ? \n' + url)) reblogManually(aURL);
-    d.call();
+  return invokeTumblrMethod(
+    aURL, 'reblog', {
+      start:  'Reblog ...',
+      done:  'Reblog ... done.',
+      manual:  'reblog manually ? ',
+    }
+  );
+}
+
+function deletePost(aURL){
+console.log("deletePost", aURL);
+  return invokeTumblrMethod(
+    aURL, 'remove', {
+      start:  'Deleting ...',
+      done:  'Deleting ... done.',
+      manual:  'delete manually ? ',
+    }
+  );
+}
+
+function invokeTumblrMethod(aURL, methodName, msg) {
+console.log("invokeTumblrMethod", aURL);
+try {
+  window.Minibuffer.status('ReblogCommand'+aURL, msg.start);
+
+  var d = GM_Tombloo.Tumblr[methodName]( aURL ).addCallback ( function (res){
+    window.Minibuffer.status('ReblogCommand'+aURL, msg.done, 100);
+  }).addErrback( function(){
+    if(confirm( msg.manual + '\n' + url)) reblogManually(aURL);
+    d.callback();
   });
+console.log("invokeTumblrMethod", aURL, d);
+}catch(e) {
+  console.log(e);
+}
   return d;
 }
 
@@ -155,9 +171,8 @@
     window.Minibuffer.execute(target_cmd + ' | reblog -m' + clear_pin );
   }});
 
-window.Minibuffer.addCommand({
-  name: 'reblog',
-  command: function(stdin){
+
+var tumblrCommand = function(stdin, method, manualMethod){
     var args = this.args;
     var urls = [];
     if(!stdin.length){
@@ -175,23 +190,46 @@
     // reblog
     if(args.length = 1 && args[0] == '-m'){
       urls.forEach(function(aURL){
-        reblogManually(aURL);
+        manualMethod && manualMethod(aURL);
       });
     }else if(args.length){
       console.log('unknown args...');
     }else{
       urls = urls.filter(isTumblrUserURL);
       if(!urls.length) return stdin;
-      var lst = urls.map(reblog);
+      var lst = urls.map(method);
       if(lst.length > 1){
+        // JSDeferred/MochiKit Deferred compatibility hack.
+      var jsdl = {};
+      for ( var i = 0; i < lst.length; i++ ) {
+        var d = lst[i];
+        jsdl["jsd" + i] = d;
+        d.next = d.addCallback;
+        d.error = d.addErrback;
+      }
+
         with(D()){
-          parallel(lst).wait(2).
-          next(function(){window.Minibuffer.status('ReblogCommand','Everything is OK', 1000)});
+          var d = parallel(jsdl).wait(2).
+          next(function(){
+            window.Minibuffer.status('ReblogCommand','Everything is OK', 1000)
+        });
         }
       }
     }
     return stdin;
   }
+
+window.Minibuffer.addCommand({
+  name: 'reblog',
+  command: function (stdin) { return tumblrCommand.apply(this,[ stdin, reblog, reblogManually] ) }
 });
 
+window.Minibuffer.addCommand({
+  name: 'deletePost',
+  command: function (stdin) { return tumblrCommand.apply(this, [stdin, deletePost, null]) }
+});
+
+
 })()
+
+

Tomblooハックス – background imageをポストできるようにする

2008.11.29 追記

今はデフォルトのTomblooで背景画像をpostできます。

たまに背景になっている画像をpostしたいときがあって、背景画像とかCSSとか調べてとらないとだめなのかなーと思っていたら意外にもコンテキストメニューオブジェクトから簡単にとれるのがわかったので作った。たぶんWeb1.0時代の、画像を壁紙にする、っていうめっきり使わなくなった機能の名残なんだと思う。

あと関係ないけど、menuitemtooltiptextつけたらツールチップ表示されるのを知った。ツールチップで実際にpostされるファイルの名前とか出そうとして、やめた。

ファイル

90_backgroundimage.js

Tomblooハックス – UIつきバージョン ポスト先にはてなダイアリーを追加する

前に作ったTomblooハックス – ポスト先にはてなダイアリーを追加するだと、常にtumblrとはてなダイアリーに追加されるようになって、いまだけはてなに、みたいなのができないので、そのへんのUIでできそうなのを探してやってみました。

Shiftを押してるときに動作を変える、というアプローチ。はじめにコンテキストメニューでShiftが押されているときはサブメニューが出て投稿先が選べる、というのにしようと思ったけどコンテキストメニューのpopupshowingではキーの状態が常にfalseでくるようになっていてだめでした(Windows/OSXどっちも)。

それで他にないかなーと思ってたらNoScript :: Firefox Add-onsとかで出てくるXUL:notificationbox – MDCが使えそうなので、試しに作ってみました。

コンテキストメニューから項目を選択するとき(下のscreenshotだとShare – Photoを選ぶとき)にShiftを押して選択すると

Select menu + shift button

ページの一番上にpostする先がボタンで出てくるので、postしたいところを押します。

Notification is popping up

押すと色が変わって押せなくなるので手がふるえてても二重に投稿されません。

Picture 5-11

コンテキストメニューのpopupで投稿先を選ぶ案(技術的な面でボツ)に比べて、同時に複数の投稿先を動的に変更できるのはいいところ。ページの一番上に出るのでマウスを移動させる距離が長いのが面倒だった(下にも出せるはずなんだけどやり方がよくわかんなかった。どっちに出そうが移動距離が長いのは変わらないけど)。notificationを使うのはいまいち。

でもこれでバリバリはてなダイアリーにquoteとかできる。photoはオリジナルへのホットリンクになるのでご注意ください。
あとはてなダイアリーだと当然tumblrみたいにquoteで文字が大きくなったりしないのでかっこわるいです。いちおうtombloo_quote, tombloo_photoというクラス名つきでpostされるので、CSSいじったらかっこよくなるかも。

コード

30_Tombloo.Service.20080405.diff
90_Hatena.20080405.js

愚痴

notificationのボタンのパラメータのcallbackが曲者で、ふつうのDOMイベントと違ってtrueを返したときにアクションがキャンセルされるようになってて、はじめfalse返したら何とかならんのかと思ってfalseにしたけどボタン押したらnotificationが閉じられちゃうので困ったなーと思って調べてたら mozilla/toolkit/content/widgets/notification.xml でコード見つけてこうなっててなんだそれと思った。

      <method name="_doButtonCommand">
        <parameter name="aEvent"/>
        <body>
          < ![CDATA[
            if (!("buttonInfo" in aEvent.target))
              return;
            var button = aEvent.target.buttonInfo;
            if (button.popup) {
              document.popupNode = aEvent.target;
              document.getElementById(button.popup).
                showPopup(aEvent.originalTarget, -1, -1, "popup", "bottomleft", "topleft");
              aEvent.stopPropagation();
            }
            else {
              var callback = button.callback;
              if (callback) {
                var result = callback(this, button);
                if (!result)
                  this.close();
                aEvent.stopPropagation();
              }
            }
          ]]>

なんでわざわざDOMのイベントと逆のtrueだとstopPropagationにしてるんだろう。おかげでそれを知るためだけにgrepかけたよー。

あと Google code search をみてると notification.hideclose = true で閉じるためのXボタンが消せるみたいなんだけど、実際やってみると消えなくて不可解だった。たしかにソースにもhidecloseで消えそうな部分はなかった。

Tomblooハックス – Vimeoのサポート

追記

Tombloo 0.1.4でVimeoもサポートされるようになりました。

Twitter / koyachi: jstnはvimeoで働いてるによればMuxtapejstnも働いているらしい個人的に今年最も注目しているVimeoはtumblrのブックマークレットではサポートされてるんだけどTomblooではサポートされてなかったので作りました。

Tomblooハックス – ポスト先にはてなダイアリーを追加するでTomblooの開発者のbrazilさんにいただいたコメントを参考にしてます。

Tombloo.Service.extracters = update( {
        'Video - Vimeo': {
                        check : function(ctx){
                                return ctx.hostname.match('vimeo.com');
                        },
                        extract : function(ctx){
                                return {
                                        type   : 'video',
                                        source : ctx.href,
                                        body   : ctx.title + '(via ' + 'Vimeo'.link( ctx.href) + ')'
                                };
                        }
                }
}, Tombloo.Service.extracters);

これを FirefoxProfileDirectory/extensions/tombloo@brasil.to/chrome/content/library/90_Tombloo.Service.Vimeo.js にして保存して再起動するとメニューにVideo – Vimeoが出てきます。

vimeo support

細かいこと

なんでわざわざupdateなんかしてるのか。

Tombloo.Service['Video - Vimeo'] = {
                        check : function(ctx){
                                return ctx.hostname.match('vimeo.com');
                        },
                        extract : function(ctx){
                                return {
                                        type   : 'video',
                                        source : ctx.href,
                                        body   : ctx.title + '(via ' + 'Vimeo'.link( ctx.href) + ')'
                                };
                        }
                }
};

上のように直接代入すると、for inでenumerateされる順番の関係(先に定義されたものが先に出てくる)でVidemo – Vimeoより先にLinkが出てきて使いにくいのでupdateしています。

Tomblooハックス – ポスト先にはてなダイアリーを追加する

Tombloo 0.0.10.1をベースに、LinkとQuoteをはてなダイアリーにもpostするやつを作ってみました。

tombloo@brasil.to/chrome/content/library21_HatenaDiary.jsをコピーして、30_Tombloo.Service.jsにちょこっと下の行を付け加えて、あとabout:configextensions.tombloo.posterFilter(Tumblr|HatenaDiary)にしたら動きます。

--- library/30_Tombloo.Service.js       2007-12-04 00:01:04.000000000 +0900
+++ /Users/kuma/tombloo.lib/30_Tombloo.Service.js       2007-12-21 22:50:56.000000000 +0900
@@ -115,6 +115,12 @@
                                return FFFFOUND.post(params);
                        }
                },
+               HatenaDiary : function (ctx, params) {
+                       if( params.type != 'link' && params.type != 'quote' )
+                               return succeed();
+
+                       return HatenaDiary.post(params);
+               }
        },

        extracters : {

つくりかた

Tomblooの対応サービスを増やすのはかんたんに書けます。

クラス名を決める
クラス名はファイル名と結びついてるみたいです。今回はHatenaDiaryという名前にしたので、作るファイルの名前は21_HatenaDiary.jsでした。数字の部分は読み込まれる順番を制御しているだけなのでなんでもokです。
Tombloo.Serviceに追加する
Tombloo.Service.postersにクラス名でメソッドを作ります。サポートしているtype(Tumblrでいう7つのコンテンツの種類です)じゃないのがきたときにはsucceedを返して、それ以外のときはpostメソッドを呼びます。別になんでも呼べますが慣習としてpostなのでpostにしておくのがいいでしょう。
postメソッドを書く
postメソッドにはtypeに応じてパラメータがくるのでそれをHTTPでPOSTするデータに変換してdoXHRを呼ぶだけです。ここでも慣習として

HatenaDiary[capitalize(params.type)].convertToForm(params);

というかたちで変換するのがいいでしょう。

タイプごとのconvertToFormを書く
typeに応じてどういうデータをpostするかを書きます。HatenaDiary.Quote = { convertToForm: function (m) { .... } } こんなかんじでサポートしたいtypeぶんだけ書きます。

これでできあがり。

かんそう

対応サービスを増やすのは非常に簡単でいいかんじになってます。常にextensions.tombloo.posterFilterに書いたサービス全てに反映されてしまうのがやや不便ですが、そこはUIで解決できると思います。postするtypeを選んだあとにもう一段そのtypeをサポートしているサービスからひとつを選ぶメニューをつけるとか、あらかじめ7つのタイプ * サービスのマトリクスをつくっちゃうとか。

こんなかんじ、っていうのがさらっと書けていいかんじでした。

ブログがウェブページの構造を規定したことで、それを作るためのツール、プラットフォームができて便利になったのと同様、コンテンツを7つ(7つじゃなくてもいいんだけど)に規定することでなにかが見えそうな気がします。出てくる問題が1-1/N-1/N-Mの関連付けをどうするか(ひとつのエントリでひとまとまりの曲を紹介したいときはどうするのかとか)、DBMSで出てくる問題と似ている気がします。