概要

カレンダーシェアアプリのTimeTreeのAPIが2020年1月23日に公開されました。
本記事では、Vue.jsからTimeTreeのAPIを呼び出して、予定表を出力する所までのサンプルのソースコードを公開します。

事前準備

TimeTreeの開発者向けサイトを参考にして以下の手順を実施してください。
- 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))
    }
})

【Vue.js】TimeTreeの予定表をAPIで取得して出力する

概要

事前準備

APIの仕様を確認し、Postmanで動作確認を行います

実装を開始します。

完成したソースコード

出力結果