.avif)
・
「GitHubとWebflowを日常的に使っているけど、両方の情報を手動で確認・転記するのが面倒…」
「開発の進捗をWebflowで管理したいのに、GitHubのIssueをいちいちコピー＆ペーストしていて時間がかかるし、ミスも起きやすい…」
このように、開発管理とWebサイト運営で利用するツール間のデータ連携に、課題を感じてはいませんか？
もし、<span class="mark-yellow">GitHubでIssueやプルリクエストが作成されたタイミングで、その情報を自動的にWebflowのCMSアイテムとして追加する仕組み</span>があれば、こうした手作業による非効率やヒューマンエラーのリスクから解放され、本来時間をかけるべき開発やサイトコンテンツの改善といったコア業務に集中できる環境が整いやすくなります。
今回ご紹介する自動化の設定は、専門的なプログラミング知識がなくても簡単に構築でき、日々の定型業務にかかる時間を削減できるので、ぜひこの機会に導入して作業をもっと楽にしましょう！
Yoomには<span class="mark-yellow">GitHubとWebflowを連携するためのテンプレート</span>が用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
GitHubとWebflowのAPIを連携させれば、開発の進捗とWebサイトのコンテンツ管理をスムーズに繋ぐことが可能になります。
例えば、GitHubで作成されたIssueやプルリクエストの情報を、手作業を介さずにWebflowのCMSへ自動でアイテムとして追加できるため、情報共有の迅速化と転記ミスの防止を実現します。
ここでは具体的な自動化の例を複数ご紹介しますので、気になる内容があれば、ぜひクリックしてみてください！
GitHubで新しいIssueが作成されるたびに、その内容をWebflowの指定したCMSコレクションに自動でアイテムとして追加します。
この連携は、開発チームのタスクをWebサイトの更新情報や進捗報告ページにタイムリーに反映させたい場合に有効であり、<span class="mark-yellow">手動での情報転記の手間を削減し、常に最新の情報を関係者間で共有できる</span>ようになります。
GitHubで新たにプルリクエストが作成された際に、その情報をトリガーとしてWebflowのCMSコレクションにアイテムを自動で追加します。
開発の重要なマイルストーンであるプルリクエストの情報を自動で連携させることで、<span class="mark-yellow">リリースの進捗状況や変更内容を関係各所に迅速に共有し、サイト運営チームとの連携を強化</span>できます。
それでは、さっそく実際にGitHubとWebflowを連携したフローを作成してみましょう！
今回はYoomを使用して、ノーコードでGitHubとWebflowの連携を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回は「GitHubでIssueが作成されたら、Webflowにアイテムを追加する」フローを作成していきます！
作成の流れは大きく分けて以下です。
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください！
それではここから今回のフローで使用するアプリのマイアプリ登録方法を解説します。
画面の指示に従って各サービスのアカウント情報を入力し、連携を許可するだけで、ツール間の連携が可能になりますよ！
(1)Yoomにログイン後、左欄にある「マイアプリ」を選択し「＋新規接続」をクリックしてください。
マイアプリの新規接続一覧の中から、GitHubをクリックします。
(2)GitHubのサインイン画面から、お持ちのアカウントでサインインを行ってください。
(3)次にWebflowの連携を行います。同様にYoomの新規接続一覧からWebflowをクリックします。
「Webflowの新規登録」画面から赤枠を確認の上、アカウント名、アクセストークンを入力し「追加」をクリックします。
連携が完了するとYoomのマイアプリにGitHubとWebflowが登録されます。
これでマイアプリ登録が完了しました。
次は、テンプレートを使用してトリガーの設定をしましょう！
ここから、フローの作成に入ります！
Yoomのテンプレートを利用することで簡単に業務の自動化を実現できます。
まずは、下記テンプレートページを開き、『このテンプレートを試してみる』をクリックしましょう。
コピーすると下の画像のようにテンプレートがお使いのYoom管理画面にコピーされるので、OKを押して設定を進めていきましょう！
(1)GitHubと連携して、Issueが新しく作成された際の設定を行っていきましょう！
アプリトリガーの「Issueが新しく作成されたら」をクリックします。
(2)「連携アカウントとアクションを選択」画面から、GitHubと連携するアカウント情報に誤りがないかを確認し、トリガーアクションは「Issueが新しく作成されたら」のままで「次へ」をクリックします。
(3)「アプリトリガーのAPI接続設定」画面から、トリガーの起動間隔を選択します。
トリガーの起動間隔はプルダウンより5分、10分、15分、30分、60分の間隔から選択してください。
※起動間隔はプランによって異なりますので、ご注意ください。
基本的には最短の起動間隔にしてお使いいただくことをおすすめします！
下へ進み赤線を確認の上、オーナー名、リポジトリ名を入力します。
入力が終わったら「テスト」をクリックする前にGitHubでテスト用のIssueを作成します。
作成できたらYoomに戻り「テスト」をクリックしましょう！
「取得した値」にGitHubの情報が反映されればテスト成功です。
「取得した値ってなんだろう？」と思った方は下のサイトをご参照ください！
「保存する」をクリックし、次の工程に進みましょう！
(1)次にWebflowと連携して、コレクションにアイテムを追加します！
「コレクションにアイテムを追加」をクリックしましょう。
(2)「連携アカウントとアクションを選択」画面から、Webflowと連携するアカウント情報に誤りがないかを確認し、アクションは「コレクションにアイテムを追加」のままで「次へ」をクリックします。
(3)「API接続設定」画面から、サイトIDとコレクションIDを候補から選択します。
下へ進み、フィールド名と値を入力します。
画像のように取得した値を使うことで、都度変更することなくGitHubの情報を引用できますよ！
「＋フィールド情報を追加」をクリックすることで、フィールド情報を追加できます。
入力が終わったら「テスト」をクリックします。
テストに成功すると、WebflowにGitHubの情報が反映されます。
Yoomに戻り「保存する」をクリックしましょう！
お疲れ様でした！これですべての設定が完了です。
設定が完了すると以下のようなメニューが表示されるので、トリガーをONにします。
実際にフローボットを起動して、GitHubでIssueが作成されたら、Webflowにアイテムが追加されているかを確認してみてくださいね！
今回はGitHubからWebflowへデータを連携する方法をご紹介しましたが、逆にWebflowからGitHubへのデータ連携を実施したい場合は、下記のテンプレートも併せてご利用ください。
Webflowで新しいCMSアイテムが作成されたタイミングで、その内容を基にGitHubリポジトリにIssueを自動で作成します。
Webサイトのコンテンツ担当者が「修正依頼」や「機能追加要望」などをWebflow上でアイテムとして登録するだけで、<span class="mark-yellow">自動的に開発チームのタスクリストであるGitHub Issueに起票される</span>ため、依頼の伝達漏れを防ぎ、対応をスムーズに進めることができます。
Webflowのアイテム作成をトリガーとして、アイテム内の特定のテキスト情報を自動で抽出し、それを基にGitHubのプルリクエストを作成します。
この連携は、定型的なコード変更やドキュメント修正などをWebflowから直接実行したい場合に便利で、<span class="mark-yellow">手作業でのコピー＆ペーストや情報整理の手間を省き、レビュー依頼のプロセスを迅速化</span>します。
GitHubやWebflowのAPIを活用することで、様々な自動化の実現が可能になります。
GitHubで新規Issueが登録されたら、kintoneに新規レコードを登録したり、Notionのページにテキストを追加したりできます。また、LINE WORKSでメッセージが投稿されたらGitHubでIssueを作成したり、GitLabのIssueをGitHubのIssueに同期したりすることも可能です。さらに、SalesforceのTo Doがクローズに更新されたらGitHubのIssueに反映するといった自動化も行えます。
Zoho Formsの回答内容やShopifyで作成された商品情報をもとに、Webflowのコレクションにアイテムを追加できます。また、Redditで特定のユーザーが投稿したら、内容を要約しWebflowにアイテムを追加したり、Klaviyoでプロフィールが作成されたらWebflowにアイテムを追加したりすることも可能です。さらに、Webflowでアイテムが作成されたら、Slackに通知するといった自動化も行えます。
GitHubとWebflowの連携を自動化することで、<span class="mark-yellow">これまで手作業で行っていた開発情報とWebサイトコンテンツ間のデータ転記作業の手間を削減し、ヒューマンエラーを防ぐことができます。</span>
これにより、開発チームとサイト運営チームは、より迅速かつ正確な情報に基づいて業務を進められ、本来注力すべきコア業務に集中できる環境が整います！
今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築できるので、もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください！
Q：Webflow側で下書きとしてアイテムを作成できますか？（自動連携されたアイテムを、即時公開ではなくレビュー待ちの下書き（Draft）ステータスにできるか）
A：可能です。今回のテンプレートの場合は「下書きにするかどうか」の項目に「下書きにする」を選択することでWebflow側で下書きとして作成できます。
Q：Webflow側での更新をGitHubに反映できますか？WebflowのCMSアイテムのステータスを変更したら、対応するGitHub IssueをCloseするなど、双方向の同期は可能か）
A：可能です。今回ご紹介したテンプレート単体では、GitHubからWebflowへの片方向連携しか実現できませんが、逆パターンも連携することで双方向で自動化することができます。
他のテンプレートにつきましてはこちらのサイトから検索してみてください！
Q：連携が失敗したらどうなる？（エラー発生時の通知や、自動で再試行される仕組みについて）
A：アプリ連携時に「認証に失敗しました」「権限が無い」「設定内容に誤りがある」などのエラーメッセージがYoom画面上に表示されます。
エラーが起きた際の対応方法については下記のサイトをご参照ください。
.png)
.png)
.webp)
.webp)
