.png)
・
「Webflowでコンテンツを公開するたびに、GitHubで手動でIssueを作成して開発チームに連携している…」
「CMSの更新と開発タスクの管理が別々のツールで行われていて、二度手間や連携漏れが発生している…」
このように、WebflowとGitHub間での手作業による情報連携に、非効率さやストレスを感じていませんか？
もし、<span class="mark-yellow">Webflowでのコンテンツ更新をトリガーに、GitHubのIssueやプルリクエストを自動で作成する仕組み</span>があれば、これらの煩わしい作業から解放され、手作業によるミスをなくし、よりスムーズな開発・コンテンツ運用プロセスを実現できます。
今回ご紹介する自動化の設定は、プログラミングの知識がなくても簡単に設定できるため、これまで自動化を諦めていた方でもすぐに導入することが可能です。
ぜひこの機会に作業をもっと楽にしましょう！
Yoomには<span class="mark-yellow">WebflowとGitHubを連携するためのテンプレート</span>が用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
WebflowとGitHubのAPIを連携すれば、WebflowでのアクションをきっかけにGitHubでの操作を自動化したり、その逆の連携も可能になります。
これにより、コンテンツ管理と開発のワークフローがシームレスに繋がり、業務効率を向上させることができます。
ここでは、具体的な自動化の例をいくつかご紹介しますので、気になる内容があれば、ぜひクリックしてみてください！
Webflowで新しいブログ記事や製品情報などのアイテムを公開した際に、その情報を基にGitHubリポジトリに新しいIssueを自動で作成できます。
これにより、<span class="mark-yellow">コンテンツ公開に伴う修正や確認タスクの作成漏れを防ぎ、開発チームへ迅速かつ正確に情報を伝達できる</span>ため、手動でのIssue作成の手間と時間を削減します。
Webflowで新しいアイテムが作成されたら、アイテム内の特定のテキスト情報を自動で抽出し、その内容を基にGitHubでプルリクエストを自動生成します。
こちらは正規表現などを用いたデータ抽出処理を含むため、<span class="mark-yellow">コンテンツのドラフト作成と同時に開発関連のプルリクエストを起票でき、レビュープロセスを迅速に開始することが可能</span>になります。
それでは、さっそく実際にWebflowとGitHubを連携したフローを作成してみましょう！
今回はYoomを使用して、ノーコードでWebflowとGitHubの連携を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回は「Webflowでアイテムが公開されたら、GitHubでIssueを作成する」フローを作成していきます！
作成の流れは大きく分けて以下です。
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください！
それではここから今回のフローで使用するアプリのマイアプリ登録方法を解説します。
Yoomの画面左側にある「マイアプリ」→「新規接続」をクリックしましょう。
「アプリ名で検索」でSlackを探すか、アプリ一覧から探してください。
以下の画面が表示されるのでWebflowで確認し入力しましょう。
入力後、マイアプリにWebflowが表示されていれば連携の完了です。
まず先にGitHubのアプリ連携を行います。
新規接続をクリックし、検索窓にGitHubと入力します。
表示された候補をクリックすると、サインイン画面に移行します。
GitHubに登録しているユーザー名またはメールアドレスとパスワードを入力し、サインインしてください。
登録メールアドレスに認証コードが送付されます。
届いた認証コードを入力して『確認する』をクリックしてください。
認証が正常に行われると、YoomのマイアプリにGitHubが表示されます。
続いてYoomのテンプレートをコピーします。
以下バナーのテンプレートの「このテンプレートを試してみる」のアイコンをクリックします。
以下の画像のような画面が表示されたらテンプレートのコピーは完了です。
Webflowでコレクションのアイテムが公開されたことを自動化のトリガーにするための設定を行います。
以下の赤枠をクリックしましょう。
連携アカウントとアクションを選択する画面が表示されるので、今回連携するWebflowのアカウントを確認し「次へ」をクリックします。
アプリトリガーのAPI接続設定が表示されるので、設定を進めていきましょう。
トリガーの起動間隔は5分・10分・15分・30分・60分から選択できます。
※ご利用プランによって、設定できるトリガーの最短間隔が違うので、その点は要チェックです。
なお、基本的にはそのプランの最短の起動間隔にしてお使いいただくことをおすすめします。
サイトIDとコレクションIDを下記のように候補から入力しましょう。
ここでWebflowに移動し、設定したコレクションでアイテムを公開してください。
フローボットに戻り、「テスト」をクリックします。
Webflowから取得した値が表示されているか確認しましょう。
この後、この取得した値の内容を入力に使用することができます。
テスト成功後「保存する」をクリックしましょう。
Webflowでアイテムが公開されたらGitHubでIssueを作成するための設定を行います。
以下の赤枠をクリックしましょう。
連携アカウントとアクションを選択する画面が表示されるので、今回連携するGitHubのアカウントを確認し「次へ」をクリックします。
以下の画面が表示されるのでGitHubで確認し入力しましょう。
タイトルには以下のようにWebflowから取得した値から「name」を選択し、入力します。
内容にはWebflowから取得した値よりdescriptionを選択し、入力します。
入力後「テスト」をクリックし、実際にGitHubでIssueが作成されているか確認しましょう。
確認ができたら「保存する」をクリックします。
※下記はIssueの作成イメージです。
以下の画面の赤枠部分「トリガーをON」をクリックすることで、フローボットが自動で起動します。
設定お疲れ様でした！
今回はWebflowからGitHubへデータを連携する方法をご紹介しましたが、逆にGitHubからWebflowへのデータ連携を実施したい場合は、下記のテンプレートも併せてご利用ください。
開発側の進捗をコンテンツ管理側に自動で反映させることができ、チーム全体の情報共有がよりスムーズになります。
GitHubのリポジトリで新しいIssueが作成された際に、そのIssueのタイトルや内容をWebflowのCMSコレクションにアイテムとして自動で追加します。
この連携により、<span class="mark-yellow">開発タスクの発生をWebflow側で迅速に把握でき、関連コンテンツの準備や更新作業を迅速に開始</span>できます。
GitHubでプルリクエストが作成されたら、その情報をWebflowのCMSに新しいアイテムとして自動登録します。
これにより、<span class="mark-yellow">コードの変更やレビュー状況をWebサイトの管理画面上で一覧化できる</span>ため、マーケティング担当者やコンテンツ編集者が開発の進捗を簡単に確認できるようになります。
今回ご紹介した連携以外でも、WebflowやGitHubのAPIを活用してさまざまな業務を自動化することが可能です。
もし気になるものがあればぜひこちらもお試しになってみてください！
Webflowの情報を様々なアプリに自動登録ができるため、業務の効率化やヒューマンエラーの削減が実現できます。
また、Googleフォームの回答をWebflowに登録することも可能なためユーザーからの入力情報をスムーズに反映させることが可能です。
GitHubにIssueが作成されたら様々なアプリに自動登録ができるため、タスク管理や進捗共有が迅速に行えるようになり、チーム全体の連携がスムーズになります。
また、Salesforceの情報をGitHubに追加することもできるため、顧客要望に基づいた迅速な対応や改善が可能です。
WebflowとGitHubの連携を自動化することで、<span class="mark-yellow">これまで手作業で行っていたコンテンツ更新と開発タスク間の情報転記作業をなくし、ヒューマンエラーを根本から防ぐことができます。</span>
これにより、コンテンツチームと開発チームの連携が強化され、担当者はそれぞれが本来注力すべき創造的な業務に集中できる環境が整うでしょう！
今回ご紹介したような業務自動化を実現できるノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも、直感的な操作で簡単に業務フローを構築できます。
もし自動化に少しでも興味を持っていただけたなら、ぜひこちらの登録フォームから無料登録してYoomによる業務効率化を体験してみてください！
Q：特定の条件を満たすアイテム公開時のみ、今回のフローを実行するようにできますか？
A：はい、可能です。
有料プランで使える「分岐」機能を使用することで、特定のキーワードや特定カテゴリアイテム作成時にのみフローを進めることができます。
Q：Issue作成後、Slackなど別ツールへも通知できますか？
A：はい、可能です。
フローボットの画面でIssue作成した後の「＋」をクリックするとオペレーションを追加でき、次のアクションの設定が可能です。
検索窓に「Slack」と入力し、メッセージを送信するアクションを設定することでSlackへ通知できます。
Q：連携が失敗した場合、通知はどうなりますか？
A：自動化が失敗した場合、Yoomに登録したメールアドレスに通知が届きます。
また、エラー時の対応方法については、こちらをご覧ください。
ヘルプページで解決しない場合は、サポート窓口を利用することもできます。
.png)
.png)
.png)
.webp)
.webp)
