【裏ワザ】JR東海 列車位置情報に列車番号を表示させる方法
さて、この記事では、タイトル通りJR東海の列車走行位置情報に列車番号を表示させる方法について解説していきたいと思います。
では早速……と行きたいところですが、その前に注意事項的なものがいっぱいあります。詳しい手順は一番最後で解説しています。
では早速……と行きたいところですが、その前に注意事項的なものがいっぱいあります。詳しい手順は一番最後で解説しています。
１．注意事項
このプログラムは、「JR東海の列車走行位置情報に列車番号を表示させるjavascriptブックマークレット」です。曲解すれば、「webページの表示内容を強制的に改変し、webページ制作者の意図しない動作を引き起こすプログラム」とも言えます。
まあ実際"悪意のあるプログラム"ではないので、逮捕されたり訴えられたりする可能性は低いと思っているのですが、一応このプログラムを利用するにあたっての前提条件を書いておこうと思います。(詳しくはcoinhive事件、アラートループ事件でググってください。)
- 当プログラムは、https://traininfo.jr-central.co.jp/zairaisen/status_detail.htmlにおいて、列車番号を表示させることを目的としたjavascriptブックマークレットである。
- 当プログラムが動作するのはユーザー機器側で、サーバーには何ら影響を与えない。
- 当プログラムを実行するタイミングはユーザーに一任される。つまり、ユーザーが能動的に実行するプログラムである。
(https://traininfo.jr-central.co.jp/zairaisen/faq.html?lang=ja より引用)
＞転載・複写等の禁止について
＞この運行状況を当社に無断で転載・複写、もしくは電磁媒体等に加工することを禁じます。
複写も転写もしていない、電磁媒体に加工しているわけでもないので、利用規約に抵触することはないと考えています。
ただ、ググっても前例が出てこないため、どこまでが白でどこまでがグレーでどこまでが黒なのかもよく分かっていないのが正直なところです。
公式から怒られが発生したらすぐに削除したいと思います。
2.技術的な？色々
コードの中身です。function (target) {
for (let n = 0; n < target.length; n++) {
/*clickイベントに設定されている値から列車番号を抜き出し*/
let a = target[n].children[0].onclick+' ';
let b = a.match(/\"eki_\d+-\d+-(l|r)-(\d)+\"\)/);
/*列車番号を表示させるspanタグを設定*/
let span = document.createElement("span");
span.innerHTML = a.match(/createResshaUnkoJokyo\(\"(.*)\",/)[1];
span.style.fontFamily = '\'Leelawadee UI\',\'Avenir\',sans-serif';
span.style.fontSize = '80%';
span.style.textAlign = 'center';
span.style.position = 'absolute';
span.style.width = '100px';
span.style.left = '-37px';
/*列車番号の表示位置*/
//上り列車と下り列車で表示位置を変える
//複数列車が同一区間に在線している場合、表示位置を交互に変える
if (b[1]=='r'&&b[2]%2==1
||b[1]=='l'&&b[2]%2==0) {
span.style.top = '-24px';//→上側に表示
} else {
span.style.top = '48px'; //→下側に表示
}
target[n].appendChild(span);
}
}(document.getElementsByClassName('ressha-hyouji')))
解説…いりますかね？ クリックイベントから列車番号を取得するという、場当たり的なコードとなっています。 駅に2列車以上が在線している場合、表示させた列車番号の文字が被ってしまい見辛かったので、条件によって表示位置の上下を変えています。3.実際に使ってみる
以下の手順で使ってみてください。①新規ブックマークに以下を登録する。
名前：「JR東海列番表示」など、適当でOK
URL：「javascript:(function(t){for(let n=0;n<t.length;n++){let s=document.createElement("span");let a=t[n].children[0].onclick+' ';let b=a.match(/\"eki_\d+-\d+-(l|r)-(\d)+\"\)/);s.innerHTML=a.match(/createResshaUnkoJokyo\(\"(.*)\",/)[1];if(b[1]=='r'&&b[2]%2==1||b[1]=='l'&&b[2]%2==0){s.style.top='-24px';}else{s.style.top='48px';}s.style.position='absolute';s.style.left='-37px';s.style.width='100px';s.style.textAlign='center';s.style.fontSize='80%';s.style.fontFamily='\'Leelawadee UI\',\'Avenir\',sans-serif';t[n].appendChild(s);}}(document.getElementsByClassName('ressha-hyouji')))」
※うまく登録できない場合、適当なサイトをブックマークしてから、URL部分と名前部分を書き換えてください。
③先ほど登録したブックマークを呼び出す。
もしうまく表示できない場合は、このツイート(https://twitter.com/__sugar__salt/status/1122790428099530752)のリプライ欄とかが参考になるかもしれません。ならないかもしれません。
