Difyユーザー必見！JSON Parseツールで面倒な整形作業から解放

はじめまして！ジェネラティブエージェンツの清水れみおです！

今流行りのLLMアプリ開発プラットフォーム『Dify』についてユースケースや実装方法をみなさんに提供していきます！

今回はJSON Parse(整形)についてです！
※2024年8月時点の環境です。Dify Ver.0.6.16

Dify で HTTP ブロックをよく使いますよね？ API からデータを取得して色々処理したい時に便利なんですが、返ってくる result の整形がちょっと面倒に感じることはありませんか？
特に複雑な JSON データだと、必要な情報を取り出すのにコードを結構書かないといけなかったり…。
そこで今回は、Dify の JSON Parse ツールを使って、JSON データの整形を劇的に楽にする方法をご紹介します！

例えば、画像のように GCP Vision API から返ってきた結果からテキストデータだけを抽出したいとします。
一般的な方法としては、コードブロックのJavaScript でHTTPの結果の{body}を選択し、バックスラッシュ付きの引用符と改行文字を削除します。
そして JSON.parse() を使って JSON データをパースし、必要な要素にアクセスするコードを書く必要があります (画像1)。

function main(args) {
  const cleaned = args.replace(/\r/g, "").replace(/\n/g, ""); 
  const result = JSON.parse(cleaned);
  const description = result.responses[0].textAnnotations[0].description; 
  return { 
    ocr_result: description 
  };
}

HTTPブロックを使うたびに毎回このコードを書くのは面倒ですよね

Dify の JSON Parse ツールを使ってみよう！

Dify の JSON Parse ツールを使えば、こんな面倒な JSON 処理をノーコードで実行できます。
1. ツールの選択
ブロックを追加から、ツール一覧の JSON Parseツールを探してワークフローに追加します (画像2)。

2. パラメータの設定
JSON Parse ツールをクリックして設定画面を開き、以下のパラメータを設定します (画像3)。

JSON data: パースしたい JSON データ。ここでは、HTTP ブロックの出力結果である{body}を指定します。
JSON filter: 抽出したいデータのパス。responses[0].textAnnotations[0].description のように、JSON の構造に従ってパスを記述します。
3. 実行結果の確認
設定が完了したらワークフローをテスト実行します。
JSON Parse ツールは、指定した JSON filter に基づいてデータを抽出し、出力変数{text}に格納します (画像3)。
これで、複雑な JSON データから必要な情報だけを簡単に抽出できました！
JavaScript のコードを書く必要もなく、視覚的に分かりやすいインターフェースで操作できるので、作業効率が大幅に向上します。
Dify の JSON Parse ツールを活用して、HTTPブロックでAPIをいっぱい使っていきましょう！