5000164 is here
2015-11-23

Coubic の予約をブロックする拡張機能を作った

Coubic と作った拡張機能

Coubic とは

無料でも使える予約システム。
無料の予約システムを軽く調べたけど、1 番良さそうだった。

Coubic では休憩時間が設定できない

Coubic では休憩時間が設定できなかった。
定休日と営業時間は設定できるのに。
なにか良い方法はないかと調べたら、予約ブロック機能というものがあった。
しかし 1 つずつしか予約をブロックできない。
すべての営業日に予約ブロックを入れるのはとてもだるい。

指定した期間の予約をブロックできるようにしたい

だから指定した期間の予約をブロックする拡張機能を作った。

Chrome 拡張機能で作った

そんなに調べてないけど、API とかなさそうだったし、画面の操作を自動化すればそれでいいやと思った。
最初はブックマークレットでいけるかなと思った。
DOM の操作を自動化できるようにして、さあ期間内で連続して予約ブロックするぞ、と思ったら、ブックマークレットでは情報を保持できないことに気付いた。
だから Chrome 拡張機能にすることにした。
Chrome 拡張機能は作ってみたかったしいい機会だと思った。

開始ボタンを押したら自動で登録し続ける

自動で登録するために、content_scripts で処理を行う必要がある。
任意のタイミングで処理を開始するために、background を利用する必要がある。
予約ブロックする期間を設定するために、options_page を用意する必要がある。
ということで一通り触れて勉強になった。

処理を行う仕組み

options_page で期間と時間を設定しておく。
ツールバーの拡張機能を押すことで、background で処理フラグを立ててリロードする。
該当ページの content_scripts でフラグをチェックし続けて、処理フラグが立っていたら処理を行う。
予約ブロックを登録する処理を行う。
処理が完了したら処理フラグを元に戻す。

うまくいかなかったところ

開発ツールの Console から $("[name=\"commit\"]").click(); とすると動くのに、拡張機能からだと動かなかった。
これのせいでいろいろ調べて、拡張機能からだと click できないのか?とか思って直接 post するようにしたら、クッキーが有効じゃないとかってエラーで怒られて、よくわからなくて時間がかかった。
クリックの仕方が間違ってるのかも知れないと思って $("[name=\"commit\"]").trigger("click"); とやってみたら動いた。
サイト側の JavaScript でイベント取得してなんかいろいろやってから post してるのだろうか。
登録内容が重複してる場合はエラーが出ていたからなにか処理をしているのだろうか。
ここに気付かなくて時間がかかってしまった。

まとめ

それっぽく動くものができたし、勉強にもなったのでよかった。
これからもなにか便利にしたいと思ったら Chrome 拡張機能を作ったりしていきたい。