Google Gravity をどのサイトでも使えるようにする方法

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

昔に流行っていたものですが、今でもMr.doobというサイトでアクセス可能です。

Three.jsというライブラリによって、ブラウザ内で重力を表現しています。

このThree.jsに加えて、artoo.jsというツールを組み合わせると、どこでもGoogleGravityと同様のエフェクトを発生させることができます。

artoo.jsは、アイコンをブックマークバーにドラッグアンドドロップして、任意のページでスクリプトを実行できます。

同様の仕組みを応用して、ブックマークやリンクをクリックしたときにプログラムを起動できます。

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

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

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

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

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

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

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

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

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

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

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

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

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