Bubble × Difyで作る経費精算アプリ：ノーコードで開発する方法

はじめに

BubbleとDifyを組み合わせると、領収書の読み取りと申請・承認をつなぐ経費精算アプリを設計できます。Difyで領収書の情報を抽出し、Bubbleで確認画面や承認フローを作る役割分担です。導入前に、読み取り対象の形式と社内の経費規程、承認者を整理します。

本記事では、Bubble × Difyを使って、経費精算アプリをどのように作成するか、手順を分かりやすく解説します。画面作成からAIの設定、承認、データ保存までの手順と、実装時の確認事項を見ていきましょう。

Bubble × Difyのメリット

1. ノーコード開発で素早く実装

BubbleではUI・データベース・ワークフローを画面上で組み立てられます（Bubble公式：基本機能、2026年9月28日確認）。DifyのAI処理との接続にはAPIの設定も必要です。追加実装の要否は、会計システムとの連携や権限の要件に応じて検討してください。

内製と外注を比較するときは、領収書の読み取り検証、承認画面の開発、運用保守を分けて見積もります。費用の検討には、AI開発の費用相場【2026年版】｜PoC・本開発・運用の内訳と見積もり方をご確認ください。

2. 経費精算の自動化

経費精算には、領収書のアップロード、申請内容の確認、承認フロー、支払明細の管理など、さまざまな手順が関わります。Difyに画像入力とVision対応モデルを設定すると、領収書の項目抽出を組み込めます（Dify公式：画像入力とVision設定、2026年9月28日確認）。抽出値は申請内容の候補として表示し、申請者が原本と照合してから提出する設計にします。

3. 柔軟なカスタマイズが可能

Bubbleで作成したアプリは、業務フローに合わせてUIやデータベースの構造を自由にカスタマイズできます。画面・データ・操作条件の組み合わせで、部署別の承認など自社の業務に合わせて設計します（Bubble公式：基本機能、2026年9月28日確認）。

経費精算アプリ作成の流れ

ステップ1：Bubbleで基本のUIを作成

Bubbleにサインイン

Bubbleの公式サイトからアカウントを作成し、新規アプリを作成します。

デザイン画面でUIを作成

フォーム：経費申請フォームを作成します（項目：申請者名、経費内容、金額、日付、領収書のアップロード）。
リスト表示：申請した経費の一覧を表示するページを作成します。申請者、承認ステータス（未承認・承認済み）、金額などをリストで表示します。
承認フロー：経費を承認するためのボタンや承認・却下の選択肢を作成します。

データベース設計

申請者情報：名前、部署、役職など
経費情報：金額、日付、内容、領収書画像、申請者ID、承認ステータス
承認履歴：承認者ID、承認日、ステータス

ステップ2：DifyでAI機能を組み込む

Difyにサインイン

Difyの公式サイトにサインインし、AIアプリを新規作成します。

経費精算AIの設定

領収書読み取り：Difyを使用して、経費精算時にアップロードされた領収書をAIが読み取って、金額や店舗名、日付などのデータを自動で抽出します。画像を扱うには、LLMノードでVision対応モデルを選び、VISIONを有効にして入力画像の変数を指定します（Dify公式：画像入力とVision設定、2026年9月28日確認）。モデル名だけで対応可否を判断せず、利用環境で領収書画像を渡せるか確認します。
申請内容の確認：社内規程をもとに「接待費」「交通費」などの分類候補と確認が必要な点を出すよう設計します。判読できない金額や日付は推測で埋めず原本との照合対象にし、最終的な申請可否は承認者が判断します。

Bubbleとの連携

API連携：DifyのAI機能をBubbleに組み込みます。Bubbleの「API Connector」プラグインを使用して、Dify側で公開したAPIの仕様に合わせて認証・入力・出力を設定します。秘密キーはPrivate設定で保護し、ブラウザーに公開しないようにします（Bubble公式：API Connector、2026年9月28日確認）。
結果の表示：AIが抽出した情報（例えば金額や日付）をBubbleのUIに自動的に表示します。経費申請者が原本と見比べ、誤りを修正してから申請できる画面にします。利用するモデル・撮影条件ごとの読み取り精度を踏まえて運用を設計してください。

ステップ3：承認フローを設定

承認者の設定

各経費申請は、部署ごとの承認者に自動的に送信されるように設定します。Bubbleのワークフロー機能で、申請操作を起点にデータ更新などのアクションを設定します（Bubble公式：ワークフロー、2026年9月28日確認）。承認・却下を実行できるユーザーの条件も設定します。

ステータス管理

承認フローに沿って、経費申請のステータス（「未承認」「承認済み」「却下」）を更新します。これにより、誰が承認したのか、何時に承認されたのかを記録し、確認できるようにします。

通知機能

経費が承認された際や却下された際に、申請者や承認者に通知が届くように設定します。通知は承認処理とは別に、メール送信や画面表示など採用する方法を決めて実装します。受信できない場合も申請一覧から結果を確認できるようにします。

ステップ4：データの保存とレポート作成

データベースへの保存

経費申請が完了したら、申請内容、承認状況、領収書画像などをBubbleのデータベースに保存します。このデータは後でレポートや統計に使用できます。

レポート機能の作成

経費申請のデータを基に、部署別や月別でのレポートを作成します。Bubbleでグラフやテーブルを作成し、どの部署がどれだけ経費を使っているか、どの申請が承認されたかを簡単に確認できるようにします。

活用例：経費精算アプリの活用シナリオ

経費申請が簡単に：社員はアプリで簡単に経費申請を行い、領収書から抽出された金額の候補を確認・修正して提出します。
AIによる自動チェック：AIの抽出結果と社内規程を照らし合わせる設計にします。判断が難しい内容は承認者に回し、確認結果を記録します。
リアルタイムの承認：管理者や部門長が申請一覧から確認・承認し、設定した方法で申請者へ結果を通知する運用です。接続環境や通知処理の動作は事前に検証します。
データの一元管理：経費データが一元管理されることで、月次・年次でのレポート作成が簡単になり、経営層に対して透明性のある報告が可能になります。

よくある質問（FAQ）

Q1: Difyを使うためにはOpenAIのAPIキーが必要ですか？

A1: OpenAIのAPIキーが一律に必要なわけではありません。Dify Cloudには、自分のAPIキーを用意せずAI creditsで対象モデルを使う方法があります。自分のプロバイダーアカウントを接続する場合は、その提供元に応じたAPIキーなどを設定します（Dify公式：モデルプロバイダー、2026年9月28日確認）。利用形態と選ぶモデルに合う認証方法を確認してください。

Q2: Bubbleで作った経費精算アプリはどこで公開できますか？

A2: BubbleのWebアプリはWeb上に公開できます。レスポンシブ表示を設定し、公開前にPC・モバイルの画面サイズでフォームや承認ボタンを検証します（Bubble公式：アプリ公開、2026年9月28日確認）。

Q3: 経費申請の承認フローはどのように設定できますか？

A3: Bubbleのワークフローで、申請や承認ボタンの操作に応じたデータ更新を設定します（Bubble公式：ワークフロー、2026年9月28日確認）。申請者・承認者・金額の条件を整理し、権限のないユーザーが承認できないことを検証します。

まとめ

Bubble × Difyを使えば、経費精算アプリをノーコードで素早く作成し、AIを活用して業務の効率化を図ることができます。領収書の読み取りだけでなく、確認・修正、承認、データ保存までをつなぐことが重要です。自社で扱う領収書で精度を検証し、手戻りや確認の負担を確かめてから運用範囲を広げてください。