文系のIT勉強メモ

勉強中のメモと、インフラの覚書き

CONNPASSのブックマークレットづくり（日付と開催地）

CONNPASSで勉強会情報探すとき、条件はだいたい同じだ。

日付は今日からだいたい1週間のぶんで、開催地は沖縄とオンライン。

CONNPASSの検索画面

東京にいたらイベントが多いのでキーワードで絞り込む必要があったけど、今はこれで充分。逆にしぼることで興味深い勉強会を見逃したくないのでしぼらない。

このCONNPASSの検索画面は頻繁に見るので、日付・開催地の入力が面倒で、いつかブックマークレット作ろうと思っていた。

失敗したけどchatGPTがつくってくれたコードを共有

結果的にできてないんだけど、chatGPTに指示して作らせたコードがあるからメモ兼ねて共有しておきます。consoleのエラーも共有して、広告ブロッカーのせいじゃないすか、ってことだったんだけど、Edgeのほうは広告ブロッカー入ってないし。広告ブロッカーはずしたくなかったので確認できずです。

ブックマークレットの登録方法

Chromeの場合
  1. ブラウザでブックマークバーを表示させてください。表示されていない場合は、Ctrl+Shift+B（Windows/Linux）またはCommand+Shift+B（Mac）で切り替えられます。
  2. ブックマークバー上で右クリックし、「ページを追加」を選択します。
  3. ダイアログボックスが表示されますので、"名前"に好きな名前を入力し、"URL"にブックマークレットのコードを貼り付けます。
  4. ダイアログボックスの"保存"ボタンをクリックします。
Edgeの場合
  1. ブラウザでブックマークバーを表示させてください。表示されていない場合は、Ctrl+Shift+B（Windows/Linux）またはCommand+Shift+B（Mac）で切り替えられます。
  2. ブックマークバー上で右クリックし、「お気に入りの管理」⇒「お気に入りの追加」を選択します。
  3. "名前"に好きな名前を入力し、"場所"をブックマークバーに設定します。
  4. "URL"にブックマークレットのコードを貼り付け、"追加"ボタンをクリックします。
  5. ブックマークレットが登録されたら、対象のページでそのブックマークをクリックすると、ブックマークレットのコードが実行されます。

ブックマークのURL欄に登録する内容

javascript:(function() {
    // 今日の日付を取得
    var today = new Date();
   
    // 7日後の日付を計算
    var sevenDaysLater = new Date();
    sevenDaysLater.setDate(today.getDate() + 7);
   
    // 関数を使って日付をyyyy/mm/dd形式に変換
    function formatDate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1; // 月は0から始まるため、1を加える
        var day = date.getDate();
   
        // 月や日が1桁の場合は0埋めする
        month = month < 10 ? '0' + month : month;
        day = day < 10 ? '0' + day : day;
   
        return year + '/' + month + '/' + day;
    }

    // id="id_start_from"に今日の日付をセット
    document.getElementById('id_start_from').value = formatDate(today);
   
    // id="id_start_to"に7日後の日付をセット
    document.getElementById('id_start_to').value = formatDate(sevenDaysLater);
   
    // id="id_prefectures"に"okinawa"と"online"を選択
    var prefSelect = document.getElementById('id_prefectures');
    var options = prefSelect.options;
    for (var i = 0; i < options.length; i++) {
        options[i].selected = options[i].value === 'okinawa' || options[i].value === 'online';
    }
})();

使い方

上の「ブックマークレットの登録方法」と重複しますが、まずCONNPASSの検索ページを開きます。https://connpass.com/search/

開いたところで、ブックマークから、作成したブックマークレットを選択することで動作させます。

力技で一応解決させた

ブックマークレットができないならと、ローカルにhtmlファイルを置いて、そこにURLリンクだけ記載しました。そのローカルのhtmlファイルをブックマークするというやり方。

htmlはこの1行だけを表示します

URLリンクに今回の検索条件が埋め込んであれば (※)、したいことはできるから。ブラウザで完結せずhtmlファイルをローカルに置いとくっていうのが、うっかり削除したり移動させたりのリスクがあって、いやですけどね。

（※）検索ページで検索した場合でも、検索結果は指定の値が埋め込まれたリンクになる　例）https://connpass.com/search/?q=&start_from=2023/12/18&start_to=2023/12/25&prefectures=okinawa&prefectures=online&selectItem=okinawa&selectItem=online&sort=

ローカルに作成するhtmlファイルの内容

これもchatGPTに指示してつくってもらいました。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>connpassの日付入りURL</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <a id="connpassLink" href="#" target="_blank" rel="noreferrer noopener">CONNPASSのリンク日付入り</a>

    <script>
        // 現在の日付を取得
        var currentDate = new Date();

        // 7日後の日付を計算
        var futureDate = new Date();
        futureDate.setDate(currentDate.getDate() + 7);

        // 日付を文字列に変換してフォーマット
        var currentDateStr = formatDate(currentDate);
        var futureDateStr = formatDate(futureDate);

        // リンクのhref属性を更新
        var connpassLink = document.getElementById("connpassLink");
        connpassLink.href = "https://connpass.com/search/?q=&start_from=" + currentDateStr + "&start_to=" + futureDateStr + "&prefectures=okinawa&prefectures=online&selectItem=okinawa&selectItem=online&sort=";

        // 日付をフォーマットするヘルパー関数
        function formatDate(date) {
            var year = date.getFullYear();
            var month = ('0' + (date.getMonth() + 1)).slice(-2);
            var day = ('0' + date.getDate()).slice(-2);
            return year + '/' + month + '/' + day;
        }
    </script>
</body>

</html>

ブックマークの登録の例

file:///C:/Users/USER/Documents/connpass.html

結果的にこれでよかったんじゃね

ブックマークから検索画面にいって、そこでまたブックマークからブックマークレットを指定する、よりも、一度ブックマークからこのhtmlを開いて、そこに載ってるリンクをクリックするだけだから、毎回のクリックの手間はこっちのやり方の方が少ない。

ついでに他にこういうURLに機能持たせたいページがあればここに書いといたらブックマークページとして使えるしね。ブックマークバーは横幅に限りがあるからその代わりにもなるし。

モバイルで使えないのは欠点だけど、どこかにホストしちゃってもいいかもね。秘匿するべき情報は含まないのだし。

ていうかこの機能のブックマークレットは出来上がって記事書いてた

本記事を公開したらはてブロの機能で関連記事が下に表示されて混乱した。３年前にすでにbookmarklet完成させて記事も書いていたんだね私。PC変えたから設定してなかっただけだったんだ。。劣化を思い知らされた。でもchatGPTに勝ってたと思うとちょっと嬉しい。

suika-daisuki.hatenablog.com