Googleカレンダー上で直近の予定へフォーカスするには、まず画面上に表示されている予定要素を取得し、それぞれの予定がいつ始まり、いつ終わるのかを読み取る必要があります。
連載第4回では、DOM解析と日付・時間のパース処理について解説します。
予定要素を取得する
Googleカレンダーの予定要素には、data-eventid や data-chip といった属性が付いていることがあります。これらを手がかりに、画面上の予定要素をまとめて取得します。
const eventElements = Array.from(
document.querySelectorAll('[data-eventid], [data-chip]')
);
document.querySelectorAll() は、CSSセレクタに一致する要素をまとめて取得するメソッドです。取得結果を Array.from() で配列に変換しておくと、後続の処理で扱いやすくなります。
aria-labelを読む
Googleカレンダーの予定要素には、アクセシビリティ用の aria-label が設定されている場合があります。ここには、予定名、時間、日付などの情報が文章として入っていることがあります。
const label = element.getAttribute('aria-label') || '';
この文字列から、正規表現を使って日付や時刻を取り出します。
年月日を解析する
日本語表示のGoogleカレンダーでは、日付が 2026年 6月 26日 のような形式で含まれることがあります。この形式に対応する正規表現は次のようになります。
const jpDateMatch = label.match(
/(\d{4})\s*年\s*(\d{1,2})\s*月\s*(\d{1,2})\s*日?/
);
この正規表現では、年、月、日をそれぞれ取り出します。
\d{4}: 4桁の数字\d{1,2}: 1桁または2桁の数字\s*: 空白があってもなくてもよい日?: 「日」があってもなくてもよい
\s* を入れておくことで、2026年6月26日 と 2026年 6月 26日 のどちらにも対応できます。
年が省略された日付を解析する
表示内容によっては、年が省略されて 6月26日 のように書かれている場合もあります。その場合は、現在の年を補完します。
const jpMonthDayMatch = label.match(
/(?:^|[^\d年\/])(\d{1,2})\s*月\s*(\d{1,2})\s*日?/
);
if (jpMonthDayMatch) {
const year = now.getFullYear();
const month = Number(jpMonthDayMatch[1]);
const day = Number(jpMonthDayMatch[2]);
}
年がない場合でも、実行時点の年を使えばJavaScriptの Date オブジェクトを作成できます。
時刻を解析する
予定の開始時刻や終了時刻も、aria-label から取り出します。たとえば 10:00から11:00 や 午前10:00 のような表現が含まれている場合があります。
時刻表現は表示言語やGoogleカレンダーの仕様変更の影響を受けやすいため、複数の形式に対応できるようにしておくと安定します。
function createDate(year, month, day, hour, minute) {
return new Date(year, month - 1, day, hour, minute, 0, 0);
}
JavaScriptの Date では、月が0始まりです。そのため、6月を指定する場合は month - 1 を渡します。
DOMパースで注意すること
Googleカレンダーは外部サービスであり、HTML構造が将来変わる可能性があります。そのため、DOMパースでは次の点に注意します。
- 1つの属性だけに依存しすぎない
- 取得できない場合は処理を止めずにスキップする
- 正規表現は複数の表記ゆれに対応させる
- コンソールログで解析結果を確認できるようにする
特にGoogleカレンダーのようなWebアプリでは、画面の表示状態によって取得できる要素が変わります。解析できなかった予定があっても、拡張機能全体が止まらないように作ることが大切です。
まとめ
第4回では、Googleカレンダーの予定要素をDOMから取得し、aria-label から日付や時刻を解析する考え方を解説しました。
次回は、解析した開始時刻・終了時刻を現在時刻と比較し、「最も近い予定」を選ぶロジックを見ていきます。
