自動入力のためのブックマークレットの作り方

Pocket

ウェブサイトのテキストボックスに文字列をセットしたり、リストボックスの選択肢を選んだりすることがありますが、いつも同じページで同じ作業をするのは苦痛です。
ブックマークレットを使うと自動化することができます。
ここではブックマークレットの作り方を説明します。

テキストボックス(idがある場合)

次の通り、テキストボックスが2個あるとします。

<input type="text" id="t0">
<input type="text" id="t1">

「id="t1"」となっているテキストボックスに「あいうえお」とセットするには次のようにします。

document.getElementById("t1").value="あいうえお";

「id="t1"」となっているテキストボックスは、そのページには1個しかないので、「getElementById」を使ってピンポイントで特定できます。
※もし重複があれば最初の1個です。

テキストボックス(nameがある場合)

idがない場合があります。
実行(submit)ボタンを押すと、引数としてテキストボックスなどの値が使われます。それが何の値なのかは「name」で表わされるので、idがない場合でも、nameはあるはずです。
まず、「document.all」を使い、テキストボックスなどをしらみつぶしにチェックしてnameが一致するものを探すという方法が考えられます。

次のように、テキストボックスが3個あるとします。

<input type="text" name="t0">
<input type="text" name="t1">
<input type="text" name="t2">

「name="t1"」となっているテキストボックスに「かきくけこ」とセットするには次のようにします。

arrs=document.all;
for(i=0;i<arrs.length;i++){
    if(arrs[i].name=="t1"){
        arrs[i].value="かきくけこ";
    }
}

「arrs=document.all;」で、すべてのオブジェクトを配列で取得します。
順にチェックしてnameが「t1」であるオブジェクトを見付けます。
見付けたらvalueに「かきくけこ」を入力します。

また「getElementsByName」を使い、nameが一致するものだけを取得する方法があります。

arrs=document.getElementsByName("t1");
for(i=0;i<arrs.length;i++){
    arrs[i].value="かきくけこ";
}

そのページでnameが一致するものが一つしかないと分かっている場合はforを使わず、「arrs[0].value="かきくけこ"」とする方法もあります。

リストボックス

次の通り、選択肢が3個のリストボックスがあるとします。

<select>
<option>op0</option>
<option>op1</option>
<option>op2</option>
</select>

「op1」を選択するには次のようにします。

arrs=document.all;
for(i=0;i<arrs.length;i++){
    if(arrs[i].text=="op1"){
        arrs[i].selected=true;
    }
}

「arrs=document.all;」で、すべてのオブジェクトを配列で取得します。
順にチェックしてtext(実際に表示される文字列)が「op1」であるオブジェクトを見付けます。
見付けたらselectedにtrueを入力し、選択状態にします。

ブックマークレットに変換

このようにして書いたコードをブックマークレット用に変換します。

  1. 前後に「javascript:(function(){」と「})();」を付け加えます。
  2. 改行とタブを削除します。

arrs=document.all;
for(i=0;i<arrs.length;i++){
    if(arrs[i].text=="op1"){
        arrs[i].selected=true;
    }
}

上が元のコードです。

javascript:(function(){
arrs=document.all;
for(i=0;i<arrs.length;i++){
if(arrs[i].text=="op1"){
arrs[i].selected=true;
}
}
})();

前に「javascript:(function(){」、後に「})();」を付けます。
タブを削除します。
上のコードは見やすさのために改行を残していますが、実際には改行を削除します。

通常はこれで十分ですが、ダメな場合は記号等をエンコードしてください。例えばダブルクォーテーションは「%22」、スペースは「%20」に置換します。
エンコードするためには、乱暴ですが、Googleで「検索」する方法があります。
文字列を検索窓に貼り付けて「検索」ボタンを押します。アドレス欄に「q=●●●」と表示されます(表示されないときはテキストエディタなどにコピー&ペースト)。「●●●」の部分がエンコード後の文字列です。

[ 2010年5月28日 | カテゴリー: JavaScript | タグ: , ]

« | »

コメント

  1. 通りすがり より:

    こんにちは。

    >nameについては「getElementById」に相当するものがありません

    とお書きですが、getElementsByNameがありますよ。
    下記のようにname属性を指定して要素の配列を参照できます。

    document.getElementsByName(“t1″)(0).value=”かきくけこ”;

  2. stabucky より:

    通りすがりさん
    ご指摘ありがとうございます。
    後で補足しておきます。
    当時知らなかったのか思い込みがあったのか。

  3. Hayana emi より:

    はじめまして。大変勉強になるページを作成していただき、ありがとうございます。
    さて、私なりに作成してみたのですが、丸無視です。
    申し訳ないのですが、どこが間違っているのか、
    またどのようにしてElementByIdもしくはNameを探されるのかを教えていただけますでしょうか。
    伴って、最終的なlog inのボタンは、clickであったり、submitであったりします。
    どこを見れば、その違いがわかるのでしょうか?
    お忙しいところ、恐れ入りますが、教えていただけますでしょうか?

    サイト上の…

    …に対して、

    javascript:(function(){
    var addr=’my_number’;
    var pass=’my_password’;
    document.getElementByname(“Ecom_User_ID”).value=addr;
    document.getElementByname(“Ecom_Password”).value=pass;
    document.getElementsByID(“loginButton”)[0].submit();
    })();

    と、書いてみました。動きません。
    よろしくお願いします。

  4. stabucky より:

    >Hayana emiさん
    まず確認したいのは、大文字と小文字です。ById、ByNameです。
    次は、getElementByIdは「s」を付けません。getElementsByNameは「s」を付けます。
    getElementByIdは一つのオブジェクトを拾うので[0]のように指定する必要がありません。上の「idがある場合」です。
    逆にgetElementsByNameは複数のオブジェクトを拾うので[0]のように指定する必要があります。上の「nameがある場合」です。
    ボタンについては試したことがないのですが、submit()はformに対して実行、click()はinnput(type=button)に対して実行、という使い分けだと思います。

コメントを残す

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

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報