Analog Studio

カレンダー共有アプリ「TimeTree」のAPIを使おう！～カレンダー情報取得編～

概要

1500万人のユーザが利用するカレンダー共有アプリの「TimeTree」が外部サービスとの連携の為に API をリリースしました。(2019年5月30日)
そこで、そんなできたての API を使ってみましたので使い方を PHP や Javascript によるサンプルを使って解説します。

TimeTree API は、2023年12月22日をもって終了しました。本記事の内容はすでに利用できません。
https://timetreeapp.com/intl/ja/newsroom/2023-12-14/connect-app-api-202312

今回は第2弾ということでアクセス可能なカレンダー情報の一覧を取得する方法をまとめます。
予定の登録や編集は次回まとめます。

TimeTree の概要については前回記事をご参照下さい。

カレンダー情報一覧を取得する

では、さっそくカレンダー情報を取得していきましょう。
今回は Javascript の非同期通信 (XHR) で取得していきます。
カレンダー情報を一般に公開して使用することはないと思いますので後処理を考えて手軽に Javascript を使います。
※アクセストークンが見えてしまいますが、主に予約を登録するカレンダーを選択するなど管理画面で使われると想定しています。

もちろん、アクセストークン同様に PHP で取得しても良いです。
やり方は cURL か file_get_contents() 関数などで取得できます。

// TimeTreeのアクセス可能なカレンダー一覧を取得する const timetreeGetCalendars = function(){ const token = "取得したアクセストークン"; const XHR = new XMLHttpRequest(); XHR.timeout = 10 * 1000; XHR.open("GET", "https://timetreeapis.com/calendars?include=labels,members", true); XHR.setRequestHeader("Accept", "application/vnd.timetree.v1+json"); XHR.setRequestHeader("Content-Type", "application/json"); XHR.setRequestHeader("Authorization", "Bearer " + token); XHR.send(); XHR.onload = function(){ const result = XHR.responseText; console.log(result); const resultData = JSON.parse(result); console.log(resultData); // 以下必要な処理を実行 // resultDataに各種情報が配列で格納される }; };

上記を実行し、正常に応答を受け取ることができれば以下のようなデータが取得できます。

// 引用：https://developers.timetreeapp.com/ja/docs/api/#get-calendars { "data": [ { "id": "1234", "type": "calendar", "attributes": { "name": "Some Calendar1", "description": "Calendar description", "color": "#2ecc87", "image_url": "https://attachments.timetreeapp.com/path/to/image.png", "created_at": "2019-04-01T12:34:56.000Z" }, "relationships": { "labels": { "data": [ { "id": "1234,1", "type": "label" }, // ... { "id": "1234,10", "type": "label" } ] }, "members": { "data": [ { "id": "1234,12345", "type": "user" }, { "id": "1234,23456", "type": "user" } ] } } }, { "id": "5678", "type": "calendar", "attributes": { "name": "Some Calendar2", "description": "Calendar description", "color": "#2ecc87", "image_url": "https://attachments.timetreeapp.com/path/to/image.png", "created_at": "2019-04-01T12:34:56.000Z" }, "relationships": { // ... } } ], "included": [ { "id": "1234,1", "type": "label", "attributes": { "name": "label title(empty if default)", "color": "#2ecc87" } }, // ... { "id": "1234,12345", "type": "user", "attributes": { "name": "User1", "description": "blah blah blah", "image_url": "https://attachments.timetreeapp.com/path/to/image.png" } }, // ... ] }

カレンダー情報の取得はこれだけです。簡単ですね。

古いブラウザを考慮する場合は注意が必要！

このページを見てくれている方は上記サンプルで問題なく取得できたと思います。
しかし、中にはかなり古いブラウザを未だに使っている人も少なからず残っています。

そういった古いブラウザ－具体的には IE7 以前の10年以上前のブラウザ－ではクロスドメイン (自分のサイト以外) での XHR ができません。
このようなブラウザを考慮しなければならない状況では一旦 PHP などのサーバサイド言語で取得する必要があります。
※ IE8+ の場合は "MLHttpRequest" ではなく "XDomainRequest" を使う必要があります。

詳しい情報は「XHR Level2」などで検索してみて下さい。

まとめ

以上、カレンダー情報の取得方法でした。
前回のアクセストークンに比べるとかなり簡潔で分かりやすいですね。

次回はアクセス可能なカレンダーに予定を追加したり編集したりします。
API の説明が終わったら実際にアプリケーションに組み込む場合のサンプルも紹介します。