複数のLLMでWebスクレイピングと要約を行うワークフローを作る生成AI×ノーコードでつくる!Difyワークフロー構築入門(1)

ノーコード/ローコードでAIアプリを構築できるオープンソースプラットフォーム「Dify」を活用して、AIワークフローを構築する本連載。初回は、WebページやPDFをスクレイピングし、その内容を前処理してから要約するワークフローの作成方法を解説します。

» 2026年01月22日 05時00分 公開

この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。

「生成AI×ノーコードでつくる!Difyワークフロー構築入門」のインデックス

連載:生成AI×ノーコードでつくる!Difyワークフロー構築入門

本連載のサンプルコード(DSLのYAMLファイル)はGitHubで公開しています。必要な場合はこちらからダウンロードしてみてください。


はじめに

 Difyは、ノーコード/ローコードでAIアプリを開発・運用できるオープンソースのプラットフォームです。Difyの特徴は、複数の大規模言語モデル(LLM)を組み合わせて利用できること、ワークフローやチャットフローを直感的に作成できること、そしてサードパーティー製のツールや自作プラグインを簡単に統合できることにあります。AIを使った業務効率化が注目される中で、手軽に試せるオープンソースのプラットフォームの一つとして注目されています。

 前回の連載『「生成AI」×ノーコードツール「Dify」で学ぶ、チャットbot構築のいろは』では、では、Difyを使ってカスタマーサポート用のAIチャットbotを作成する方法を紹介しました。本連載は、Difyの本領ともいえるワークフローやチャットフローに焦点を当て、より高度なAIアプリケーションの構築方法を解説していきます。

チャットフローとワークフローの違い

 チャットフローは、主にチャットを通じてさまざまな処理を自動化するためのフローであり、メモリ(ユーザーとの会話記録)とチャットUI(ユーザーインタフェース)が提供されるのが特徴です。前回の連載で作成したチャットbotは、このチャットフローの最もシンプルな形といえます。

 対してワークフローは、より汎用(はんよう)的な処理を実行するためのフローであり、さまざまなブロックを組み合わせて複雑な処理を実現できます。

 チャットフローとワークフローの違いは表1の通りです。

特徴 チャットフロー ワークフロー
主な用途 人間と会話するチャットbotの作成 LLMを用いた処理の自動化
メモリ機能 あり(会話履歴を保持) なし
自動で提供されるUI チャットUI 入力フォーム
ログ チャットログ、注釈 実行ログ
入力(最初のブロック) ユーザープロンプト、ファイル(複数可) 文字列、数値、true/false、ファイル(複数可)など
出力(最終ブロック) 回答ブロック 出力ブロック
表1 チャットフローとワークフローの比較

 入力と出力が異なる点はありますが、いずれも内部で使えるブロックにほとんど違いはありません。後の記事で詳しく説明しますが、ワークフローはDify「ツール」として別のワークフローやチャットフロー内で再利用することも可能です。

 なお、チャットフローとワークフローの最小の構成例を図1に示します。最終ブロックが異なることが分かります。

図1 チャットフローとワークフローの違い 図1 チャットフローとワークフローの違い

本連載で作成するアプリ

 本連載では、ワークフローとチャットフローの基本的な作成方法を確認した後、さまざまなノードを使った高度なチャットフローを作成していき、最終的には自作プラグインを作ってフローで利用する方法までを解説していきます。

 各回では以下のような内容を予定しています。

  • 第1回:WebページやPDFをスクレイピングし、その内容を前処理してから要約するワークフローの作成
  • 第2回:作成したワークフローやサードパーティー製ツールを利用したチャットフローの作成
  • 第3回:質問分類器・イテレーション・変数集約器などを使用してユーザーの要望に応じて出力を変える高度なチャットフローの作成
  • 第4回:自作プラグインを作成し、フローで利用する

 今回は、まずワークフローの基本的な作成方法を学ぶため、WebページやPDFをスクレイピングし、その内容を前処理してから要約するワークフローを作成します。

スクレイピングの基本動作を実装する

 それでは早速、「Webページ要約」アプリを作成していきます。なお、Difyのアカウントを持っていない場合は登録が必要です。こちらの記事を参照してアカウント登録を進めておきましょう。

1. 新規のワークフローの作成

 Difyにログインし、初期ページから「最初から作成」を選択し、「ワークフロー」を選択します。「アプリのアイコンと名前」欄にワークフローの名前として「Webページ要約」と入力し、「作成する」ボタンをクリックします。「説明」欄の内容は何でも構いませんが、アプリの内容が判別できるように入力しておきましょう(図2)。

図2 ワークフローの作成 図2 ワークフローの作成

2. 開始ノードの選択

 開始ノードを選択する画面が表示されます(図3)。Difyでは、Webhook(DifyへのHTTPリクエスト)や、あらかじめ登録されたスケジュールなどをトリガーにワークフローを開始することも可能ですが、ここでは「ユーザー入力」を選択します。これで、ワークフローはユーザーからのプロンプトをトリガーに開始することになります。

図3 ワークフローの開始ノード選択 図3 ワークフローの開始ノード選択

 図4のようにワークフローのエディタ画面が表示され、開始ノードである「ユーザー入力」ブロックが配置されていれば、正しくワークフローが作成できています。

図4 ワークフローのエディタ画面 図4 ワークフローのエディタ画面

 ここで「ユーザー入力」ノード右側の「+」ボタンをクリックするとノード選択メニューが開きます。

 ノードは、大きく「ブロック」タブと「ツール」タブとに分類できます。「ブロック」はDifyが提供する基本的な処理ノード、「ツール」は外部サービスや特定の機能を利用するためのノードです。「ツール」はDify開発元のLangGeniusが提供するものに加え、サードパーティーが開発したものをマーケットプレースから追加することもできます。

 最初に配置されているユーザー入力ブロックは、ワークフローの開始ノードとして使用され、ユーザーからの入力を受け取るためのノードです(図5)。Difyのワークフローでは、ユーザー入力ブロックを使ってテキストやファイルなどのデータを取得し、その後の処理に利用できます。

図5 ユーザー入力ブロック 図5 ユーザー入力ブロック

 なお、Difyでは「ブロック」と「ツール」の総称として「ノード」と呼んでいるようです。本稿ではそれを踏襲しつつ、フロー内に配置された「ブロック」や「ツール」を特に「ノード」と呼ぶことにします。

3. ユーザー入力ノードの設定

 次に「ユーザー入力」ノードを選択し、「入力フィールド」の「+」ボタンをクリックして、新しい入力フィールドを追加します(図6)。

図6 ユーザー入力ノードの設定 図6 ユーザー入力ノードの設定

 フィールドタイプを「短文」、変数名を「url」、最大長を200文字とし、「必須」にチェックを入れて保存します。これで、ユーザーがワークフローを実行する際にURLを入力できるようになります。

4. WebページやPDFをスクレイピングするノードの追加

 次に「ユーザー入力」ノード右側の「+」ボタンをクリックして、「ツール」タブから「Web Scraper」ツールを追加します(図7)。

図7 Web Scraper ツール 図7 Web Scraper ツール

 Web Scraperツールを追加した後のノード配置は図8のようになります。

図8 Web Scraperツールを追加した状態 図8 Web Scraperツールを追加した状態

 Web Scraperは、Difyに標準搭載の、指定したWebページやPDFから情報を抽出するツールです。これを使うことで、外部のコンテンツを簡単に取得し、ワークフロー内で利用できます。

 なお、Webページをスクレイピングするには、他に以下のような方法があります。

  • HTTPリクエストブロックを使ってページのHTMLを取得し、後続のノードで必要な情報を抽出する方法
  • 外部のスクレイピングサービス(FirecrawlやJina Reader、Tavilyなど)を利用する方法

 どの方法にも一長一短がありますが、Difyに標準で備わっているWeb Scraperツールはインストール不要でAPIキーも必要ないため、本稿ではこれを使用します。

5. Web Scraperノードの設定

 次に「Web Scraper」ノードを選択し、設定画面で「URL」欄で「/」を入力すると変数一覧が表示されるので、「ユーザー入力」の「url」を選択します(図9)。

図9 Web Scraperノードの設定 図9 Web Scraperノードの設定

 これで、ユーザーが入力したURLがスクレイピング対象となります。その他の設定はデフォルトのままで問題ありません。

6. 出力ブロックの追加

 出力ブロックは、ワークフローの最終ノードとして使用され、ワークフローの結果をユーザーに返すためのノードです。ワークフローには1つ以上の出力ブロックが必要です(図10)。

図10 出力ブロック 図10 出力ブロック

 「Web Scraper」ノードの「+」ボタンをクリックして「ブロック」タブから「出力」ブロックを追加し、図11のようになればOKです。

図11 Web Scraperツールと出力ブロックを追加した状態 図11 Web Scraperツールと出力ブロックを追加した状態

7. 出力ノードの設定

 「出力」ノードを選択し、result変数にWeb Scraperのtextを設定します。これでWeb Scraperで取得したテキストがワークフローの出力として返されるようになります(図12)。

図12 出力ノードの設定 図12 出力ノードの設定

8. ワークフローのテスト実行

 早速ワークフローをテストしてみましょう。画面右上の「テスト実行」ボタンをクリックし、表示されたダイアログの「url」欄にスクレイピングしたいWebページやPDFのURLを入力して「実行開始」ボタンをクリックします。ここでは前回の連載記事のURLを入力してみました(図13)。

図13 ワークフローのテスト実行 図13 ワークフローのテスト実行

 実行が完了すると自動的に「結果」タブが表示されます。「詳細情報」タブを確認した方が実際の出力がどのようになっているか確認しやすいでしょう。出力ノードで指定したresultの中身がスクレイピングしたテキストになっていることが分かります(図14)。

図14 ワークフローの実行結果 図14 ワークフローの実行結果

 さて、ここで結果のテキストを見ると、TITLEなどのヘッダ部分を除けば、{'text':'文字列'}というような細かいチャンクに分かれていることが分かります。また、Webページのヘッダやタグなど、本文でない部分も含まれており、このままLLMに渡すとノイズが多くなるため、次のセクションで前処理を行います。

スクレイピング結果の前処理(文字列結合)を実装する

 最低限のスクレイピングができたところで、いよいよLLMにテキストの処理をさせてみましょう。

 Difyに組み込まれた大規模言語モデル(LLM)を利用してテキスト生成や要約、翻訳などの自然言語処理を行うには「LLM」ブロックを使用します(図15)。

図15 LLMブロック 図15 LLMブロック

 DifyではOpenAIのGPTの他、GoogleのGeminiやAnthropicのClaudeなど、さまざまなLLMをインストールして利用できますが、本稿ではDifyの無料クレジットでも使用可能なOpenAIのgpt-4o系を使います。

 ここではLLMをスクレイピングしたテキストを整形するための前処理に使用します。

1. LLMブロックの追加

 図16のように、Web Scraperノードと出力ノードの中間にある「+」ボタンをクリックして、LLMを選択します。

図16 LLMブロックの追加 図16 LLMブロックの追加

 この操作でWeb Scraperノードと出力ノードの間にLLMブロックが追加されます。

2. LLMノードの設定

 追加されたLLMノードを選択すると、設定画面が表示されるので、図17のようにそれぞれのパラメーターを設定しておきます。

図17 LLMノードの設定 図17 LLMノードの設定

 「SYSTEM」欄には、リスト1のシステムプロンプト(LLMに対して動作や振る舞いを指示するためのテキスト)を入力します。

Webページからスクレイピングした JSON 文字列から、本文を抽出し、整理してMarkdown形式に変換します。ヘッダーやフッターなど、Webページの本文以外の構成要素は削除します。
【制約条件】
* 入力の文章は一字一句変更せず、そのまま出力します。
* 入力に含まれない文章を出力してはいけません。
【出力形式】
# タイトル
文章
## 見出し
文章
リスト1 前処理用LLMノードのプロンプト

 「USER」欄には、「Web Scraper」ノードのtextを設定します。「USER」はユーザープロンプトで、システムプロンプトに加えて、ユーザーからの具体的な指示を伝えるためのテキストを表します。

 なお、正確性が必要なので、gpt-4oのTemperature(生成するテキストの多様性を制御するパラメーター)は0、Top-p(テキスト生成に使われる単語候補の多様性を制御するパラメーター)も0に設定しています。低い値にすることでランダム性を抑えて、同じ入力に対して同じ出力を得やすくなります。この当たりのパラメーターは決まった値はないため、出力を見ながら調整してください(図18)。

図18 LLM ノードのパラメーター設定 図18 LLM ノードのパラメーター設定

3. 出力ノードの再設定

 出力ノードの設定を変更し、result変数に「LLM 前処理」ノードのtextを設定します。これで、前処理されたテキストがワークフローの出力として返されるようになります(図19)。

図19 出力ブロックの再設定 図19 出力ブロックの再設定

4. ワークフローのテスト実行

 再度ワークフローをテスト実行してみましょう。先ほどと同じURLを入力して実行します。実行が完了したら「詳細情報」タブを確認し、result変数の中身を見てみましょう。前処理されたテキストがMarkdown形式で出力されていることが分かります(図20)。

図20 前処理後のワークフロー実行結果のMarkdown 図20 前処理後のワークフロー実行結果のMarkdown

 今回の評価では、ほぼ原文通りに本文が抽出されていましたが、Webページの構成によってはうまくいかない場合もあります。場合によってはなぜか韓国語が混じったりする場合もありました。その場合はプロンプトやモデルのパラメーターを調整してみてください。

【コラム】ワークフローの履歴管理とDSLエクスポートについて

 Difyのワークフローは何か変更を加えると自動保存されます。エディタを開いている間は、画面左下の変更履歴である程度、変更を戻すことができるのですが、ブラウザの再起動やリロードを行うとこの履歴は消えてしまいます(図21)。

図21 変更履歴ツールバー 図21 変更履歴ツールバー

 この変更履歴に加えて、Difyにはバージョン管理機能があります。公開したバージョン単位で過去の状態に戻すことができるので、重要なポイントでは公開しておき、「公開する」ボタン横の「バージョン履歴」から、分かりやすい名前を付けておくことをおすすめします(図22)。

図22 公開するボタンとバージョン履歴の例 図22 公開するボタンとバージョン履歴の例

 また、Difyのエディタの空白部分を右クリックすると、「DSLをエクスポート」メニューが表示されます。これでワークフロー全体をYAML形式でエクスポートできます(図23)。バージョン履歴からもDSLエクスポートが可能です。DSLは誤ってワークフローを削除してしまった場合などのバックアップにもなります。Gitを使っている場合は、このYAMLファイルを管理すれば変更差分が分かりやすくなるでしょう。

図23 右クリックメニューからのDSLエクスポート 図23 右クリックメニューからのDSLエクスポート

スクレイピングした結果の要約を実装する

 最後にスクレイピングした結果を要約してみましょう。

1. LLMブロックの追加

 先ほどと同様に前処理用LLMノードと出力ノードの間に新しいLLMブロックを追加します(図24)。

図24 要約用LLMノードの追加 図24 要約用LLMノードの追加

2. 要約用LLMノードの設定

 LLMノードをクリックすると、設定画面が開くので、図25のようにパラメーターを入力しておきます。

図25 要約用LLMノードの設定 図25 要約用LLMノードの設定

 「SYSTEM」欄に入力しているのは、リスト2のプロンプトです。

入力された内容を800字以内、かつ中学生でもわかりやすいように平易な文章表現で要約してください。ただし、入力に含まれない内容を推測したり、生成してはいけません。
【出力フォーマット】
# <ページタイトル>
<要約>
リスト2 要約用LLMノードのプロンプト

 「USER」欄には、「LLM 前処理」ノードのtextを設定します。

3. 出力ノードの再設定

 出力ノードの設定を再度変更し、result変数に「LLM 要約」ノードのtextを設定します。これで、要約されたテキストがワークフローの出力として返されるようになります(図26)。

図26 出力ノードの再設定(要約用) 図26 出力ノードの再設定(要約用)

4. ワークフローのテスト実行

 再度ワークフローをテスト実行してみましょう。前回と同じURLを入力して実行します。実行が完了したら「詳細情報」タブを確認し、result変数の中身を見てみましょう。要約されたテキストが出力されていることが分かります。

 筆者の実行結果は以下のようになりました。

# ノーコードで実現! DifyでカスタマーサポートAIチャットbotを作成する
この記事では、ノーコードツール「Dify」を使って、AIチャットbotを簡単に作成する方法を紹介しています。Difyは、プログラミングの知識がなくても、ドラッグ&ドロップでAIアプリを開発できるオープンソースのプラットフォームです。この記事では、Difyを使ってカスタマーサポート用のAIチャットbotを作成し、化粧品メーカーのサポート窓口として機能するように設定する手順を説明しています。
Difyの特徴として、日本語対応や外部サービスとの連携、オープンソースでの提供、商用利用が可能であることが挙げられます。また、Difyは無料プランもあり、気軽に試すことができます。
具体的な手順としては、Difyにサインアップし、チャットbotアプリを新規作成します。プロンプトを設定してAIの応答を制御し、AIモデルの選択やパラメーター調整を行います。さらに、ユーザー体験を向上させるために「会話の開始」や「フォローアップ」機能を追加します。
この記事を通じて、ノーコードでAIチャットbotを作成し、業務効率化やサービス向上を実現する方法を学ぶことができます。次回は、作成したチャットbotをホームページに埋め込む方法を紹介する予定です。

 600字未満で要約されており、800字以内という条件を考えると少々控えめでした。内容は正確ですが、記事の独自性などが感じられない表現です。これは「平易な文章表現で」と指定したのが影響しているかもしれません。プロンプトを調整することで、より良い要約が得られる可能性があります。

 TemperatureやTop-pのパラメーターを低く設定しているため、今回の例では複数回実行してもほぼ同じ要約が得られました。

【コラム】ステップ実行について

 プロンプトの調整など、ワークフローを試作しているときに、毎回全てのフローを実行すると時間がかかるだけでなく、LLMのトークン消費も増えてしまいます。Difyのワークフローには「ステップ実行」機能があり、特定のノードだけを実行して途中結果を確認することができます(図27)。

図27 ステップ実行の例 図27 ステップ実行の例

 このとき、入力には前回実行時の結果が使われます。そのため、一度は全体を流しておく必要があり、入力が変わるような変更があった場合は、その前のノードも再実行しておく必要があります。

まとめ

 今回は、Difyのワークフローを使ってWebページやPDFをスクレイピングし、その内容を前処理してから要約する一連の流れを紹介しました。簡単な例ではありますが、複数のLLMブロックを組み合わせることで、より高度なテキスト処理が可能になることが分かっていただけたでしょうか。

 次回は今回作ったワークフローをツール化し、別のチャットフローで利用する方法を紹介します。PDFでユーザーに応答を返す方法も紹介する予定です。ご期待ください。

筆者紹介

WINGSプロジェクト 山田研二(ヤマダ ケンジ)

株式会社MSEN CTO(https://msen.jp/)。高校卒業後、大阪大学の研究所で働きながらプログラミングやWebデザインをはじめ、以後20年以上、Webサイト制作や業務システムの構築を手掛けている。フリーソフトも幾つか公開している。好きな言語はC#とTypeScript、趣味は旅行。

GitHubアカウント(https://github.com/kenzauros

WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティー(代表山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手掛ける。2021年10月時点での登録メンバーは55人で、現在も執筆メンバーを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。

サーバーサイド技術の学び舎 - WINGS(https://wings.msn.to/
RSS(https://wings.msn.to/contents/rss.php
X: @WingsPro_info(https://x.com/WingsPro_info
Facebook(https://www.facebook.com/WINGSProject


Copyright © ITmedia, Inc. All Rights Reserved.

アイティメディアからのお知らせ

スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2026
人に頼れない今こそ、本音で語るセキュリティ「モダナイズ」
4AI by @IT - AIを作り、動かし、守り、生かす
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。