greasemonkeyでidやclassの無い要素を爆速でいじる方法
を、自分なりに考えてみた。
速さが足りない！
greasemonkeyは、手軽に自分用にhtmlを改ざんできるってのが売りだと思うんです。
でも、idやclassの無い、取っ掛かりのない要素は、いじるのがなかなか面倒です。
そこでXPath
を、使うことにしました。
なぜ？ と言いますと、FireBugでXPathを簡単に取得できるからです。
この画面を出すまで、
- 「藍川さとる」氏で右クリック
- 要素を調査を左クリック
- ハイライトされたところを右クリック
そして「XPathをコピー」を左クリック、わずか4クリックで要素を特定できるXPathがコピーできるわけです。
※ちなみに先頭の要素の場合、[1]とつくわけじゃないので注意
XPathをどう使う？
FireFoxでXPathを扱うとなると、document.evaluateの出番です。
これの詳しい使い方はこちらをご覧いただくとして、とりあえず簡単にこんな関数を作ります。
function $x(path, d){ if(!d) d=document; return document.evaluate(path, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); } var nodes = $x('//div'); // html内の全div nodes.snapshotLength; // 要素の数 nodes.snapshotItem(0); // 最初の要素
こんな感じ。アクセスの仕方がちょっと変わってますが、詳しいことはやっぱり上のURLを参考にして下さい。
例では、XPathを使って、html内の全divに対しnodesでアクセスできます。やったね！
コード書こうぜ！
ぅぉぉぉぉ！
// ==UserScript== // @name wikipedia漫画家一覧をテーブル表示してみる // @namespace miruto // @include http://ja.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC%E3%81%AE%E6%BC%AB%E7%94%BB%E5%AE%B6%E4%B8%80%E8%A6%A7 // ==/UserScript== (function(){ function $x(path, d){ if (!d) d=document; return document.evaluate(path, d, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); } var uls = $x('/html/body/div/div/div/div[2]/ul'), ul, lis, li, html = [], div, i, j; for (i = 0; i < uls.snapshotLength; i++){ ul = uls.snapshotItem(i); lis = $x('li', ul); html = []; html.push('<table><tr>'); for (j = 0; j < lis.snapshotLength; j++){ li = lis.snapshotItem(j); html.push('<td>', li.innerHTML, '</td>'); if (j % 8 == 7) { html.push('</tr><tr>'); } } html.push('</tr></table>'); div = document.createElement('div'); div.innerHTML = html.join(''); ul.style.display = 'none'; ul.parentNode.insertBefore(div, ul); } })();
ぅぉぉぉぉ……。
はい、ということで実にあっさり、日本の漫画家一覧の各項目をテーブル表示にできました。
まぁ作ってから気づきましたが、かえって見にくいですね（ぉ
で、どんぐらいかかったのよ？
時間はかってやりましたが、DOM調査もろもろ含めて15分でした。
コードが短いのは、見ての通り。
DOM選択もXPathをコピー、ちょっと変更しただけ。
あ、でもこのコード、最後に空のtrができる場合があるな……まぁ、タイムアタックゆえの荒さということで。
さらに手軽に！
GMで使えるかどうかわかんないんですが、超有名なid:amachangさんが、jQueryでXPath使えるようになるプラグインを公開されてます。
これが使えれば、要素をjQueryオブジェクトとして使えるようになるので、アニメーションなんかも簡単にできるようになるはずです。
GMだと自分はうまく動かせてないので、今後勉強して動かせるようにしたいです。
