概要
カレンダーシェアアプリのTimeTreeのAPIが2020年1月23日に公開されました。
本記事では、Vue.jsからTimeTreeのAPIを呼び出して、予定表を出力する所までのサンプルのソースコードを公開します。
事前準備
-
TimeTreeの開発者向けサイトを参考にして以下の手順を実施してください。
-
パーソナルアクセストークンは大事に控えておいてください。
-
TimeTreeで任意の予定を登録します。
APIの仕様を確認し、Postmanで動作確認を行います
-
今回は、TimeTreeのAPIのGET /calendars/:calendar_id/upcoming_eventsを使用して、当日以降のカレンダーの予定情報を取得します。
-
API仕様は以下となっています。
-
上記の仕様の通り、calendar_idが必要ですので、PostmanでGET /calendarsでAPIを実行して、取得します。
-
設定値
- HTTPメソッド："GET"
- URI："https：//timetreeapis.com/calendars"
- パラメータキー include：labels,members
- Headersキー Authorization："Bearer (事前準備で取得したパーソナルアクセストークン)"
- レスポンスボディより、カレンダーIDを把握、控えておきます。この例では、赤枠で囲った値"aBcDeFgHiJkL1"となっています。
- カレンダーIDが判明したので、本命のAPIのGET /calendars/:calendar_id/upcoming_eventsを同じようにPostmanで実行してみたいと思います。
- 設定値
-
HTTPメソッド："GET"
-
URI："https://timetreeapis.com/calendars/(上記で取得したカレンダーID)/upcoming_events"
-
Headersキー Authorization："Bearer (事前準備で取得したパーソナルアクセストークン)"
-
- 正しく、TimeTreeの予定表を取得できているようです。
実装を開始します。
- APIを呼び出すので、axiosを使用します。
- axiosを使用するに当たり、本記事ではCDNでscriptタグを定義しました。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- jsファイルの定義では、mounted にてAPIの呼び出しを定義しました。URI、ヘッダリクエストについては、上述のPostmanで動作確認した値と同じものとなります。
mounted: function () {
axios.get("https://timetreeapis.com/calendars/(Postmanで取得したカレンダーID)/upcoming_events",
{ headers: {'Authorization': 'Bearer (事前準備で取得したパーソナルアクセストークン)'} }).then(response => (this.items = response.data.data))
}
- APIで取得した予定表は、以下のようにしてtableタグで出力しています。
- moment とあるのは、日付フォーマットライブラリのMomentを使っている為です。こちら様の記事が参考になると思います。
<table class="table">
<tr>
<th>タイトル</th><th>開始</th><th>終了</th>
</tr>
<tr v-for="item in items" >
<td>{{ item.attributes.title }}</td>
<td>{{ item.attributes.start_at | moment }}</td>
<td>{{ item.attributes.end_at | moment }}</td>
</tr>
</table>
完成したソースコード
- 以下公開します。
- 見栄えの為、Bootstrap4を使用しています。
index.html
<html lang='ja'>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script type="text/javascript" src="app.js" defer></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-header">
<span>予定表</span>
</div>
<div id="app" class="card-body">
<table class="table">
<tr>
<th>タイトル</th><th>開始</th><th>終了</th>
</tr>
<tr v-for="item in items" >
<td>{{ item.attributes.title }}</td>
<td>{{ item.attributes.start_at | moment }}</td>
<td>{{ item.attributes.end_at | moment }}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
app.js
var app = new Vue({
el: '#app',
filters: {
moment: function (date) {
return moment(date).format('YYYY/MM/DD HH:mm');
}
},
data: {
items:[],
},
mounted: function () {
axios.get("https://timetreeapis.com/calendars/(Postmanで取得したカレンダーID)/upcoming_events",
{ headers: {'Authorization': 'Bearer (事前準備で取得したパーソナルアクセストークン)'} }).then(response => (this.items = response.data.data))
}
})
出力結果
