Softwareの最近のブログ記事

しばらく間が空いてしまいましたが、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

これは何？

prototype.jsベースで、IE、Firefox、Opera、SafariをサポートするWYSIWYGエディタライブラリです。

車輪の再発明もいいところなのですが、なるべくシンプルなWYSIWYGエディタライブラリが欲しくて作りました。

どんなもの？

↓使ってみてください。RSSリーダーで購読されてる方は、こちらからご覧ください。

コードを整える

"コードを整える"のチェックをはずすとブラウザ本来のHTMLを出力します。
文字サイズの変更は、Firefoxのみ動作します。

基本コード
サンプルはこちらからダウンロードできます。
まだ荒削りなので、実際に使えるかわかりませんけれど。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="crosseditor.js"></script>
<link href="crosseditor.css" media="screen,print" rel="Stylesheet" type="text/css">

<ul id="menu"></ul>

<div id="pallete"></div>

<input name="checkbox" type="checkbox" id="translate" value="checkbox" checked="checked">

<label for="translate">コードを整える</label>

<div style="clear: both"><iframe id="edit" frameborder="0"></iframe></div>

<div id="preview"></div>

<textarea name="textfield" id="html"></textarea>

ライセンス

Open Source Initiative OSI - The MIT License:Licensing
http://www.opensource.jp/licenses/mit-license.html

MITライセンスとします。
無償・無保証・無補償ですが、商用・非商用問わず無償でご利用いただけます。

開発動機

数ヶ月前･･･

技術メモ帳 - Iframe の designMode="on" によるリッチテキストエディット
http://d.hatena.ne.jp/lurker/20060930/1159617939

さらに追記:

Firefox only かと思ったらSafari でも普通に動いた。

この調子なら、きっと Opera も大丈夫だ。

な、なんだってーー!!
Safariでも動く!？マジで!!

と思って、自宅のMacで試したところ動かない。
うーん、なぜだ!?と思って調べたところ

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.

とあり、別のMacで試したところ、Safari 2.0.2以降なら動作しました。
Operaももちろん動いたので、じゃあライブラリにしてみようかと。

なので

・Safari1系はサポートしてません

クロスブラウザと謳ってますが、Panther以前のOSXでSafari1系使ってるユーザーは切り捨ててしまいます。

VOXはSafariだと、Firefoxを使ってねという旨のメッセージが表示されます。
僕も家では、まだPanther(OSX 10.3)なので、正直悲しいんですが。FirefoxよりSafariのが軽快に動作するので。Camino使えって話もありますが。

追記：
と書いたのですが、↓どうもSafari1.3系以降でサポートされてる模様。要調査。

WYSIWYG comes to Safari 1.3 » All Forces
http://allforces.com/2005/04/19/wysiwyg-comes-to-safari-13/

各ブラウザの挙動メモ

このリッチテキストエリアは、iframeのdesignMode属性をONにすることで実現してます。
ただしブラウザ毎に微妙に挙動が異なります。

Safariはremoveformatできない。iframeのonloadが効かない。

IEはUndo・Redo効かない。(VOXはできてるので方法はあるのかも)

各コマンド時に出力されるHTML

あとでまとめる。＞誰かまとめて
ブラウザ毎にだいぶ異なります。
それらをなるべくまともなHTMLに整形して出力してます。
Safariの吐くコードは頭おかしい超個性的。

注意点

・Firedoxでの問題

Firefoxユーザーは、mozlessの0.1.11以前のバージョンを入れていると今回のようなリッチテキストエリアでカーソルをキーボードで移動させることができません。
この問題はmozless-0.1.12でfixされています。
ただしFirefox2.0には未対応で更新確認にも出ないので、手作業で入れる必要があります。

しかも、ウチだけなのかもしれませんが、mozless-0.1.12を入れるとmozlessのキーがkeyconfigの"キーボードショートカットのカスタマイズ"メニューに出なくなり、従来カスタマイズしていたmozlessのキーも無効になってしまいます。これはかなり痛い＞＜

それから個人的にsuperscrollというスペースを押した時のスクロールをコントロールする機能拡張をFirefox2.0に無理やり対応させて使っていたのですが、これも同様にカーソルがキーボードで操作できない現象を起こしていました。
↓こちらのGreasemonkeyに乗り換えました。

Out of Sync - スペースキーで LDR っぽいスクロールを実現する Greasemonkey スクリプト
http://d.hatena.ne.jp/nagaton/20060831/1156993415

ずっと、Gmailなどのリッチテキストエリアでカーソルがキーボードで動かせないのはFirefoxの謎仕様だとばかり思ってたorz

　前回のGreasemonkeyでテキストエディタは思った以上に、反響があってビックリでした。はてなポイントまでいただいて感謝。これはうれしい。


ということで、第2弾行ってみます。
Greasemonkeyでランチャーです。

荒削りだけど、頻繁に見るページ、よく使うWebアプリなどを登録しておけば、たぶん便利！

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

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


簡単な使い方

インストールしたら、新しいページを開いて
日本語入力がOFFになっているのを確認してから"q"キーを押します。
すると以下のようなランチャーが起動します。




"q"キーで、次のメニューへ移動。
"shift + q"キーで、前のメニューへ移動。
"enter"でフォーカスされているメニューを開きます。


他の機能

起動するとブラウザのどのタブで起動してるかわかるようにページタイトルの頭に'+'がつきます。

ランチャーを起動した状態で、"shift + s"キーを押すと、設定画面に移ります。
自分で、メニューを追加することができます。
使い方は見ればだいたいわかるかと。
メニューを追加したあと、ページを再読み込みするか、新しいページを開くと設定が反映されます。
ちょっとやっつけで付け足したので超荒削りです。

アイコンは、各サイトの favicon.ico を取得して表示します。favicon.ico がない場合、HTMLアイコンで表示します。

前回の吼えディタのスクリプトに後付けしたので、"e"キーでエディタを起動することもできます。


Todo

• bookmarkletの登録　←必要？
• 直接サーチエンジンの検索結果にジャンプ
• アイコン(favicon.ico)のキャッシュ
  → 現時点では GM_xmlhttpRequest で取得して追加なので、ページの反応が早い順に並んでしまってる。
  他のスクリプトが GM_xmlhttpRequestを使ってる場合も待たされるので要修正。
• メニュー頭文字キーで頭出し
• メニュー設定をドラッグ＆ドロップで並び替え
• メニュー設定を名前を付けて保存　←必要？
• メニュー設定の変更後、即座に反映させる
  

注意点

機能拡張の mozless を入れている人限定ですが、"shift+q"がウィンドウを閉じる機能に割り当てられていて、いきなりウィンドウが閉じるので注意。


吼えディタも若干バージョンアップしてます。


修正点

• iframeの中まで生成されていたのを修正 ←高負荷？

参考： 人力検索はてな - Greasemonkeyで、すべてのページのbodyタグのすぐ後ろにタグを挿入するスクリプトを書いたのですが、FRAMEやIFRAMEが使われているページではフレーム内のbodyにも適用され..
http://q.hatena.ne.jp/1153500408

• GmailにタイトルとURLが含まれていたのを修正

謝辞

以下のライブラリやTipsを使わせていだたきました。

最速インターフェース研究会 :: キー割り当て用ライブラリを作った
http://la.ma.la/blog/diary_200511041713.htm

Lucky bag::blog: CSS だけで Mac OS X の Dock 風ナビゲーション
http://www.lucky-bag.com/archives/2006/03/css-navigation-magnification.html

CSS Drop Shadows | Design Meme
http://www.designmeme.com/articles/dropshadows/

技術メモ帳 - 拡張子に対応したアイコンの取得
http://d.hatena.ne.jp/lurker/20060830/1156939863


以下、余談

だんだんスクリプトが肥大化してます。自分の腹並。圧縮したい。


2006/11/29 追記

ショートカットキーの修正とあわせていくつか機能変更・追加しました。

• 吼えディタのおまけ機能として、"Ctrl+e"でページのソースを"タブ1"に読み込む機能がありましたが、ショートカットキーを"Shift+e"に変更。
• メニュー登録が増えすぎると、折り返してしまう問題があったので、とりあえず横幅を3倍にしてみた（1000px→3000px）。
• Escキーで吼えディタ・ランチャーともに終了します。
  →実装してたんですが、書き忘れてました。