ブックマークレット初心者がWEBサイト入力を自動化するためにやったこと

概要

自動化したいWEBサイトのHTMLを確認して、Bookmarkletを作ってみた。
検索窓に文字列を入れたり、POSTしたり、Amazonから本のタイトルコピーしたりできるようになった。デバッグツールの使い方も少し知ることができた。
今回、題材にしたサイト以外でも同じように対応できるはず。

はじめに

Bookmarkletを自分で作ってみた。今までは、検索して同じことしようとしてる人を見つけてコピペして登録してた。今回、やりたいことが見つからなかったので、自分で作ってみた。HTTPもHTMLもJavaScriptもなんとなく知ってるくらいだったけれど、なんとかなった。

やりたいこと

市の図書館のWEBサイトが微妙なので、もうすこし楽に（クリック少なめで）検索と予約したい。（一応書いておくと、WEBで予約できるの便利で活用してる。とても感謝してる。）

環境

ブラウザはChrome。

デバッグ環境

ここを参考にした。ちゃんとデバッグできる。すばらしい。
Chrome Dev Toolでブックマークレットを実行する - Qiita｀

ChromeのCtrl+Shift+Iで開くDeveloper Toolsを開く。
Consoleにコピペしてエンターキー。console.log()とか使える。エラーの行番号もでる。ブレークポイントも設定できる（らしい）。試してみると、すごく簡単。実際に使うときと同じChrome環境で動くので、安心感すごい。

自動化したいWEBサイトの中身を調べる

Developer Tools使ったり、Ctrl+uでHTMLのソースコード見たりして自動化したい部分のformとかinputを確認する。今回、対象にしたサイトが割と古いからか、HTMLにそのまま色々書かれてた。

ただ、自動化したかったサイトはauthenticity_tokenってのが毎回変わる。結構、やっかいやった。
検索がHTTP GETじゃなくてHTTP POSTなのも微妙やった。一度、このサイトを開いてauthenticity_tokenってのを確認してPOSTしないと検索できない。予約もおんなじようなシステム。Bookmarkletじゃ他のサイトから直接検索したり予約できなかった。残念。

サイトとHTMLは、こんな感じ↓

コードを短くする

GoogleのClosure Compilerってのを使うと短くしてくれる。デバッグもできる（らしい）。

Closure Compiler Service

登録

適当にブックマークとして登録。URL部分にコピペ

Bookmarklet

いくつか試したものを抜粋。

Amazonの本のタイトルを取得

HTMLを確認するとtitleに著者名とかが入ってて|で区切られてる。本のタイトルだけ取得して、コピーする（クリップボードに入れる）。
（ここで取得した本のタイトルを図書館のサイトの検索窓に入れたかったけど、あんまり自動化できなくて結局手動でやることにした。）

javascript:(
    function(){
      const title = document.title;
      var title1 = title.split('|');
      console.log('ページタイトル=%s\n', title1[0]);
      alert('ページタイトル：'+title1[0]);

      var tmp = document.createElement('p');
      var pre = document.createElement('p');
      pre.style.userSelect = 'auto';
      tmp.appendChild(pre).textContent = title1[0];
      document.body.appendChild(tmp);
      document.getSelection().selectAllChildren(tmp);
      document.execCommand('copy');
    }
)();

検索窓に文字列を挿入

formの名前を確認して、とりあえず適当にテキストを入力してみた。普通に動いた。
（結局使わなかった。クリップボードからペーストもできそうやったけど、あんまり自動化できてないしやめた。）

javascript:(
    function(){  
      document.forms['search_form'].elements['keywords'].value = 'test';
    }
)();

まじめにformとinputを設定してsubmit

formに紐づくinputを全部、自分で設定してPOSTするパターン。結構めんどい。
var request部分をコメントアウトしたら、最後にappendしたものしか送られていなかった。変数を再利用できてなさそう。JavaScriptってそういうもんなんかな？

javascript: (
    function postForm() {
        var form = document.createElement('form');
        form.method = 'POST';
        //    form.accept-charset = 'UTF-8';                                                                                          
        form.action = 'https://xxx';

        var request = document.createElement('input');
        request.name = 'y';
        request.value = 'z';
        form.appendChild(request);

        var request = document.createElement('input');
        request.name = 'a';
        request.value = 'b';
        form.appendChild(request);
        form.submit();
    }
)();

formを取得して、inputを追加してsubmit

HTMLにかかれているformを再利用する。一部ユーザ入力によって変わる部分があったので、そこだけ追加。formに名前とかIDがついていなかったので、何番目のformかを指定した。x[2]の部分。3番目。

javascript: (
    function postForm() {
        var x = document.getElementsByTagName("form");
        var request = document.createElement('input');
        request.name = 'commit';
        request.value = '予約';
        x[2].appendChild(request);
        x[2].submit();// Form submission                                                                                              
    }
)();

ページ遷移後のスクリプト

一度、POSTして新しいページに行ってから、別のスクリプトを実行したかったけれど、Bookmarkletじゃできなさそうやった。残念。Chrome拡張でなんとかしようかなぁ。

おわりに

作りたいもの駆動で勉強できてよかった。
デバッグツールがあったので、試しながら作れたのが良かった。
HTTPとかHTMLとかJavaScriptの知識がもうすこしあれば、もっとスムーズに作れるかもしれない。
でも、ちょっと自動化したいだけだったので、ちょうど良い感じで学べた気がする。
複数ページにまたがって自動化したかったけれど、調べた限りできないみたいやった。残念。
次は、Chrome拡張でも作ってみよっかな。