はじめに
仕事始めに今日のスケジュールを確認して……、みたいなシーンあると思います。自分は毎日Googleカレンダーを使っていて、それをToDoリストに起こしたりしているのですが、スケジュールをひとつひとつ拾ってくの面倒だなと思い自動化してみました。
今回はブックマークレットを使っていきます。ブックマークレットを簡単に説明すると、ブックマークと同じような形でJavaScriptのプログラムを保存しておき、それをクリックするとプログラムを呼び出せるというものです。
カレンダーのスケジュールを取得するプログラム
Googleカレンダーは日か週かで利用してください。それと、設定から24時間表示にしてください。それ以外はエラーになります。
javascript:(function(){
let allDayEvents = [];
let timedEvents = [];
const timePattern = /^(\d{1,2}:\d{2})～(\d{1,2}:\d{2})\s*(.*)$/;
/* 時間が決まっている予定を取得 */
document.querySelectorAll('div[role="button"]').forEach(function(e){
let match = e.textContent.match(timePattern);
if (match) {
const startTime = match[1];
const endTime = match[2];
/* '、'で分割して要素を取得 */
let titlePart = match[3].split('、')[1];
/* タイトル部分が取得できた場合のみ処理を実行 */
if (titlePart) {
/* 空白と鍵かっこ削除 */
const pureTitle = titlePart.trim().replace(/「|」/g, '');
/* 整形して出力。ここをいじれば形を変えられる */
timedEvents.push(`${startTime}-${endTime} ${pureTitle}`);
}
}
});
/* 終日の予定を取得 */
document.querySelectorAll('div[role="presentation"] div[role="button"]').forEach(function(e) {
const text = e.textContent.trim();
if (text && text.includes('終日') && !text.match(timePattern)) {
/* '、'で分割して要素を取得し、鉤括弧を削除 */
const pureAllDayTitle = text.split('、')[0].replace(/「|」/g, '').replace(/終日$/, '');
/* 整形して出力。ここをいじれば形を変えられる */
allDayEvents.push(`終日 ${pureAllDayTitle}`);
}
});
const allEvents = allDayEvents.concat(timedEvents);
if (allEvents.length > 0) {
let resultText = allEvents.join('\n');
navigator.clipboard.writeText(resultText).then(function() {
alert('スケジュールをクリップボードにコピーしました！\n\n' + resultText);
}, function() {
alert('コピーに失敗しました。');
});
} else {
alert('スケジュールが見つかりませんでした。');
}
})();
ざっくり解説すると、正規表現を使ってブラウザ上からスケジュールが書いてあるところを探し、そこに書いてあるテキスト情報を取得して、整形して出力、といった具合です。
正規表現について
const timePattern = /^(\d{1,2}:\d{2})～(\d{1,2}:\d{2})\s*(.*)$/;
こちらの24時間表記での正規表現は成功したのですが、12時間の午前午後表記の正規表現で負けました……。どなたか有識者の方がいましたら、Googleカレンダーで午前午後表記のスケジュールを見つけられる正規表現を教えてくださいますと、大変喜びます。
const timePatternAMPM = /(午前|午後)\d{1,2}(:\d{2})?～(午前|午後)?\d{1,2}:\d{2}|(午後)\d{1,2}時～\d{1,2}時\s*(.*)/;
ブックマークレットを設定する
１．ブラウザのブックマークバーで右クリックして、ブックマークを新規作成
２．お好みの名前をつけて、最初にあったプログラムを「URL」にコピペ
最初は違和感あると思いますが、URLという項目名を無視してプログラム置いちゃって大丈夫です！
３．保存
よく見るブックマークのようになっていれば成功です！
実際に使ってみる
Googleカレンダーに移動して、右上の歯車マークから設定へ移動し、24時間表示に変更してください
無ければお好みのスケジュールを入れ、「スケジュール取得」ブックマークレットを押下します。
終日 テストのやつです
終日 一日かかるHello, world!
08:45-09:45 1番目のスケジュール
10:30-12:30 例の2番
13:00-14:00 3rd
スケジュールが取れました！
出力形式の変更
ソースコードのうち、下記をいじると出力形式を変えることができます。
allDayEvents.push(`終日 ${pureAllDayTitle}`);
timedEvents.push(`${startTime}-${endTime} ${pureTitle}`);
1行コード
ブックマークレットって1行のイメージがあるので、用意してみました。こちらを使っても大丈夫です。
javascript:(function(){let allDayEvents = [];let timedEvents = [];const timePattern = /^(\d{1,2}:\d{2})～(\d{1,2}:\d{2})\s*(.*)$/;document.querySelectorAll('div[role="button"]').forEach(function(e){let match = e.textContent.match(timePattern);if (match) {const startTime = match[1];const endTime = match[2];let titlePart = match[3].split('、')[1];if (titlePart) {const pureTitle = titlePart.trim().replace(/「|」/g, '');timedEvents.push(`${startTime}-${endTime} ${pureTitle}`);}}});document.querySelectorAll('div[role="presentation"] div[role="button"]').forEach(function(e) {const text = e.textContent.trim();if (text && text.includes('終日') && !text.match(timePattern)) {const pureAllDayTitle = text.split('、')[0].replace(/「|」/g, '').replace(/終日$/, '');allDayEvents.push(`終日 ${pureAllDayTitle}`);}});const allEvents = allDayEvents.concat(timedEvents);if (allEvents.length > 0) {let resultText = allEvents.join('\n');navigator.clipboard.writeText(resultText).then(function() {alert('スケジュールをクリップボードにコピーしました！\n\n' + resultText);}, function() {alert('コピーに失敗しました。');});} else {alert('スケジュールが見つかりませんでした。');}})();
まとめ
今回は、Googleカレンダーからスケジュールをまとめて取得するブックマークレットを作ってみました。基本的にはブラウザから該当の要素を見つけて、取得して、クリップボードにコピーするという動作なので、Googleカレンダーに限らずいろいろ使えるんじゃないかと思います。ぜひいろんなサイトで効率化できないか試してみてください！最後まで読んでいただき、ありがとうございました！