Difyを使ったノーコード開発：初心者向けレシート管理アプリの作り方

Jun Ichikawa/ 市川淳

2024年8月25日 23:38

はじめに

Difyは、ノーコードでAIを活用したワークフローやチャットボットを簡単に作成できる強力なプラットフォームです。特に、プログラミングの知識がなくても直感的に操作できる点が大きな魅力で、さまざまなビジネスシーンでの業務効率化に貢献します。

この記事では、Difyを初めて使用する方を対象に、基本的な機能の概要と、ワークフローやチャットボットの作成方法について解説します。これを通じて、Difyの基本をしっかりと理解し、実際に活用できるようになることを目指します。

対象読者

Difyを使ってワークフローやチャットボットを作成したい方
Difyでできることを学びたい方

この記事でわかること

Difyの基本機能とその操作方法
ワークフローやチャットボットの作成手順
AIを活用したビジネスプロセスの自動化方法

Difyの作成方法

初期設定

Difyのページにアクセスし、「最初から作成」を選択します。次に「チャットボット」を選び、名前を「領収書管理アプリ」など適切なものに設定して「作成する」をクリックします。

ワークフローの構築

全体の流れは以下の通りです：

開始
- ワークフローのスタート。
領収書読み取り LLM
- 入力された画像から、金額、日付、発行元の情報を取得。
JSONデータ生成 LLM
- 取得した情報をJSON形式に変換。
スプレッドシート記録
- JSONデータをGoogle Apps Scriptを使用してスプレッドシートに記録。
処理結果判定
- 記録結果を判定。
回答
- チャット画面に処理結果を出力。

1. 開始

このステップでは特別な設定は必要ありません。

2. 領収書読み取りLLM

使用するモデルは「gpt-4o-mini」です。システムメッセージには以下の内容を指定します。

{{#context#}}
<instruction>
    <instructions>
        このタスクでは、領収書の内容を読み取り、以下の情報を抽出します。
        1. 金額を特定します。金額は通常、数字と通貨記号で表されます。
        2. 日付を特定します。日付は通常、年、月、日で構成され、特定のフォーマット（例：YYYY/MM/DD）で表示されることが多いです。
        3. 発行元を特定します。発行元は、領収書を発行した会社や店舗の名前です。
        
        各情報を明確に分けて出力してください。出力にはXMLタグを含めず、シンプルなテキスト形式で提供してください。情報は以下の形式で整理してください：
        - 金額: [金額]
        - 日付: [日付]
        - 発行元: [発行元]
        
        例として、領収書の内容を読み取る際には、文脈を考慮し、正確な情報を抽出するようにしてください。
    </instructions>
    
    <examples>
        <example>
            <input>2023年10月5日、ABC商事での購入金額は5,000円です。</input>
            <output>金額: 5,000円
日付: 2023年10月5日
発行元: ABC商事</output>
        </example>
        <example>
            <input>2023年9月15日、XYZ株式会社からの領収書、金額は12,000円です。</input>
            <output>金額: 12,000円
日付: 2023年9月15日
発行元: XYZ株式会社</output>
        </example>
        <example>
            <input>2023年8月20日、DEFストアでの支払いは3,500円でした。</input>
            <output>金額: 3,500円
日付: 2023年8月20日
発行元: DEFストア</output>
        </example>
    </examples>
</instruction>

※ {{#context#}} の箇所は、「/」を入力し、「コンテキスト」を選択してください。

3. JSONデータ生成LLM

モデルは「gpt-4o-mini」を選択し、以下のシステムプロンプトを指定します。

{{#llm.text#}}から、以下のJSON形式に変換してtext形式で出力してください。

重要：いかなる場合もJSON形式テキストを含めいないこと

{
 "Amount": "{{#llm.text#}}の金額",
  "Date": "{{#llm.text#}}の日付",
  "Issuer": "{{#llm.text#}}の発行元情報"
}

`{{#llm.text#}}` の部分には、/ を入力して、「領収書読み取り LLM」の「text」を選択します。

4. スプレットシート記録

「HTTPリクエスト」ブロックを使用します。HTTPリクエストを利用して、Google Apps Script (GAS) を通じてスプレッドシートに情報を書き込みます。

まず、新しいスプレッドシートを開き、シート名を「領収書管理」に変更します。「拡張機能」から「App Script」を選択し、以下のスクリプトをコピーして貼り付けます。

function doPost(e) {
  try {
    // リクエストのJSONデータを解析
    var jsonData = JSON.parse(e.postData.contents);
    
    // 現在のスプレッドシートを取得し、シート名を指定
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('領収書管理');
    
    // 現在の日時を取得
    var currentDate = new Date();
    
    // データを格納するオブジェクト
    var data = {
      timestamp: currentDate,
      amount: jsonData.Amount || '',
      date: jsonData.Date || '',
      issuer: jsonData.Issuer || ''
    };
    
    // スプレッドシートに新しい行を追加
    sheet.appendRow([data.timestamp, data.amount, data.date, data.issuer]);
    
    // 成功ステータスを返す
    return ContentService.createTextOutput(JSON.stringify({status: 'success'}))
      .setMimeType(ContentService.MimeType.JSON);
      
  } catch (error) {
    // エラー発生時の処理
    return ContentService.createTextOutput(JSON.stringify({status: 'error', message: error.toString()}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

デプロイ方法

GASエディタ上部の「デプロイ」ボタンをクリックし、「新しいデプロイ」を選択します。
「⚙️設定」アイコンをクリックし、「ウェブアプリ」を選びます。
以下の情報を入力します:
- 新しい説明文: 適切な説明を入力
- 次のユーザとして実行: 自分
- アクセスできるユーザー: 全員
「デプロイ」をクリックし、Googleによるアクセス承認が求められた場合は、指示に従って承認してください。

デプロイが完了すると、生成されたWebアプリケーションのURLが表示されます。このURLをメモし、DifyのAPIセクションで使用します。

続いて、「ボディ」欄で「JSON」を選択し、入力欄にて「/」を入力して、「JSON生成 LLM.text」を選択してください。

5. 処理結果判定

「IF/ELSE」ブロックを使用し、処理結果を判定します。「IF」には「success」という文字列を入力します。

6. 回答

処理結果に応じて、チャット画面に成功または失敗のメッセージを出力します。

処理結果で成功した場合：

処理結果で失敗した場合：

これで、Dify上でチャットボットのワークフローが作成されました。

実際に試してみる

「プレビュー」ボタンをクリックして、実際にアプリを試してみましょう。

任意の領収書を添付し、メッセージを入力すると、Difyが自動的に領収書の内容を読み取り、指定したスプレッドシートにその情報が記録されます。これで、領収書の内容が正確にスプレッドシートに反映されていることを確認できました。

終わりに

Difyを活用すれば、領収書管理アプリ以外にもさまざまなビジネスニーズに対応したアプリケーションを簡単に作成できます。以下はその一例です。

レシート管理アプリ
レシートの写真をアップロードすると、金額、日付、店舗名が自動的にスプレッドシートに整理されます。
名刺管理アプリ
名刺の写真から名前や会社名を抽出し、デジタル管理が可能です。
保証書管理アプリ
製品保証書の情報を整理して記録し、管理を効率化します。
契約書管理アプリ
契約書の要点を抽出し、スプレッドシートに記録します。
IDカード管理アプリ
社員証やIDカードの情報を整理して管理できます。

お仕事の依頼・相談について

提供できるサービス

私は、以下のようなシステム開発とコンテンツ作成を幅広くサポートしています。OpenAI API・ファインチューニングをはじめとするさまざまな技術を活用し、お客様のニーズに合わせたソリューションを提供します。

自動化システムの構築：AIを利用したカスタマーサポート、FAQシステム、チャットボットなど、業務効率化を図るためのシステムを構築します。ニーズに応じて最適なツールや技術を組み合わせて対応します。
GPTs/Dify開発：OpenAIの技術を活用し、カスタムGPTモデルやDifyを使用したシステム開発をサポートします。
コンテンツ作成：AIを活用したコンテンツ作成を支援します。ブログ記事、マーケティング資料、教育コンテンツなど、さまざまな分野でのコンテンツを作成します。

詳しくはこちら：

案件のご相談はこちらから

これらの技術やサービスに興味がある方、または具体的なプロジェクトのご相談がある方は、ぜひお気軽にご連絡ください。お客様のニーズに合った最適なソリューションを提供いたします。

お問い合わせフォームはこちら
X(Twitter)のDMでもお問い合わせいただけます。X(Twitter)での問い合わせはこちら