Category Archives: Firefox

Firefox

GoogleChromeの拡張を作る上でFirefoxアドオン作者が知っておくべきやればできること

GoogleChromeの拡張を作る上でFirefoxアドオン作者が知っておくべき10の違い【GoogleChromeでニコ動拡張を作ってみた感想】 – love_firefoxportableの日記についてMySpaceのMP3ファイルにID3tagを埋め込みつつダウンロードするJSActionsスクリプトを作ったあたりからFirefoxアドオンの柔軟さに魅了されていろいろ作ってきたけどChromeのUIのブロックしなさが快適でChromeにスイッチしようとしている人間が書きます。

将来にわたってChromeのextensionでFirefox addonのような自由度が実現されるようなことはないと思いますが、それでも今の段階でやればできることもちょっとあります。大半はできないけど。

右クリックはいじれない

いじれません。このへんまだ実装自体がやっつけな感じなので将来的にはいじれるようになるんじゃないかと思ってます。
API Wish List (The Chromium Projects)にも載っています。

補足 2009.12.16

Context menu is potentially on the M5 list.
Exposing Chrome Extensions APIs to DOM UI. – Chromium-dev | Google Groups

だそうなので来年前半には実装されそうです。

データのダウンロード保存はできない

chromeのダウンローダでダウンロードすることはできませんが、どうしてもダウンロードしたければNPAPI pluginを作ればできます。

クリップボードの操作はできない

補足 2010.1.7

execCommandで可能です。
Twitter / utatane: Chromeのcopyは, たしか, 隠しinput …

NPAPI pluginを作ればできます。(ex. chromeでMake LinkみたいにページのHTMLリンクをコピるCreateLink « ku)
通常NPAPI pluginを使うと通常のウェブページからもpluginの昨日にアクセスできてしまいますが、chromeのNPAPI pluginはextensionのオリジンからだけ有効にすることができるオプションがあります。これによってobjectタグを通じて通常のウェブページからは利用できないけれどextensionからは使える関数を用意することができます。

ただ現状プラットフォームごとにべつべつのバイナリを用意することができなくて、ぜんぶおんなじバイナリを読み込むのでターゲットのプラットホーム以外で読み込むとクラッシュしたりします(公式リリースではextensionはwindowsでしか動かないことになっているので問題ないといえば問題ないんでしょうけど…)。これは中の人もちょう怒ってました。Extensions and the Mac – Chromium-dev | Google Groups

ブラウザの通信に対してフックをかけることはできない

できません。
が、Extensions API proposal: access to the HTTP request – Chromium-extensions | Google Groupsで作りたいっていってdesign docを書いてる人がいたのでできるようになるかもしれません。書かれたのは3ヶ月前でその後音沙汰ないですが…

DOM構築前のデータを弄ることはできない

できません。これってFirefoxだとどうやったら実現できるのか知りたいです!

ブラウザの下部に新しくツリーボックスを作る等、ブラウザの構造を変えることはできない

できません。ここはFirefoxの奇跡だと思っています。

昔Netscape社でNavigator6を作り、今はChromeの開発をしているBen Goodgerさんのmillennium | Google Chrome Extensionsを読むと、もともとFirefoxのextensionでブラウザ自体のUIをいじれるようになっているのは意図して設計されたわけではなかったと書かれています。Navigatorの内部で使うためのAPIをハックしてUIをカスタマイズできることが発見されて、それが人気があったので長い年月を経て生き残り、現在のようなextensionにまで成熟したと書かれています。

If this “back door” into browser customization hadn’t existed by virtue of Netscape’s componentized install, it’s not necessarily a given that Firefox would _ever_ have had extensions. Think about that. It’s awesome that it did, because it’s a feature users love.

Firefox extensionの自由さは偶然から生まれて今に至るのです。

外部exeを実行することはできない

NPAPI pluginでできます。

XMLHttpRequestはクロスドメイン制限を受ける(content_scriptsの場合)

これはいちおうbackground pageからきるけどreferrerがつけられないことが大きな制約として残るだろうとConstellationさんが言っていました。が、NPAPI pluginでやればなんでもできます。

content_scripts内のjsからlocalStorageにアクセス出来ない

バグな気もします。Greasemonkeyとは名前空間の分離の仕方が違うことに起因してます。Chromeでどうやって分離しているかはAaronのブログに図解があります。 aaronboodman.com – Aaron Boodman’s work blog

javascript1.6とか1.7とか1.8は無い

1.6の範囲はchromeでもサポートされています。個人的にはE4Xがサポートされてないのが辛いです。でもこのへんはFirefoxでしか使えないのでFirefoxが勝手(?)に色々つけくわえてるという印象が…

拡張を大量にぶちこんでも重くならない

FirefoxのUIがブロックする=重たい印象になってると思われるのでFirefoxでもelectrolysisでかなり改善されるんじゃないかと思っています。

たしかにChromeは拡張の量が増えてもUIは重くなりませんが、絶対的に重くならないなんてことは当然なくて、たくさんインストールするとレンダリング終了までにかかる時間は長くなるという結果がパフォーマンステストから示されています。
Extensions performance data – Chromium-dev | Google Groups

結論

  • Chromeでサポートされていないけど欲しいものはNPAPI pluginを使って自分で作ればいろいろできるようになります。NPAPI pluginを作るのは面倒ですがnixysaを使うと少しは楽に開発できるらしいです。いまのところnixysaを利用してWindowsで動くバイナリを作るにはハックしてモノにする必要があります。そのハックはネイティブのアプリケーション開発に詳しくないと難しかんじです(CreateLinkはふつうに手で書いて作りましたが、その時バージョンストリングなどが入ったリソースファイルをリンクしないとchromeがpluginとして認識してくれないという謎現象に遭遇しました)。
  • Firefoxアドオンの自由度は奇跡的です。millennium | Google Chrome Extensionsを読んでその奇跡を噛み締めましょう。

所感

自分も「GoogleChromeマジ神wwwwwwwwFirefox(笑)」な人を見るとアホかと思いますが、実際のところ大半の人は現在のChromeの貧弱なAPIでできる範囲の拡張でほとんど困らないんだと思います。

それはたまたまなわけでもなくてAaron Broodmanが書いているように

Here’s an interesting factoid about browser extensions: lots of them are not about extending the browser at all. By my count, about 75% of the this week’s top 20 Firefox extensions are more about extending the web content rendered by the browser than extending the browser itself.
aaronboodman.com – Aaron Boodman’s work blog

AMO上位20拡張のうち75%はGreasemonkeyでできることしかやっていない現実を反映しているだけなんでしょう。たしかに自分も職場のWindowsマシンのChromeにはAutoPatchWorkしか入っていません。そしてこのExtensionはGreasemonkeyでできる範囲のことしかやっていません。実際AutoPatchWorkの祖先であるAutoPagerizeはGreasemonkeyのスクリプトです。

ただ予め意図されているようなextensionしか作れないChromeに押され、極めて柔軟で大半のことは実現できるFirefox extensionの開発者が減っていけば、ブラウザの使い方が均質化して行き、ひいてはウェブ上でのサービスの進化が鈍ってしまうのではないかという恐れを感じます。

XMLがツリーで表示されない問題対策パッチ

Twitter / azu: AutoPagerizeが原因だったのか。長年悩まさ …経由MozillaZine.jp :: トピックを表示 – [解決済み]XMLのツリー表示についてでXMLツリーが表示されずにふつうのテキストファイルとして表示されてしまう問題の解決方法を知りました。

試してみたら確かにGreasemonkeyでスクリプトを実行しなければXMLツリーが表示されます。ページの内容がXMLのときにGreasemonkeyを実行したいということがないので、ページがXMLのときにはGreasemonkeyが実行されないように細工をするパッチを作りました。

--- greasemonkey.js.orig        2009-07-15 20:11:07.000000000 +0900
+++ greasemonkey.js     2009-07-15 20:17:13.000000000 +0900
@@ -109,6 +109,9 @@
     var href = new XPCNativeWrapper(unsafeLoc, "href").href;
     var scripts = this.initScripts(href);

+       if ( unsafeWin.document.contentType && !unsafeWin.document.contentType.match( /html/ ) )
+               return;
+
     if (scripts.length > 0) {
       this.injectScripts(scripts, href, unsafeWin, chromeWin);
     }

xml tree view

落書きをしたページをTumblrとかに投稿できるブックマークレット javascriper.js

それTomblooでできるよ! Webページのスクリーンショットをとる « ku
いろんなサイトに落書きするブックマークレット – 素人がプログラミングを勉強するブログ
で、ページ上にメモや目印書いたりもできますね。
Fuck食場

そっかー!というノリでさっそくやってみた。

ブックマークレット

javascripter.js (on github)

ら、全面canvasになってるから右クリックできない→Tomblooのメニューが出せなかったので、左上にツールパレットを追加して右クリックできるようにしました。これで落書きしたページをTumblrやそのほかのところにpostできます。

このスクリーンショットを撮るときには消し忘れてちゃって映ってるんですが、左上に出てきたツールパレットはXを押すと消せます。消した後でもパレットがあったところで右クリックすればコンテキストメニューが出てきてTomblooでスクリーンショットを撮ることができます。

ブックマークレットを実行すると左上にツールパレットが出てきて、デフォルトではマウスで落書き、下の矩形選択ツールをクリックすると、Safariの検索結果表示みたいに、ページの特定部分だけを残して暗くして強調表示させられます。

hilighting

自分はブログを書くときに、なるべくスクリーンショットを入れることにしてるんですけど(なぜならスクリーンショットがあれば文章なんか読まずにスクリーンショットだけ見て適当につつけばだいたいなんとかなるからです)これがめんどくさいのです。
特にウェブページのここのところを押してね、みたいなスクリーンショットをとりたいときは、まずスクリーンショットをとって、その後ほかのツールでハイライトしたりしないといけなくて、そんなの面倒すぎるから(というかいいツールを知らないので)やっていなかったのがこれでお手軽にできるようになりました。

ほんとはほかにも四角で囲んだりとか、文字を入れたりとか、線の色とか種類が選べたりとか、基本的なドローツールくらいの機能があるとますますブラウザだけでのウェブライフを満喫できるようになるのでぜひ誰かに作ってほしいです。

あと、ときどきマウスで引いた線がぶつぶつに切れているような見た目になるのではてなハイク お絵描き機能の話 – 川o・-・)<2nd lifeのアルゴリズムとかを誰かが実装してほしい!

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では写るようになってるみたいです。

iview for Firefox

iview for Tomblooに続いてiviewのFirefoxむけバージョン iview for Firefox を作りました。

ふつうのFirefoxの拡張機能なのでTomblooがなくても動作します(でもTomblooがないとTumblrに投稿したりはできません)。

インストール

iview for Firefox version.0.0.5

つかいかた

iview For Firefoxをインストールしたら、ToolsメニューにLaunch iviewという項目が追加されます。

これを選ぶとアイテム – データベース: iview – wedataに書かれたサイトの一覧が出てくるので見てみたいものをクリックして選んでいってください。

クリックしたものが左側のリストに追加されていきます。

左側のリストをクリックすると選んだサイトの写真が表示され始めます。

jで次の写真、sで次のサイト、TomblooがインストールされていればtでTumblrなどに投稿することができます。そのほかの操作は右上の?を押すと説明が表示されるので見てみてください。

iview For FirefoxでiPhoneよりも20倍くらい速いデスクトップコンピュータのCPUパワーをお楽しみください。

おわび

dotimpactに作っていただいたiview for Tombloo(+launch piclens) – collisions.doppac.ccのPicLens対応をそのままコピーしたもののPicLens起動するとクラッシュしてしまいます。どうもページのURLがhttpでなくてchromeなのが原因なようで、解決方法がみつけられませんでした。

ソースコード

ku’s iview-for-firefox at master – GitHub

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, 倉骨 彰: 本

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はさくさく書ける
  • 写真が大きくてもレンダリングでもたついたりしない
  • メモリをケチったりしなくても落ちない

feed Media Files

フィードの画面で表示されるMedia Filesには何が表示されているのか。

  _populateEnclosures: function Entry_populateEnclosures() {
    if (bagHasKey(this.fields, "links"))
      this._atomLinksToEnclosures();

    // Add RSS2 enclosure to enclosures
    if (bagHasKey(this.fields, "enclosure"))
      this._enclosureToEnclosures();

    // Add media:content to enclosures
    if (bagHasKey(this.fields, "mediacontent"))
      this._mediacontentToEnclosures();

    // Add media:content in media:group to enclosures
    if (bagHasKey(this.fields, "mediagroup"))
      this._mediagroupToEnclosures();
  },

~/mozilla/toolkit/components/feeds/src/FeedProcessor.js

_atomLinksToEnclosureslinkrel="enclosure"でかつhrefがあるものだけを取り出している。

media:contentmediacontentにして管理してたらデフォルトネームスペースでmediacontentっていう名前の要素があったら混同するのかと思ってやってみたらそもそもフィードとして認識されなくなりました。

Safariはとくにこれらenclosureとして扱われてるものを特別扱いしてくれたりはしない。IEもそんなことしない。Firefoxだけやってる。songbirdのpodcast関連か。

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で作るべきだった。反省。

OSXのFirefoxでダウンロードしたURLをファイルのコメントに付加する

OSXにはファイルにコメントをつけることができます(NTFSもサブストリームを使えば余裕でできるんだろうけど)。

OSX finder file info

これをFirefoxから操作したい。

類似品を探すとQuicksilverのやつがあった。コードを探した。


- (BOOL)setComment:(NSString*)comment forFile:(NSString *)path;
{
    BOOL result = NO;

    // only call if Finder is running
   // finderProcess = [NTPM processWithName:@"Finder"];
    if ([self applicationIsRunning:@"com.apple.finder"])
    {
        NSString* scriptText, *hfsPath;
        NSAppleScript *script;
        NSAppleEventDescriptor *aeDesc;

        CFURLRef fileURL = CFURLCreateWithFileSystemPath(NULL, (CFStringRef)path, kCFURLPOSIXPathStyle, NO);
        hfsPath = (NSString *)CFURLCopyFileSystemPath(fileURL, kCFURLHFSPathStyle);
        CFRelease(fileURL);

        scriptText = [NSString stringWithFormat:@"tell application \"Finder\" to set comment of item \"%@\" to \"%@\"", hfsPath, comment];
        script = [[[NSAppleScript alloc] initWithSource:scriptText] autorelease];
        aeDesc = [script executeAndReturnError:nil];
        result = (aeDesc != nil);
    }else{
		NSBeep();
	}
    return result;
}

Crucible/Code/NSWorkspace_BLTRExtensions.m – Google Code Search

AppleScriptで操作してあった。AppleScriptじゃなくてOSのAPIっぽいやつないのかと思って調べたけどないっぽかった。

これをベースにOS XでUnixWeird problems using “POSIX file” in AppleScriptを参考にして

set aFile to POSIX file ("/Users/kuma/Desktop/にほんごのファイル" as Unicode text)
set cmtStr to ("hello" as Unicode text)
tell application "Finder" to set comment of (file aFile) to cmtStr

っていうのをunicodeで書いてosascriptに渡せばコメントがつけれるのを確認した。あとはこれをFirefoxでnsIProcessで実行するだけ。

var as = Components.classes["@mozilla.org/file/local;1"]
        .createInstance(Components.interfaces.nsILocalFile);
      as.initWithPath("/usr/bin/osascript");
      var process = Components.classes["@mozilla.org/process/util;1"]
        .createInstance(Components.interfaces.nsIProcess);
      process.init(as);
var script = [
    'set aFile to POSIX file ("/Users/kuma/にほんごのファイル" as Unicode text)',
    'set cmtStr to ("' + (new Date() )+ '" as Unicode text)',
    'tell application "Finder" to set comment of (file aFile) to cmtStr'
].join(" \n ");
var converter = Components.classes["@mozilla.org/intl/scriptableunicodeconverter"]
              .createInstance(Components.interfaces.nsIScriptableUnicodeConverter);
          converter.charset = 'UTF-16';
var is = converter.convertToInputStream(script);
var fos = Components.classes["@mozilla.org/network/file-output-stream;1"]
                         .createInstance(Components.interfaces.nsIFileOutputStream);
var bs = Components.classes["@mozilla.org/binaryinputstream;1"]
                        .createInstance(Components.interfaces.nsIBinaryInputStream);
bs.setInputStream(is);
var file = Components.classes["@mozilla.org/file/directory_service;1"]
              .getService(Components.interfaces.nsIProperties)
              .get("ProfD", Components.interfaces.nsILocalFile);
file.append( 'setcomment.scpt' );
fos.init(file, -1, 0664, 0); // write, create, truncate
do {
  var b = bs.readBytes(bs.available());
  fos.write(b, b.length);
} while (b.length);
fos.close();
var as = Components.classes["@mozilla.org/file/local;1"]
        .createInstance(Components.interfaces.nsILocalFile);
      as.initWithPath("/usr/bin/osascript");
      var process = Components.classes["@mozilla.org/process/util;1"]
        .createInstance(Components.interfaces.nsIProcess);
      process.init(as);
var args = [ file.path ];
process.run(false, args, args.length);

これをprogressListeneronStateChangeがきたときに実行すればよい。

こんなかんじ。

        var persist = Components.classes["@mozilla.org/embedding/browser/nsWebBrowserPersist;1"]
            .createInstance(Components.interfaces.nsIWebBrowserPersist);

        var targetUri = ios.newFileURI(file);
        var dl = dm.addDownload(0, sourceUri, targetUri, title, null, null, null, persist);

        // it seems __noSuchMethod__ does not invoked if the emthod is called by xptcall.
        // we need to code every method of nsIWebProgressListener.
        persist.progressListener = {
            onLocationChange: function () { dl.onLocationChange.apply(dl, arguments); },
            onProgressChange: function () { dl.onProgressChange.apply(dl, arguments); },
            onSecurityChange: function () { dl.onSecurityChange.apply(dl, arguments); },
            onStatusChange:   function () { dl.onStatusChange.apply(dl, arguments);   },
            onStateChange: function (webProgress, request, stateFlags, status) {
                dl.onStateChange.apply(dl, arguments);
                if ( stateFlags & dl.STATE_STOP ) {
                    // add comment here.
                }
            }
        };
        persist.saveURI(sourceUri, null, null, null, null, file);

UTF-16で変換するとアタマにBOM(0xFFFE)がついてBOMなんか迷惑を被ったことしかなかったので不安だったけどosascriptはちゃんとわかってくれました。

Firebug 1.2 ‘console’ implementation 和訳

Firebug – Web Development Evolved » Blog Archive » Firebug 1.2 ‘console’ implementationの和訳です。

実装はソースコードに書いてあるのそのまま(あたりまえ)。webページに書かれてある悪意あるコードを特権つきで実行しないようにするための細工だっていうことがわかったところが収穫でした。

Firebug 1.2 ‘console’ implementation

FF3betaでFirebugの1.1のコマンドが動かなくなりました。これを直すのがすごい難しくてコマンドラインとコンソールを作り直す必要がありました。はじめにコンソールについて書いて、次回コマンドラインの実装について書きます(訳注:けっきょく2008.5.16現在まだ書かれてないです)。

Firebugの’console’を使ってWeb開発者はテキストやオブジェクトをFirebugのコンソールパネルに出力することができます。新しいバージョンは emelement messaging を使っています。webページの要素を使ってFirebugに制御フローと値を渡す、っていう意味です。こんなかんじで動きます。

Webページがロードされてからはじめのjavascript関数が呼ばれたりする前に document.createElement() を使ってページにscriptタグを仕込みます。スクリプトは_firebugConsoleという見えないdiv要素とconsole関数を追加します。Webページの開発者が console.log("foo"); を呼ぶとlog()関数は

  1. "foo"という文字列をconsoleのユーザオブジェクトの配列に書き込みます。
  2. _firebugConsole要素のひとつの属性に"foo"オブジェクトのインデックスを書き込みます。
  3. _firebugConsole要素のfirebugAppendConsoleイベントをディスパッチします。

これらは全部標準のDOM操作です。

Firebug側ではfirebugAppendConsoleイベントリスナを_firebugConsole要素に追加しておきます。イベントがやってきたら、要素の属性を使ってユーザーオブジェクトにアクセスしてそれをFirebugのコンソールパネルに書き込みます。

FirebugはユーザーオブジェクトにアクセスすることでFirefoxのセキュリティラッパーテクノロジーを使って、おかしなウェブのコードがextension空間に入ってくるのを防いでいます。

いま(1.2a13)の実装にはもうひとつ間にレイヤがあります。consoleを定義するscriptタグはロードされるページ全部に入れられるわけではありません。かわりに小さな5行でできたwindow.consoleのgetterを定義します。getterはconsoleのコードをロードして、consoleオブジェクトがはじめて使われたときに_firebugConsole要素を作ります。

Mike Shaver, Mark Kahn, Justin Dolskeがこれを作るヒントをくれました。ありがとう。もしコンソールについてソースを見ようと思ったらこのへんになります。

Security check basics 和訳

Firefox3(Gecko1.9)の、いわゆる特権コンテキスト/非特権コンテキストを越えての不適切な関数呼び出しを防いだり、通常のクロスドメイン制約を実現するための仕組みであるSecurity check basics – MDCの和訳です。

MDCにはまだ日本語訳がないのですが(あったら訳さないんだからあたりまえだ)、アカウントをとって勝手に入れちゃってもいいんでしょうか。

Security check basics

このドキュメントではGeckoのセキュリティモデルの基本的概念を概略を示します。

Basic Definitions

GeckoセキュリティモデルはAOCできるか?という形式の問い合わせに答えるかたちで設計されています。
この問い合わせに答えるには、動作を行う実体(Aはactorを意味しています)、実行される動作(Vはverbを意味しています)、実行される動作の対象(Oはobjectを意味しています)についての情報が必要です。

Geckoには、プロパティXを取得するプロパティXを設定する関数Fを呼ぶ、といった限定されたverbがあります。

actorとobjectのふたつはprincipalで表されます。

Principals

principalはセキュリティのコンテキストを表します。ウェブ上での典型的なprincipalはスキーマ+ホスト+ポートの組み合わせです。

AがOにVできるか?を問い合わせるとき、A(actionを実行する実体)をsubject principalと呼びます。O(動作を行われる対象)はobject principalと呼ばれます。

Scripted and native JavaScript functions

JavaScriptには2種類の関数があります。

ひとつめは、単純にCの関数のポインタを保持していて、呼び出されるとthisオブジェクトや引数などをCの関数に渡して呼び出します。ネイティブ関数の例としてArray.sortがあります。関数が呼ばれると、Cのソート関数を呼び出してsort()が呼ばれたArrayオブジェクトを渡します。
ふたつめは、”scripted” functionと呼ばれるものです。JavaScriptのfunctionキーワードや、適切なJSAPI呼び出しで生成されます。これらの関数が呼ばれたときはJavaScriptインタプリタでJavaScriptのコードが実行されます。

セキュリティ上の二種類の関数の違いは、scripted functionはprincipalがコンパイルされて関数に埋め込まれているところです。scripted functionはその関数を定義したスクリプトが実行されたページのprincipalを保持しています。

Determining the subject principal

セキュリティチェックの実行を要求されると、セキュリティマネージャは現在のsubject principal(actorがセキュリティチェックされる動作を行おうとしている)を決定する必要があります。Gecko1.9のセキュリティマネージャはXPConnectにXPConnectが管理しているスタックから”current JSContext”を得るように要求します。このJSContextは実行中のスクリプトが使っているコールスタックへのポインタを持っています。

  • スタック上にJavaScriptがないときは、subject principalは”system”(全能のprincipal)になります。
  • スタック上にJavaScriptがあるときは、スタックを上から下にscripted functionが出てくるまで辿ります。scripted functionには必ず関連づけられたprincipalが存在します(scripted functionを作るときには、誰が作ろうとしているかを伝えないといけません)。それがsubject principalになります。

Determining the object principal

GeckoがあるJavaScriptオブジェクトのprincipalを決めるには、そのオブジェクトからそのオブジェクト自身のprincipalを知っているオブジェクトまで__parent__チェインを辿っていきます(たいていはWindowDocumentです)。それが問い合わせされたオブジェクトのobject principalとして使われます。

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で消えそうな部分はなかった。

capture.clipboard.js FirefoxでキャプチャしてimgタグをクリップボードにコピーするJSActionsスクリプト

FirefoxでキャプチャしてFlickrにアップロードしたりするやつの、アップロードしないでクリップボードにdataスキームでコピーするものです。

dataスキームというのはこんなかんじ

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEIUlEQVRYhe2XX0xbdRTHf/wZ4IDbEYOJybKn6YPRqMlexWxvxiUzPmhiNJkkzPhg1CwxmYlm2YuaaHBmvf17O1SCGbgMcG4anKVLmWOScn/33kLBdoWWwoVRaMet0F5uvz7c9kItxe7B7oWH83Jzvqef3/md3zk9BAC8cgpHB4N46ee7FbFjgyF45RQAgHjlFFq7/GA4CSZXZYzhJDx60Q+vnAI53DMJk0vCgQqbySWh3i6APNM7VfEf3257AHsAJQFqbAKqrBTEQkGsFE2cWHbQZk40tFVWimorfTCAWpuA14dmcfluAo6JON68EUFrlx+EpWjmRLSUCMZwEghLYXJJeG1oFhb/Mq6Ek2h3R7HPJpQHsM8u4OhgCIqqFdjsWganb81jv1NEtZUWQLTkoOvtAk555hBY3SjSv/JLGDU7QBQBEJaCm4wXBcibtLKOtoEgCMvDxG1pjlyexuhiqqRuYCYJYim+iiKAGhuFZ14xhFo2i3NjMo5fC6NTuIeNzSwUVcOZ2wsgLAUx83j35pzhb/XHceJ6GB/dXsB6zldRNfDxdTQ6RTDcLgAmTkKdTYBX3jrJH3IKxMzrxWjmcah7At3Tq1BUDWZpGZ+PL0FRNQzOJPHkD4Et32/GcXU2WZA5hpPQvBvAAZcEYqG4Ek4YwqHoGkiuiltcEhocIsgFHu94oobPx6MLIGYedXYBLTk/wlL0hlYNH8+8glqbUDR3dgT4zLdoCGNKBq1dfjQ59Wdoyvl8Re9BUTXcz2ziYmAFVVZqpJfhJDQ6xYIacEzGy6uBaivFq7/OFIhPXA+jKlf5hKV4zxuDomo46Y7g5WthKKqGc2OLICw1XkTbQLAgRsdwtDyARqeIg90TSKQ3DfHVmSQIS9HgEHG4J4D0ZhY3FxSjLvrD+l0/3zeNersIwvLoCqwY+oyWxVOXptDgKOMZ5q+hN7RVB9ks8OJAEOS8D2fHZCiqhi/Gl0A6fSCdPpy+NQ9F1XBBWgY5P45n+6aQ3vYCfo+tocZaZiPKX8PxXGq3G/naB2e+R2Q0/BhK4FJwFSsberb6w0mQTl9B9SuqhrfdO6e/JADDSWiwC+CX1wsCnRldwHN905D/VovgEulNtPUH0eGZK/g+s5Yx5sMDDSNioXjjt4gRKHw/DYt/GbU2AYe6J/HWjQg+uSPj0z9lnHRH8ERPAMRC8SW/hL8SaUP3wUgMhOVLzo+SAEzuPb8/EsOxn0JocUmoyvWD/U4RxEr1Tsjq0/IRh2hcH8NJeKE/iA9HYnjsW3/J0+8KkO+MxEJRaxOKOthuxnD6UCMWHabU6f8ToBK2B/DwAZ5+iAAml6SvZv/+k1AJYzgJdXZBX04Pfj+BJk6s2HLazEl4/LsJfTnNr+ft7gg6hqM45fl/rWM4inZ31FjP/wESYf77Kq1CmwAAAABJRU5ErkJggg==" />

で画像などの中身をそのままbase64で書いたら書かれた内容をファイルの中身として扱ってくれるやつです。
dataスキームはFirefoxとSafari(3.1は出ました)でサポートされていてるほか、IE8でもサポートされるようになるそうです。

少し大きなキャプチャになると表示されなくなっちゃいますが、小さい画像で、ファイルにするのがめんどくさいときとか、そもそもファイルをアップロードしたりできないとき(さらにIEで見ている人のことを無視できるとき)に使えます。

ダウンロード

capture.clipboard.js

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しています。

jsa2uc JSActionsスクリプトをuserChrome.jsのスクリプトに変換するコンバータ

jsa2ucはJSActions用のスクリプトをuserChrome.js用のUCJS Loaderなどで使えるようにコンバートするperlのスクリプトです。

こんなかんじで変換したJSActionsスクリプトを実行するメニューの項目ができます。

uc menu

ダウンロード

jsa2uc

使い方

コマンドラインからは、引数にJSActionsのスクリプトを指定して実行します。

perl jsa2uc script.js > script.uc.js

標準出力に変換されたコードが出てくるのでリダイレクトして保存してください。

CGIバージョン

perlが動く環境を持ってないよ… というときは、下のフォームでJSActionsのスクリプトファイルを指定してアップロードすると、変換された結果が帰ってくるようにしたので、こっちをご利用ください。



補足 2008.3.22

見た感じJSActions特有の関数とかの代替はしていないように見えるんだけど。
はてなブックマーク – Constellationのブックマーク / 2008年03月21日

そのとおりでJSActions特有のJsActionsオブジェクト等はサポートしていないので、そういうのはいまのところ動かないです。

SITEINFOのないページをAutoPagerizeするSITEINFO speculator for AutoPagerize version 0.0.2

Pagerization version 0.2.2 – ?D of Kに触発されてちょっと自分でも書いてみた。

AutoPagerizeよりもあとに実行されるようにインストールしておくと、AutoPagerizeでSITEINFOにマッチしなかったとき自動的にnextLinkpageElementを推測してAutoPagerizeを再実行します。

インストール

siteinfospeculator.user.js

つかいどころ

全部のページで使うとちょっと重たいので、Greasemonkeyの設定でincludeを*.tumblr.comで使ったりするといいとおもいます。tumblrのAutoPagerizeされてないテーマも、だいたい正しくAutoPagerizeできるかんじです。

フィードバック

SITEINFO speculatorでAutopagerizeが起動されたときは、右上の緑色がほんもののSITEINFOで起動されたときよりも暗くなります。マウスを持っていくと、自動生成されたSITEINFOの質がどうだったかのフィードバックを送るためのリンクが出てくるので、今後の開発の参考になるので、ひどいSITEINFOができてむかついたというときはmessyを、完璧で感動したというときはperfect, 一応動いてるけどみためがおかしくなるとかのときはokを押してもらえると助かります。

rating UI

SITEINFOのレイティングと一緒に、ページのURLと使っているブラウザのUserAgentと生成されたXPathが送信されます。送られたデータはRatingsからみることができます。もし間違っておくって消したい、というときにはここで削除してください。

アルゴリズム

nextLinkの検出は適当です。単純なOperaのFast Forwardアプローチで、”»”, “次”, “Older”, “older”, “Next”, “next”, “→”, “←”, “>”, “<”, “«”, “前”, “Prev”, “prev” をキーワードにして引っかかったテキストリンクだけを探しています。なのでnextLinkが画像だと機能しません。(version 0.0.2で画像もいちおう対応しました)

前にSITEINFOで調べたかんじでは、nextLinkは時系列の向きに関わらず右向きの矢印で示されることが多かったので、そういう並び方に変えたほうがよさそう。今はマッチしたキーワードのリンクを、テキストの長さに反比例するコスト関数で評価して、コストの小さいものをnextLinkにしてます。のページのほうが10 年の今日、Netscape Communications 社が mozilla.org を設立よりも優先されるように、という小細工。

pageElementXML::Diffのアルゴリズムをベースにしてます。Diffは正確に差分を出す必要があるけど、今回は差異があることだけわかればいいので、かなり簡略化して差異がある部分だけをみつけて、ツリーを下から上に差異を足しこんでいって、終わったところで、今度は上から差異の変化を見ていって差異のほとんどが含まれている要素を見つけてそれをpageElementにしています。0.5~1.0秒くらいブロックしちゃうかんじだけど、そこはyieldで書き直せば解決。

精度のほうはあんまり試してないけど、nextLinkが見つかったものに関しては5~6割くらい正しくpageElementを出せそう。

Pagerization version 0.2.2 – ?D of Kのリストを参考にいくつか試した結果は

http://1470.net/list/memo/recent
ok
http://2ch.ru/g/
nextLinkが見つけられない
http://www.adiumxtras.com/index.php?a=search&cat_id=3
ok
http://allabout.co.jp/relationship/secondmarriage/closeup/CU20071006A/index.htm
ok
http://www.altphotos.com/Gallery.aspx?browseby=toprated
ok(でも2ページしか出ない。AutoPagerizeのSITEINFOがあっても2ページしか出ないけど偶然?)
http://jp.techcrunch.com/
ok(アルゴリズム的には正しいけどレイアウトが乱れる)
http://mozillazine.jp/
ok
http://coderepos.org/share/changeset/
ok(ただしレイアウトが大きく異なっているChangeset 8044 – CodeRepos::Share – Tracで止まる)

かんそう

nextLinkを見つけるようなアルゴリズムがない。たくさんデータを集めて統計的に解決するしかなさそう。

Greasemonkeyが実行されてから実際にAutoPagerizeで次のページがロードされるまで時間があるので、Greasemonkeyでページの解析をしなくても、リモートのサーバにリクエストを送って差分を解析してもらうこともできる。これは基本的にブラウザで新しいページをロードするたびにリクエストが送られることになる。サーバ側はpathtraqと同じデータを得ることができる。だから今のpathtraqに欠けているインストールすることのインセンティブとして、nextLinkpageElementを返してくれるAPIとかどうかなーと思ったり。pageElementの検出はWebページの本文抽出にも似ているところがあって、ますますpathtraqと相性いいなと感じました。

検出精度を高めていくには自動でテストをまわしてカバレッジを出してくれる何かがないとつらいです。perlのWWW::Mechanize::AutoPagerHTML::TreeBuilder::XPathでSITEINFOをパースしてみたらXPathの評価で例外が出まくってだめでした。PHPのXMLまわりはクソでwell-formedにするのも一苦労なので、ruby, pythonをまともに使えない自分には手詰まり。

slice.nicovideo.mixi.js ニコニコ動画をスライスしてmixiにアップロードするJSActionsスクリプト

Firefox3のCanvasにFlashが映るのでYouTubeをスライスできるからやった(でもWindowsはだめ)で作ったYoutTube+tumblrでスライスしてアップロードするやつの中身を入れ替えてニコニコ動画をスライスしてmixiにアップロードするバージョン。

nicovideoっていうフォトアルバムをつくってそこに5秒間隔でスライスしたものをアップロードします。Firefox3beta4+OSXでないとなにも映りません。

nicovideo

ダウンロード

slice.nicovideo.mixi.js

かんそう

mixiのフォトアルバムAPIはtumblrとかflickrとかとは比べ物にならない速さでレスポンスを返してくれるので、たぶん1秒間隔でスライスしても何も問題なさそうなかんじ。容量は64枚(320秒分)で3M弱。一覧表示が横に2つしか表示されないところとか残念。

スライスに使う動画を何にしようかとid:assannouに相談したら基本に返って豪血寺にしろと言われたので新・豪血寺一族 -煩悩解放 – レッツゴー!陰陽師‐ニコニコ動画(SP1)にしました。URLのsm9の部分は通し番号(だからこれが9番目の動画)なんですね。知りませんでした。