ブラウザ上で簡単なスクリプトをブックマークから動かす方法(ブックマークレット)

(コメント)

この記事は、非プログラマ向けの技術記事です。非プログラマが、プログラミングを始める足がかりとなることを目的としています。

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 を入れるブックマークレット

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 で上げておきましたので、よかったら使ってください。

Bookmarklet スクリプト変換

現在未評価

コメント

検索

最近のツイート

  • ytyng

    ytyng @ytyng

    やばい、機能がリリースされない! タイムゾーンか? サマータイム設定になってるのか? とか焦ってたら、リリース日になってなかっただけだった。今日月末じゃん。月初じゃないじゃん。1人で焦ってたけど結果1日得した気分
    2 ヶ月, 3 週間 前

  • ytyng

    ytyng @ytyng

    class SerialCode って書こうとして、class Serialcode (非キャメルの1単語) の方がいいのではと思ってしまう。Datasturcture, Javascript みたいに非キャメル1単語で書きそうになるのは症状名があるのだろうか
    4 ヶ月 前

  • おてふ

    おてふ @otef

    ytyng

    ほんとうに頭がおかしいコマしかないのに読後感は非常に爽やかという奇跡のマンガ、男日本海が今なら無料なのでみなさん読んでおいたほうがいいですよほんとに https://t.co/AsIZsNuwiP https://t.co/kKl77lJIlH
    4 ヶ月, 2 週間 前

  • ytyng

    ytyng @ytyng

    昼間なのに影が多方向に出るのってちょっと面白い https://t.co/x1scFI2Uk2
    4 ヶ月, 2 週間 前

  • ytyng

    ytyng @ytyng

    https://t.co/FUChcVIVpm になって、パッケージの登録ができないんですけど、Python有識者の方にどうしたらいいか教えてほしい。 https://t.co/AEkCfbml6Z このガイドの通り twine 使っても HTTPError 410 っていう
    4 ヶ月, 3 週間 前