Google カレンダーと Google スライドで予定までの日数を視覚化する

Google カレンダーに登録したそれぞれの予定までの日数を Google スライド上で視覚化する方法を考えたので紹介します。仕事の優先順位を考えるのに使えると思います。

作業環境
やりたいこと
完成図
手順
結び
参考

作業環境

Google アカウント（個人用）
Windows 10 Home 22H2 (OS Build 19045.3086)
FireFox 115.0 (64 ビット)

やりたいこと

Google カレンダーに登録した予定を Google スライド上に表示しつつ、それぞれの予定までの残り日数を視覚的に表現します。「残り4日」と言われましても、あんまりピンと来ないんですよね……。

また、[スケジュール] ビューにすると予定のみを表示することができますが、これだとそれぞれの予定の間の日数が分かりにくくなるので、私には向いていないように感じています。

完成図

Google スライドに GIF 画像を貼るとプレゼンテーション中にも動いてくれます。テンションが上がりますね。

手順

Google にログインする

まずは Google にログインします。Google のトップページを開いた時に、画面右上に自分の名前やアイコンが出ていれば既にログインしています。

ログインしていない場合は、画面右上の「ログイン」の文字をクリックしてください。

新しいスプレッドシートを作成する

Google のトップページや Google カレンダーなどの画面右上にある点9個のボタンをクリックしてください。Google のサービス一覧が出ます。ちなみにこの点9個のボタンをキャンディボックスと呼ぶそうです。この一覧から「スプレッドシート」を探してクリックしてください。

左上にある「＋」ボタン（空白と書いてあるやつ）をクリックしてください。そうするとフォームの作成画面が開きます。

スプレッドシートを編集する前に、真っ先にファイル名を付けてください。「無題のスプレッドシート」のままだと、後から探すときに苦労します。今回は「イベントまでの日数」としました。

スプレッドシートにプログラムを追加する

Google カレンダーの予定をスプレッドシートに転記するためのプログラムを作成します。といっても基本的にコピペで済みます。

画面上部のメニューを [拡張機能] > [Apps Script] の順でクリックしてください。「Apps Script」という画面が開くはずです。この画面をスクリプトエディタ、あるいは単にエディタと呼びます。このエディタで、Google フォームなどの Google 製サービス上で動く GAS というプログラミング言語でプログラムを書くことがでます。

何はともあれ、画面左上の「無題のプロジェクト」の部分を変更しましょう。「無題の○○」が増えていくとどれがどれだか分からなくなります。ここでは「イベントまでの日数」としました。

プロジェクト名を変更したら、いよいよプログラムの貼り付けです。エディタにもともと入っているであろう

function myFunction() {
  
}

というコードを全て消してから、以下のコードを貼り付けて保存 (Ctrl + S) してください。

function outputCalendarEvents() {
  // スプレッドシートの A1 セルから C1 セルに入力するヘッダー
  const headers = ["イベント", "開始日", "終了日"]

  // イベントを取得する期間の日数
  const duration = 180

  // イベントを取得するカレンダーの ID
  // `CalendarApp.getDefaultCalendar().getId()` はユーザのデフォルトカレンダーの ID
  const calendarIds = [
    CalendarApp.getDefaultCalendar().getId(),
    "0123456789abcdefghijklmnopqrstuvwxyz@group.calendar.google.com",
    "zyxwvutsrqponmlkjihgfedcba9876543210@group.calendar.google.com"
  ]

  // ID からカレンダーを取得
  const calendars = calendarIds.map(x => {
    return { id: x, calendar: CalendarApp.getCalendarById(x)}
  })

  // イベントを取得する期間の開始日（今日）と終了日（今日の duration 日後）
  const startTime = new Date(new Date().setHours(0, 0, 0, 0))
  const endTime = new Date(new Date(startTime).setDate(startTime.getDate() + duration))

  // カレンダーのうち ID が間違っているなどしてアクセスできなかったものを除き、イベントの情報を取得
  // 取得する情報は、イベントのタイトル、開始日および終了日
  const events = calendars.
    filter(x => x.calendar !== null).
    map(x => x.calendar.getEvents(startTime, endTime)).
    flat().
    map(x => {
      if (x.isAllDayEvent()) {
        const previousDay = new Date(x.getAllDayEndDate().setDate(x.getAllDayEndDate().getDate() - 1))
        return [x.getTitle(),x.getAllDayStartDate(), previousDay]
      } else {
        return [x.getTitle(), x.getStartTime(), x.getEndTime()]
      }
    })

  // 取得したイベントの情報をスプレッドシートに転記
  if (events.length > 0) {
    const sh = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
    sh.getRange(1, 1, 1, events[0].length).getDataRegion(SpreadsheetApp.Dimension.ROWS).clearContent()
    sh.getRange(1, 1, 1, headers.length).setValues([headers])
    sh.getRange(2, 1, events.length, events[0].length).setValues(events)
  }

  // ID が間違っているなどして取得できなかったカレンダーの ID をログに出力
  const notFoundNames = calendars.
    filter(x => x.calendar === null).
    map(x => x.id).
    reduce((prev, curr) => prev + "\n" + curr)
  Logger.log(`以下の ID のカレンダーが見つかりませんでした。ID が間違っていないか確認してください。:\n${notFoundNames}`)
}

12~13行目の 0123456789abcdefghijklmnopqrstuvwxyz@group.calendar.google.com のような部分は、予定を取得したいカレンダーのカレンダー ID に置き換えてください。

デフォルトカレンダー（ユーザ名のカレンダー）の予定のみ取得したい場合は、10~14行目を以下のように書き換えてください。

  const calendarIds = [
    CalendarApp.getDefaultCalendar().getId()
  ]

貼り付けて保存したら、一度テストしてみましょう。エディタ画面上部の [デバッグ] ボタンの左の部分が outputCalendarEvents になっていることを確認して、なっていなければそれにしてから [実行] ボタンをクリックしてください。

初回のみ、[承認が必要です] というメッセージが出るはずです。

承認の流れはこちらのページでご覧ください。個人用アカウントと学校用または職場用アカウントで多少異なりますが、とにかく自分のアカウントを選択して注意事項を読み、問題なければ [許可] をクリックしてください。

note.com

承認したらプログラムが動き、スプレッドシートに予定が入ったはずです。見に行きましょう！

おー入ってる。こんなにいらない！

最後に、プログラムの実行を自動化して、カレンダーに予定を追加する度にスプレッドシートを自動で更新するように設定します。画面左端の時計のアイコン（トリガーアイコン）をクリックしてください。

「トリガー」という画面になるはずです。

画面右下の [＋トリガーを追加] ボタンをクリックし、

以下のように設定して保存してください。

項目	設定内容
実行する関数を選択	outputCalendarEvents
実行するデプロイを選択	Head
イベントのソースを選択	カレンダーから
カレンダーの詳細を入力	カレンダー更新済み
カレンダーのオーナーのメールアドレス	（カレンダーのオーナーのメールアドレス）
エラー通知設定	今すぐ通知を受け取る

以下のようになっていれば成功です。

ではカレンダーに予定を入れてみて、スプレッドシートが自動で更新されるかテストしましょう。カレンダーに予定を入力。数秒のタイムラグの後、反映。

やったね！

もし、カレンダーのオーナーが自分以外の人であるなどして、上記の設定で上手くいかない場合は、以下のように1時間おきに実行する設定にするか、

項目	設定内容
実行する関数を選択	outputCalendarEvents
実行するデプロイを選択	Head
イベントのソースを選択	時間主導型
時間ベースのトリガーのタイプを選択	時間ベースのタイマー
時間の間隔を選択（時間）	（好きな間隔）
エラー通知設定	今すぐ通知を受け取る

以下のように決まった時間帯に実行する設定にしてください。

項目	設定内容
実行する関数を選択	outputCalendarEvents
実行するデプロイを選択	Head
イベントのソースを選択	時間主導型
時間ベースのトリガーのタイプを選択	日付ベースのタイマー
時刻を選択	（好きな時間帯）
エラー通知設定	今すぐ通知を受け取る

これでプログラムの作業は完了しました。

ちなみに、プログラムの実行状況は画面左端の [実行数] アイコンをクリックして開いたページから確認できます。

スプレッドシートに数式を追加する

ここまでで、カレンダーの予定をスプレッドシートに転記することができました。次はそれぞれの予定までの日数を視覚化しましょう。

まず、スプレッドシートの D1 セル、E1 セル、F1 セル、H1 セルに以下のように見出しを入力してください。

次に、セルに以下の数式を入力してください。数式を入力するのは D2 セル、E2 セル、F2 セルの3か所のみです。

D2 セル

=ArrayFormula(IF(B2:B="","",INT(B2:B)-TODAY()))

E2 セル

=ArrayFormula(IF(B2:B="","",NETWORKDAYS(TODAY(),B2:B,H2:H)))

F2 セル

=ArrayFormula(IF(E2:E="","",IF(E2:E<0,"",REPT("|",E2:E))))

するとこのようになるはずです。

勤務先独自の祝日は、H2 セルから下に入力してください。

数式の入力は完了です。

スプレッドシートの見た目を整える

ここまで作成したスプレッドシートのデータをスライドに貼り付けるわけですが、その前に少し表の見た目を整えましょう。

このセクションは単に見た目を整えるだけで、飛ばしてもシステム全体には何ら影響はありません。読まなくても自分でカスタマイズできる方や見た目に執着しない方は、「予定をスライドに貼り付ける」にお進みください。

日付の表示が長すぎるので、表示形式を変えましょう。開始日と終了日の B 列と C 列を選択してください。

画面上部の [表示形式] をクリックし、[数字] > [カスタム数値形式] の順にクリックしてください。

入力欄に MM/dd と入力し、[適用] をクリックしてください。

開始日と終了日の表示がすっきりしました。

次に、全体的に中央寄せにしましょう。これはただの好みです。A 列から E 列までを範囲選択したあと、Ctrl キーを押したまま F1 セルをクリックしてください。その状態で画面上部の [水平方向の配置] > [中央] の順でクリックしてください。

選択した箇所が中央寄せになりました。

最後に、残りの平日の日数が少なくなった予定に色を付けましょう。A2 セルから F11 セルまでを範囲選択してください。

その状態で画面上部の [表示形式] > [条件付き書式] の順でクリックしてください。

画面右端に出てきたはずの [条件付き書式設定ルール] 画面で以下のように設定してください。

項目	内容
範囲に適用	A2:F11
セルの書式設定の条件...	カスタム数式
値または数式	=$E2<6
書式設定のスタイル	（バケツのアイコンで好きな色を選択する）