Chromeの検証(デベロッパーツール)を使った

大学に入学してから数ヶ月…「学校の休講・補講情報のページがみずらい!!!」とずっと思っていました….休講・補講のお知らせ | https://www.ead.tut.ac.jp/board/main.aspx

そこで,JavaScriptで要素をいじったらいい感じになるんじゃないかな〜と思ってChromeのデベロッパーツールを用いてゴニョゴニョしてみました.

(※これ以降JavaScriptをJSと書きます)

 

見づらい休講・補講情報

blog_1

現在,大学の休講・補講情報はこのような感じに「日付順」に「全ての休講・補講情報」がまとめて表示されます.
この際に自分に関係ない情報が多く表示されます.とても見づらい!!!

そこで,自分に関係の無い情報を削除していい感じにできないかな〜と思ってちょっと試行錯誤してみました.

 

やったこと

blog_2

そこで,自分の「学年・学科」に対応した要素以外を消すことでとりあえず見やすくしてみました.(自分は学年:B3の学科:情報・知能,学科は共通ってやつを含める)

これはJSでちょいちょいっと要素をいじることで意外と簡単にできました.

 

実装

ここではGoogle Chromeを利用した際の方法を説明します.

まず,ブラウザで弄りたいページ(https://www.ead.tut.ac.jp/board/main.aspx)に移動して,適当な場所で右クリックをして[検証]機能を開きます.

blog_3

すると,画面の下になんだかいろいろ出てきます.別名デベロッパーツールと呼ぶらしいです.

まずは,弄りたい要素のidを調べます.デベロッパーツールの左上にある□に矢印のついたマークをクリックした後に調べたい要素をクリックすると…Elementタブでその要素に移動することができます.

blog_5_new

直接欲しい要素をクリックするのは難しいと思うので,このあたりの要素をみればいいんだな〜とか思いながら,要素をカチカチ調べて自分の欲しい情報が入ってる適切な要素を見つけます.今回だと,<table>要素のid=”grvCancel”と書いてある要素がちょうど欲しい要素が入っていました.

スクリーンショット 2016-05-27 11.15.11

このid=”hoge”のhogeを覚えておきます.JavaScriptでhtmlを操作する際に「セレクタ」が必要になります.セレクタには種類がありますが,ここではあまり詳しくは触れません.
このあたりのサイトが参考になります(JavaScript プログラミング講座 | http://hakuhin.jp/js/selector.html#SELECTOR_00)

idを選んだ理由としては,idは基本的にwebページの中で1度しか使われないため,それだけを指定すると選んだ要素が的確に指定できる(はず)だからです.もし,欲しい要素にidがなかったら,タグ名とclass名を指定したりとか,要素の親子関係から云々とか…みたいになります.

 

いらない要素の非表示

ここからは先ほどのセレクタを用いていらない要素を削除していきます.Chrome上でJSを動作させるには,デベロッパーツールの中で[Console]タブを利用します.
Consoleのタブは,そこに打ち込んだJSのコードをページ内で実行してくれます.blog_4

JSの書き方とかは説明しないので,適当に調べてください^^
(自分が頑張って説明するよりも素晴らしい解説サイトがたくさんあるため)

要素の削除のソースコードは以下のような感じ.

var tb_c_r = document.getElementById('grvCancel').rows;
var grade = "B3";
var cls = "情報・知能";
for (var i = 1, len = tb_c_r.length; i &amp;lt; len; i++) {
 if (tb_c_r[i].cells[5].innerText.match(grade) &amp;amp;&amp;amp; tb_c_r[i].cells[6].innerText.match(cls)) {
   tb_c_r[i].style.display = '';
 }else{
   tb_c_r[i].style.display = 'none';
 }
}

上記のコードを例の休講・補講のお知らせページでデベロッパーコンソールを開いてコピペすれば動いてくれるはずです.

1行目でページ内のIdに’grvCancel’と書かれてある要素を行単位で取ってきます.
この際にtb_c_rは各行を要素に持った配列になります.

2,3行目は選択したい要素の内容.今回は文字列と一致するか?というのを判別内容にしました.

4行目は各行に対してループを回してるって感じです.

5行目.ちょっとごちゃごちゃしてます.


tb_c_r[i].cells[5].innerText.match(grade)

これは,tb_c_r[i]: i行目のcells[5]: 左から6列目(配列要素は0番目からあるため)のinnerText: 内部の文字列がmatch(grade)->gradeを含んでいたら true になる.といった式です.
clsでも同じく.

つまり,まとめると 「ある行の指定した列に欲しい文字列を含んでいるか を2回やってどっちもtrueなら以下の処理」 みたいな感じです.

6,8行目 これはJSからhtmlのcssをいじるものです.ここでは,いらない要素のdisplay要素をいじっています.display要素は’none’にすると「要素としては存在するけど,表示はされない.」みたいな状態になります.

 

そんなこんなで,簡単にJSでWebページをゴニョゴニョすることができます.めでたし.

 

 

まとめ

意外と簡単にJSでちょちょいっと欲しい要素の選択ができたりします.
このプログラムを元にしてChrome extension (拡張機能)を作りました.[TuT休講・補講Viewer]

TuTの人にしか需要がないですが、便利だと思うのでぜひ使ってみてください^^

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください