調整さんプラグイン開発までのプロセスを公開します！

先日、調整さんのデフォルト開始時間を変更するブックマークレットを作りました。

aoma23.hatenablog.jp

便利だと思うので、皆さん使ってみてください。調整さんの中の人にも褒めていただいた？ので嬉しい限り。

スゴイ👏👏👏(我々が取り組むべき課題ですネ…恐れ入ります、ありがとうございます) https://t.co/nHEreZzDWx
— アヤパカ@調整さん中の人 (@ayapakka) August 12, 2019

「どうやって作ったの？」といった質問をいただいたので、作るまでの経緯を解説してみたいと思います！

作成までの経緯

なぜ作ろうと思ったか

モチベーションは大事ですよね。

友達と来月どこかで飲みに行こうー！と思って調整さんをつかったときに平日全て候補日にしたんですね。

20:00開始予定だったんですが全部19:00～になっちゃって、開始時間のデフォルトはどうやって変えるんだろうと思ったら、どうやらなさそうだと。

ないなら作っちゃうかと。きっと需要あるだろうと。

みたいな感じです。

chromeのアドオンにするか迷いましたが、お手軽にjsのブックマークレットでいいやーと。

調査フェーズ

調整さんのHTMLソースを見てJS部分を解析してみました。

「19:00」で検索したらそれっぽい箇所がヒットしました！

$("#datepicker").datepicker({
    dateFormat: 'm/d(DD)',
    firstDay: 0,
    yearSuffix: '年',
    showMonthAfterYear: true,
    monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    dayNames: ['日', '月', '火', '水', '木', '金', '土'],
    dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
    minDate: new Date(),
    maxDate: '+12m',
    hideIfNoPrevNext: true,
    // 日付が選択された時、日付をテキストフィールドへセット
    onSelect: function (dateText, inst) {
        var nowText = $("#kouho").val();

        if (nowText === "") {
            $("#kouho").val(dateText + " 19:00〜");
        }
        else {
            $("#kouho").val(nowText + "\n" + dateText + " 19:00〜");
        }
    }
});

なるほどなるほどdatepickerね。onSelectの部分を書き換えればなんとかなりそう。

ググる。

datepicker( 'option', 'onSelect', function (dateText, inst) {

});

でonSelectだけ上書きできそう。これはイケそうだ！

実装フェーズ

まず下記のようなコードを作り、

var time_text = " 19:30〜";
$("#datepicker").datepicker( 'option', 'onSelect', function (dateText, inst) {
    var nowText = $("#kouho").val();
    if (nowText === "") {
        $("#kouho").val(dateText + time_text);
    }
    else {
        $("#kouho").val(nowText + "\n" + dateText + time_text);
    }
});

chrome デベロッパーツールを開いてConsoleにコピペして検証してみました。

こんな感じ。

f:id:aoma23:20190816102014p:plain

すると無事書き換わったぞ！！

あとはブラッシュアップするだけ。即時関数にしてグローバルスコープを汚染しないように。そして調整さんへのリダイレクトを追加してみました。

(() => {
    const url = 'https://chouseisan.com';
    if (location.origin != url) {
        location.href = url;
        return;
    }
    let time_text = prompt("デフォルト開始時間を設定します", "19:30～");
    $("#datepicker").datepicker( 'option', 'onSelect', function (dateText, inst) {
        var nowText = $("#kouho").val();
        if (nowText !== "") {
            nowText += "\n";
        }
        $("#kouho").val(nowText + dateText + ' ' + time_text);
    });
})();

これをワンライナーにして先頭にjavascript:を付与したらブックマークレットの完成です。
GoogleのClosure Compilerを使ってワンライナーにすると圧縮もされて便利。

デプロイ？フェーズ

ブックマークレットをブックマークするのって意外とめんどうですよね。
aタグとかにしてブックマークバーにドラッグ＆ドロップする方法が一番お手軽そうだったので今回はそれにしてみました。

<a href="｛ブックマークレット｝" onclick="return false">ブックマーク名</a>

属性値（hrefの値）を"で囲む必要があり、今回スクリプト内でダブルコーテーションを使っていたのでシングルコーテーションに置換しました。
※スクリプト内容によってはダブルコーテーションじゃないといけない可能性もあると思うので、その場合はエスケープするなり注意してくださいね。

<a href="javascript:(function(){if('https://chouseisan.com'!=location.origin)location.href='https://chouseisan.com';else{var b=prompt('\u30c7\u30d5\u30a9\u30eb\u30c8\u958b\u59cb\u6642\u9593\u3092\u8a2d\u5b9a\u3057\u307e\u3059','19:30\uff5e');$('#datepicker').datepicker('option','onSelect',function(c,d){var a=$('#kouho').val();''!==a&&(a+='\n');$('#kouho').val(a+c+' '+b)})}})();" onclick="return false">調整さんの開始時間変更</a>

完成ー。メイン記事に設置してるので登録してみてね！

参考にしたサイト

Bookmarkletを作ろう(準備編） - Qiita

今後やりたいこと

外部jsファイルを読み込むブックマークレットの記述方法もあるのでそっちのほうがよさそう
- 今後バージョンアップとかしたときに再配布しなくてよくなる
ブックマークレットメーカーみたいなものを作りたい
- お手軽にJavaScriptをブックマークレットにできるように

さいごに

不明点等あればお気軽にツイッター等でご質問くださいー。

aoma blog

エンジニアの日常とか技術とか