いま、しょりけんは後ろでDTM研をやっているところです。
ここに作品が上がっています。 (宣伝
僕はたまに嗜ませて頂く程度で、皆さんには及ばないので作品は上がっていません!
さて、本題に入ります。
最近はやりたい事は増えるのに、どうしても時間が作れなくて齷齪しておりました。
そこで、ちょっとやってみればいいのでは?ということで、書いてみました。
UserScriptです。しかし、あんまりやる気が無かったので、ネタです。
此方の開発環境は以下の通りです。
OS : Mac OS X Mountain Lion 64bit
Editor : vim
Browser : Google Chrome 27.x
1. UserScriptとは
ブラウザに JavaScript のプログラムを入れ込んでおいて、任意の Web サイトに対して、何かをしてやろうという試みのようです。
Webサイトを作るときに、最初にJavaScriptのソースを読み込んで作用させると思います。
ただし、自分のサイトでなければ、埋め込む事は難しいでしょう。
そこで、ブラウザに拡張機能としてインストールを行い、サイトに対して作用をしようということです。
2. ソースを書いてみる
JavaScriptについての色々は省いて、UserScript を動作させる事だけに注力します。
まず、以下のソースを GoToGoogle.user.js として保存します。
このとき、ファイル名は拡張子が .user.js で保存すれば何だっていいです。
// ==UserScript== // @name お前はGoogleがお似合いじゃ // @namespace // @description お前はGoogleがお似合いじゃ // @includes * // @excludes // ==/UserScript== var anchor = document.getElementsByTagName('a'); for(var i in anchor){ anchor[i].href = 'http://www.yahoo.co.jp/'; anchor[i].addEventListener('click', clickAnchor); } function clickAnchor(e){ alert('お前にはGoogleがお似合いじゃ'); document.location = 'http://www.yahoo.co.jp/'; }
動作は、
1. ページ内に存在するリンク先を全て yahoo.co.jp に変更。
2. Anchor の ClickEvent が発火後、alert を吐いて、リンク先へ移動する。
何故か
anchor[i].href = 'http://www.yahoo.co.jp/';
と
document.location = 'http://www.yahoo.co.jp/';
の両方が無いと、ちゃんと飛んでくれませんでした。
うーん、よくわからなかったので、JavaScriptの勉強しないとダメですね。
ちなみに、上の方に書いてあるものを省略したところで、拡張子が .user.js であればインストールが出来るようです。
ただ、名前とかどのサイトでとかが省略されるので、あまりよくないような気がします。
3. Chromeにインストールする
Google Chrome を起動して、右上当たりにある
をクリックし、ツール > 拡張機能 を開きます。
// 昔はスパナのマークだった気がするけど、いまはこの謎のマークですね。
出てきた画面に保存した .user.js をドロップします。
すると、こんな画面になるので、なんやかんや訊かれますが、追加をクリックします。
無事にインストールが済みましたでしょうか。
簡単ですね。
4. エラーを含んだソースを入れようとした場合
拡張機能にインストールしようとした時点では失敗しません。
Webサイトを作る際と同様に、動作の段階でエラーを吐き出します。
エラーは Web Inspector を見る事で、確かめる事が出来ます。
// Mac だと Command + option + i で表示できるアレです。
こうなると、この拡張機能はゴミです。消しましょう。
拡張機能の名前の横にあるゴミ箱マークを押してやれば、消えてくれるはずです。
6. 今後の展開
アプリのアイコンとかを設定できる様になれば、それっぽいですよね。
あと、JavaScript には import とか #include とかそういう類いの実装が無いようです。
そこで、document.write なんかを駆使して html にぶち込むことで読み込む、という手が有るようです。
jQuery に依存しすぎたソースファイルを生み出し続けている身としては、jQuery だけは欲しいです。
しかし、いい機会でもあるので、JavaScript だけで戦える様に勉強をするのも良いかもしれません。