この記事は、非プログラマ向けの技術記事です。非プログラマが、プログラミングを始める足がかりとなることを目的としています。
WEBブラウザと日常業務
日常業務でウェブブラウザを使う機会はけっこうあると思います。いろいろなツールが Webアプリ化されるにつれ、ブラウザを業務で使う機会は昔と比べて増えました。
ただし、多くの項目があるフォームを毎日書く業務があったり、あるページを開いて項目を1つ1つスプレッドシートや他のWebアプリ、もしくはメールにコピペしたりといった業務があったりもします。もし、その業務が面倒だと感じているならば、自動化できる余地は十分あります。
プログラマは、面倒だと思った作業はすぐに自動化できますが、プログラミングに明るくない方でも、範囲は限定的ですが Webアプリであれば面倒が改善できるかもしれません。
WEBブラウザでプログラムを動かせる
お使いのブラウザで、今すぐに自分でプログラムを書いて実行できます。そういう機能がブラウザに入っています。
Windows の Chrome, Firefox であれば、Ctrl + Shift + i を押してみてください。Edge をお使いであれば F12 です。Mac であれば Command + Option + i です。
すると、画面が分割され別のペインが出てきます。もし、警告文が出てきたら読み、同意/認可ができるようであればブラウザの案内にそって対応してください。
おそらく最初は、Firefoxの場合は「インスペクタ」、Chromeの場合は「Elements」タブが有効になっていると思います。その隣に、「コンソール」「Console」タブがありますので、それをクリックするとコンソールモードになります。
↑ Firefox
↑ Google Chrome
Firefox では、一番下に >> となっています。ここをクリックするとプログラムが入力できます。Chrome の場合は一番上に > があり、ここにプログラムが入力できます。
試しに、簡単な計算式を書くと、計算ができます。
↑消費税計算と81の平方根の算出をした例
Math.sqrt は、ブラウザの Javascript エンジンに最初から組み込まれている平方根計算の関数です。どんなことができるかはJavascript の入門書を読むと良いと思いますが、「何かをウェブページに表示する」であれば大概できます。(ただし、表示しているサイトとは別のサイトから持ってきた情報を表示するのは少し難しい場合があります)
別の例を試します。コンソールに alert('今日は' + new Date()) と入力します。そうすると、現在の日時がポップアップで表示されます。
また、history.back() を入力すれば、ブラウザの「戻る」ボタンを押した時と同じように、前のページへ戻ることができます。
このように、ウェブブラウザには非常に簡単にプログラムを動かす仕組みが入っています。
アドレスバーからでもプログラムを実行できる
先程は開発コンソールからプログラムを実行しましたが、ブラウザ上部にあるアドレスバーからでもプログラムの実行ができます。
…できたはずなんですが、最近のブラウザは、アドレスバーに入力した文字列が URL ではないと判断した場合、検索エンジンで検索するようになっているので、アドレスバーにスクリプトを入力しての実行する方法は最近のブラウザでは難しくなっています。
昔のブラウザでは、アドレスバーに
javascript:alert('今日は' + new Date());void(0);
と入力すると、先程コンソールでプログラムを動かしたのと同様に alert を動作させることができました。
アドレスバーに直接入力しての動作はできなくなりましたが、リンクのタグとして Webページに記録すれば動作させることができます。
プログラムを動作させるリンクタグ(クリックで上記プログラムを実行)
ブックマークからでもプログラムを実行できる
アドレスバーに入力したプログラムが動作するということは、そのプログラムをブックマークとして保存しておけば、そのブックマークを呼び出した時にプログラムが動作することになります。
試しに、上記「プログラムを動作させるリンクタグ」をブックマークしてください。リンクをブックマークツールバーにドラッグアンドドロップすると良いでしょう。
ブラウザによっては、「ブックマークの新規作成」のようなメニューから、さきほどの
javascript:alert('今日は' + new Date());void(0);
このスクリプトをURLとして登録すればブックマークできます。
ブックマークができたら、クリックしてください。同様にプログラムが動いて、ポップアップでメッセージが表示されたと思います。
このように、ブックマークの中にプログラム(Javascript)を記録して、クリックして実行させる方法を「ブックマークレット」といいます。
ブックマークレットのサンプル
試しに作ってみました。
ページの表示を崩すブックマークレット
これをブックマークして、好きなページで実行することでページの表示を崩すことができます。
元に戻すにはページをリロードしてください。
スクリプトの内容を書いておきます
var divs = document.getElementsByTagName('div');
var mode = Math.floor(Math.random() * 2);
for (var i = 0; i < divs.length; i++){
var delay = Math.random() * 1000;
var d = divs[i];
setTimeout(function(d) {
if (d){
var t = Math.floor(Math.random() * 2000 + 1000);
d.style.transition = "all " + t +"ms ease-in";
var deg = Math.random() * 30 - 15;
d.style.transform = "translate(0, 800px) rotate(" + deg + "deg)";
}
}, delay, d);
}
フォームの全 Input の value に name を入れるブックマークレット
function d(inputs){
for(var i =0; i<inputs.length; i++){
inputs[i].value =inputs[i].name;
}
}
d(document.getElementsByTagName("input"));
d(document.getElementsByTagName("textarea"));
「フォーム内容を復元するブックマークレット」を作るブックマークレット
実行すると、ページ上にリンクが1つできます。そのリンクがブックマークレットになっているので、ブックマークしてください。
次回、同じフォームを表示した時にそのブックマークレットを実行することで内容を再度入力することができます。
var out = "javascript:function sC(n,v,c){var elms=document.getElementsByTagName('input');for(ind in elms){o=elms[ind];if(o.name==n && o.value==v){o.checked=c;}}}function sI(n,v,c){var elms=document.getElementsByTagName('input');for(ind in elms){o=elms[ind];if(o.name==n){o.value=v;o.checked=c;}}}function sO(v){var elms=document.getElementsByTagName('option');for(ind in elms){o=elms[ind];if(o.value==v){o.selected='selected'}}}function sT(n,v){var elms=document.getElementsByTagName('textarea');for(ind in elms){o=elms[ind];if(o.name==n){o.value=v;}}}";
var elms, ind, o;
elms = document.getElementsByTagName('input');
for (ind in elms) {
o = elms[ind];
if (o.type == "hidden") {
continue;
} else if ((o.type == "checkbox" || o.type == "radio") && o.name && o.value) {
out += "sC('" + o.name + "','" + encodeURIComponent(o.value) + "'," + o.checked + ");";
} else if (o.name && o.value) {
out += "sI('" + o.name + "','" + encodeURIComponent(o.value) + "');"
}
}
elms = document.getElementsByTagName('option');
for (ind in elms) {
o = elms[ind];
if (o.selected) {
out += "sO('" + o.value + "');"
}
}
elms = document.getElementsByTagName('textarea');
for (ind in elms) {
o = elms[ind];
if (o.value) {
out += "sT('" + o.name + "','" + encodeURIComponent(o.value.replace(/\s+/g, ' ')) + "');"
}
}
out += "void(0);";
console.log(out);
var a = document.createElement('a');
a.href = out;
a.textContent = 'フォーム自動入力';
a.style.display = 'block';
a.style.position = 'fixed';
a.style.backgroundColor = '#eee';
a.style.padding = "40px";
a.style.top = "100px";
a.style.left = "100px";
a.style.zIndex = 1000;
a.style.border = "1px solid black";
document.body.appendChild(a);
ブックマークレットでできること
表示しているページの改変や操作が得意です。
ブラウザで表示しているページは HTML で出来ていて、ブックマークレットではその HTML のかなり多くの箇所を操作できるため、「表示しているページに対して何かを行う」ことに関しては得意です。
例えば、入力フォームが表示されている時、その入力フォームに対して何かを行う(自動入力など)ことについては他にないほど便利です。
複数ページにまたがった処理や、別のサイトのページに対しての処理は苦手です。
ページの遷移を行うと処理が止まってしまうため、複数ページの処理はあまり得意ではありません。特に、複数のサイトを同時に操る操作はブラウザの制約があるため難しいです。がんばればなんとかなりますが、他の手段を用いたほうが良いでしょう。Selenium とか Windows Scripting Host とか。
Javascript をブックマークレットに変換する方法
ページに対して何かを行う Javascript が書けた場合(思い浮かんだ場合)、それをブックマークレットの形式にするには少しの変換が必要です。
- 改行や余計なスペースを除去する
- 記号を URL エンコードする
- 先頭に「javascript:」をつける
- 最後に void(0) をつける、もしくは全体を void() で囲む、など
(一番最後のは、処理が undefined で評価されないとページ遷移が発生して、真っ白いページが表示されるなど変な結果になってしまうため入れてます)。
短いスクリプトであれば手で修正できますが、長いスクリプト、特にインデントが入っているものなんかは手で変換するのは大変です。
変換スクリプトを書いて github pages で上げておきましたので、よかったら使ってください。
