便利なアドオン

Mozilla FirefoxのアドオンでGrease monkeyというアドオンがあります。
このアドオンを使うことで、Firefoxで開いたページに自動でJavaScriptを追加することが出来るので、例えば特定のページにアクセスした時、自動ログインするように出来たりします。

Chromeでも似たアドオンなどがあるので、JavaScriptを少しでも扱えるようになったら、こういった類のアドオンを入れるとブラウジングが快適になるので、是非入れてみてくださいね。

また、この記事ではIE操作用テストページの「ハンドルネームと生年月日を入れて、送信ボタンを押す」という動作をするJavaScriptのボタンの設置を解説してみようと思います。

ボタンでログイン

まずはJavaScriptのコードを見てください。
JavaScript
var hnam = "ここに名前を入れてね?"
var brth = "ここに生年月日を入れてね?"
var btn = document.createElement("input");
    btn.type = "button";
    btn.value = "入力";
    btn.onclick = function(){
      document.getElementById("h_name").value = hnam;
      document.getElementById("birthday").value = brth;
      document.getElementById("date").click();
    };
document.getElementById("frm").appendChild(btn);
Grease monkeyの使い方については必要な部分だけの説明しかしませんが、IE操作用テストページのサイトへアクセスした状態で、Grease monkeyのプルダウンを開き、ユーザスクリプトの新規作成をクリックします。
下記画像のように名前と名前空間に任意の文字を入れ、実行するページのURLが正しいことを確認したらOKをクリックしてください。
Grease monkey
新しいウィンドウが開き、下記画像のように7行ほどメモが入っていると思うので、改行し、8行目からJavaScriptを記述していきます。
Grease monkey
ここまでで準備が出来ましたので、コードの解説に入ります。

var hname = "ここに名前を入れてね?"


JavaScriptでは「var 変数名 = 変数に代入する値」と記述するので、hnamという変数に、ハンドルネームに入れる値を代入しています。
これはVBAでいうDimと似ているのですが、データ型の指定はJavaScriptではしなくても大丈夫です。
細かい理由は説明を省きますが、VBAでいうVariantを略してvarと始めに宣言していると考えると難しくないと思います。

var brth = "ここに生年月日を入れてね?"


ここは上のvar hnamと同じなので説明を省きますね。

var btn = document.createElement("input");


ここからが重要です。
var btnまでは変数なのでこれまでと一緒ですが、この変数はHTMLのinputタグを作成し、そのinputタグをbtnの変数に代入している状態です。
documentはVBAでもやったようにHTML全体を表していると思ってください。
次のcreateElement("input")でinputのエレメントを作成=inputタグを作成しているわけです。

btn.type = "button"; ~ btn.onclick = function(){


btnに代入されたinputタグに要素を追加しています。
このコードをHTMLで表すと<input type="button" value="入力" onclick="function">と記載していることになります。

「btn.type="button"」は、inputタグの種類をボタンにしています。
「btn.value="入力"」は、このボタンに表示される文字を「入力」にしています。
「btn.onclick = function(){」ではbtnをクリックした時に「これから先の}間での間の処理を実行します。」と記載しています。

これは全てHTMLの要素を追加するコードなので抜けがあると動かなくなるので注意してください。

document.getElementById("○○").value = △△


ここはVBAでのIE操作でもやったように「documentの中の○○というIDを持ったタグのvalue要素を△△へ変更」ということになります。

つまり、ハンドルネームの場合は「document.getElementById("h_name").value = hnam」と記述し、「h_nameのIDを持ったタグ=ハンドルネームの入力欄」にhnamに代入した値を入力しています。

生年月日も同じで「document.getElementById("birthday").value = brth」と記述し、「birthdayのIDを持ったタグ=生年月日の入力欄」にbrthに代入した値を入力しています。

次の「document.getElementById("date").click();」「dateのIDを持つボタンをクリック」という意味になるので、送信ボタンをクリックします。

ここまで出来たらボタンとボタンの動作は完成です。
最後に実際に押す為に、ボタンを画面上に表示しなければなりません。
その方法が次の1行になります。

document.getElementById("frm").appendChild(btn);


これも今までと同じようにdocumentのfrmのIDを持つタグを取得しています。
ただ、ここからが違っていて、「appendChild(btn)」というのが新しく出てきています。

このappendChild()というのは「その前の部分で取得したタグに子要素を追加してくださいね」という意味になります。
その子要素を()内に書くのでbtnに代入されたinputタグを子要素として、追加します。

では実際にこのコードをGrease monkeyの画面に入力し、Ctrl+Sで保存をかけて、IE操作用テストページを開いてみてください。
送信ボタンの下に今まではなかったボタンが追加されてますよね?
このボタンを押すとJavaScriptのhnamとbrthに代入された値を自動で入力し、送信ボタンを押してくれます。

この動きはどこかのサイトにログインする時と同じなのです。(サイトによっては例外あり)
なので、これを応用するとボタンをクリックしたら自動でログインするJavaScriptもサイトにアクセスした時点で自動ログインするJavaScriptも作ることが出来るのです。

自動ログイン

ではボタンでログインではなく、自動ログインの場合はどうするかというと、下記のコードになります。
var hnam = "ここに名前を入れてね?"
var brth = "ここに生年月日を入れてね?"
window.onload = function(){
  document.getElementById("h_name").value = hnam;
  document.getElementById("birthday").value = brth;
  document.getElementById("date").click();
};
このように入力することで画面が読み込まれた時点で自動でログインします。
こうやって自動ログインにした方が、かなりコードが短くなるので簡単になります。
ただ、このページで実行すると同じページに戻ってくるので、無限ループになります。笑
※このコードを試した後は、サルのマークを押してGrease monkeyをオフにするか、Grease monkeyのプルダウンから「ユーザスクリプトの管理」を開き、先ほど作ったJavaScriptを削除や無効にしてください。

window.onload = function(){


実際はこのコードがあるだけで、後は同じコードを使うか削除するかだけなので、この部分だけ追加で覚えるだけで大丈夫です。

このコードは「window.onload=画面が読み込まれたら」というだけなので、画面が読み込まれたらfunctionを実行します。
そのfunctionの中見は先ほど説明した内容なので、上の方を見たらわかりますよね?

自動ログインだと複数アカウントがある場合は選べないですが、ボタンでログインだと複数のボタンを作って、どのアカウントでログインするかを選べるので、使い分けてくださいね。

最後に

この自動ログインは大変便利ではありますが、他の人にパソコンを使わせる時やウイルスなどに感染した時などにはパスワードなどが流出しかねないので注意して使ってください。

また、ログインに限らず、特定のテキストボックスなどに繰り返し文字を入力する時などは、応用すると使えるようになると思います。