Bookmarkletの最近のブログ記事

シリコンバレー土産にiPhoneを買ってきてもらいました。
速攻でiPod touchが発表されました。。。が、いつでも思いついたときに、手にとって寝転びながら見れるフルブラウザとして思いのほか便利です。

でも、時々、IT系のニュースサイトを見ていると、広告のために読み込みが遅く、記事が分割されていてイラツキ、挙句、Safariが落ちるというパターンが何度も。

マイコミジャーナルとか、マイコミジャーナルとか、マイコミジャーナルとか。

そこで、携帯電話用にページを変換してくれる「Google Mobile Proxy」へ、見てるページを転送してくれるブックマークレットを書きました。

Gproxy

↑のリンク先へ移動して、iPhoneのSafariで直接ブックマーク。ブックマークの編集画面で先頭の「http://a-h.panepon.com/gproxy.htm?」を消してください。その後、変換したいページに移動して保存したブックマークを開くと、Google Mobile Proxyで変換されたページが表示されます。

パソコンから登録して転送する場合は、↓をどうぞ。

Gproxy

最初は画像ONにしてあります。
ブックマークレット実行するたびに、画像ON・OFFを切り替えます。
いまのところSafariのオプションで画像をOFFにできないので、その代わり。スピード重視の人向け。

変換前の本来のページを見たければページ末尾の"HTMLで表示"をクリックでOK。

どうぞお試しください。

今ごろ、まるごとJavaScript & Ajax ! Vol.1を読んでいたら、こんな記事が。

[ThinkIT] 第2回：jQueryライブラリの内部とonloadイベント記法 (2/2)
http://www.thinkit.co.jp/cert/article/0703/10/2/2.htm

通常のonloadイベントではページ内の全ての画像ファイル等の読み込みも完了してからコードが実行されるのに対し、jquery.jsはHTMLのDOM解析が完了した途端にコードを実行できるアクセラレーション機能を備えています（注4）。

おおすごいなーと。
ライブラリなしでも使いたいなーと思っていたら、

window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL
http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/

DOM 読み込み完了のタイミングで、任意の関数を実行できるようにする JavaScript ライブラリを書いてみた。

* domready.js

mootools の同様の機能を基にしていて、単体として使いやすいように外部ライブラリへの依存性をなくし、prototype.js とも併用できるようにしたもの。

タイムリー！
激しくGJ！


で、使ってみたのですが、特定の処理をしているグリモンを入れていると、この手法で登録したイベントが動作しない現象に遭遇したのでメモ。

(function(){

document.body.innerHTML = document.body.innerHTML.replace(/hoge/g, 'hige');

})();

登録されたイベントが、DOMの再描画の際に外れる。

Greasemonkeyスクリプトは今回の手法と同じタイミング（FirefoxではDOMContentLoaded）で実行されてるのだけど、この動作を見るとページ上のJavascriptで定義されたコードの後に実行されてるっぽい。

・上記ライブラリでイベント登録
　　　　　　　　↓
・Greasemonkeyでdocument.bodyの書き換え
　　　　　　　　↓
・ブラウザがDOMを再構築
　　　　　　　　↓
・登録されていたイベントが解除される

という流れ。


window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL
http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/

嬉しいことに、prototype.js にも近いうちに同様の機能を取り込もう、という動きがあるようだ。

• #5414 (PATCH) Faster onload for Event.onload
• Changeset 6596: Support for “DOMContentLoaded” event handling (prototype.js event branch)

ということなので、今後、使われることが増えそうだ。

なので、現状では、上記のような力業のグリモンをすべてのサイトに適用したりしないように注意が必要かも。


この手法の発案者

Dean Edwards: window.onload (again)
http://dean.edwards.name/weblog/2006/06/again/


参考

Ajaxian DOMContentLoaded.Next
http://ajaxian.com/archives/domcontentloadednext

戦争 - ドキュメントのロード完了に合わせて関数を実行する
http://d.hatena.ne.jp/brazil/20060105/1136404226

あれこれ拡張やスクリプトを入れすぎているせいかFirefoxが重い、新しいタブを開くのももっさりしている。
あー、リンク先をタブを開かずにiframeで開けたらいいのに！

それGreasemonkeyでいいんじゃね？

ということで作りました。GreaseFox。

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

このスクリプトをインストールすると対象に指定したサイトでは、クリックするとページ上にオーバーレイでリンク先が開きます。

開いたオーバーレイは、左右の黒帯に一度カーソルを移動して、戻すと閉じます。

使用例ムービー

http://blog.amazie.jp/greasefox.htm

設定方法

対象にするサイトを

/* Setting */
var include_URL = <><![CDATA[
    http://www.checkpad.jp/*
    http://www.google.*/*
    http://mixi.jp/*
    http://clip.livedoor.com/clips/*
    http://twitter.com/*
]]></>;

に記述。

すべてのページで使っちゃるという男前は

var include_URL = <><![CDATA[
    http(s?)://*
]]></>;

で、おｋ。

Tips

Livedoor Reader で "G"を押すと元記事がオーバーレイで開きます。

→初期版ではLDRが対象サイトにはいってなかったので、入れました。

既知の問題点

• 履歴に残らない →いいのか？悪いのか？
• a タグの内側にfont タグとかが複数入ってるリンクは開きません。
• サイトによっては、タイトルがうまく取得されない。かも。
• BackSpaceとか、Alt+←とかで戻ったら、タイトルとアドレス欄が表示されない。 →後ろは振り返らない、ひたすら前進あるのみ。

ライセンス

MITライセンスで。

開発謝辞

gotinの日記
http://d.hatena.ne.jp/gotin/

gotinさんのmktag関数を使わせていただきました。

del.icio.usのハッシュの作成に

高度な JavaScript 技集
http://www.onicos.com/staff/iz/amuse/javascript/expert/

のmd5.jsを使わせていただきました。

Todo

好きなサイトで有効／無効を切り替えれるようにする。

以下、余談

一番苦労したのは、ページのタイトルとURLの取得。
iframeのクロスドメイン制限で、通常の方法では他ドメインのページは取れない。
GM_XMLHttpRequest使って、アクセスするのもやってみましたが冗長。
結局、GM_SetValueでどうにかしました。

おまけ

初期型は、こんなこともできました。

マトリョーシカモード

Ｍな人が使うモード。

マトリョーシカ人形 - Wikipedia
http://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%88%E3%83%AA%E3%83%A7%E3%83%BC%E3%82%B7%E3%82%AB%E4%BA%BA%E5%BD%A2

最初に考えたグリモンアプリはこれで完結。
Greasemonkeyはやっぱ次世代のプラットフォームかもよ！？＞Apolloかなぁ