====== 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

[[http://my.opera.com/community/forums/topic.dml?id=178327&t=1173290751&page=1#comment1928081|Wyszukiwarka google - Dostosowywanie Opery do własnych potrzeb - Opera Community]][via [[http://kawatarou.info/note/opera/googlepreview.htm|Shishimushi GooglePreview for Opera]]] にて紹介されている google-preview.js をガッツリ refactoring して もともとの[[http://www.google.com|Google]], [[http://www.yahoo.com|Y!]] 以外に，[[http://www.yahoo.co.jp|Y!J]]，[[http://www.goo.ne.jp|goo.ne.jp]]，[[http://www.msn.co.jp|MSN]]，[[http://www.live.com|Live.com]]に対応させてみたよってな お話

  - 2007-03-16T00:00:00+09:00|v.0.1.5 にて [[http://search.infoseek.co.jp|infoseek]],[[http://search.livedoor.com/search/|livedoor]],[[http://www.excite.co.jp/search.gw|excite]],[[http://www.alltheweb.com/search|AllTheWeb]]追加．
  - 2007-03-20T00:00:00+09:00|v.0.1.6 にて [[http://search.opera.com|Opera Search]]に不完全ながら対応
  - 2007-03-29T00:00:00+09:00|v.0.1.7 にて [[http://sagool.jp|Sagool.jp]]に不完全ながら対応
  - 2007-05-18T22:50:00+09:00|v.0.1.8 にて [[https://addons.mozilla.org/ja/firefox/addon/4676|Google Icon]] をぱくってみた．
  - 2007-06-18T22:50:00+09:00|v.0.1.9 にて [[http://del.icio.us|delicious]]，[[http://b.hatena.ne.jp|はてぶ]]に対応してみた．
  - 2007-06-18T22:50:00+09:00|v.0.1.10 にて Operaがクラッシュするバグ修正．詳細は，[[mt:d070614_opera_and_namazu]] 
  - 2007-08-17T00:00:00+09:00|v.0.1.11; いろいろ修正．popup調整中．[[http://b.hatena.ne.jp|はてぶ]]に対応．
  - 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 の仕様変更への応急処置．

お持ち帰りは [[http://ashula.info/files/opera/tips/dokodemo-preview.js|dokodemo-preview.js]]からどうぞ

=====経緯=====

件のscriptを 2ch.net のOperaスレ ([[http://search2ch.opera-wiki.com/thread/1172141844.html#813|【Opera10】Opera Part66【まだか】]])，[[http://kawatarou.info/note/opera/googlepreview.htm|Shishimushi - GooglePreview for Opera]]，[[http://my.opera.com/community/forums/topic.dml?id=178327&t=1173290751&page=1#comment1928081|Wyszukiwarka google - Dostosowywanie Opery do własnych potrzeb - Opera Community]]という流れで知る．同時にスレ的には[[http://www.yahoo.co.jp|Y!J]]への対応の需要があることを知る．

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

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

=====Y!Jパッチ=====

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


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

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

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

という程度の修正で済み，結果として，こんな[[http://search2ch.opera-wiki.com/1172141844/870.html|パッチ]]が出来上がった．

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

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

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

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

<code javascript>
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 ()       {}
};
</code>

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

<code javascript>
  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;
</code>

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

=====まとめ=====

[[http://my.opera.com/community/forums/topic.dml?id=178327&amp;t=1173290751&amp;page=1#comment1928081|Wyszukiwarka google - Dostosowywanie Opery do własnych potrzeb - Opera Community]][via [[http://kawatarou.info/note/opera/googlepreview.htm|Shishimushi GooglePreview for Opera]]] のscriptをいじって Y!J 対応にしてみた．

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

おおむね良好．

=====ver0.2に向けて=====

現状の [[http://ashula.info/files/opera/tips/dokodemo-preview.0.1.js|ver. 0.1]] ではThumbnail以外のgadgetを追加できないので，それを改善する． anchor を受け取って gadget を生成して DOMtree 上に追加する objectを作れば，そこに 何でも入れられるだろう．

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