添付ファイルの内容を抽出してフォームに反映する

「アクション設定」で、添付ファイルの内容を解析してデータを抽出する業務ロジックを実行し、フォームに反映する機能を作成します。

注記

「Accel-Mart Quick アプリケーション管理者」ロールを持つユーザで実施してください。

利用シーン

ユーザーが添付したファイルの内容を読み込み、抽出したデータをフォームに反映することができます。
ファイルの解析には生成AIを利用しているため、フォームに添付されるファイルのフォーマットが非定型の場合でも、設定の変更なしに柔軟に内容を抽出できます。

概要

このチュートリアルでは、ファイル添付後に「抽出」ボタンをクリックすると、ファイルから抽出されたデータが各入力欄に反映されるフォームを作成します。

完成イメージ

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

• doc_to_form.zip

ダウンロードしたファイルはメニュー「管理」-「ノーコード開発」- 「Webデータベース一覧」からインポートしてください。

備考

詳細なインポート手順は「作成したWebデータベースを別環境に移行する（インポート・エクスポート） - Webデータベースをインポートする」を参照してください。

インポート後、以下のURLからフォームの画面にアクセスできます。

• https://（ホスト名）.accel-mart.com/imart/forma/normal/view/regist_application_view/tutorial_doc_to_form

インポートしたWebデータベースは、カテゴリ「サンプル」配下に「【チュートリアル】ドキュメント内容のフォーム反映」というアプリケーション名で追加されます。
メニューの「管理」-「ノーコード開発」-「Webデータベース一覧」から編集が可能です。

Webデータベースのフォームを作成する

業務ロジックを設定するWebデータベースのフォームを作成します。

備考

フォーム編集画面で実施する操作の説明は簡易的に記載しています。詳細な操作手順は「Webデータベースを作成する」を参照してください。

1. メニューの「管理」-「ノーコード開発」-「Webデータベース作成」から、「アプリケーション登録」画面を表示します。

2. アプリケーションID・アプリケーション名を以下のように入力して登録します。

   • アプリケーションID：tutorial_doc_to_form
   • アプリケーション名：【チュートリアル】ドキュメント内容のフォーム反映

3. フォーム編集画面が表示されます。

4. ツールキットから「見出し」・「ファイルアップロード」・「ボタン（イベント）」・「文字列」・「日付」・「グリッドテーブル」・「登録」のアイテムを配置します。

5. 「見出し」の内容、および、「文字列」・「日付」・「数値」・「グリッドテーブル」のラベルを画像の通りに設定します。

   

6. 「文字列」・「日付」・「数値」アイテムのフィールド識別名をラベルと同じ文字列に設定します。

7. それぞれのアイテムのフィールド識別IDを以下のように設定します。

   アイテム	ラベル	フィールド識別ID
   ファイルアップロード	（なし）	invoice_file
   文字列	請求書番号	invoice_number
   日付	請求日	invoice_date
   文字列	請求書発行者名	issuer_name
   文字列	顧客名	customer_name
   文字列	合計金額	total_amount
   グリッドテーブル	請求明細	details
   テーブル列 文字列	商品名	item_name
   テーブル列 数値	数量	quantity
   テーブル列 数値	単価	unit_price
   テーブル列 数値	金額	amount

8. それぞれのアイテムのプロパティを以下のように設定します。

   アイテム	プロパティ	値
   ファイルアップロード	最大	1
   ボタン（イベント）	ボタンサイズレベル	2
   グリッドテーブル	テーブル幅	640
   グリッドテーブル	テーブル高さ	200
   グリッドテーブル	列のサイズ	135

9. 以上でフォームの作成は完了です。

作成済みのWebデータベースのフォームを編集する場合の手順

1. メニューの「管理」-「ノーコード開発」-「Webデータベース一覧」から対象のWebデータベースの「編集」アイコンをクリックします。
2. 「アプリケーション履歴一覧」の「編集」アイコンをクリックします。
3. 「フォーム一覧」で「フォーム編集」アイコンをクリックすると、フォーム編集画面を表示できます。

アクション設定（業務ロジック）を追加する

このチュートリアルでは、「アイテムイベント」を利用し、「ボタン（イベント）」アイテムをクリックした際に業務ロジックを実行するようにします。

1. ツールバーの「アクション設定」をクリックし、「イベント設定」ダイアログを表示します。

   

2. 「アイテムイベント」のタブを選択します。

3. 「追加」をクリックします。

   

4. 「アイテム」のプルダウンで、どの画面アイテムに対してアクションを設定するかを選択します。今回は「抽出 | -」を選択します。

5. 「設定」列のアイコンをクリックし、 「アクション設定」ダイアログを表示します。

   

6. 「追加」をクリックします。

   

7. 「アクション」のプルダウンで「業務ロジック」を選択し、「設定」列のアイコンをクリックします。

   

8. フォーム情報を保存するかの確認ダイアログが表示されます。「決定」をクリックしてフォームを保存します。

9. 業務ロジックのひな形が生成され、「ロジックフロー定義編集」画面が表示されます。

   

   備考

   作成される業務ロジックには必要な入出力値が初期設定されています。設定されている内容の詳細は「アクション設定（Webデータベース）」を参照してください。

10. これで、アクション設定の追加は完了です。この後は、業務ロジックの処理内容を実装していきます。

業務ロジックを作成する

フォームの「ファイルアップロード」に添付されたファイルを解析して、データの抽出を行う業務ロジックを作成します。

定数を追加する

ファイルを解析するための解析パラメータJSON文字列を定数として登録します。

1. ツールバーの「定数設定」をクリックし、「定数設定」ダイアログを表示します。

   

2. 「定数を追加」をクリックし、定数IDに uploadItemId 、定数値にファイルアップロードアイテムの識別IDであるinvoice_fileを入力します。

3. 「定数を追加」をクリックし、定数IDに json を入力します。

   

4. 定数ID json の「エディタ」アイコンをクリックし、以下のJSON文字列を入力し、「決定」をクリックします。

   {
     "fields": [
       { "key": "invoice_number", "label": "請求書番号"},
       { "key": "invoice_date", "label": "請求日", "prompt": "請求日の日付です。YYYY/MM/DD 形式で抽出します。" },
       { "key": "issuer_name", "label": "請求書発行者名", "prompt": "請求書を発行した会社名または氏名です。" },
       { "key": "customer_name", "label": "顧客名", "prompt": "顧客の会社名または氏名です。" },
       { "key": "total_amount", "label": "合計金額", "prompt": "税込みの合計金額です。" },
       {
         "key": "details",
         "label": "請求明細",
         "prompt": "商品や数量、単価、金額などの明細表です。",
         "columns": [
           { "key": "item_name", "label": "商品名", "prompt": "明細表に記載された商品名です。" },
           { "key": "quantity", "label": "数量", "prompt": "明細表に記載された数量です。" },
           { "key": "unit_price", "label": "単価", "prompt": "明細表に記載された単価です。" },
           { "key": "amount", "label": "金額", "prompt": "明細表に記載された金額です。" }
         ]
       }
     ]
   }

   

   備考

   定数ID json は 「ドキュメント解析」タスクの解析パラメータJSON文字列として利用します。
   解析パラメータJSON文字列の詳細については「ドキュメント解析 - 解析パラメータJSON文字列の構造」を参照してください。

5. 「決定」をクリックして「定数設定」ダイアログを閉じます。

JavaScriptユーザ定義タスクを作成する

ファイルの解析結果をフォームに合わせて型変換するJavaScriptユーザ定義を作成します。

1. パレットの「ユーザ定義追加」から「JavaScript定義新規作成」をクリックします。

   

2. ユーザ定義ID、ユーザ定義名を入力します。本チュートリアルでは次のように設定します。

   • ユーザ定義ID：tutorial_analysis_result_conversion
   • ユーザ定義名：【チュートリアル】請求書解析結果変換

3. 任意のユーザカテゴリを「検索」から選択、または、「新規作成」します。

4. 入力値の「JSON入力」をクリックします。

   

5. 「JSON」に以下のJSONを入力して、「決定」をクリックします。

   {
     "invoice_number": "",
     "invoice_date": "",
     "issuer_name": "",
     "customer_name": "",
     "total_amount": "",
     "details": [
       {
         "item_name": "",
         "quantity": "",
         "unit_price": "",
         "amount": ""
       }
     ]
   }

   

6. 確認ダイアログが表示されるので、「決定」をクリックします。

7. 入力値が以下の内容になっていることを確認します。

   ├─ invoice_number <string>
   ├─ invoice_date <string>
   ├─ issuer_name <string>
   ├─ customer_name <string>
   ├─ total_amount <string>
   └─ details <object[]>
       ├─ item_name <string>
       ├─ quantity <string>
       ├─ unit_price <string>
       └─ amount <string>

   

8. 出力値の「JSON入力」をクリックします。

   

9. 「null値の型」でdateを選択し、「JSON」に以下のJSONを入力して、「決定」をクリックします。

   {
     "invoice_number": "",
     "invoice_date": null,
     "issuer_name": "",
     "customer_name": "",
     "total_amount": 0,
     "details": [
       {
         "item_name": "",
         "quantity": 0,
         "unit_price": 0,
         "amount": 0
       }
     ]
   }

   

10. 確認ダイアログが表示されるので、「決定」をクリックします。

11. 出力値が以下となるように、total_amount, quantity, unit_price, amount のそれぞれの型を「型を変更」からbigdecimalに変更します。

    ├─ invoice_number <string>
    ├─ invoice_date <date>
    ├─ issuer_name <string>
    ├─ customer_name <string>
    ├─ total_amount <bigdecimal>
    └─ details <object[]>
        ├─ item_name <string>
        ├─ quantity <bigdecimal>
        ├─ unit_price <bigdecimal>
        └─ amount <bigdecimal>

    

12. 「スクリプト」に以下を入力します。

    スクリプトの入力内容

    /**
     * 請求書解析結果を変換するタスクです。
     *
     * - 日付項目は Date 型に変換します
     * - 数値項目は BigDecimal 型に変換します
     * - 変換できない場合は null を設定します
     *
     * @param {Object} input - 請求書解析結果
     * @returns {Object} 変換後の請求書解析結果
     */
    function run(input) {
      var convertResult = {};
    
      // 入力オブジェクトの各キーを順に処理
      for (var key in input) {
        var value = input[key];
    
        // 請求日を日付変換
        if (key === 'invoice_date') {
          convertResult[key] = toDateOrNull(value);
          continue;
        }
    
        // 合計金額を数値変換
        if (key === 'total_amount') {
          convertResult[key] = toNumberOrNull(value);
          continue;
        }
    
        // 明細情報（配列）
        if (key === 'details' && Array.isArray(value)) {
          var convertedBillingDetails  = [];
    
          // 明細情報（details）の各要素を処理
          for (var i = 0; i < value.length; i++) {
            var item = value[i];
            var convertedItem = {};
    
            // 明細行の各項目を処理
            for (var itemKey in item) {
              var itemValue = item[itemKey];
    
              // 数量・単価・金額を数値変換
              if (
                itemKey === 'quantity' ||
                itemKey === 'unit_price' ||
                itemKey === 'amount'
              ) {
                convertedItem[itemKey] = toNumberOrNull(itemValue);
              } else {
                // それ以外の項目はそのままコピー
                convertedItem[itemKey] = itemValue;
              }
            }
    
            convertedBillingDetails.push(convertedItem);
          }
    
          convertResult[key] = convertedBillingDetails;
          continue;
        }
    
        // 上記以外の項目は変換せず、そのままコピー
        convertResult[key] = value;
      }
    
      return convertResult;
    }
    
    /**
     * 文字列を数値（BigDecimal）に変換します。
     * 数値に変換できない文字列の場合は null を返します
     */
    function toNumberOrNull(value) {
      // 未設定や空文字は数値として扱わない
      if (value === null || value === undefined || value === '') {
        return null;
      }
    
      // Number による数値変換
      var numberValue = Number(value);
    
      // 有効な数値かどうかを確認して返却
      return isFinite(numberValue) ? new BigDecimal(numberValue) : null;
    }
    
    /**
     * 文字列を日付に変換します。
     * 日付として解釈できない場合は null を返します
     */
    function toDateOrNull(value) {
      // 未設定や空文字は日付として扱わない
      if (value === null || value === undefined || value === '') {
        return null;
      }
    
      // Date オブジェクトを生成
      var dateValue = new Date(value);
    
      // 正常な日付かどうかを確認して返却
      return isNaN(dateValue.getTime()) ? null : dateValue;
    }

    

13. 「登録」ボタンをクリックします。

14. パレットの指定したユーザカテゴリに「【チュートリアル】請求書解析結果変換」タスクが追加されます。

タスクを配置する

業務ロジックで使用するタスクを配置します。タスクを以下の図のようにつなぎ合わせてください。

使用するタスクは以下の通りです。

• 基本 > 分岐
• 基本 > 終了 （1つは予め配置されていますが、追加で配置します。）
• IM-BIS > ファイルアップロード情報取得
• ストレージ操作 > セッションストレージ取得
• ストレージ操作 > ストレージ出力（バイナリ）
• 汎用タスク > ドキュメント解析
• ユーザ定義 > JavaScript定義

備考

タスクを配置する詳しい操作方法は「エレメントを配置する 」を参照してください。

タスクのマッピング・分岐の条件設定をする

各タスクに入力値として渡す値を設定するため、マッピング設定をします。また、分岐タスクの分岐条件も設定します。

備考

マッピング設定の詳しい操作方法は「マッピング設定を行う」を参照してください。

1. ファイルアップロードアイテムに添付されたファイル情報のリストを取得します。「ファイルアップロード情報取得（im_bisFileUpload1）」タスクのマッピング設定を以下の通り行います。

   始点	終点
   入力 - formaParam - imfr_application_id<string>	im_bisFileUpload1 - applicationId<string>
   入力 - formaParam - imfr_insert_id<string>	im_bisFileUpload1 -insertId<string>
   入力 - formaParam - imfr_process_key<string>	im_bisFileUpload1 - processKey<string>
   定数 - uploadItemId<string>	im_bisFileUpload1 -uploadItemId<string>

   

2. 「分岐」タスクの分岐条件を設定します。分岐タスクを選択して、「タスク固有設定」の「条件式（EL式）」を以下のように設定します。

   • ${ sizeOf(im_bisFileUpload1) == 1 }

   

   注記

   ファイルアップロード情報取得タスクの出力値は、指定したアイテム識別IDのアイテムに添付されたファイル情報のリストです。
   ここでは添付されたファイルが1件である場合はthen、それ以外の場合はelseのルートに進みます。
   elseのルートに進んだ場合、ファイルが添付されていない状態なので、特に何も処理を行わずフローを終了します。

3. ファイルアップロードアイテムに添付されたファイル情報を取得します。「ファイルアップロード情報取得（im_bisFileUpload2）」タスクのマッピング設定を以下の通り行います。
   「ファイルアップロード情報取得（im_bisFileUpload1）」タスクの出力値を利用するため、左上のセレクトボックスからim_bisFileUpload1を選択後、「入力を追加」ボタンをクリックして入力を追加します。

   始点	終点
   入力 - formaParam - imfr_application_id<string>	im_bisFileUpload2 - applicationId<string>
   入力 - formaParam - imfr_insert_id<string>	im_bisFileUpload2 - insertId<string>
   入力 - formaParam - imfr_process_key<string>	im_bisFileUpload2 - processKey<string>
   im_bisFileUpload1 - fileId<string>	im_bisFileUpload2 - fileId<string>

   

4. ファイルアップロードアイテムに添付されたファイルを一時ファイルとして出力するため、出力先のストレージを取得します。「セッションストレージ取得（im_sessionStorage1）」タスクのマッピング設定を以下の通り行います。
   「ファイルアップロード情報取得（im_bisFileUpload2）」タスクの出力値を利用するため、左上のセレクトボックスからim_bisFileUpload2を選択後、「入力を追加」ボタンをクリックして入力を追加します。

   始点	終点
   im_bisFileUpload2 - fileName<string>	im_sessionStorage1<string>

   

5. ファイルアップロードアイテムに添付されたファイルを一時ファイルとして出力します。「ストレージ出力（バイナリ）（im_writeBinaryToStorage1）」タスクのマッピング設定を以下の通り行います。
   「ファイルアップロード情報取得（im_bisFileUpload2）」タスク、「セッションストレージ取得（im_sessionStorage1）」タスクの出力値を利用するため、左上のセレクトボックスからim_bisFileUpload2を選択後、「入力を追加」ボタンをクリックして入力を追加します。
   im_sessionStorage1についても同様の操作を行ってください。

   始点	終点
   im_bisFileUpload2 - fileData<binary>	im_sessionStorage1 - binary<binary>
   im_sessionStorage1<storage>	im_sessionStorage1 - storage<storage>

   

6. ファイルを解析して、データの抽出を行います。「ドキュメント解析（im_analyzeDocument1）」タスクのマッピング設定を以下の通り行います。
   「セッションストレージ取得（im_sessionStorage1）」タスクの出力値を利用するため、左上のセレクトボックスからim_sessionStorage1を選択後、「入力を追加」ボタンをクリックして入力を追加します。

   始点	終点
   定数 - json<string>	im_analyzeDocument1 - jsonString<string>
   im_sessionStorage1<storage>	im_analyzeDocument1 - file<storage>

   

7. ファイルの解析結果をフォームの各アイテムに反映するために適切な型に変換します。「【チュートリアル】請求書解析結果変換（tutorial_analysis_result_conversion1）」タスクのマッピング設定を以下の通り行います。
   「ドキュメント解析（im_analyzeDocument1）」タスクの出力値を利用するため、左上のセレクトボックスからim_analyzeDocument1を選択後、「入力を追加」ボタンをクリックして入力を追加します。
   また、解析結果のJSON文字列をオブジェクトに変換するため、右上のセレクトボックスから「parseJSON」を選択し、「関数を追加」をクリックします。

   始点	終点
   im_analyzeDocument1<string>	parseJSON - json
   parseJSON - out	tutorial_analysis_result_conversion1<object>

   

8. 変換した結果をフォームの各アイテムにマッピングします。「終了」タスクのマッピング設定を以下の通り行います。 「【チュートリアル】請求書解析結果変換（tutorial_analysis_result_conversion1）」タスクの出力値を利用するため、左上のセレクトボックスからtutorial_analysis_result_conversion1を選択後、「入力を追加」ボタンをクリックして入力を追加します。

   始点	終点
   tutorial_analysis_result_conversion1<object>	出力 - formData<object>

   

   注記

   業務ロジックの出力のformDataオブジェクトに格納された値は、フォーム画面の各アイテムに受け渡されます。
   フォームアイテムのフィールド識別IDに対応するパラメータに値をマッピングすることで、フォーム項目に値を反映できます。
   詳細は「アクション設定（Webデータベース） - 出力値」を参照してください。

9. これで業務ロジックの作成は完了です。ツールバーの「保存」から業務ロジックを保存して、「アクション設定」ダイアログが表示されている「フォーム編集」画面に戻ります。

   

その他の設定をする

フォームの保存やテーブルの作成、権限設定などを行います。

備考

操作の説明は簡易的に記載しています。詳細な操作手順は「Webデータベースを作成する」を参照してください。

1. 「確定」ボタンをクリックして「アクション設定」ダイアログを閉じます。

2. 「確定」ボタンをクリックして「イベント設定」ダイアログを閉じます。

3. ツールバーの「更新」をクリックしてフォームを保存し、「戻る」アイコンをクリックして「フォーム一覧」画面を表示します。

   

4. 「戻る」ボタンをクリックして「フォーム設定」画面を表示します。

   

5. 「テーブル設定」タブでテーブルを登録します。テーブル名は30文字以内で任意の名前を設定してください。

6. 「権限設定」タブをクリックして、権限の設定を行います。サンプルでは、ロール「Accel-Mart Quick アプリケーション管理者」に対して「登録・更新・削除可能」の権限を付与しています。

7. 「一覧表示項目設定」タブをクリックして、一覧表示項目を設定します。

8. ツールバーに登録画面、一覧画面へのリンクが表示されるようになれば完了です。

動作確認をする

完成したフォームを試してみましょう。

1. 登録画面へのリンクをクリックして、登録画面のフォームを表示します。

   

2. 請求書のドキュメントファイルをアップロードします。
   以下のサンプルPDFをダウンロードしてご活用ください。

   • invoice_sample.pdf

   

3. 「抽出」ボタンをクリックします。

   

4. ドキュメントファイルの内容から抽出されたデータがフォームの各入力欄に反映されます。