まずはYoomの登録を行いましょう。
1.上のバナーの「詳細を見る」をクリック
2.移行した画面下部の「このテンプレートを試してみる」をクリック
3.Yoomの登録を行う
※既に登録が完了している場合はログイン画面が表示されるので、ログインしましょう。
今回の連携フローは大きく分けて以下のプロセスの通りです。
・GitHubとChatworkをマイアプリ連携
・GitHubの起動設定
・Chatworkへ通知する設定
・トリガーボタンをONにして、GitHubとChatworkの連携動作を確認
まずはじめに、マイアプリ連携を行います。
ステップ1:GitHubとChatworkをマイアプリ連携

Yoomの登録が完了すると、フローボットのテンプレートが「マイプロジェクト」にコピーされます。
画像のような表示がされたら、左側にあるメニューから「マイアプリ」を選択してください。

次に、右上の新規接続ボタンをクリックします。

GitHubとYoomの連携
GitHubのマイアプリ連携は、GitHubにログインしておくことで素早く完了します。
そのため、現段階でGitHubにログインしておきましょう。
1.検索する

GitHubを検索し、GitHubのアイコンを選択します。

クリックすることで画面が切り替わります。
上記の表示が出たら連携完了です。
Chatworkの連携
1.検索する

Chatworkを検索し、Chatworkのアイコンをクリックします。
2.Chatworkにログイン

ログイン画面が表示されます。
Issueの登録を通知したいアカウントでログインを行いましょう。
3.許可を押す

上記の画面が表示されたら許可を押します。

その後、Yoomの画面に自動で切り替わり、上記の表示がされれば連携完了です。
ステップ2:GitHubの起動設定
1.マイプロジェクトを開く

画面左側のメニューから「マイプロジェクト」を開きましょう。
2.コピーしたテンプレートを開く
「【コピー】GitHubでIssueが作成されたらChatworkに通知する」をクリックします。
3.アプリトリガーを選択

GitHubのアイコンの「Issueが新しく作成されたら」をクリックします。
タイトルなどの設定は完了しているため、次へを押しましょう。
4.トリガーの起動間隔の設定

起動間隔を設定しましょう。
トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
プランによって最短の起動間隔が異なりますので、ご注意ください。
設定ができたら画面を下へスクロールします。
5.必須項目の入力

ボックス下部の補足に従い、GitHubのURLからコピー&ペーストしましょう。
6.テストの実行

設定が完了したら、GitHubでテスト用のIssueを作成してください。その後、画面下部にあるテストボタンを押しましょう。
テスト成功と表示が出たら完了です。保存をクリックします。
ステップ3:Chatworkへの通知設定
1.アプリと連携する

Chatworkのアイコンの「Chatworkに通知する」をクリックします。
タイトルなどの設定は完了しているため、次へを押しましょう。
2.投稿先のルームIDを設定する

GitHubのIssueを通知するルームIDを設定しましょう。ボックスをクリックします。

チャンネルが一覧表示されるので、クリックして挿入しましょう。
3.メッセージ内容の設定

続けてChatworkに投稿するメッセージを設定します。ボックスをクリックしましょう。

赤枠の「Issueが新しく作成されたら」を選択します。

GitHubのデータが選択できるため、Chatworkに送信したいものをクリックします。
4.レイアウトを整える

他にも挿入したいデータがある場合は、続けて設定してください。
データが挿入できると画像のようになります。

その後、見やすさを考慮し、レイアウトを整えることをおすすめします。
5.テストの実行

画像のように設定が完了したら、画面下にあるテストボタンを押します。
テスト成功の表示がされたら、設定は完了です。保存をしましょう。
6.トリガーをONにする

フローボットの作成が完了すると、上記のような表示がされます。トリガーは初期設定ではOFFの状態なので、ONにしましょう。
今回使用したフローボットテンプレート
GitHubでIssueが作成されたらChatworkに通知する