【ノーコードで実現】BubbleにOCRで読み取ったデータを自動入力する方法

Bubbleで業務アプリやWebサービスを作っていて、紙の請求書や申込書、画像ファイルなどのデータを毎回手入力するのが大変だと感じたことはありませんか？
OCR（光学的文字認識）を使えば文字を読み取るところまではできても、そこから先、Bubbleにデータを自動で登録する部分でつまずいてしまう方もいるかもしれません。

この記事では、OCRを使って画像やPDFの内容を読み取り、それをノーコードでBubbleのデータベースに自動反映する方法をご紹介します。

手入力の手間を減らして、確認作業や入力ミスの不安をなくすことで、もっと大事な業務に集中できるようになりますよ。

とにかく早く試したい方へ

Yoomには『BubbleとOCR』を使った業務フロー自動化のテンプレートが用意されています。説明を読む前に、まずは実際に動かしてみたいという方は、以下のバナーをクリックして、すぐに自動化フローを体験してみましょう！

BubbleとOCRを組み合わせた様々なデータ入力の自動化方法

ファイルの受け取り方法には、メールの添付ファイル、フォームからのアップロード、共有ストレージへの保存など、さまざまなパターンがあります。紹介するテンプレートを活用すればどの方法を使っても、受け取ったファイルは自動でOCR処理され、抽出された内容がBubbleに登録されます。

気になる連携があれば、クリックしてテンプレートを試してみてください。

フォームで送信されたファイルをOCRで読み取り、Bubbleにデータを追加する

YoomフォームやGoogleフォームを通じてユーザーから送信されたファイル（身分証明書の画像、アンケートに添付された書類など）をトリガーに、OCRで内容を読み取り、そのデータをBubbleに自動で追加します。

これにより、ユーザーからの情報提出後すぐにBubble上でデータを利用可能になるため、サービス提供のスピードアップや顧客対応の迅速化につながります。

ストレージサービスに追加されたファイルをOCRで読み取り、Bubbleにデータを追加する

Google DriveやBoxといったオンラインストレージに契約書、議事録、報告書などのファイルがアップロードされると、自動でOCRが実行され、抽出されたデータがBubbleのデータベースに登録されます。

チーム内で共有された重要書類の情報を、手間なくBubbleアプリケーション内で活用できるため、情報共有の効率化やデータの一元管理に役立ちます。

メールで受け取ったファイルをOCRで読み取り、Bubbleにデータを追加する

GmailやOutlookで受け取ったメールに添付された請求書や申込書などのファイルを自動でOCR処理し、抽出したテキストデータをBubbleのデータベースに登録します。

メールを確認して手動でファイルを開き、内容を転記する手間が不要になるため、入力ミスや処理漏れを防ぎ、迅速なデータ反映が可能です。

受け取ったファイルをOCRで読み取り、Bubbleに追加するフローを作ってみよう

【注意事項】

‍・OCR機能はチームプランまたはサクセスプランでのみご利用いただけます。フリープランやミニプランではエラーとなるため、ご注意ください。
・なお、有料プランは2週間の無料トライアルが可能です。トライアル中は、すべてのアプリやAIオペレーションを制限なくお試しいただけますので、気になる機能はぜひこの機会に体験してみてください。

ここでは例として、「フォームで送信されたファイルをOCRで読み取り、Bubbleにデータを追加する」自動化フローの作成手順を簡単にご紹介します。Yoomなら、画面の指示に沿って進めるだけで、複雑な設定もスムーズに組み立てられます。

今回はYoomを使用して、ノーコードで設定を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。

[Yoomとは]

設定は、次のような流れで進めていきます。

YoomのフォームトリガーとBubbleのマイアプリ連携
テンプレートをコピー
トリガー（フォーム送信）とアクション（OCR処理、Bubbleへのデータ追加）の設定
フローを有効化し、実際にフォームからファイルを送信してテスト

ステップ1：Bubbleをマイアプリ連携

(1)まずはBubbleをマイアプリ連携します。
Yoomにログインしたら、左のメニュー欄にある「マイアプリ」から「新規接続」をクリックしましょう。

(2)「Bubble」と検索し、アプリ一覧からBubbleを選択します。

(3)Bubbleの新規登録画面が表示されます。
アクセストークン、サブドメインの取得が必要です。

(4)Bubbleを開き、Yoomと連携したいAppsを選択します。

(5)SettingsのAPIを選択し、「Private key」をコピーします。
API keyを生成していない場合は、「Generate a new API token」をクリックしてAPI keyを生成しましょう。

(6)Bubbleの新規登録画面に戻り、「アクセストークン」と「サブドメイン」を入力し、「追加」をクリックします。

以上で、Bubbleのマイアプリ登録は完了です。

ステップ2：テンプレートをコピー

マイアプリ連携が完了したら、早速テンプレートを設定していきましょう。
以下のバナーにある「試してみる」をクリックし、テンプレートをコピーしてください。

Yoomにテンプレートがコピーされると、次の画面が表示されるので「OK」を押します。

ステップ3：Yoomフォームのトリガー設定

(1)まずは、フローボットの起動対象となるYoomフォームの設定を行います！
テンプレートの1番上にある「フォーム」をクリックしましょう。

(2)フォームの設定を行います。ここで取得した情報をBubbleの設定で使用するので、必要な情報が取得できるように設定しましょう。

①～③任意で設定
④回答方法をテキスト形式やプルダウン、チェックボックスなどから選択
⑤回答を必須にするか任意で設定
⑥左のアイコンで項目をコピー、右のアイコンで項目を削除

(3)下にスクロールすることで以下も設定できます。
①質問を任意で追加（個数に制限あり）
②送信ボタンの上部にテキストを任意で設定（有料プランの場合のみ）
③フォームのページ下部に表示されるYoomロゴを非表示に設定（有料プランの場合のみ）

(4)有料プランの場合のみ完了ページの設定やアクセス制限なども任意で設定できます。
フォームの設定が完了したら、「次へ」をクリックします。

(5)「プレビューページ」からフォームのプレビュー画面を表示できます。
また、「完了ページ」からフォームの回答完了時の画面を表示可能です。

今回は、以下のようなフォームを運用していきます！

(6)「取得した値」に仮のファイルを設定し、「保存する」をクリックして設定完了です。
※ここで入力したサンプル値は、フローの運用時に影響しません。フロー運用時は、実際の回答内容が抽出されます。

なお、今回は以下のような作業報告書を設定しました！

ステップ4：OCRのアクション設定

(1)次に、画像・PDFから文字を読み取るOCR設定を行います。
テンプレートの「画像・PDFから文字を読み取る」をクリックしましょう。

(2)アクションに「【v2】任意のPDF・画像ファイル（4,000文字以内）から文字情報を読み取る（5タスク）」に設定し、「次へ」をクリックします。
ここは想定される情報に合わせて設定してください。

(3)ファイルの添付方法に「取得した値を使用」「添付ファイル1」を設定します。

(4)「追加で抽出したい項目」に画像やPDFから読み取りたい項目を設定します。
追加で抽出したい項目をカンマ（,）区切りで指定してください。

(5)「使用するAI」にAIの種類を選択します。
基本的には、「Claude_v2」を使用するのがおすすめです。

(6)読み取る書類の言語を選択します。基本的に「日本語」を設定しましょう。

(7)設定が完了したら、「テスト」をクリックしてフォームの回答にあった画像やPDFの内容を読み取りましょう。

(8)テストが成功し、「取得した値」に指定した通りの情報が抽出されているか確認しましょう。

正常にメッセージが送信されていれば、設定完了です。

ステップ5：Bubbleのアクション設定

(1)次に、BubbleでThingを作成する設定を行います。
テンプレートの「Thingを作成」をクリックしましょう。

(2)Bubbleと連携するアカウント情報を任意で設定し、アクションはテンプレート通りに「Thingを作成」のまま「次へ」をクリックして進んでください。

(3)「データタイプ名」に任意のデータタイプの名称を設定します。

(4)「Thing」にBubbleで作成するThingの項目を設定します。

「フィールド名」を任意に入力し、「値」に適切な項目を設定しましょう。なお、「値」では「取得した値」からフォームの回答内容を引用できます。

※‍「取得した値」とは、トリガーやオペレーション設定時に、「テスト」を実行して取得した値のことです。取得した値は、この後のオペレーション設定時の値として利用でき、フローボットを起動する度に値は変動します。詳しくはこちらをご参照ください。

(5)全ての設定が完了したら、「テスト」をクリックしてBubbleにThingを作成してみましょう。

テストが成功し、正常にThingが作成されていれば、設定完了です。

ステップ5：トリガーをONにして動作チェック

以上で、すべての設定が完了です。
設定の完了後は、以下のようなポップが表示されるのでトリガーをONにします。
実際にフローが正常に動作するかをチェックしてみましょう！

BubbleやOCRを活用したその他の自動化テンプレート事例

BubbleとOCRの連携以外にも、Yoomには業務を効率化する様々なテンプレートが用意されています。ここでは、BubbleやOCR技術を活用した他の自動化テンプレートの例をいくつかご紹介します。

Bubbleを活用した自動化例

Bubbleで登録・作成されたデータをもとに、Google スプレッドシートやMicrosoft Excel、Slack、Gmail、Notionなどへ自動で連携できます。

通知や記録、情報共有の効率化を図りたい方に最適なテンプレートが揃っています。

OCRを活用した自動化例

Google DriveやOutlookで受け取ったファイルをOCRで読み取り、directやDify、freee人事労務、Google Apps Script、サスケなどへ自動で情報を反映できます。

紙の書類や画像のデータ化を効率よく行いたい場合に便利です。

まとめ

この記事では、BubbleとOCRを組み合わせて、画像やPDFからのデータ入力を自動化する方法をご紹介してきました。フォームやメール、ストレージなど、どんな方法でファイルを受け取っても、その内容を自動で読み取り、Bubbleに登録できます。

毎回手作業で入力していた時間や、ミスの心配からもこれで解放されます。しかも、Yoomならプログラミングの知識はいりません！画面の流れに沿って設定するだけで、誰でも簡単に連携フローが作れます。

入力作業にかけていた時間を減らせるだけでなく、データの正確さもアップ。その分、顧客対応やサービス改善といった、もっと大切な仕事に集中できるようになります。

Yoomには、今回取り上げた内容以外にも、BubbleやOCRを使った便利なテンプレートがたくさんそろっています。ぜひあなたの業務に合ったフローを見つけて、日々の仕事をもっとラクに、もっと効率的にしてみてください。

‍