今さらちょっとだけブックマークレット入門

はじめに

図書館のサイトが使いにくいので、なんとかならないかなぁと思い、とりあえずブックマークレットを作り始めた。

課題

借りた本のログが残らない
ログイン情報をブラウザに残せない
他のWEBサービスとの連携がない
使い方がわかりにくい
何回使っても慣れない
検索結果が文字だけ
予約した本が届いたらメールしてくれるがどの本が届いたかサイトにログインしないと確認できない

ためしたこと

• 検索
• ログイン
• 本の名前取得

検索

図書館のサイトはこんな感じ。
ChromeでC-Shift-cして、htmlを確認してフォームの中身を確認した。

こんな感じでフォームに入力してボタンをクリックするスクリプトを作ってみた。
formとnameを確認して作った。

javascript:
(function(){
  alert('Hello World!');
  document.forms['search_form'].elements['keywords'].value = 'python';
  document.forms['search_form'].elements['btn1'].submit.click();
})();

ブックマークレットに登録するときはこんな感じ。

javascript:(function(){document.forms.search_form.elements.keywords.value="python",document.forms['search_form'].elements['btn1'].click();})();

これができたから、何か便利になるわけではないけども…。

ログイン

画面はこんな感じ。
Chromeのパスワード自動入力は対応していない。
毎回入力するのめんどくさい。

ちょっとやりかた変えてみた。
idの名前使ったのと、formがなかったのでform[0]とnameを使った。

javascript:(function(){document.location.href='https://www.lib.city.kobe.jp/opac/opacs/mypage_display',document.getElementById('user_login').value="xxx",document.getElementById('user_passwd').value="yyy",document.forms[0].elements['act_login'].click();})();

本の名前取得

こんな感じで検索結果がでてくる。
本の名前を取得してみる。
Amazonとかで検索したりするために。

こんな感じで取得できた。

javascript:(function(){var elements = document.getElementsByClassName('booklist');console.log(elements["0"].getElementsByTagName("a")[2].innerText);})();

おわりに

とりあえず、いろいろできるようになった。こっからどうしよう。
ほんとは、借りた本をスプレッドシートに記載してったりAmazonのサイトから飛んで借りたりできるようにしたい。
気分がのってきたら試してみよう。
その前に図書館のサイトをもっとモダンな感じにしてほしいけども。

参考

JavaScriptによるフォームの制御
オリジナル「ブックマークレット」を作って、面倒な入力作業にサヨナラを。｜株式会社カポタスト
JavaScriptで要素を取得する | cly7796.net
[JavaScript]あらゆる要素を取得する | Rondo