・
「Discordの特定チャンネルに投稿された情報を、Webflowサイトのコンテンツとして反映させたい」
「Discordでの指示をもとに、Webflowのアイテムを手動で更新・追加しているけど、手間がかかるしミスも怖い…」
このように、日常的にDiscordとWebflowを利用する中で、二つのツール間の情報連携を手作業で行うことに限界を感じていませんか？
もし、<span class="mark-yellow">Discordのメッセージ投稿をトリガーにして、Webflowのコレクションアイテムを自動で作成・更新できる仕組み</span>があれば、こうした日々の反復作業から解放され、情報のタイムラグや転記ミスといった課題を根本から解決し、より創造的な業務に集中できる貴重な時間を確保できます。
今回ご紹介する自動化は、プログラミングの知識がなくても驚くほど簡単に設定できるため、ぜひこの記事を参考に、面倒な手作業をなくし、業務をもっとスマートに進めましょう！
Yoomには<span class="mark-yellow">DiscordとWebflowを連携するためのテンプレート</span>が用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
DiscordとWebflowのAPIを連携させれば、Discordでの特定の活動をきっかけに、Webflow上のデータを自動で操作することが可能になります。例えば、Discordチャンネルへの投稿内容をWebflowのCMSアイテムとして自動で追加したり、特定のメッセージに応じてアイテムを削除したりといった作業を自動化できます。これにより、手作業による情報更新の手間やミスをなくし、常に最新の情報をサイトに反映させることが可能です。気になる自動化例があれば、ぜひクリックしてみてください！
Discordの特定のチャンネルに新しいメッセージが投稿されるたびに、そのテキスト情報を自動で抽出し、Webflowの指定したコレクションに新しいアイテムとして追加します。この連携はAIや正規表現によるデータ抽出処理を活用することで、<span class="mark-yellow">Discord上の議論や情報を手動でコピー＆ペーストすることなく、直接Webサイトのコンテンツとして生成できる</span>ため、コンテンツ更新の即時性と正確性を大幅に向上させることが可能です。
Discordの管理用チャンネルなどに削除依頼のメッセージが投稿された際、その内容から対象となるアイテムを特定し、Webflow上から自動で削除します。この仕組みを導入することで、<span class="mark-yellow">Webflowの管理画面にログインして手動でアイテムを探し、削除するという一連の手間を完全に省略</span>でき、コンテンツの整理や管理を迅速かつ効率的に行えます。
それでは、さっそく実際にDiscordとWebflowを連携したフローを作成してみましょう！今回はYoomを使用して、ノーコードでDiscordとWebflowの連携を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回はDiscordにメッセージが投稿されたら、テキストを抽出してWebflowのコレクションにアイテムを追加するフローを作成していきます！
作成の流れは大きく分けて以下です。
はじめに、DiscordとWebflowをYoomに接続するためのマイアプリ登録を行いましょう。
事前にマイアプリ登録を済ませておくと、自動化フローの設定がスムーズに進められますよ！
1.Yoomページ画面左側のマイアプリをクリックし、「新規接続」を選択します。
2.右上の検索窓に「Discord」と入力し、検索結果からDiscordのアイコンを選択します。
表示された画面で、必須項目を入力し、「追加」をクリックしましょう。
※詳しい設定方法は、こちらをご参照ください。
3.続いてWebflowをマイアプリ登録します。
先ほどと同様に、連携可能なアプリ一覧からWebflowを検索します。
次の画面で、必須項目を入力し、「追加」をクリックしましょう。
マイアプリにDiscordとWebflowが表示されていれば、登録完了です。
ここから、実際にフローを作っていきましょう！
簡単に設定できるようテンプレートを利用します。以下のバナーの「試してみる」をクリックして、テンプレートをコピーしてください。
クリックすると、テンプレートがお使いのYoom画面に自動的にコピーされます。
「OK」をクリックして、設定を進めましょう！
※コピーしたテンプレートは、「マイプロジェクト」内の「フローボット」に、「【コピー】Discordにメッセージが投稿されたら、テキストを抽出してWebflowのコレクションにアイテムを追加する」という名前で格納されています。
「あれ？テンプレートどこいった？」となった際には、マイプロジェクトから確認してみてくださいね！
フローの作成を始める前に、あらかじめYoomと連携するDiscordに、メッセージを投稿しておきましょう！
※後続のDiscordのトリガー設定時のテストで必要になります。
今回は下図のようなメッセージを投稿してみました。
テスト用のため、内容は架空の情報（「株式会社test」や「テスト太郎」など）でOKです！
1.まずは、アプリトリガー設定です。
先ほどの画面で「OK」をクリックして、表示された画面のアプリトリガー「チャンネルでメッセージが送信されたら」をクリックしましょう。
2.連携アカウントとアカウント選択画面が表示されるので、設定内容を確認しましょう。
連携するアカウント情報には、ステップ1で連携したアカウント情報が反映されています。トリガーアクションはそのままにして、「次へ」をクリックしてください。
3.表示された画面で、詳細を設定します。
「トリガーの起動間隔」を選択してください。基本的には、最短の起動時間で設定することをおすすめします。
※トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。プランによって最短の起動間隔が異なりますので、ご注意ください。
※Yoomプランの詳しい説明は、こちらを参照してみてください。
4.「サーバーID」は、入力欄下の説明に従って、入力してください。
「チャンネルID」は、入力欄をクリックして表示される候補から選択してください。
候補は、連携しているアカウントに紐づいて表示されます。
5.入力を終えたら「テスト」をクリックし、「取得した値」にデータが抽出されていることを確認してください。
確認したら「保存する」をクリックしましょう。
取得した値は、後続の設定で活用できます！
※取得した値とは？
トリガーやオペレーション設定時に、「テスト」を実行して取得した値です。
取得した値は、後続のオペレーション設定時の値としてご利用いただくことができ、フローボットを起動する度に、変動した値となります。
※詳しくは、こちらをご参照ください。
1.続いて、OCR技術を使って、テキストからデータを抽出する設定を行います。
「テキスト抽出」をクリックしましょう。
※OCRや音声を文字起こしするAIオペレーションは、チームプラン・サクセスプラン限定の機能です。フリープランやミニプランでセットするとエラーになってしまうので、ご注意ください。
チームプランやサクセスプランなどの有料プランは、2週間の無料トライアルが可能です。トライアル期間中は、通常だと制限があるアプリやAIオペレーションもすべて使えるので、気になる機能をぜひお試しください。
※YoomのOCR機能では、アクション記載の規定の文字数を超えるデータや、文字が小さすぎる場合に正しく読み取れないことがあります。文字数や文字の大きさには少し余裕を持たせてご利用ください。
2.アクション選択設定は、テンプレートを使用しているためデフォルトで完了しています。設定内容を確認し、次へ進みましょう。
3.詳細設定を行います。
「対象のテキスト」は、入力欄をクリックして表示される取得した値から選択してください。
※抽出対象のテキストを指定しましょう。
「抽出したい項目」は、抽出したいテキストのデータ項目を設定します。
ここで抽出したデータを用いて、Webflowのコレクションにアイテムを追加するため、Webflowに追加したい項目を全て設定するようにしましょう。
複数の項目を設定する場合、カンマ（,）区切りで入力してくださいね！
今回はテンプレートを活用して、以下画像のように入力しています。
入力が完了したら「テスト」を実行し、正しくテキストからデータが抽出されていることを確認しましょう。確認後、「保存する」をクリックします。
1.アプリと連携する「コレクションにアイテムを追加」をクリックしましょう。
各項目を確認し、「次へ」をクリックします。
2.API接続設定を行います。
「サイトID」「コレクションID」は、入力欄をクリックして表示される候補から選択してください。
候補は、連携しているアカウントに紐づいて表示されます。
3.フィールド情報の各項目を設定していきます。
「フィールド」は、入力欄をクリックして表示される候補から選択してください。
「値」は、入力欄をクリックして表示される取得した値から選択してください。
フィールド情報の各項目は、以下画像のように設定しました。
設定完了後は「テスト」を行い、実際にWebflowにデータが追加されることを確認してください。
確認後、保存しましょう。
全ての設定が完了すると、下図のようなポップアップが表示されます。赤枠部分の「トリガーをON」をクリックすると、設定したフローボットが起動するので動作確認をしましょう！
今回はDiscordからWebflowへデータを連携する方法をご紹介しましたが、逆にWebflowでの更新をDiscordに通知したい場合は、下記のテンプレートも併せてご利用ください。サイトの更新情報をタイムリーにチームに共有することで、さらなる業務効率化が実現できます。
Webflowで新しいCMSアイテムが作成されたタイミングをトリガーとして、その情報をすぐにDiscordの指定チャンネルに通知します。この直接連携により、<span class="mark-yellow">Webサイトに新しいコンテンツが追加されたことを関係者に手動で知らせる手間が不要</span>になり、チーム内での情報共有のスピードと確実性が格段に向上します。
Webflow上でアイテムが「公開（Published）」されたことを検知し、その旨を自動的にDiscordへ通知します。特に重要な「公開」というアクションをトリガーにすることで、<span class="mark-yellow">コンテンツのローンチやプレスリリースの公開といった重要な更新情報を、関係者全員がタイムリーに把握できる</span>ようになり、迅速なレビューや次のアクションへの移行をサポートします。
DiscordやWebflowのAPIを活用することで、様々な自動化の実現が可能になります。
Slackにメッセージが投稿されたらDiscordに通知したり、Google AdsやGoogle スプレッドシートから取得したレポートを毎日Discordに通知したりできます。また、Zendeskでチケットが作成されたらDiscordに通知したり、自社出品カテゴリの商品ランキングを自動取得しDiscordに通知したりといった自動化も行えます。
Webflowのフォームが送信されたらHubSpotにチケットを作成したり、Salesforceに追加したりできます。また、Webflowのフォームが送信されたり、注文が発生したりした際に、Google スプレッドシートにデータが追加されたり、Microsoft Excelに追加されたりといった自動化も可能です。
DiscordとWebflowの連携を自動化することで、<span class="mark-yellow">これまで手作業で行っていたDiscordの投稿内容をWebflowに転記したり、サイト更新をチームに共有したりといった定型業務から完全に解放されます。</span>これにより、単純作業にかかっていた時間を削減できるだけでなく、転記ミスや共有漏れといったヒューマンエラーを防ぎ、担当者はより迅速かつ正確な情報に基づいて業務を進められるようになり、本来注力すべきコア業務に集中できる環境が整います！
今回ご紹介したような業務自動化は、ノーコードツールの「Yoom」を活用することで、プログラミングの知識がない方でも直感的な操作で簡単に構築できます。もし日々の業務の中で少しでも非効率を感じているなら、ぜひこちらから無料登録して、Yoomがもたらす業務効率化の世界を体験してみてください！
Q:連携がエラーで失敗した場合、どのように検知できますか？
A:フローボットでエラーが発生すると、Yoomに登録しているメールアドレス宛にエラー通知のメールが送信されます。このメールを転送することで、他のメンバーにもエラー通知を共有することができます。また、エラーの通知先として、SlackやChatWorkなどのチャットツールを設定することが可能です。
Q:この連携を安定運用する場合、推奨されるYoomの料金プランはどれですか？
A:Yoomには、フリープラン・ミニプラン・チームプラン・サクセスプランがございます。今回設定したフローボットでは、OCR機能を使用するため、有料プランの「チームプラン」「サクセスプラン」を推奨します。(フリープラン・ミニプランでOCR機能を使用するとエラーになってしまいます)有料プランは、2週間の無料トライアルが可能です。ぜひ、お試しください。
Q:テキスト抽出の精度はどの程度ですか？（特定のフォーマットや正規表現の利用は可能か）
A:Yoomでは、OCRで抽出したテキストに対して正規表現を用いた置換や成形を自動化できます。例えば、スキャンした名刺からメールアドレスや電話番号を抽出し、成形してGoogle スプレッドシートやSlackに転送するフローを構築可能です。また、OCRで抽出したデータを、指定したフォーマット（例：日付形式の統一、電話番号のハイフン追加など）に成形することができます。
%E3%81%AE%E3%82%B3%E3%83%92%E3%82%9A%E3%83%BC7.png)
.webp)
.webp)
