Software: 2007年1月アーカイブ

しばらく間が空いてしまいましたが、Greasemonkey アプリケーション第三弾です。

思いついたら即検索！
ブラウザ上でいつでもどこでも使えるサーチエンジンです。

• hoeditor.user.js
• その他のGreasemonkeyスクリプト

今回もいままでのスクリプトに機能を付け足しています。


簡単な使い方

インストールしたら、新しいページ を開いて
日本語入力がOFFになっているのを確認してから"s"キーを押します。
すると以下のような検索キーワードを訪ねるダイアログボックスが表示されます。



検索したいキーワードを入力してEnter。
以下のような検索結果が表示されます。（"apple"で検索した例）



標準で

• 超弩級Wikipedia検索
• 人力検索はてな
• Yahoo!検索はてブ順
• Google
  

の検索結果を表示します。

もう一度検索したい場合は、再度、sキーを押してください。


他の機能

起動するとブラウザのどのタブで起動してるかわかるようにページタイトルの頭に'?'がつきます。
"s"キーを押す前に、文字列を選択していると自動的にキーワードにできます。


開発動機

Googleの検索結果に他のサーチエンジンの結果をくっつけるスクリプトは多くあります。
でも、毎回Googleに行くのが面倒なので、それをどこでも呼び出せたら便利だなと。
ついでに好きなサービスから検索結果取って来れれば、なお便利。
特に”人力検索はてな”の結果が欲しかったので作ってみました。

本当は、

Enjoy*Study - del.icio.usをインクリメンタルサーチ(Greasemonkey版)を作ってみました (2006/11/30 更新)
http://d.hatena.ne.jp/onozaty/20060524/p1

この自分のソーシャルブックマークを検索する機能も組み込みたかった。
わからないことは過去の自分に聞けと。
残念ながら、時間切れなのでTodoです。


Tips

今回も、従来のスクリプトに追加する形になっています。
使わないアプリはOFFにしたいという要望をいただいてたので、スクリプトの冒頭で必要のないアプリをOFFにできるようにしてみました。

var init = function(){
    layer = new Layer; //必須
    setApp = new GremonApp; //必須
    var editor = new Hoeditor; //テキストエディタ
    var launcher = new HoeLauncher; //ランチャー
    var search = new HoeSearch; //サーチエンジン
}

冒頭の↑の部分で、使わないアプリをコメントアウトしてください。

コードも長さが半端でなくなってきたので、一度整理しなおしてます。

取ってくる検索結果ですが、もちろん追加できます。
書式は以下のとおり。

{
    type: 'gweb', //英語省略表記 HTMLの作成に使用
    name: 'Google', //日本語表記検索結果の表示に使用
    req: 'http://www.google.co.jp/search?q=', //リクエストURL 最後にキーワードがつけられる形で
    limit: 20, //表示する各検索結果数
    areaExp: /<!--a--><div>(.*?)<!--z--><\/div>/g, //検索結果エリアの正規表現
    matchExp: /<div class=g>(.*?)<\/div>/g, //各検索結果の正規表現
    replaceHtml: '<li>$1</li>', //各検索結果のHTML
    startHtml: '<ul>', //検索結果の冒頭のHTML
    endHtml: '</ul>', //検索結果の末尾のHTML
    style:[ //検索結果に適用するスタイルシート
        '$ {', //$はこの検索結果の入るDivを指す この場合、 #__hoe_searchgweb と同等
            'height: 60%;',
            'overflow: auto;',
        '}'
        '$ span.a {',
            'color: red;',
            'background-color: #fcc;',
            'font-weight: bold;',
        '}',
    ]
}

これをGUIで指定できるようになったら最強なんだけどなぁ。

ご覧のようにスタイルシートで見栄えも指定できます。
レイアウトをもっと複雑にしたりとかもできますが、あまり使いやすくなかったので平積みにしました。
指定した順番に上から表示エリアが追加されます。


Todo

• 自分のソーシャルブックマーク検索
• I'm feeling lucky
• サイト内検索
• Search Term Highlighter の機能

開発謝辞

Google
http://www.google.co.jp/

人力検索はてな
http://q.hatena.ne.jp/

超弩級Wikipedia検索
http://athlon64.fsij.org/~mikio/wikipedia/estseek.cgi

Yahoo!検索 はてブ順
http://k52.if.tv/tool/y_hateb/

の各サービスから検索結果を取得させていただいてます。


今後の展望

こういう風に自由にデータを取って来れると、ネット上のデータが柔らかくなった印象を受けます。
なんとなく、この集めて表示するのはPlaggerっぽくできる気がしますね。
保存は、Google Notebook API あたりでとか。
導入も容易だし。

ということで、ユーザースクリプトは次世代のプラットフォームなのかもしれません。

prototype.jsでクロスブラウザなWYSIWIGエディタ ですがクロスブラウザと言っておきながら、Safari1に対応してなかったので、なんとか対応させました。（このページはIEで見るとエラーが表示されます。）

コードを整える


方法はいたって簡単でした。

Surfin’ Safari - Blog Archive ? WebKit Fixes in Safari 2.0.2 / Mac OS X 10.4.3
http://webkit.org/blog/?p=32

Fixed designMode to allow editing in an <iframe> when the src attribute is "" or about:blank.

ここに書かれてるとおり、iframeのsrcにhtmlファイルを指定してやればオK。
ただ、カラーパレットの色選択がうまくいかないみたいで、不完全。
しかも、正規表現がちゃんとサポートされておらず↓。

blog.8-p.info : Safari is evil
http://blog.8-p.info/articles/2006/04/30/safari-is-evil

正規表現を書き換えて対応しました。

しかし、src属性を指定すると今度はIEでエラーが出て動かなくなりますorz
アタマいたくなってきた。なんとなくSafari1がLDRでサポートされてないのもわかる。
どうしても、Safari1に対応したいときに使うということで、ひとつ。


各ブラウザの吐くHTMLコード

ついでなので各ブラウザごとのプレーンなHTMLの比較。

ブラウザ上の表示

簡単な使い方
強調できます
下線を引けます
色をつけることもできます
装飾を解除できます(Safariは未対応)
コードを整える のチェックを外すとブラウザ本来のhtmlコードになります。

InternetExplorer

簡単な使い方<BR> <STRONG>強調できます</STRONG><BR> <U>下線を引けます</U><BR> 装飾を解除できます(Safariは未対応)<BR> コードを整えるのチェックを外すとブラウザ本来のhtmlコードになります。

Firefox

簡単な使い方<br><strong>強調できます</strong><br><u>下線を引けます</u>< br><font color="#0066ff">色をつけることもできます</font><br>装飾を解除できます(Safariは未対応)<br>コードを整えるのチェックを外すとブラウザ本来のhtmlコードになります。

Opera

簡単な使い方<BR> <STRONG>強調できます</STRONG><BR> <U>下線を引けます</U><BR> <FONT color="#0066ff">色をつけることもできます</FONT><BR> 装飾を解除できます(Safariは未対応)<BR> コードを整えるのチェックを外すとブラウザ本来のhtmlコードになります。<BR><BR>

Safari

<DIV>簡単な使い方</DIV><DIV>< SPAN class="Apple-style-span" style="font-weight: bold;">強調できます</SPAN></DIV>< DIV><SPAN class="Apple-style-span" style="text-decoration: underline;">下線を引けます</SPAN></DIV><DIV><SPAN class="Apple-style-span" style="color:#0066ff">色をつけることもできます</SPAN>< /DIV><DIV>装飾を解除できます(Safariは未対応)</DIV> <DIV>コードを整えるのチェックを外すとブラウザ本来のhtmlコードになります。</DIV>

ちょw
この個性っぷりはスゴイ。
こんなとこで他のブラウザと差別化をはかってどーすんのだと(＾＾;


というわけでSafari対応のWebアプリが少ないのは、普及率以外の要素があるのではないかと思った次第。


他にも、いろいろ↓。

Safari の JavaScript の不備: Days on the Moon
http://nanto.asablo.jp/blog/2006/01/13/209495


追記：最初のコードだとうまく表示がされてなかったので、修正しました。
けれど微妙に表示がズレてしまうようですorxz