Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

ChromeのユーザースクリプトでGaroonのスケジュールボタンをフッタに追加する

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

Garoonを扱っていてふと気になったのが、特定の画面からスケジュールを表示させられないこと。

スケジュール画面の中で「予定」をクリックすると、詳細画面に飛ぶわけなんだけど、詳細画面には「週」表示ボタンなどがないので、いちいち「戻る」しなければならない。これが面倒。

魔技JavaScriptを操る私としては、Chromeのユーザースクリプトを使って解決しようと思い立った。でも魔技jQueryを使いたかったので、Tampermonkeyを使ってラクをすることにした。

jQuery(document).ready(function($){
  $('#footer').prepend('<div class="global_navi-viewChange-grn"><ul><!-- using tag strip to delete all space between tag li--><li><a class="global_naviBackTab-viewChange-grn viewChangeLeft-grn" href="/g/schedule/group_day.csp?event=&amp;bdate=2017-10-19&amp;gid=login&amp;search_text=&amp;p=">グループ日</a></li><li><a class="global_naviBackTab-viewChange-grn" href="/g/schedule/index.csp?event=&amp;bdate=2017-10-19&amp;gid=login&amp;search_text=&amp;p=">グループ週</a></li><li><a class="global_naviBackTab-viewChange-grn" href="/g/schedule/personal_day.csp?event=&amp;bdate=2017-10-19&amp;gid=login&amp;search_text=&amp;p=">日</a></li><li class="global_naviBack-viewChangeSelect-grn"><a class="global_naviBackTab-viewChange-grn" href="/g/schedule/personal_week.csp?event=&amp;bdate=2017-10-19&amp;gid=login&amp;search_text=&amp;p=">週</a></li><li><a class="global_naviBackTab-viewChange-grn" href="/g/schedule/personal_month.csp?event=&amp;bdate=2017-10-19&amp;gid=login&amp;search_text=&amp;p=">月</a></li><li><a class="global_naviBackTab-viewChange-grn viewChangeRight-grn" href="/g/schedule/personal_year.csp?event=&amp;bdate=2017-10-19&amp;gid=login&amp;search_text=&amp;p=">年</a></li></ul></div>');
});
//// @require https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

TampermonkeyはChromeの機能拡張で、webページに対してJavaScriptを紐付けて実行してくれる。以前からこういうのがあることは知っていたけれど、以前はJavaScriptがよくわかっていなかったので使いこなせなかったのだ。

設定して実行してみると、見事ページの下の方、フッタのところにカレンダー項目が表示された。

カレンダーページと関係ないページでも同じように表示されちゃうけど便利だからまあいいか。

jQueryじゃないraw JavaScriptもたまに使うようにしないと、このままじゃ忘れちゃうなぁ……。