2009年10月6日火曜日

Google 検索と同時に Google ブックマーク の検索結果を表示する Greasemonkey スクリプト

ブックマークの保存に Google ブックマーク

保存しておきたいサイトやページは全て Google ブックマーク で管理している。Firefox のブックマークは、ツールバーに頻繁に見るサイトを置いているのと、「あとで読む」用の一時的な保管場所として使っているのみ。ブックマークをツリー状に整理整頓しなくなって久しい。 ^^;

オンラインブックマークに移行して随分経過した。当初、はてブ を使うことも考えたけれど、完全にプライベート目的だったので Google ブックマークを選んだ。

 

Firefox のアドオン Gmarks で素早く入力

Google ブックマークを使うときは、Firefox のアドオン GMarks を利用。ブックマークしたくなったら、Ctrl + D で素早くブックマーク。後で検索できるように、なるべく多くタグを付けておく。分類目的のタグに加え、読んだときに気になった単語、「おもしろい」「なるほど」などという感想もタグとして付ける。場合によっては、そこから連想すること、人から教えてもらったらその人の名前、人に教えたいことなら相手の名前をタグとしてつけることも。後で検索するときに手がかりをたくさんつけておくのがポイント。

 

検索時にブックマークも同時に検索してほしい

検索をしていて、以前に見たページに辿りつけなくなることはよくある。なんとなく見たいサイトをぼやっと覚えているものの、肝心のそこへ辿り着くための検索ワードが思い出せない。 (+_+) そんなとき、Google ブックマークで再検索すると見つかることがある。Google 検索の後、ブックマーク検索するのは面倒なので、検索と同時にブックマークも検索して表示するスクリプトを書くことにした。

動作イメージは下図の通り。検索した単語に応じて、右側にブックマーク検索の結果を表示する。ただし、表示されるブックマークは、Google ブックマークで検索したときの 1 ページ目のみを表示するというシンプルなものに。

091001-003.png

 

インストール

前提 : Greasemonkey がインストールされていること。

インストールはこちらをクリック → search_extention.user.js

更新情報
  • 2011.9.10 : Google Bookmarks からの検索結果が表示されない問題を修正。
  • 2010.11.15 : Google のデザインの変更に対応。ただし、Google の検索結果の幅を固定したので、幅の狭い PC では見ずらくなるかも。
  • 2010.7.31 : Google のデザインの変更に対応。マーカーとして数値を振る。

 

Firefox のブックマークを Google ブックマークへインポート

Google ブックマークを普段使ってない場合は、Google ツールバー を使うと Firefox のブックマークをインポートすることができる。

ツールバーの機能 : ブックマーク - ツールバー ヘルプ によると、

  1. ツールバーの [ログイン] ログインボタンをクリックして、Google アカウントにログインします。
  2. [ブックマーク] ドロップダウン メニューをクリックし、(…) [Firefox ブックマークをインポートする] をクリックします。
  3. インポートしたいブックマークのチェックボックスをオンにします。
  4. [インポート] をクリックします。

ただし、ブックマークを階層化している場合、分類しているフォルダが独立したタグになるのではなく、

フォルダ名1:フォルダ名2

のように `:’ で区切られた文字列で一つのタグになるようなので注意。

 

ソースコードについて

GitHub

当初、Gist – GitHub に置こうと思っていたけれど、なぜか途中で切れてしまったので以下に置いた。

Git の使い方覚えなければ。。 (+_+)

追記 (2010.7.31) : Windows で GitHub の利用 - msysgit, TortoiseGit を使って

 

オブジェクト間の関係

大雑把に言えば、以下の図のような動作。

091005-001

 

スクリプトでは、トップレベルのオブジェクトを名前空間として利用。以下の図では便宜的に名前空間をパッケージとして描いた。

classDiagram2

 

当初、スーパークラスに相当する Abstract 内のオブジェクトは考えていなかった。Google 検索時には Google ブックマークからデータを引っぱてくるだけでよいと。しかし、スクリプトを書いている内に、Google 検索時に はてブ 、Bing 検索時に Delicious から読み込みたいなど、検索サイトとオンラインブックマークの組み合わせを変えたくなるかもしれないと思、共通になりそうな部分を抽出した。必要であればスーパークラスのメソッドをオーバーライドするだけ。しかし、他を実装していないので、実際に書いたときに色々と問題がでてくると思うけれど。。 ^^;

一応想定では、スクリプトの起動部分である最後の文を

searchResultArea({
    searchSite: Google.searchSite(),
    bookmarkService: Hatena.bookmarkService()
}).load();

または、

searchResultArea({
    searchSite: Bing.searchSite(),
    bookmarkService: Delicious.bookmarkService()
}).load();

のように切り替えられるつもり。

 

処理の流れ

大雑把な流れは以下の通り。

sequenceDiagram

 

参考書籍

スクリプトを書くのに以下を参考にした。

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス より

4873113911

  • 3.9 グローバル領域の利用を減らす, p28
  • 4.10 クロージャ, p43
  • 5.2 オブジェクト指定子, p57
  • 5.4 関数型, p59

上記の本では、new 演算子を想定している関数に対して、普通に関数呼出しをした場合、グローバル変数を上書きしていしまう可能性があるために、new を JavaScript の「悪いパーツ」と評している。(p133) その代わりとして、クロージャによるメソッドのアクセス制御と継承の方法について解説があった。これを読み、new 演算子の必要性を感じなくなったので、オブジェクトの生成に new は全く使っていない。クロージャは、はじめ取っつきにくかったけれど、慣れたらクラスと同じように見えてきた。クラスベースのオブジェクト指向のように、クラスの構文を持ち込まなくても、関数だけで表現できるのというのはシンプルでいいかも。 ^^

ところで、下記コードにおける searchSite 関数内の defaultInitArea メソッドは、引数 `my’ によって、searchSite 関数 (コンストラクタ) によって生成されたオブジェクトを継承したオブジェクトからのみアセクス可能であることを想定したが、こういう書き方で良かったのかな? JavaScritp に不慣れなので自信なし。。 (+_+)

 

関連記事