🎯 Difyを活用せよ！
Difyを使って、Webサイトの記事を取得し、生成AIを活用して誤字脱字をチェックするツールを作成しようとしました。
今回はその第一段階として、URLを入力し、HTTP RequestノードでHTMLを取得するところまで実装できたので、備忘録としてまとめます。
📚 目次
- 🎯 Difyを活用せよ！
- 🌐 まずはHTTP Requestから挑戦
- 🎯 作りたかったもの
- 🚩 Startノード
- 🌍 HTTP Requestノード
- ⚠️ コード実行でエラーが発生…最初の壁にぶつかる
- 🔄 方針転換を決意
- 🚀 次にやること
- 🎉 まとめ
🚀 ChatGPTを活用して開発をスタート！
今回のツールは、ゼロから自分でWorkflowを設計したわけではありません。
ChatGPTを相棒として活用しながら、Difyで誤字脱字チェックツールの開発をスタートしました。
Difyはノードが豊富で自由度が高い反面、
- 「どのノードを使えばいいの？」
- 「ノード同士はどう接続するの？」
- 「各項目には何を入力すればいいの？」
と悩む場面も少なくありません。
そこで今回は、ChatGPTに設計から設定方法までサポートしてもらうことにしました。
💬 ChatGPTへの依頼内容
まず最初に、ChatGPTへ以下のようなプロンプトを入力しました。
↑のサイトに掲載する予定の記事内の誤字脱字を確認出来るツールをDifyを使って作成できますか？
出来るのであれば作り方の詳細を教えてください。
2026年版Difyに対応した最新版のWorkflowでお願いします。
また、各ブロックの設定方法は1クリックずつ細かく説明してください。
🤖 ChatGPTから提案されたWorkflow
ChatGPTから提案されたWorkflowは、次のような構成でした。
URL入力
↓
HTTP Request
↓
HTML取得
↓
本文抽出
↓
AI校正
非常にシンプルな構成ですが、誤字脱字チェックツールとして必要な処理が整理されており、初心者でも理解しやすいWorkflowになっています。
💡 さらに嬉しかったポイント
最初はJavaScriptのCodeノードを使うものだと思っていました。
しかしChatGPTからは、
最新版のDifyではCodeノードを使わずに構築した方がシンプルで保守しやすい
というアドバイスをもらいました。
つまり、
- ✅ Codeノード不要
- ✅ JavaScript不要
- ✅ エラーが発生しにくい
- ✅ Workflowが見やすい
- ✅ 保守しやすい
という構成を提案してもらえました。
📌 最終的に目指すWorkflow
完成形としては、以下のWorkflowを目標にしています。
URL入力
↓
HTTP Request
↓
HTML取得
↓
本文抽出
↓
LLM（誤字脱字チェック）
↓
結果表示
記事URLを入力するだけで、
- 誤字
- 脱字
を自動で検出し、修正候補を表示するツールを目指しています。
⚠️ まずはHTTP Requestから挑戦
とはいえ、一気にすべてを実装するのは難しいため、今回は最初のステップとして、
「HTTP Requestノードで記事のHTMLを取得する」
ところまで実装を進めることにしました。
まずは記事データを取得できなければ、その後の本文抽出やAIによる校正も行えません。
そのため、土台となるHTTP Requestの実装から着手することにしました。
💡 この記事では、HTTP Requestノードの設定から実際につまずいたポイントまでを、失敗談も交えながら紹介していきます。
🎯 作りたかったもの
対象サイトの記事URLを入力すると、
- 記事本文を取得
- AIが誤字脱字をチェック
- 修正候補を表示
というツールを作ることが目標です。
記事を公開する前に簡単にチェックできるようにしたいと思い、Difyで実装することにしました。
🛠️ 開発環境
- Dify（2026年版）
- Workflow
- OpenAI系LLM
🔄 Workflow構成
現時点では非常にシンプルです。
Start
↓
HTTP Request
↓
End
まずはURLからHTMLが取得できるかを確認することを目的にしました。
こちらが作成画面の「誤字脱字見つけるくん」です。
🚩 Startノード
入力項目はURLのみです。
| 項目 | 内容 |
|---|---|
| 変数名 | url |
| タイプ | Short Text |
例
https://iicoto.info/sample/
🌍 HTTP Requestノード
HTTP Requestノードでは、Startノードから受け取ったURLへアクセスします。
設定内容は以下です。
| 項目 | 設定 |
|---|---|
| Method | GET |
| URL | {{url}} |
| Headers | なし |
実行すると、レスポンスとしてHTMLが返ってきました。
✅ 実行結果
取得したHTMLの一部はこのようになりました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
・・・
無事にHTMLが取得できていることを確認できました。
ここまでは想定どおり動作しています。
🚧 現時点での課題
HTML全体が取得できることは確認できましたが、このままでは以下のような問題があります。
- ヘッダーやフッターも取得される
- メニューやサイドバーも含まれる
- JavaScriptやCSSまで取得される
AIにそのまま渡すと不要な情報まで解析してしまうため、誤字脱字チェックの精度が低下する可能性があります。
そのため、次のステップでは記事本文だけを抽出する処理が必要になります。
⚠️ コード実行でエラーが発生…最初の壁にぶつかる
Workflowの構成どおりにノードを作成し、いよいよCodeノードでHTMLを整形する処理を実装しました。
ChatGPTに作成してもらったJavaScriptをそのまま貼り付け、実行ボタンをクリック。
「これで本文だけが抽出できるはず！」と思っていましたが、結果はエラーでした。
💥 発生したエラー
<anonymous_script>:34
main(inputs);
^
ReferenceError: inputs is not defined
inputsが定義されていないというエラーで、Workflowは途中で停止してしまいました。
実際の画面がコチラ↑
🤔 原因が分からず試行錯誤
最初は、
- コードの貼り付けミス
- JavaScriptの文法ミス
- 変数名の入力ミス
などを疑い、何度もコードを見直しました。
しかし、どこを修正しても同じエラーが表示され、なかなか解決できませんでした。
🔍 調べて分かったこと
ChatGPTと何度かやり取りを重ねて調べていくと、原因はコードそのものではなく、Difyの実行環境の違いにある可能性が高いことが分かりました。
2026年版のDifyでは、Codeノードの実行方法や入力変数の扱いが以前のバージョンから変更されている箇所があり、過去のサンプルコードをそのまま実行すると正常に動作しないケースがあるようです。
そのため、今回使用したコードも現在の環境には適合しておらず、inputsを参照できない状態になっていました。
↑ChatGPTとの闘いの一部です…!
💡 方針転換を決意
ここで無理にCodeノードを使い続けるよりも、
- Codeノードを使わない
- Dify標準のノードを活用する
- 保守しやすいWorkflowにする
という方向へ切り替えることにしました。
ChatGPTからも、最新版のDifyではCodeノードに頼らない構成の方がシンプルでメンテナンスしやすいという提案を受けたためです。
結果として、この失敗がWorkflow全体を見直すきっかけになりました。
💭 「エラーが出た＝失敗」ではなく、「最新版に合った構成へ見直す良い機会だった」と前向きに捉え、次のステップではCodeノードを使わないWorkflowで再挑戦することにしました。
🚀 次にやること
次回は以下のWorkflowを完成させる予定です。
URL入力
↓
HTTP Request
↓
HTML抽出
↓
LLM
↓
誤字脱字チェック結果
HTML全体ではなく、本文だけを抽出してLLMへ渡すことで、より実用的な誤字脱字チェッカーを目指します。
🎉 まとめ
今回はDify Workflowを利用し、
- URL入力
- HTTP Request
- HTML取得
まで実装することができました。
まずはWebページを取得する基礎部分が完成したので、次回はHTMLから本文を抽出し、AIによる誤字脱字チェック機能の実装に挑戦したいと思います。
同じようにDifyでWebページ解析を行いたい方の参考になれば幸いです。
🌱 その後…
エラーが出ている状態を動画にしてこの記事に載せようと思い、
テストボタンを押してみた所…
原因についてはまた確認していこうと思います…