GoogleGravityをどのサイトでも発生させるブックマークボタンを作ってみた

Google Gravity というサイトをご存知でしょうか？

もう結構昔に流行っていたものと思いますが、

今でもMr.doobというサイトでアクセス可能です。

裏ではThree.jsというライブラリが動いており、ブラウザ内で重力を表現しています。

話は変わりますが、

クライアントサイドでのスクレイピングを簡単にするツールとして、artoo.jsというツールがあります。

このツールは、アイコンをブックマークバーにドラッグアンドドロップし、そのブックマークを押すことで開いているページで起動されます。

最近のクロームだと直接ドラッグアンドドロップでブックマークに追加できないようですが、

新規ブックマークを作成するときに、https: からではなく javascript: という文字から書き始めることで、ブックマークを押したときにJSを動かすことができるようになります。

たとえば下記リンクをクリックすると、javascriptのalert関数が実行されて、「hello」という文字のダイアログが出現します。

同様の仕組みで、GoogleGravityのように開いているページ内のリンクを下に落っことすリンクを作ってみました。

　　↓　下のアイコンをクリックしてみてください。

ブラウザが壊れたのではないかとびっくりする方もいるかもしれませんが、

大丈夫です。ページをリロードすれば元通りになります。

表示されている要素が多いページだと、要素同士が衝突してうまく動いてくれないのですが、artoo.jsと同様にブックマークにすれば、他のページでも試せます。

ドラッグアンドドロップでブックマーク追加できないときは、

リンクを右クリックして、「リンクのアドレスをコピー」を選んだ後、

ブックマークを新規追加する際のURLに、コピーしていたアドレスを貼り付けると、javascript:から始まる文字が貼り付けられて、ブックマークを押したときに機能が実行されます。

ブラウザ上で開いているページの情報を使って作業を自動化したいとき等にもこの仕組みは使えるので、

ブックマークから呼び出せるスクリプトをいろいろ作っておくと便利そうです。

なお Google Gravity ではなく Google Space というのもあるようです。