サステックスのエンジニア、大谷です。

今回は、Difyのワークフローと自作のスクレイピングAPIを組み合わせる事で、指定したURLのページのスクリーンショットを自動で取得するアプリを作成しました。

本記事では、その構成や実装のポイントを紹介します。

はじめに

Difyとはなにか？

Difyは、OpenAIのようなLLMを使ったアプリをノーコードやローコードで構築できるプラットフォームです。
チャットアプリの作成、API連携、ワークフローによる処理の自動化など、業務効率化や社内ツール開発に幅広く活用できます。

Difyは便利なノーコード／ローコードプラットフォームですが、現状では一部の機能やフロー構築に制限があり、特定の業務要件を満たすワークフローをそのまま実現するのが難しいケースがあります。
そこで、エンジニアが作成したコードを組み合わせることで、DifyのUIやワークフローでの運用の強みはそのまま活かしつつ、処理内容や実行ロジックを柔軟に拡張できるようになります。

本記事で実現すること（指定URLのスクリーンショット自動取得）

今回は、指定したURLのWebページを自動でスクリーンショットとして取得するワークフローを構築しました。
例えば、2025年8月の段階では、DifyではWebページを画像として取得するプラグインが公式では対応されていません。機能追加の要望は出されているものの、今後も対応には時間がかかりそうです。

https://github.com/langgenius/dify/discussions/3734

今回のワークフローの全体の構成は以下の通りです。

• 入力されたURLからスクリーンショットを取得するスクレイピングプログラムをローカルで作成し、Dockerでサーバー化

• 作成したAPIをngrok経由で外部公開

• DifyのワークフローからそのAPIを呼び出し、スクリーンショットを取得・出力

このように、Difyと外部APIを組み合わせることで、より柔軟な業務アプリが構築可能になります。

なお、他にも当社ではDifyを活用した以下のようなアプリ開発事例を紹介しています。ぜひ併せてご覧ください

Dify上でのスクリーンショット自動取得ワークフローのユースケース

どんな人・業務・シーンで役立つのか

前述したように、このワークフローはURLを入力としたスクリーンショット取得というワークフローにしていますが、以下のような場面で役に立ちそうです。

• 競合サイトの定期モニタリングレポート：競合他社のランディングページ（LP）やキャンペーンページを定期的にチェックし、アーカイブしてレポートを生成したい

• 価格・キャンペーン表示の監視：特定商品のページを定期的にキャプチャし、LLMで価格やキャンペーンバナーの有無を判定。変化があれば即時通知。

• 情報収集・自動レポート作成：株価やランキングなどのサイト(特定のWebページ)を定期的に記録して、週次・月次レポートに組み込みたい場合

「URLを入力するだけでページの見た目を画像として保存できる」というシンプルなワークフローですが、手作業でのキャプチャやスクレイピングよりも手軽で別のワークフローにも再利用もしやすいのが特長です。

今はLLMの画像入力による分析なども出来るため、より多用なことに活用ができそうです。

Dify単体では難しい理由とAPI連携の価値

Difyはノーコード／ローコードで強力なワークフローを構築できる便利なプラットフォームですが、プラグインや標準機能だけでは実現が難しいケースも多く存在します。たとえば、スクレイピングのモジュールもWebページ全体のレイアウトを「画像として取得」することはできず、あくまでHTMLやテキスト解析が中心です。
また、Zapierのような自動化ツールは多くのWebサービスと連携できますが、「任意のURLのスクリーンショット取得」といった細かい制御は不得意です。

そこで有効なのが外部APIとの連携です。
APIを組み込むことで、スクリーンショット取得や画像解析、独自ロジックの適用など、標準機能では難しい処理を柔軟に追加できます。さらに、このAPIを「誰でも使えるモジュール」としてDifyワークフローに組み込むことで、非エンジニアでも高度な処理を簡単に利用できるようになります。

もちろん、自作モジュールは一定のメンテナンスコストがかかりますが、一度作れば他のワークフローからも再利用でき、汎用性・運用性ともに非常に高い資産となります。また、Difyで構築したワークフローはUI付きチャットアプリとして特定ユーザーに公開できるため、開発者以外のメンバーでも簡単に利用できます。
この「非エンジニアでも使える」点は、特に重宝出来るポイントです。

今回の構成と必要なツール

全体構成と概要

このアプリは、Difyのワークフローと自作のスクレイピングAPIを組み合わせて、指定されたURLのWebページをスクリーンショットとして取得・出力するものです。

全体の構成は以下の通りです。

• ユーザーがDifyアプリ上でURLを入力

• Difyワークフローが外部API（自作）にリクエストを送信

• 外部APIが対象のWebページをスクレイピングし、スクリーンショットを取得

• Difyが画像URLをユーザーに返す

構築手順について紹介していきます。

1. 外部APIのコードを作成する

ディレクトリ構成

screenshot-api/ ├── app/ │ └── main.py ← FastAPI アプリ ├── Dockerfile ← コンテナ定義 ├── requirements.txt ← Python依存

app/main.py（FastAPI + Selenium 実装）

from fastapi import FastAPI, Query, HTTPException
from fastapi.responses import FileResponse
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
import time, uuid, os

app = FastAPI()
OUTPUT_DIR = “/screenshots”
os.makedirs(OUTPUT_DIR, exist_ok=True)

@app.get(“/screenshot”)
def take_full_screenshot(url: str = Query(…)):
if not url.startswith(“http”):
raise HTTPException(status_code=400, detail=“Invalid URL”)

filename = f"screenshot_{uuid.uuid4().hex}.png"
filepath = f"{OUTPUT_DIR}/{filename}"

chrome_options = Options()
chrome_options.add_argument("--headless=new")
chrome_options.add_argument("--no-sandbox")
chrome_options.add_argument("--disable-dev-shm-usage")
chrome_options.add_argument("--lang=ja-JP")
chrome_options.add_argument("--window-size=1920,1080")

driver = webdriver.Chrome(options=chrome_options)

try:
    driver.get(url)
    time.sleep(3) 

    scroll_pause = 1
    last_height = driver.execute_script("return document.body.scrollHeight")

    while True:
        driver.execute_script("window.scrollBy(0, 1000);")
        time.sleep(scroll_pause)
        new_height = driver.execute_script("return document.body.scrollHeight")
        if new_height == last_height:
            break
        last_height = new_height

    driver.set_window_size(1920, last_height)
    time.sleep(1)

    driver.save_screenshot(filepath)
except Exception as e:
    raise HTTPException(status_code=500, detail=str(e))
finally:
    driver.quit()

return FileResponse(path=filepath, media_type="image/png", filename=filename)

requirements.txt

fastapi
uvicorn
selenium

Dockerfile

FROM python

.10-slim

RUN apt-get update && apt-get install -y
wget curl unzip gnupg2 chromium chromium-driver
&& apt-get clean
&& rm -rf /var/lib/apt/lists/*

COPY requirements.txt .
RUN pip install —no-cache-dir -r requirements.txt

COPY app /app
WORKDIR /app

RUN mkdir /screenshots

CMD [“uvicorn”, “main

”, “—host”, “0.0.0.0”, “—port”, “8000”]

2. Dockerを実行しFastAPIを立ち上げる

ルートディレクトリで下記のコマンドを実行して下さい。

docker build -t screenshot-api . docker run -p 8000:8000 screenshot-api

ローカル環境で動作を確認したい場合は、上記のコマンドを実行した後に下記のURLでブラウザからアクセスしてみて下さい、入力されたURLのページのスクリーンショットが取得できます。

http://localhost:8000/screenshot?url=https://example.com

3. ngrokを利用してローカルAPIを外部からアクセス可能にする

ngrokは、ローカルで動かしているWebアプリやAPIを、一時的にインターネット上に公開するためのツール／サービスです。今回は一時的にngorkで構築を試していましたが、本番環境で使用したい方はGCPのCloud RunやAWS App Runner、Railwayなどが便利です。

• 自分のPCで動かしているローカルサーバー（localhost:3000など）に対して世界中どこからでもアクセス可能なURLを発行

• APIやWebアプリを外部サービス（DifyやWebhookなど）と連携させたいときに便利

• 開発中のアプリをクライアントやチームに一時的に見せたいときにも使える

STEPngrokをインストール

方法1：Homebrew経由でインストール

brew install ngrok

インストール後、次のコマンドでバージョン確認できます。

ngrok version

方法2：公式サイトから直接ダウンロード

ngrok公式サイトからバイナリを直接ダウンロードすることができます。

STEPログインと認証
初回利用時はログインと認証が必要です。

• ngrokのセットアップページにアクセス

• アカウント作成（無料）

• トークンを取得、次のように設定

ngrok config add-authtoken <ここにトークン>

※トークンはトップページのYour Authtokenから取得できます

STEPFastAPIにトンネルを開く
FastAPIを起動中に別ターミナルで以下を実行して下さい。

ngrok http 8000

https://XXXXXXXX.ngrok-free.appのようなURLが発行されるので、これがあなたのAPIの外部アクセス用エンドポイントになります。

4. Difyでワークフローを作成

まず、ワークフロー構築に入る前に、Difyを利用可能な状態にしておきます。
Difyは以下のいずれかの方法で準備できます。

クラウド版Difyを利用する場合
Dify公式サイトからアカウントを作成し、すぐにブラウザ上で利用できます。セットアップが不要で手軽に試せます。

セルフホスト版Difyで構築する場合
GitHub上のDifyリポジトリをクローンし、Docker Composeを利用して自分のPC上で動かします。ローカル環境で試したい場合や、自社サーバーで運用する場合に向いています。弊社では社内でセルフホスト版を運用しています。

STEPアプリを立ち上げる
トップページから「最初から作成」をクリックして下さい。

設定画面に移るので、アプリタイプは「ワークフロー」を選択して、アプリ名を入力した後に、「作成する」をクリックして下さい。

STEPワークフローにブロックを追加する
右クリックの後に、「ブロックを追加」→「HTTPリクエスト」の順にクリックして下さい。

同様に右クリックの後に、「ブロックを追加」→「終了」の順にクリックして下さい。

ブロックが作成されたら、ブロック間をドラッグして、3つのブロックを繋げて下さい。

STEP開始ブロックの設定を行う
開始ブロックを選択した後に、設定画面の入力フィールドの右の「+」をクリックして下さい。

入力フィールドの設定画面でフィールドタイプを「短文」に選択して、変数名は「URL」と入力して、設定が終わったら、保存をクリックして下さい。

STEPHTTPリクエストブロックの設定を行う
HTTPリクエストブロックを選択した後に、APIの設定をします。

「GET」を選択してAPIエンドポイントを設定して下さい。

APIエンドポイントは「3. ngrokを利用してローカルAPIを外部からアクセス可能にする」のstep3で取得したエンドポイントにパラメータ(/screenshot?url=)を付け加えて、さらに”url=“の後に”/“を入力すると、変数のリストが表示されるので「URL」を選択して下さい。

※”/“キーで変数を挿入できます

パラメータがこのように設定されていれば問題ないです。

STEP終了ブロックの設定を行う
週力ブロックを選択した後に、出力変数の右の「+」をクリックして下さい。

変数値の設定でHTTPリクエストの「files」を選択して下さい。

ワークフローの作成は以上になります。

今回は最低限の設定しか行っていませんが、必要に応じで設定を追加して下さい。

作成したワークフローを使ってみる

右上の「実行」をクリックして下さい。

スクリーンショットを取得したいページのURLを入力して「実行開始」をクリックして下さい。

今回は例として、当社のホームページ（https://sustechs.co.jp/）を入力してみました。

スクリーンショットが取得できました。

「files」をクリックして下さい。

当社のサイトではアニメーションやJavascriptなどが入っているものの、アニメーション後のスクリーンショットが取得出来ていることが確認出来ます。

おわりに

今回は、Difyのワークフローと自作のスクレイピングAPIを組み合わせて、指定したURLのWebページを自動でスクリーンショット取得するアプリの構築方法を紹介しました。
一見シンプルな仕組みですが、競合チェックやLPの監視、UIの履歴保存など、業務のさまざまな場面で応用できるポテンシャルがあります。
また、自作APIと組み合わせる事でDify上では理屈上より柔軟なワークフローの構築が可能です。

Difyは、外部APIやツールとの連携が柔軟にできるため、今回のスクリーンショット取得のように「既存ツールでは難しいけれど自分で作れば可能になる」仕組みを、比較的少ない工数で形にできます。
この特性を活かせば、スクリーンショット取得以外にも、データ収集・分析・通知など、さまざまな自動化ワークフローを構築できるでしょう。

ぜひ、今回の内容をベースに自分の業務やチームの課題に合わせたDifyワークフローを試作してみてください。