Integromatを使って、Bitbucket で発生した課題やプルリクからTrelloのカードを作る



Integromat について日本語による情報が乏しい現状のようなので、
こないだ把握した掲題のセッティング方法をWebへ共有しておきたいと思います。

Integromat がいったい何をする者なのか知りたければ、下記の記事が参考になると思います。

■前提

本記事は次の準備を終えていることを前提とした内容となっています。
  1. Bitbucket に自分のアカウントを持ち、任意のリポジトリを作成済みで、そのリポジトリの設定で「課題管理」を有効化済みである。
  2. Trello に自分のアカウントを持ち、任意の board に任意の list を作成済みである。
  3. Integromat に自分のアカウントを持っている。

■本記事のストーリー

  1. 「bitbucket課題からTrelloカード作成」
    • cron のような定期実行のシナリオ作成の手順を記述します。
  2. 「bitbucketプルリクからTrelloカード作成」
    • プルリク生成時にIntegromatのwebhookモジュールをBitbucket側からキックするように設定し、その際にBitbucketからPOSTされたJSONデータを使ってTrelloカードの内容が作成されるシナリオの作成手順を記述します。

【Story-1. 定期実行型シナリオ: Bitbucket で発生した課題からTrelloのカードを作る】


ここでは、「Bitbacketのとあるリポジトリにて、新たに登録された課題があるかどうかを２時間おきにチェックし、あれば該当する課題それぞれをTrello側の指定boardの指定listへカードとして作成する」というシナリオを、Integromatへ作成する手順を記述します。

  1. Integromat にログインし、画面左側メニューから Scenarios をクリック
  2. Scenarios画面内の「+ Create a new scenario」ボタンをクリックする
  3. 対象サービスが一覧されている画面にて、課題(issue)の発生源である「Bitbucket」を選択し、「Continue >」ボタンをクリック
  4. シナリオ作成画面にて、画面中央に鎮座する大きな「？」アイコンをクリックしてBitbucketモジュールを選択し、TRIGGERSセクション内にある「Watch issues」を選択する
  5. Bitbucketモジュールの設定画面にて、次の操作を行う
    1. Connection欄の「Add」ボタンから自身のアクセス権のあるBitbucketリポジトリと接続する
    2. Repository欄にて任意のリポジトリを選択する
    3. Watch欄にて「Only new issues」を選択する。
    4. 「OK」ボタンをクリックする
    5. シナリオ処理の開始対象となるissueの条件を選択する（よくわからなかったら「All issues」でいいんじゃないかな）
  6. 画面下部の「+」(Add)アイコンからモジュール選択のリストを表示し、「Trello」を選択する
    1. Actionセクション内にある「Create a card」を選択する
    2. 画面上に生成されたTrellモジュールのアイコンと元々あったBitbucketモジュールのアイコンとを、BitbucketモジュールをStartとして繋げる。
    3. Trelloモジュールのアイコンをクリックする
    4. Connection欄の「Add」ボタンから自身のアクセス権のあるTrelloアカウントと接続する
    5. Enter a list ID欄にて「Select」を選択し、Board欄にて任意のボードを選択し、List欄にて任意のリストを選択する。
    6. Name欄にフォーカスを当てて、Bitbucketのissueオブジェクトの持つキー一覧の中から適当に組み合わせてカードのNameを作成する
    7. Description欄にフォーカスを当て、Bitbucketのissueオブジェクトの持つキー一覧の中から適当に組み合わせてカードの詳細説明文を作成する。
    8. 「OK」ボタンをクリックする
  7. 画面下部のCONTROLS欄からSaveアイコンをクリック
  8. Run scenario欄にて「At regular intervals」を選択し、Interval欄にて「120」(秒)を入力し、「OK」ボタンをクリックする
  9. 画面下部のSCHEDULING の「ON/OFF」スイッチをクリック
  10. あとは定期実行を待つだけだが、シナリオ編集画面下部にある「[▷] Run once」アイコンから当該シナリオの即時実行が出来ます。

【Story-2. 発生時webhook起動型シナリオ: Bitbucket でプルリク生成を契機にTrelloのカードを作る】


ここでは、「Bitbacketのとあるリポジトリにて、プルリクエストが生成されたらその内容を元にTrello側の指定boardの指定listへカードを作成する」というシナリオを、Integromatへ作成する手順を記述します。

  1. Integromat にログインし、画面左側メニューから Scenarios をクリック
  2. Scenarios画面内の「+ Create a new scenario」ボタンをクリックする
  3. 対象サービスが一覧されている画面にて「Webhooks」を選択し、「Continue >」ボタンをクリック
  4. シナリオ作成画面にて、画面中央に鎮座する大きな「？」アイコンをクリックしてWebhooksモジュールを選択し、TRIGGERSセクション内にある「Custom webhook」を選択する
  5. Webhooksモジュールの設定画面にて、次の操作を行う
    1. 「Add」ボタンから開くウィンドウにて任意のhook名をつけ、「OK」ボタンでウィンドウを閉じる。(IP restrictions はひとまず指定しなくても良い)
    2. この時点でWebhooksのモジュール設定画面は次の状態となる
      • 当該WebhookのURLが表示される
      • このURLを控えておくこと(この後のBitbucket側のwebhook追加画面の入力内容に使用する)
      • また、 [Stop]のボタン表示は今回の場合、次の項での設定による「Bitbucket側からプルリク発生時に Integromat の Webhook へPOSTされるデータ」を解析するために「POSTリクエスト受信待ち」のということです。
  6. Bitbucket にログインし、任意のリポジトリにて次の操作を行う
    1. リポジトリ内メニューより「設定」をクリック
    2. 設定メニューより「Webhooks」をクリックし、Webhooksコンテンツから「Add webhook」ボタンをクリック
    3. webhook追加画面にて、次の操作を行う
      1. Title: 任意のタイトルを入力
      2. URL: Integromat側のWebhooksモジュール作成中に生成され控えておいたURLを貼り付ける
      3. Triggers: 「Choose from a full list of triggers」を選択し、プルリクエスト欄の「作成」のみを選択状態にする
      4. 他の項目には手を加えずに「save」ボタンで保存する
    4. 当該リポジトリにて適当なプルリクエストを生成する
      • この時、Intgromat側で作成中のwebhooksモジュールにて「POSTリクエスト受信待ち」だった[Stop]ボタンが「Successfuly determined. 」に変わっていることを確認する
        • ※変わっていなければ、おそらくBitbucket側リポジトリの Add webhook でセットしたURLが間違っています
  7. Integromat側の Webhooksモジュール設定画面を[OK]ボタンで閉じる
  8. Webhooksモジュールアイコンの右側に飛び出た部分にマウスポインタを合わせてクリックし、追加モジュール選択画面にて「 Add another module」
    1. Trelloを選択する
    2. ACTIONSセクション内にある「Create a card」を選択する
    3. Connection欄の「Add」ボタンから自身のアクセス権のあるTrelloアカウントと接続する
    4. Enter a list ID欄にて「Select」を選択し、Board欄にて任意のボードを選択し、List欄にて任意のリストを選択する。
    5. Name欄にフォーカスを当てて、Custom webhookで解析されたpullrequestデータ構造の持つキー一覧の中から適当に組み合わせてカードのNameを作成する
    6. Description欄にフォーカスを当て、Custom webhookで解析されたpullrequestデータ構造の持つキー一覧の中から適当に組み合わせてカードの詳細説明文を作成する。
    7. 「OK」ボタンをクリックする
  9. Run scenario欄にて「Immediately」が選択されていることを確認しておく
  10. 画面下部のCONTROLS欄からSaveアイコンをクリックしてシナリオ一覧画面へ戻る
  11. Scenariosメニューにて、作成したシナリオの「ON/OFF」スイッチを ON にする
  12. Bitbucketの当該リポジトリ画面にて、再度適当なプルリクエストを生成し、Integromat側で指定した内容のカードがTrelloへ作成されていることを確認する


本日の記事は以上になります。


コメント

コメントを投稿

このブログの人気の投稿

LaravelのTestCaseを継承したテストにて use RefreshDatabase を使って artisan db:seed --class='TestSeeder' まで実行させるやり方

とりあえず、殴り書きレベルでメモを公開しておく。 実行環境情報 OS: Mac Sierra or Windows10 php: 7.2.7 Laravel Framework: 5.5.42 PHPUnit: 6.5.11 testsディレクトリと関連ファイルの構成 projectDir/ ├ app/ ├ bootstrap/ ├ ... ├ ～～省略～～ ├ ... ├ database/ │ ├ factories/ │ ├ migrations/ │ └ seeds/ │ └ TestSeeder.php ├ tests/ │ ├ Feature/ │ │ ├ BaseFeature.php │ │ └ Hoge.php │ ├ Unit/ │ ├ CreatesApplication.php │ └ TestCase.php/ ├ vendor/ ├ ... ├ ～～省略～～ ├ ... └ phpunit.xml  \Tests\Feature\BaseFeature.php の内容 <?php namespace Tests\Feature; use Tests\TestCase; use Illuminate\Contracts\Console\Kernel; use Illuminate\Foundation\Testing\RefreshDatabase; use Illuminate\Foundation\Testing\RefreshDatabaseState; class BaseFeature extends TestCase { use RefreshDatabase { refreshTestDatabase as originRefreshTestDatabase; } /** * 元々 trait RefreshDatabase に記述されている refreshTestDatabase() の処理内容に * artisan db:seed --class=TestSeeder * を...
続きを読む

ZF3で空のプロジェクトを作成する自分なりの手順

イメージ
ZF3で空のプロジェクトを作成する ※本稿では、Zendframework 3 のことを ZF3 とか zf3 と呼んでいます。 本稿タイトルについて、正規のやり方は知らないし、そもそも正規のやり方というのがあるかどうかも不明です。 極力最小限のコンポーネントを composer で持ってきて、 zf3標準のスケルトンアプリから最低限必要な構成物だけコピって 自作の空モジュールだけが稼働する状態を作る、 という自分なりの手順を、ここでは示します。 前提事項 記事は下記の環境を前提として書いていきます。 ドライブやパス等は使用環境に合わせて適宜読み替えてください。 おことわり 本稿で目指しているところは「zf3によるMVCのWebアプリケーションを開発する準備として必要最低限動作する構成物」です。 「空のプロジェクト」という定義が人によって若干異なる可能性があります。 私の場合は、以下の手順で作成されるプロジェクト構成物を「空である」と考えています。 作成環境: Windows10 Git for Windows をインストール済み Git Bashをコマンドライン作業環境として使う Git Bash の使い方の説明は特にやらない PHP7 を下記へインストールして環境変数PATHに設定済み /c/php7/php.exe PHP 7.0.15 (cli) (built: Jan 17 2017 13:58:38) ( ZTS ) composer.phar を取得済み Git Bash で言うところの /f/hoge/work/直下に composer.phar を配置する 本稿における作業ディレクトリは下記とする。 /f/hoge/work F:\hoge\work\ STEP1  zf3 のスケルトンアプリケーションを作業ディレクトリへ取得しておく。 途中で聞かれる「Do you want a minimal install (no optional packages)? Y/n」は、「最小構成でインストールするかい？」というプロンプト。とはいえ、それまでにInstallingとなってるパッケージ数から分かる通りそこそこ多い。 以下、Git...
続きを読む

Androidでical4jを使う

表題の件について、拙作のアプリ「Gcal Importer」での実装を、自分の頭を整理するついでにかいつまんで書き出してみたいと思います。 対象source: Gcal_Importer - src/net/crappo/android/androics/TopActivity.java src/net/crappo/android/androics/Model4Top.java src/net/crappo/android/androics/ShowEventListActivity.java src/net/crappo/android/androics/ShowEventListAsync.java src/net/crappo/android/androics/Model4EventList.java 【Topアクティビティで行っていること】 Google Calendarからエクスポートしたカレンダーデータは、ダウンロード直後はiCalendar形式のデータ(以後ICSデータと呼ぶ)を内包したzip圧縮ファイルになっています。このzipファイルを展開し、展開されたICSデータファイルをリストにして表示することで、ユーザが端末ローカルカレンダーにImportするICSデータをカレンダー単位で選択できるようにします。 【ShowEventListアクティビティで行っていること】 Topアクティビティで選択されたICSデータをical4jというライブラリを使ってあれこれ処理します。なお、ICSデータを読み込んでModelオブジェクト化する際には、Eventを開始日付時刻順にsortしておきます。 AsyncTaskでICSデータを読み込む Googleカレンダーから取得するICSデータは、通常の手段だとWebブラウザを使ってカレンダーのUIから「設定＞カレンダー＞カレンダーをエクスポート」という手順で取得できます。 このデータは例えば私の場合、ToDoを除いた３つのカレンダーがあって総イベント件数は2000件余りとなります。(メインのカレンダーにほぼすべてのイベントが詰まっている) これをAndroidのActivityで読み込む時にUIスレッドでやると読み込み終了までに時間がかかるので、AsyncTaskという仕組み...
続きを読む