Bookmarkletの最近のブログ記事
シリコンバレー土産にiPhoneを買ってきてもらいました。
速攻でiPod touchが発表されました。。。が、いつでも思いついたときに、手にとって寝転びながら見れるフルブラウザとして思いのほか便利です。
でも、時々、IT系のニュースサイトを見ていると、広告のために読み込みが遅く、記事が分割されていてイラツキ、挙句、Safariが落ちるというパターンが何度も。
マイコミジャーナルとか、マイコミジャーナルとか、マイコミジャーナルとか。
そこで、携帯電話用にページを変換してくれる「Google Mobile Proxy」へ、見てるページを転送してくれるブックマークレットを書きました。
↑のリンク先へ移動して、iPhoneのSafariで直接ブックマーク。ブックマークの編集画面で先頭の「http://a-h.parfe.jp/gproxy.htm?」を消してください。その後、変換したいページに移動して保存したブックマークを開くと、Google Mobile Proxyで変換されたページが表示されます。
パソコンから登録して転送する場合は、↓をどうぞ。
最初は画像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 にも近いうちに同様の機能を取り込もう、という動きがあるようだ。
ということなので、今後、使われることが増えそうだ。
なので、現状では、上記のような力業のグリモンをすべてのサイトに適用したりしないように注意が必要かも。
この手法の発案者
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。
このスクリプトをインストールすると対象に指定したサイトでは、クリックするとページ上にオーバーレイでリンク先が開きます。
開いたオーバーレイは、左右の黒帯に一度カーソルを移動して、戻すと閉じます。
使用例ムービー
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かなぁ
第３回ライブコーディングに行ってきました。
普段見ることのできない他の人のコーディングを見れるというイベント。
どうしても、都合が空かず、最後のほうに遅れての参加だったんですが、20人以上が町屋の2階に集まって、つっこみを入れたり、解説がおもしろく、かなり楽しい雰囲気でした。
何がしかの、技を披露しないといけないとGreasemonkeyスクリプト作りにチャレンジしたのですが、頭が真っ白になってしまい。結局、まったく完成に至らず。全然精進が足りません(^^;
会場からいただいたお題「mixiをRubyっぽくするGreasemonkeyスクリプト」。
さっきできあがりました。
ポイントはfaviconも変更してるところです。
画像はマウスオーバーすると表示します。
これで職場でmixi見てても大丈夫？
イベントの後、他の参加者の方と主催者の方といっしょに、ラーメン食べに行き、さらにまた別の町屋にて、酒飲みモードに入っていろんな話ができておもしろかったー。
最後に残った人がコードを書き始めたので、僕も続きを書いて、この記事を書いてます。
ライブコーディング、とても刺激受けたイベントでした。
主催者の方々お疲れ様でした！
また、ぜひ参加してみたいです＞今度は時間に間に合うように
だいぶ量が多くなったので、現在、動作するものを一度まとめておきます。
Greasemonkeyって？
ページの見た目や機能をブラウザ側でカスタマイズできるFirefoxの機能拡張です。
好みのスクリプトを追加することでページを読みやすくしたり、便利な機能を追加することができます。
インストールの方法・簡単な使い方は以下のページの解説がわかりやすいと思います。
はてなグリースモンキー - グリースモンキーの使い方
他の方が作られたスクリプトを参照するにはGreasemonkey - Mozilla Firefox まとめサイトをご覧ください。
これまで作ったGreasemonkeyスクリプト
Google
Greasemonkey - Google のラジオボタン押したら検索
http://a-h.parfe.jp/einfach/archives/2006/0106171150.html
Google の検索フォーム下の↓コレを押したら検索結果が切り替わります。
Greasemonkey - Ctrl+EnterでI'm Feeling Lucky！
http://a-h.parfe.jp/einfach/archives/2006/0529185922.html
Googleでキーワードを入力し、CtrlまたはShiftキーを押しながらEnterで、I'm Feeling Lucky！できます。
Google ヘビーユーザーのための GreaseMonky スクリプト
http://a-h.parfe.jp/einfach/archives/2006/0105175809.html#search_word=greasemon
解説がわかりにくいのですが、Googleホームページを常に開いておくためのスクリプトです。
検索結果は、新規タブまたはウィンドウに開きます。
Google Maps に Pin を立てて、Gmailで知らせるGreasemonkeyスクリプト
http://a-h.parfe.jp/einfach/archives/2005/1005171239.html
Amazon
Amazon の商品ページに iTMS リンクメーカーを表示する Greasmonkey スクリプト
http://a-h.parfe.jp/einfach/archives/2006/0217173637.html
Amazon の商品ページに Yahoo！オークションの検索結果を表示する Greasmonkey スクリプト
http://a-h.parfe.jp/einfach/archives/2005/1227161457.html
amazie 用 GreaseMonkey スクリプト
http://a-h.parfe.jp/einfach/archives/2005/0622161750.html
amazonの商品ページにamazieへのリンクを追加します。
はてな
はてなブックマークの最適なアルゴリズムを探すためのGreasemonkeyスクリプト
http://a-h.parfe.jp/einfach/archives/2006/0824175505.html
Livedoor Reader
LDRの棒人間に怒られないようにするGreaemonkeyスクリプト（Windows限定）
http://a-h.parfe.jp/einfach/archives/2006/0905214308.html
IMEを自動的にOFFにするスクリプトです。
Livedoor Readerに同様の機能が実装されたので、そこでは意味がなくなったかも。
でも、GoogleReaderの利用者にも使っていただいてるみたいです。
ショートカットキーを使いたいWebアプリケーション全般に利用できます。
Twitter
Twitter で add を快適にする Greasemonkey スクリプト
http://a-h.parfe.jp/einfach/archives/2007/0411185259.html
friend アイコンにカーソルをあわせるとプロフィールを表示します。
グリモンアプリ
Greasemonkeyでテキストエディタ
http://a-h.parfe.jp/einfach/archives/2006/1121172220.html
超高速で起動するテキストエディター。
思いついたときにすぐメモできます。
Greasemonkeyでランチャー
http://a-h.parfe.jp/einfach/archives/2006/1127210217.html
よく利用するWebサービスやページを登録して、移動できます。
Greasemonkeyでサーチエンジン
http://a-h.parfe.jp/einfach/archives/2007/0110184405.html
いつでもどこでも使えるサーチエンジン。
思いついたときに即検索できます。
Greasemonkeyでコードリーディング
http://a-h.parfe.jp/einfach/archives/2007/0123211609.html
選択したテキストを入力していくアプリ。
好きなテキストでタイピングの練習ができます。
Gresemonkeyでブラウザー
http://a-h.parfe.jp/einfach/archives/2007/0427182354.html
Greasemonkey上で動くブラウザー。
リンク先をオーバーレイで表示します。
その他
ジョジョの奇妙なGreasemonkey
http://a-h.parfe.jp/einfach/archives/2007/1122223347.html
あの名ゼリフをTwitterやmixiで簡単に検索・引用するためのスクリプト。
設定を変えれば、どのサイトでも利用可能。
今後も、新しいスクリプトを作ったら、ここに追加していきます。
Greasemonkey本登場!!
海外ではオライリーから「Greasemonkey Hacks」という本が出ていたのですが、部数が見込めないのか日本語版は出版されていませんでした。
まとまったオフラインでの解説は、以前、Software Designの2006年4月号に川崎さんが記事を書かれてたのが、唯一だった気がします。そんな中、やっと日本語書籍が出版されます。
「Greasemonkeyスクリプティング TIPS&SAMPLES」と言う本を書きました
http://espion.just-size.jp/archives/06/338142930.html
Firefox 用エクステンション Greasemonkey の解説書を書かせてもらいました。秀和システム さんより、もうすぐ発売されます。300ページとちょっと。
いくつかウチで公開しているスクリプトも載せていただいてるみたいです。
Greasemonkey 好きな人はぜひ。
Greasemonkeyスクリプトを書く人のためのTips
いくつか役立ちそうな日本語情報を。
GreaseMonkey Driven Development / Shibuya.js Technical Talk #2
http://lowreal.net/2006/shibuya-js-2-lt
開発に役立つ情報満載です。
エディタの設定がずっと有効になってなくて、とても不便だったのですが、この情報で解決。
tapotの日記 - Greasemonkeyスクリプトを作成する際のTips
http://d.hatena.ne.jp/tapot/20050624/p3
実行されるタイミングや、GM_xmlhttpRequestなどのSpecial Functionsについて解説されています。
CMS researcher - Greasemonkeyでprototype.jsやscript.aculo.usを使う方法
http://d.hatena.ne.jp/ysano2005/20060127/1138382734
技術メモ帳 - Greasemonkeyで永続的に外部スクリプトを利用する
http://d.hatena.ne.jp/lurker/20060813/1155432961
技術メモ帳 - ページの閲覧者にGreasemonkeyを使用させない方法
http://d.hatena.ne.jp/lurker/20060818/1155913962
人力検索はてな - Greasemonkeyで、すべてのページのbodyタグのすぐ後ろにタグを挿入するスクリプトを書いたのですが、FRAMEやIFRAMEが使われているページではフレーム内のbodyにも適用され..
http://q.hatena.ne.jp/1153500408
frameやiframe内では実行されないようにする方法。
naoyaグループ - naoyaの日記 - それGre
http://naoya.g.hatena.ne.jp/naoya/20061006/1160116362
Greasemonkeyでどうやるかは聞いてねーよ!
