BLOG【Trello API, PHP】TrelloのAPIを使ってカレンダーを作ってみた

みなこ
  1. HOME
  2. ブログ
  3. バックエンド
  4. 【Trello API, PHP】TrelloのAPIを使ってカレンダーを作ってみた

目次

  1. ✏️ 概要
  2. 💼 準備をする
    1. 開発者向けAPIキーの取得
    2. トークンの取得
  3. 🔨 APIを実際に叩いてみる
  4. 📅 コードを書いてみる
    1. 完成版コード
    2. コードの解説
  5. 🎉 実際にコードを動かしてみよう

✏️ 概要

Trelloをカレンダー化するプラグイン(https://doctype.jp/blog/frontend/80/)を作ったら、カレンダーのリストを作成するのも自動化したくなったので、今回はPHPを用いてTrelloのAPIを叩いてカレンダーを生成してみます。

こんな感じでポンポンポーンって生成されます。わーい!

💼 準備をする

開発者向けAPIキーの取得

まずは以下のURLにアクセスして 開発者向けAPIキー を取得します

https://trello.com/1/appKey/generate

トークンの取得

次に書き込みと読み込み権限のあるトークンを取得します。

以下のリンクにアクセスをして許可をクリックして次に進みます

https://trello.com/1/authorize?key={1で取得したキー}&name=&expiration=never&response_type=token&scope=read,write

すると、以下のようにトークンを取得することが出来ます。

準備は以上で完了です📣

🔨 APIを実際に叩いてみる

カレンダーを生成するコードを書く前にまずは実際にTrelloのAPIを叩いてみましょう!まずは、ボードの取得をしてみます。

{ユーザーネーム}・{取得したキー}・{取得したトークン} を自分のものに書き換えてターミナルなどで叩いてみてみましょう🔨

$ curl "https://trello.com/1/members/{ユーザーネーム}/boards?key={取得したキー}&token={取得したトークン}&fields=name"

以下のようなjsonが返ってくれば上手くいってます。

・・・(略)
{"name":"xxxxx","id":"xxxxx"},
・・・(略)

準備の時に取得した キー や トークン が使えてる事が確認できました🙆‍♀️

次のステップで実際にカレンダーを生成するスクリプトをphpで書いてみましょう!やったー。

📅 コードを書いてみる

やっと本題です…w

今回は特定のボードを指定してリストとしてカレンダーを生成するスクリプトを書いてみます。まずは完成版のコードを見てみましょう!解説は後述します。

任意の場所にファイルを作成して以下のコードを記述します。

完成版コード

<?php

// 固定値
$key = '{取得したキー}';
$token = '{取得したトークン}';

// ____ 1:ボード情報の取得 ____
$bords_url = 'https://trello.com/1/members/{ユーザーネーム}/boards?key=' . $key . '&token=' . $token . '&fields=name';

// cURLセッションを初期化
$ch = curl_init();

//オプション
curl_setopt($ch, CURLOPT_URL, $bords_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// URLの情報を取得
$bord_list =  curl_exec($ch);

// 取得結果を表示
echo json_encode(json_decode($bord_list), JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

// セッションを終了
curl_close($ch);

// ____ 2:カレンダーを生成するボードを選択(ボードを間違えるとめんどくさいから標準入力から都度受け取る事にした) ____
echo 'カレンダーを生成したいボードのIDはどれですか: ';
$bord_id = trim(fgets(STDIN));

// ____ 3:カレンダー情報の生成 ____
// 1ヶ月分の日付の取得
$period_object = new DatePeriod(
    // 来月の月始まりだよと宣言
    new DateTime('first day of +1 month'),
    // 1日毎の日付データを取得
    new DateInterval('P1D'),
    // 2ヶ月後までの日付を取得(2ヶ月後の表示はされない)
    new DateTime('first day of +2 month')
);

// 曜日を日本語に変換するための要素
$week = ['日', '月', '火', '水', '木', '金', '土'];

// 1ヶ月分の日付を配列に格納(reverseさせたいので一旦ここで配列にした)
$period_map = [];
foreach ($period_object as $day) {
    $period_map[] = $day->format('m/d') . '(' . $week[$day->format('w')] . ')';
}

// POSTされる時に最終日からPOSTして欲しいのでreverse
$period_post_data = array_reverse($period_map);

// ____ 4:POST用データ作成, POST ____
// POSTするURL
$url = 'https://trello.com/1/lists';

foreach ($period_post_data as $date_name) {
    $post_data = [
        'key'     => $key,
        'token'   => $token,
        'name'    => $date_name,
        'idBoard' => $bord_id
    ];

    // cURLセッションを初期化
    $ch = curl_init();

    // オプションを設定
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
    curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);

    // URLの情報を取得
    $response =  curl_exec($ch);

    // 取得結果を表示
    echo json_encode(json_decode($response), JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

    // セッションを終了
    curl_close($ch);
}

コードの解説

固定値

// 固定値
 $key = '{取得したキー}';
 $token = '{取得したトークン}';

後ほどのコードで使いやすくする為に、各自で取得したキーとトークンを変数に入れおきましょう

ボード情報の取得

// ____ 1:ボード情報の取得 ____
$bords_url = 'https://trello.com/1/members/{ユーザーネーム}/boards?key=' . $key . '&token=' . $token . '&fields=name';

// cURLセッションを初期化
$ch = curl_init();

//オプション
curl_setopt($ch, CURLOPT_URL, $bords_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// ボードの情報を取得
$bord_list =  curl_exec($ch);

// 取得結果を表示
echo json_encode(json_decode($bord_list), JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

// セッションを終了
curl_close($ch);

先ほどターミナルで叩いたのと同じようにcurlを使用してAPIを叩きます🔨 こちらのステップではボードの一覧を取得し表示させています。

カレンダーを生成するボードを選択

// ____ 2:カレンダーを生成するボードを選択(ボードを間違えるとめんどくさいから標準入力から都度受け取る事にした) ____
echo 'カレンダーを生成したいボードIDはどれですか: ';
$bord_id = trim(fgets(STDIN));

コードの中にボードのIDを組み込んでもいいですが、変更漏れがあったり間違えたりした際に 容赦無くリストが生成されて後から削除するのが面倒くさいので、ボードのIDを実行する度に都度標準入力から受け取るようにしました。

カレンダー情報の生成

// ____ 3:カレンダー情報の生成 ____
// 1ヶ月分の日付の取得
$period_object = new DatePeriod(
    // 来月の月始まりだよと宣言
    new DateTime('first day of +1 month'),
    // 1日毎の日付データを取得
    new DateInterval('P1D'),
    // 2ヶ月後までの日付を取得(2ヶ月後の表示はされない)
    new DateTime('first day of +2 month')
);

// 曜日を日本語に変換するための要素
$week = ['日', '月', '火', '水', '木', '金', '土'];

// 1ヶ月分の日付を配列に格納(reverseさせたいので一旦ここで配列にした)
$period_map = [];
foreach ($period_object as $day) {
    $period_map[] = $day->format('m/d') . '(' . $week[$day->format('w')] . ')';
}

// POSTされる時に最終日からPOSTして欲しいのでreverse
$period_post_data = array_reverse($period_map);

DatePeriod()を使用して日付のデータを配列に格納します。第一引数に 取得したい日付けデータの開始日、第二引数に日付の間隔、第三引数に取得したい日付けデータの終了日を指定します。

DatePeriod()で生成されたオブジェクトの曜日の部分は[0-6]の数値で返ってくる為、整形をする処理の中で 日本語表記に変換します。

また、最終的に月の最終日からPOSTしたいのでreverseします。

POST用データ作成とPOST

// ____ 4:POST用データ作成, POST ____
// POSTするURL
$url = 'https://trello.com/1/lists';

foreach ($period_post_data as $date_name) {
    $post_data = [
        'key'     => $key,
        'token'   => $token,
        'name'    => $date_name,
        'idBoard' => $bord_id
    ];

    // cURLセッションを初期化
    $ch = curl_init();

    // オプションを設定
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
    curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);

    // URLの情報を取得
    $response =  curl_exec($ch);

    // 取得結果を表示
    echo json_encode(json_decode($response), JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

    // セッションを終了
    curl_close($ch);
}

配列に入っている日付データを順にPOSTしています。1つ前のSTEPで配列をreverseさせているので 月の最終日から順にPOSTされ、最終的には月の頭から始まるカレンダーが完成します💫

🎉 実際にコードを動かしてみよう

それでは実際に先ほどのコードを動かしてみましょう。

先ほど作成したファイルをターミナルなどで実行してみましょう。

php {作成したファイルの名前}.php

すると自分のアカウントのボード一覧が返されるのでカレンダーを生成したいボードのIDを入力しましょう。

[
    {
        "name": "ボード1",
        "id": "hogehoge"
    },
    {
        "name": "ボード2",
        "id": "hogehoge"
    },
    {
        "name": "ボード3",
        "id": "hogehoge"
    }
]
カレンダーを生成したいボードのIDはどれですか: {ここでIDを入力する}

Enterを押して以下のようにカレンダーが生成されたら成功です🎉

お疲れ様でした✨