google preview

meta-tags: opera,javascript,userjs,googlepreview,dokodemo-preview,
meta-author: t.ashula
meta-entiry_id: dokodemo_preview
meta-creation_date: 2007-03-11T16:43:39+09:00

Wyszukiwarka google - Dostosowywanie Opery do własnych potrzeb - Opera Community[via Shishimushi GooglePreview for Opera] にて紹介されている google-preview.js をガッツリ refactoring してもともとのGoogle, Y! 以外に，Y!J，goo.ne.jp，MSN，Live.comに対応させてみたよってなお話

2007-03-16T00:00:00+09:00|v.0.1.5 にて infoseek,livedoor,excite,AllTheWeb追加．
2007-03-20T00:00:00+09:00|v.0.1.6 にて Opera Searchに不完全ながら対応
2007-03-29T00:00:00+09:00|v.0.1.7 にて Sagool.jpに不完全ながら対応
2007-05-18T22:50:00+09:00|v.0.1.8 にて Google Icon をぱくってみた．
2007-06-18T22:50:00+09:00|v.0.1.9 にて delicious，はてぶに対応してみた．
2007-06-18T22:50:00+09:00|v.0.1.10 にて Operaがクラッシュするバグ修正．詳細は，Operaとなまず．
2007-08-17T00:00:00+09:00|v.0.1.11; いろいろ修正．popup調整中．はてぶに対応．
2007-09-03T00:00:00+09:00|v.0.1.12 最終リリース．Opera9 専用になってしまったかもしれないが，たぶんもうメンテナンスしない．
2007-10-21T00:00:00+09:00|v.0.1.12a Live Search の仕様変更への応急処置．

お持ち帰りは dokodemo-preview.jsからどうぞ

経緯

件のscriptを 2ch.net のOperaスレ (【Opera10】Opera Part66【まだか】)，Shishimushi - GooglePreview for Opera，Wyszukiwarka google - Dostosowywanie Opery do własnych potrzeb - Opera Communityという流れで知る．同時にスレ的にはY!Jへの対応の需要があることを知る．

前後してリンク先を「チラ見」できるブログアクセサリーが提供開始 [japan.cnet.com] という話を聞いて，これをUserJSの範疇でできないだろうかと考えてた事もあって，そういうものへの需要が自分の中にもあった．

最終的には「どこのページでも，どんな情報でも」を目標として，手始めにY!J対応からやってみる事に．

Y!Jパッチ

もともとのコードの大雑把な流れは

開いたページのURLが google か Y! 本家かの検索結果のURLかどうかを判定．一致すれば次へ，違うなら終了．
ページ内のリンク(anchor)を抽出して各国の amazon affiliate を施す
googleの検索結果のURL なら
1. ページ内のリンク(anchor)を抽出．
2. 個々のリンクに対して，検索結果のページへのリンクなら，
  1. リンク先ページ(のドメイン単位で)の thumbnail の IMG 要素を生成
  2. 元のページに生成した要素を追加
3. ページのスタイルを微調整
Y! の検索結果のURLなら
1. ページ内のリンク(anchor)を抽出．
2. 個々のリンクに対して，検索結果のページへのリンクなら，
  1. リンク先ページの本当のURL( Y! のredirect処理を除いたURL)を生成
  2. リンク先ページ(のドメイン単位で)の thumbnail の IMG 要素を生成
  3. 元のページに生成した要素を追加
3. ページのスタイルを微調整

という風になっているので，「Y!の検索結果のURLなら」の処理と同様にして，「Y!Jの検索結果のURLなら」という処理を追加すれば良いことになる．実際には Y! と Y!J のURLや検索検索のページ構成に共通する部分が多かったので，

UserJS を Y!だけからY!Jでも使えるように変更．
Y!J の検索結果でのredirect除去処理を追加．
Y!J の検索結果のURLに反応するように変更．

という程度の修正で済み，結果として，こんなパッチが出来上がった．

Y! の場合とほとんど同じ処理だったため Y!J への対応は，コードもほとんど増えずに容易に行いえた．しかし，他の検索サイトの結果に対応しようとした場合，追加しようとする検索エンジンの数だけURLの判定やredirectの除去処理といった処理を追加しなければならないといった問題点があり，実際には面倒なものとなる．また，対象のページの構成やredirect処理の方法が変化した場合，対象リンクの抽出処理やredirectの除去処理をすべて書き換える必要があるといったプログラムの構成上の問題も，追加処理を難しくしている．

より簡単に対象の検索サイトを追加したり，より小さな影響でページの構成の変更に対応したりするために，オブジェクト化してみることにした．

試行錯誤の後，こんなクラスになった．

Filter.prototype = {
  name : "name",
  domain : "",
  /* loc(= location.href) が domain と一致するかどうか  */
  is_my_domain : function ( loc )  {},
  /* anc(= Anchor Element ) が 検索結果サイトへのリンクの
     anchorかどうかの各検索エンジンごとの判定処理 */
  is_target : function ( anc )  { },
  /* anc(= Anchor Element ) が検索結果サイトへのリンクの
     anchorかどうかの各検索エンジンに共通の判定処理 */
  is_target_def  : function ( anc )  {},
  /* anc(= Anchor Element ) を元にThumbnailなどを生成して挿入 */
  ins_thumb      : function ( anc )  {}, 
  /* url から redirect分を除去 */
  get_real_url   : function ( url )  {},
  /* 追加処理 */
  and_more       : function ()       {}
};

これを各サイトごとに，各関数を必要に応じて上書きする形で instance (filter)を作成し，main の処理として，生成した各filterに is_my_domain() で対象ページかどうかを判定．対象ページならページ内の各anchorに is_target() で対象anchorかどうか判定．対象anchorならThumbnailなどを生成して挿入．というループを回すという形になった．

  var filters = [ /* instances of Filter */ ];
  for( var i = 0, flen = filters.length; i < flen; i++ ) {
    var ftr = filters[ i ];
    if ( ftr.is_my_domain( url ) ) {
      var j = 0;
      var anc = document.getElementsByTagName("a")[j++];
      while ( anc != null ) {
        if ( ftr.is_target( anc ) ){
          insed_previews++;
          ftr.ins_thumb( anc );
        }
        anc = document.getElementsByTagName("a")[j++];
      }
      break; // break for(i)
    }
  }
  return insed_previews;

そうすることで，メインのロジックを変更することなしに，検索対象サイトを増やせるようになった．

まとめ

Wyszukiwarka google - Dostosowywanie Opery do własnych potrzeb - Opera Community[via Shishimushi GooglePreview for Opera] のscriptをいじって Y!J 対応にしてみた．

他のサイトを追加しようとすると結構めんどいので Filter ってクラスを作って各サイトごとのデータとコードをまとめて扱えるようにしてみた．それを使って，Google, Y! 以外に，Y!J，goo.ne.jp，MSN，Live.comに対応させてみた．

おおむね良好．

ver0.2に向けて

現状の ver. 0.1 ではThumbnail以外のgadgetを追加できないので，それを改善する． anchor を受け取って gadget を生成して DOMtree 上に追加する objectを作れば，そこに何でも入れられるだろう．

あとは，もともとのgoogle-preview.1.0.js 由来のコードを全部置き換えて load eventで何度も実行されるのを一回で済むようにしたい．そんなとこかなぁ

google preview

経緯

Y!Jパッチ

さらにべつの検索結果への対応

まとめ

ver0.2に向けて