WTF the terminal dashboard でターミナル上にGoogleカレンダーを表示する

## はじめに
[WTF the terminal dashboardでターミナル上にいろいろ表示する](https://qiita.com/revsystem/items/662fd831fcd1e232bf6a) で設定した`~/.config/wtf/confg.yml`にGoogleカレンダーモジュールを追加し、ターミナル上でスケジュール確認が行えるようにしてみました。

## 前提条件
- [WTF the terminal dashboardでターミナル上にいろいろ表示する](https://qiita.com/revsystem/items/662fd831fcd1e232bf6a) の設定が終わっていること。
- Googleカレンダーが利用できること
- Googleアカウントにログインしていること

## 参考情報
[GOOGLE CALENDAR](https://wtfutil.com/modules/google/gcal/) を参考にインストールします。

## Google Calendar API を有効にする
[Go Quickstart](https://developers.google.com/calendar/quickstart/go)のStep 1にある`ENABLE THE GOOGLE CALENDAR API`をクリックします。

![Screen Shot 2019-09-15 at 10.48.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61809/e7f671f0-0d72-ec0f-1a50-7a075206c1e6.png)

Google Calendar API が有効になり、認証情報が発行されます。表示されたウィンドウ内の`DOWNLOAD CLIENT CONFIGURATION`をクリックすると credentials.json がダウンロードされるので `"~/.config/wtf/gcal/credentials.json`に配置します。

![Screen_Shot_2019-09-15_at_12_08_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61809/31981984-1c6d-996c-d49d-5d49d89a9758.png)

~/.config/wtf/gcal/ はデフォルトでは存在しないので、配置前に作成しておきます。
gcalやcredentials.jsonは任意の名称をつけることが可能です。後述の config.yml で定義します。

```
mkdir ~/.config/wtf/gcal/
```

## config.ymlのカスタマイズ

今回追加する Google Calendar モジュールのみ抜粋したサンプルが以下のものです。
Googleアカウントや認証情報は以下の項目に設定します。

`email:` : Googleアカウントに紐付くメールアドレス
`secretFile:` : 認証情報を配置したパス

```yaml
    gcal:
      title: "📅 Calendar"
      colors:
        title: "white"
        description: "lightblue"
        highlights:
        - ['面談', 'green']
        - ['ランチ', 'yellow']
        past: "gray"
      calendarReadLevel: "reader"
      conflictIcon: "🚨"
      currentIcon: "💥"
      displayResponseStatus: true
      email: "test@example.com"
      enabled: true
      eventCount: 12
      multiCalendar: true
      position:
        top: 0
        left: 0
        height: 4
        width: 1
      refreshInterval: 300
      secretFile: "~/.config/wtf/gcal/credentials.json"
      showDeclined: true
      timezone: "Asia/Tokyo"
      withLocation: true
```

config.yaml 全体のサンプルが以下のものです。

```yaml

wtf:
  colors:
    border:
      focusable: darkslateblue
      focused: orange
      normal: gray
  grid:
    columns: [35, 35, 35]
    rows: [10, 10, 10, 10]
  refreshInterval: 1
  mods:
    clocks:
      colors:
        rows:
          even: "lightblue"
          odd: "white"
      enabled: true
      locations:
        UTC: "Etc/UTC"
        New York: "America/New_York"
        Amsterdam: "Europe/Amsterdam"
        Paris: "Europe/Paris"
        Tokyo: "Asia/Tokyo"
        Singapore: "Asia/Singapore"
      position:
        top: 0
        left: 1
        height: 1
        width: 1
      refreshInterval: 15
      sort: "alphabetical"
      title: "🕗 World Clocks"
      type: "clocks"
    feedreader:
      enabled: true
      feeds:
      - http://www.publickey1.jp/atom.xml
      feedLimit: 10
      position:
        top: 3
        left: 1
        height: 1
        width: 2
      title: "📰 News"
      updateInterval: 14400
    prettyweather:
      colors:
        name: "lightblue"
        value: "white"
      enabled: true
      position:
        top: 1
        left: 1
        height: 1
        width: 1
      title: "☀️ Weather"
      City: "Fukuoka" 
      refreshInterval: 150
    power:
      enabled: true
      position:
        top: 0
        left: 2
        height: 1
        width: 1
      refreshInterval: 15
      title: "⚡️"
    hackernews:
      enabled: true
      numberOfStories: 10
      storytype: top
      position:
        top: 2
        left: 1
        height: 1
        width: 2
      title: "🗞 HackerNews"
      refreshInterval: 300
    resourceusage:
      enabled: true
      position:
        top: 1
        left: 2
        height: 1
        width: 1
      title: "💻 Resouce"
      refreshInterval: 1
    todo:
      checkedIcon: "X"
      colors:
        checked: gray
        highlight:
          fore: "black"
          back: "orange"
      enabled: false
      filename: "todo.yml"
      position:
        top: 0
        left: 0
        height: 2
        width: 1
      title: "📋 ToDo"
      refreshInterval: 3600
    gcal:
      title: "📅 Calendar"
      colors:
        title: "white"
        description: "lightblue"
        highlights:
        - ['面談', 'green']
        - ['ランチ', 'yellow']
        past: "gray"
      calendarReadLevel: "reader"
      conflictIcon: "🚨"
      currentIcon: "💥"
      displayResponseStatus: true
      email: "test@example.com"
      enabled: true
      eventCount: 12
      multiCalendar: true
      position:
        top: 0
        left: 0
        height: 4
        width: 1
      refreshInterval: 300
      secretFile: "~/.config/wtf/gcal/credentials.json"
      showDeclined: true
      timezone: "Asia/Tokyo"
      withLocation: true
```

## authorization code の入力
`~/.config/wtf/confg.yml` を保存後、wtfutil を起動します。

表示されたURLにブラウザでアクセスし、authorization codeを取得します。
(以下のURLは適当にフィルタしています)

```
wtfutil
Go to the following link in your browser then type the authorization code:
https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id=xxxxxxxxxxxxx-yyyyyyyyyyyyyyyyyyyyyy.apps.googleusercontent.com&redirect_uri=urn%3Aietf%3Awg%3Aoauth%3A2.0%3Aoob&response_type=code&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcalendar.readonly&state=state-token (press 'return' before inserting the code)
```

URLにアクセスすると、Googleアカウントの選択画面が表示されます。今回、Googleカレンダーと紐付けるアカウントを選択します。
![Screen_Shot_2019-09-15_at_12_31_49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61809/60e01ce4-dd8e-d532-0f4d-cffe3b8fa844.png)

Google Calendar APIでカレンダー情報にアクセスすることを許可します。
![Screen_Shot_2019-09-15_at_12_32_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61809/d8fe0036-aa3c-5771-f359-3cfed796fb8d.png)

表示された authorization code をコピーし、さきほどURLが表示されたコンソールに貼り付けます。
貼り付ける前にEnterを押すことを忘れずに。

![Screen_Shot_2019-09-15_at_12_32_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61809/7562063a-c473-3912-bca0-9ee71adc0eaa.png)


## Google カレンダーを表示
このようにGoogleカレンダーが表示されます。特定のキーワードによって文字色を変えることもできます。
[GOOGLE CALENDAR](https://wtfutil.com/modules/google/gcal/) にあるドキュメントが参考になります。

![Screen_Shot_2019-09-15_at_12_51_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61809/b48e195b-c189-0dfa-b6bf-f6fcdfa02b9e.png)