Touch Barにタスク管理ツールのタスクを自動表示させる【PHP×GoogleCalendarAPI】

最近MacBookAir13インチを卒業し、MacBookPro16インチを購入したのですが、こいつはすごいですね。

TouchBarとかいう近未来的なディスプレイ（`壮大なおもちゃ`）がついています。

ここにスクリプトを書いて何か面白いことしたい（**有効活用したい**）と誰しも一度は思うのではないでしょうか。

私はこの記事以前に`「YouTubeの登録者数と再生数を表示させたい！」`と以前考え実装したのですが、

![IMG_7235 (1).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/24a1dd89-e44e-b512-7f86-88b997363293.jpeg)

これだけでは満足できず、今度は

`今現在時刻のタスクを表示させたい！！`と考えました。

## 本記事のゴール

`タスク管理ツールに予定を入れたら、あとはTouchBarに自動で現在時刻のタスクが出てくる`

## 完成像

こんな感じになりました。

<img width="500" alt="スクリーンショット 2020-05-20 17.36.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/6e8bd893-851c-1ada-1d31-483ec3ba21ad.png">


![IMG_7252.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/bf8f9e00-ddc5-b0b0-07dc-85d8e7337e0e.jpeg)

高度な生産性はシングルタスクができるかにかかっています。

マルチタスクになって何も為せない日々が続いていませんか？

**タスクを１つだけ表示させることで、目の前の作業に集中できるのです。**

## 仕様紹介

今回タスク管理ツールには、APIが充実している`Googleカレンダー`を採用しました。

### 基本的な流れ

- まずはGoogleカレンダーにタスク登録
- 次にGoogleCalendarAPIに登録し、PHPでイベント取得
- Better Touch Toolでphpコマンドで発火

という手順を踏みます。

## 前提条件、環境

OS:macOS Catalina
バージョン：PHP 7.3.12
Composer1.9.0
Better Touch Tool導入済

## ①下準備

まずはGoogleCalendarAPI及びサービスアカウントとの紐付け、権限周りを以下の記事で行ってください。
>[Google Calendar API と PHP で 予定の取得と追加をしてみるよ（準備編）](https://liginc.co.jp/472637)

ついでにまだカレンダーで予定作ってない方は予定を組んでおいてください。
## ②Composerで必要なものをインストール

>A PHP client library for accessing Google APIs
https://github.com/googleapis/google-api-php-client

githubより.zip形式でダウンロードしインストールもできますが、今回はcomposerでインストールします。
composerない方はgithubよりダウンロードもOKですが、composer便利なのでこの機会に導入しましょう。

>[Composerをインストールしてみた](https://qiita.com/kakijin/items/02364adacf36410f449e)

cdコマンドで作業ディレクトリに移動したのちに（今回はcalendarディレクトリとしました。どこに作成してもいいです。）
composerコマンドを実行します。

```
$ composer require google/apiclient:^2.0
```

いろいろなファイルが作成され以下のようなディレクトリになります。

>calendar/
　├ comoser.json（composerで自動作成される）
　├ composer.lock（自動作成）
　├ Googleサービスアカウント秘密鍵.json（下準備時にDLしてるはず）
　├ vendor/
　│　　　└ outoload.php他（自動作成）
　└ calendar.php（今回の処理書く作業ファイル、まだ空でいい）

**サービスアカウント作成時にできた秘密鍵のjsonをここに移動させ、calendar.phpは空でいいので作成しておいてください。**

![スクリーンショット 2020-05-20 17.58.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/6a78557a-1072-8902-894f-06e441c212d9.png)
![スクリーンショット 2020-05-20 17.58.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/fa2f12a1-0769-acc2-26e1-2571cd66dc4f.png)


## ③PHPでデータ取得、表示

先ほど作成したcalendar.phpに記述します。

```php

<?php

// composerでインストールしたライブラリを読み込む
require_once __DIR__ . '/vendor/autoload.php';

// サービスアカウント作成時にダウンロードしたjsonファイル
$aimJsonPath = __DIR__ . '/あなたの秘密鍵.json';

// サービスオブジェクトを作成
$client = new Google_Client();

// アプリケーション名
$client->setApplicationName('Touch Bar Display ToDos');

// 予定を取得するだけなので、Google_Service_Calendar::CALENDAR_READONLY
$client->setScopes(Google_Service_Calendar::CALENDAR_READONLY);

// ユーザーアカウントのjsonを指定
$client->setAuthConfig($aimJsonPath);

// サービスオブジェクトの用意
$service = new Google_Service_Calendar($client);

// カレンダーIDは後述
$calendarId = 'xxxxxxxxxxxxxxxxx';
// 開始日時
$start = date('c');
// 終了日時（1分後）
$end = date('c', strtotime("+1 minute"));
// 取得時の詳細設定 $startから1分後を$endとすることで、取得範囲を現在時刻のようにしている
$option = [
  'timeMin' => $start,
  'timeMax' => $end,
  'singleEvents' => 'true'
];
// データの取得
$response = $service->events->listEvents($calendarId, $option);
$events = $response->getItems();

$results = [];
if (!empty($events)) {
  foreach ($events as $event) {

    $start = new DateTime($event->start->dateTime);
    $end = new DateTime($event->end->dateTime);
    $results = [
      'start' => $start->format('H:i'),
      'end' => $end->format('H:i'),
      'title' => (string) $event->summary
    ];
  }
  echo $results['start'] . "〜";
  echo $results['end'] . "\n";
  echo $results['title'];
} else {
//カレンダーにタスクがない場合のメッセージ。自由に改変してください。
  echo 'no task';
}

```

optionはリファレンス参照してみてください。

>[Google Calendar API REST Reference](https://developers.google.com/calendar/v3/reference/events/list)

### カレンダーIDはどこから？

カレンダー左の「設定と共有」から

<img width="420" alt="スクリーンショット 2020-05-20 17.19.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/97959839-19fa-9af6-9b06-c8dbe8445c8f.png">

<img width="305" alt="スクリーンショット 2020-05-20 17.26.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/3737f365-a574-a951-c9a7-356c97dca9c9.png">

「カレンダーの統合」を見つければIDがわかります。

### Better Touch Toolはechoしたものをretutnして表示できる

最後に取得した値を`echo`しているのは、Better Touch Toolが取得できるようにするためです。

## ④Better Touch Toolから発火させる

まずはBetter Touch Toolを開き、以下の画面のように追加します。

<img width="500" alt="スクリーンショット 2020-05-20 17.49.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/74e8dd04-2818-22c3-0284-f815a58240bb.png">
そしたら右側にこのような画面が出てきます。

<img width="300" alt="スクリーンショット 2020-05-20 17.53.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/fadf4305-d6b2-05d6-361d-e58630c17d00.png">

ここからphpファイルを実行していきます。

手順としては
>①cdコマンドでphp実行ファイルが入っているディレクトリまで移動して、
>②phpコマンドを叩きphpファイルを実行する

でいけます。

デスクトップにディレクトリを作られられた方はこんなコードになるかなと(`return do shell scriptは必ず必要になります`)

```
return do shell script "cd /Users/ここは人によって違う名前/Desktop/calendar/ ; php calendar.php"
```

<img width="303" alt="スクリーンショット 2020-05-20 18.20.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/738aa0d0-f513-7bf5-42ce-5c0b0349c8a0.png">

その後`スクリプトを実行`を押し、画像のように`スクリプト結果`にタスクが出力されたら、完了になります。

同時に`各スクリプトの実行タイミング`がデフォルトでは`5seconds`となっており、これではすぐにAPIアクセス制限がかかるので、300secondsあたりに変更しておきます（ただ数分タスク更新がズレるので値はお好みで）

これにてtouch Barに表示されているはずです。

このままだと文字サイズが大きいのでptをいじり調整。

<img width="310" alt="スクリーンショット 2020-05-20 20.44.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/dafcbbd4-022f-a317-2687-5445f31a2a1a.png">


![IMG_7252.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/6cac1609-6a31-cafc-e1bf-ccdbff9df78f.jpeg)


`表示できたら、脱マルチタスクへの第一歩だ`

**おまけ**
<img width="394" alt="スクリーンショット 2020-05-21 20.11.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/4ae0eba5-3234-167b-3fe6-87caa4e6c5d1.png">

![IMG_7260.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/e2dac9e8-1b93-59ab-5254-0e85bb6a7d39.jpeg)

*タスクがない場合はelse部分のメッセージが表示されます。*