ブックマークレットを活用し、Googleカレンダーで他の人のカレンダーを一括で表示/非表示する

ブックマークレットを活用し、Googleカレンダーで他の人のカレンダーを一括で表示/非表示する:

はじめに

背景・解決したいこと

今の会社では、Googleカレンダーを利用して従業者のスケジュール管理を行っています。Googleカレンダーは、他の人のカレンダーを一括で表示できるため、会議の日程調整などに便利なのですが、その一方で、表示するカレンダーの数が多くなると、表示がごちゃっとしてしまい、視認性がかなり悪くなってしまいます。

そのような状態だと、全員を一括表示するのを諦め、特定のカレンダーを非表示にしたりするのですが、なんらかの日程調整を行うとき（例えば「開発チーム」の臨時ミーティングの時間を調整したいとき）に、わざわざ開発チーム以外のカレンダーの表示を1つずつクリックして外して、次に開発チームのカレンダーを、これまた1つずつクリックして表示させるという、非常に面倒な操作が発生してしまいます。

できたもの

ブックマークレットを活用して、ワンクリックで特定のユーザーのカレンダーを表示させ、それ以外のカレンダーを非表示にするものを作りました。

利用方法

ブラウザはGoogle Chromeを想定しています。JavaScriptのコードだけ確認したい場合は、ページの最後に載せていますので、そちらをご確認ください。

1.ダミーのブックマークを作成する

適当なページのブックマークを作成し、ブックマークバーに表示しておきます。

2.ブックマークを編集し、コードを貼り付ける

ブックマークを右クリックし、「編集」を押下します。

「名前」には表示させたいカレンダーのグループ名を入力し、「URL」には、以下のソースコードを貼り付けます。ソースコード内に["田中太郎","山田花子"]という箇所がありますが、ここに、表示したいカレンダー名を入力します。一旦、適当なテキストエディタに貼り付けて、修正するのが良いかもしれませんね。

javascript:void function(b){var a=document.createElement("script");a.src="//code.jquery.com/jquery-3.2.1.min.js";a.onload=function(){var a=jQuery.noConflict(!0);b(a)};document.body.appendChild(a)}(function(b){var a=["田中太郎","山田花子"],e=b('[role="complementary"] div[aria-label="他のカレンダー"]').parent().data("collapsed"),d=b('[role="complementary"] content:contains("他のカレンダー")');e||d.click();setTimeout(function(){b('[role="complementary"] div[aria-checked="true"]').closest("label").click();for(var c=0;c<a.length;c++)b('[role="complementary"] div[aria-label="'+a[c]+'"]').click();d.click()},200)}); 

以下のようなイメージです。

3.試してみる

Googleカレンダーを開いた状態で、登録したブックマークレットをクリックします。先程入力したカレンダーが表示され、それ以外のカレンダーが非表示になれば成功です！うまくいかない場合は、入力した名前が間違っていないかを確認してください。

補足

ミニマイズする前のコード

void ((function(f) { 
    var script = document.createElement('script'); 
    script.src = '//code.jquery.com/jquery-3.2.1.min.js'; 
    script.onload = function() { 
        var $ = jQuery.noConflict(true); 
        f($); 
    }; 
    document.body.appendChild(script); 
} 
)(function($) { 
    var users = ["田中太郎", "山田花子"]; 
    var isCollapsed = $('[role="complementary"] div[aria-label="他のカレンダー"]').parent().data('collapsed'); 
    var collapseToggle = $('[role="complementary"] content:contains("他のカレンダー")'); 
    var sleepTime = 200; 
 
    // 「他のカレンダー」を折りたたむ 
    if (!isCollapsed) { 
        collapseToggle.click(); 
    } 
 
    setTimeout(function() { 
        // すべてのカレンダーを非表示にする 
        $('[role="complementary"] div[aria-checked="true"]').closest('label').click(); 
        // 対象のカレンダーを表示する 
        for (var i = 0; i < users.length; i++) { 
            $('[role="complementary"] div[aria-label="' + users[i] + '"]').click(); 
        } 
        // 「他のカレンダー」を再度開く 
        collapseToggle.click(); 
    }, sleepTime); 
} 
) 
); 

困った点

クリック対象のラベルが動的に生成される

Googleカレンダーをお使いの方なら分かると思うのですが、カレンダーの表示/非表示を切り替えるときには、左側のカラムにある、カレンダーのラベルをクリックすることになります。また、登録しているカレンダーの数が多いと、当然ラベルも多くなるので、スクロールバーが表示され、スクロールできる仕様となっています。

ここで問題となったのは、画面上に表示されていない(スクロールしないと表示されない)、下側にあるカレンダーのラベルについては、DOM要素自体が生成されておらず、スクロールして画面に表示される直前に、要素が動的に生成される仕組みになっていました。当然、生成されていない要素はクリックできないので、どうしたものか...と悩みましたが、「他のカレンダー」というボタンをクリックすると、ラベルの一覧を縮小できる機能があり、なぜか縮小すると全ての要素が生成されることも分かりました。そのため、コードでは、

1. 一時的にラベルの一覧を縮小する
2. JavaScriptでクリック操作を行う
3. ラベルを再表示する

という手順をとっています。

参考文献

ブックマークレットでjQueryを利用するために、以下の情報を参考にさせていただきました！

ブックマークレットで jQuery を使う魔法の 210 文字
https://qiita.com/otchy/items/5c4f2e1b2a93ac200f1c