【簡単設定】TrelloのデータをGitHubに自動的に連携する方法

Trelloでカードが登録されたらGitHubに追加する

Trelloでタスク管理を行っており、GitHubによる開発関連のプロジェクト進行を行っている場合などにおすすめのフローです。

TrelloとGitHubの連携フローを作ってみよう

それでは、さっそくTrelloとGitHubを連携したフローを作成してみましょう！
Yoomを使用して、ノーコードでTrelloとGitHubの連携を進めていきますので、まだYoomのアカウントをお持ちでない場合は、こちらのリンクからアカウントを発行しておきましょう。

[Yoomとは]

今回はTrelloカードのステータス更新に応じてGitHubのIssueをクローズするフローボットを作成していきます！
大きく分けて、以下の手順で作成していきます。

• TrelloとGitHubをマイアプリ連携
• テンプレートをコピーする
• Trelloのトリガー設定とGitHubのオペレーション設定
• トリガーをONにして、連携フローの動作確認をする

ステップ1：TrelloとGitHubをマイアプリ連携

TrelloとGitHubをYoomに接続するためのマイアプリ登録を行いましょう。
最初にマイアプリ登録を済ませておくと、自動化設定がスムーズに進められます。

連携前に、Trelloにカードを作成しておきましょう！
※今回は、以下画像のように作成しました。

1.Yoomページ画面左側のマイアプリをクリックし、「新規接続」を選択します。
右上の検索窓に「Trello」と入力し、検索結果からTrelloのアイコンを選択します。

2.表示された画面で、必須項目を入力し、「追加」をクリックしてください。
※Trelloのマイアプリ登録方法は、こちらを参照してください。

3.続いてGitHubをマイアプリ登録します。
先ほどと同様の手順で、GitHubを検索します。
表示された画面で、メールアドレスとパスワードを入力し、「サインイン」をクリックしてください。

次の画面で、検証コードを入力し、「確認する」をクリックしてください。

マイアプリにTrelloとGitHubが表示されていれば、登録完了です。

ステップ2：テンプレートをコピーする

ここから、フローを作っていきましょう！
テンプレートを利用するので、以下のテンプレートページを開き、『このテンプレートを試してみる』をクリックしてください。

ワークスペースに自動的にテンプレートがコピーされます。次に表示された画面で「OK」をクリックしてください。

ステップ3：Trelloのトリガー設定

※以下の画面は、Yoomページ画面左側「マイプロジェクト」のフローボットで表示される、「【コピー】Trelloカードのステータス更新に応じてGitHubのIssueをクローズする」をクリックすると表示されます。

1.先ほどの画面で「OK」をクリックして、表示された画面のアプリトリガー「カード情報が更新されたら（Webhook）」をクリックしてください。

2.表示された画面で各項目を確認します。トリガーアクションはそのままにして、「次へ」をクリックしましょう。

3.「APIキー」「APIトークン」「ユーザー名」は、入力欄下の説明に従って、入力してください。

「ボードID」は、入力欄をクリックして表示される候補から選択してください。
入力を終えたら、「次へ」をクリックしてください。

5.表示された画面で、Trelloの画面に戻ります。作成したカードの情報を更新し、Webhookのトリガーを起動させます。

カード情報を更新させたら、Yoomの画面に戻り「テスト」を実行し、成功したら「保存する」をクリックします。
※表示されているアウトプットは、次の設定でも活用できます。

ステップ4：分岐の設定

1.分岐「コマンドオペレーション」をクリックしてください。
※「分岐する」オペレーションは、ミニプラン以上でご利用いただけます。フリープランで利用するとエラーになってしまうのでご注意ください。
ミニプランなどの有料プランは2週間の無料トライアルが可能です。無料トライアル中なら、普段制限されているアプリや機能も自由にお試しいただけますので、ぜひ活用してみてください。

オペレーションに「カード情報が更新されたら(Webhook)」、アウトプットに検知したい項目を設定します。
「分岐条件」は、分岐先の処理を行う条件を設定します。

今回は「テスト」というワードの有無により分岐する設定にするため、以下画像のように設定しています。
ワードは自由に設定できるので、任意で設定しましょう。

設定を終えたら、「保存する」をクリックしてください。

ステップ5：GitHubの設定

1.アプリと連携する「Issueを更新」をクリックしてください。

各項目を確認し、「次へ」をクリックします。

2.API接続設定を行います。
「リポジトリの所有者」は、入力欄下の説明に従って、入力してください。

「リポジトリ名」は、GitHubのIssuesタブのURLから入力してください。

※リポジトリ名は、以下画像の赤枠部分を入力してください。

「Issue番号」は、クローズしたいIssueの番号を入力してください。

「タイトル」「内容」は、入力欄をクリックして表示される候補から選択できます。
任意で設定できますが、変更したくない場合は必ず空欄で設定してください。

「状態」は、必ず「closed」にしてください。

入力を終えたら「テスト」を実行し、成功したら「保存する」をクリックします。

ステップ6：トリガーボタンをONにして、連携フローの動作確認をする

以下の画面の赤枠部分「トリガーをON」ボタンをクリックすると、フローボットが自動的に起動します。

※設定が完了すると、以下画像のようにIssueがクローズされます。

GitHubのデータをTrelloに連携したい場合 

今回はTrelloからGitHubへデータを連携する方法をご紹介しましたが、逆にGitHubからTrelloへのデータ連携を実施したい場合は、下記のテンプレートも併せてご利用ください。

GitHubでIssueが作成されたらTrelloに追加する

GitHubのIssueを活用してタスクを管理しており、Trelloでカードを作成してタスク管理を行っている場合などにおすすめのフローです。

GitHubでPull Requestが作成されたらTrelloにカードを作成する

GitHubとTrelloを併用してプロジェクト管理を行っており、プルリクエストの管理を効率化し、タスクを可視化したい場合などにおすすめのフローです。

Trello‍やGitHubのAPIを使ったその他の自動化例

TrelloやGitHubのAPIを使用してさまざまな業務を自動化することが可能です。​
もし気になるものがあればぜひこちらも試してみてください！

Trelloを使った自動化例

Trelloのカード情報を通知したり、データベースに追加したりできます。
メールの問い合わせ情報をDeepLで翻訳してTrelloにカードの追加が可能です。

GitHubを使った自動化例

GitHubのIssueを通知したり、データベースに追加したりできます。
SalesforceのToDoオブジェクトをGitHubに反映可能です。

終わりに

TrelloとGitHubを連携することで、毎日のタスク管理の効率化が期待できます。
特に、Trelloのカード更新をトリガーにGitHubのIssueをクローズしたり、新規カードをGitHubに追加したりできます。
これにより、<span class="mark-yellow">GitHubの更新漏れを防ぎ、正確に作業を進められるでしょう。</span>
また、GitHubのIssue作成をトリガーに、Trelloにも自動反映できるため、タスク管理がスムーズになります。
「導入を検討したい！」「実際に操作してみたい！」という方は、こちらから無料アカウントを作成してみてください。

登録はたったの30秒で完了するので、業務の間にササッと登録できます！
自動化の設定もあまり時間はかからないので、この機会に導入してみてくださいね！