📅

Googleカレンダーの開始時刻だけを5分ずらすChrome拡張を作った件

Yuki Tsuchida

2024/12/07に公開

!本稿は、ZOZO Advent Calendar 2024 シリーズ 6 の 7 日目の記事です。
こんにちは、計測システム部SREの土田です。

ZOZOMATやZOZOMETRY等の計測技術のSRE業務を担当しております。
現在、AWS re:inventに参加しており、ラスベガスよりこの記事を執筆しております。

12/17に弊社紀尾井町オフィスで開催される、AWS re:Invent 2024 Recap in ZOZOに登壇しますので、こちらもぜひご参加ください！！！

https://zozotech-inc.connpass.com/event/336730/

さて、今日は、SREにも、re:inventにも関係のない記事です。

 作ったものShift 5min

https://chromewebstore.google.com/detail/shift-5min/pfcenamoaicemkljppigbmhlimknjeae
Googleカレンダーのイベント作成画面にて、開始時間を5分遅らせるボタンを追加する拡張です。

 モチベーション株式会社ZOZOには、「ミーティングは基本的に5分または35分から始める」というカルチャーがあります。

なので、社内でミーティングを行う際、カレンダーを設定する際に14:05のように設定する必要があります。

私は今年の5月に転職でZOZOにやってきたのですが、入社2日目にあることに気づきました。

それでは、みなさんGoogleカレンダーで14:05と設定してみてください。想像の500倍大変です。

まず、ドロップダウンで05分がない！！！

しかたないと思って、手書きで開始時刻を05に修正すると、今度は終了時間まで5分後ろ倒しされてしまう😭

これは非常にめんどくさい、、、、

ということでこの状況をなんとかするChrome拡張を入社2週間で作りました。

 実装について詳しくはリポジトリをご覧ください。

リポジトリ: https://github.com/andex-tokyo/calender-5min-shift/
実際に5分後ろ倒しにするアクションの実装に苦戦しました。

現在は以下のような実装になってます。(一部抜粋)
newTimeOption.id = newId;

const dropdownMenu = dialog.querySelector(
  'div[role="listbox"][aria-label="開始時間"], div[role="listbox"][aria-label="Start 
  time"]'
);

if (dropdownMenu) {
  dropdownMenu.appendChild(newTimeOption);

  const dropdownButton = dialog.querySelector(
    'input[role="combobox"][aria-label="開始時間"], input[role="combobox"][aria-label="Start time"]'
  );
  if (dropdownButton) {
    dropdownButton.click();
    setTimeout(() => {
      newTimeOption.click();
    }
   }
  }
このようにドロップダウンのDOM要素に5分後の選択肢を追加し、それをクリックし、ずれた終了時間を同じように戻しに行く泥臭い実装になっております。
うまくいかなかった実装たち
Googleカレンダーが内部APIに送信する前に時間を書き換え
これは試してみたが、5分ずらしたことが実感できないので、UX的になしだと判断してボツ

手書きで書き換えるところのDOM要素を書き換え
これは手書きのDOM要素書き換えた瞬間、裏側で謎の描画が走って時間値の整合性が取れなくなる、整合性を取るためにはクリックイベントが必要そう

あまりに泥臭い実装になっているので、うまく動かない点や改善したい方はリポジトリのPRやIssueまでお願いします。

 実績12/4時点で493名のユーザーに使っていただいております！

おそらくこのようなニッチなニーズを求めているのは弊社社員のみだと仮定して、

ZOZOの社員数はIR資料によると1745名

つまり社員3.5名に1人はこの拡張を使っていることになります！！！

うれしい！！！

 まとめこのように勢いで作ったものでも500人近い人たちに使ってもらえると、やってよかったなという感情になるので、これからも色々なものを作って、たくさんの人に使ってもらいたいと思いました。

P.S.もしZOZOのみなさんで解決してほしい課題がある方は #times-tsucchy までご連絡ください！！！

株式会社ZOZOPublication

ファッションEC「ZOZOTOWN」、ファッションコーディネートアプリ「WEAR」などの各種サービスの企画・開発・運営や、「ZOZOSUIT」「ZOZOMAT」「ZOZOGLASS」などの計測テクノロジーの開発・活用をおこなっています。また、カスタマーサポート、物流拠点「ZOZOBASE」を運営しています。

作ったもの

モチベーション

実装について

実績

まとめ

Discussion