> ## Documentation Index
> Fetch the complete documentation index at: https://docs.abbyy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 手動確認の統合

> トランザクションステータス、manualReviewLink、iframe の統合を使用して、人による確認を含むワークフロー向けに ABBYY Vantage の手動確認をアプリケーションに埋め込みます。

自社システム内で ABBYY Vantage を使用している場合、手動確認機能も併せて活用したいと考えるはずです。本セクションでは、手動確認を統合する方法を説明します。

Vantage API を介していくつかのドキュメントを処理に送信したら、[Vantage API を使用したドキュメントの処理方法](/ja/vantage/developer/processing-documents/processing-documents)で説明されているように、トランザクションのステータスを監視します。ドキュメントを人間のオペレーターが確認する必要がある場合、トランザクションステータスレスポンスに、安全なリンクを保持する `manualReviewLink` キーが含まれます。このリンクにより、レビュアーはその特定のトランザクションのデータのみにアクセスできるようになります。

そのリンク先の内容を表示する iframe を、自社サービスの Web ページに埋め込みます。

```html theme={null}
<iframe src="manual-review-link"></iframe>
```

リンクは作成から168時間後に有効期限が切れます。レビューを継続する必要がある場合は、これまでと同様に `transactions` リソースに対して `GET` リクエストを送信し、新しいリンクを取得してください。

<div id="iframe-appearance">
  ## Iframe の外観
</div>

サービスの外観をすっきりさせるために、Vantage のロゴを非表示にしたり、手動確認クライアントのインターフェースで一部のペインを隠したりする場合があります。

Vantage のロゴを非表示にするには、リンクに `displayMode` クエリ Parameter を追加し、値に `iframe` を指定します。

```html theme={null}
<iframe src="manual-review-link&displayMode=iframe"></iframe>
```

次のオプションを使用して、手動確認クライアント インターフェースを構成します。

| Key                        | Description                                                     |
| :------------------------- | :-------------------------------------------------------------- |
| **features**               |                                                                 |
| `batchEditor`              | `false` に設定すると、ページのサムネイル ペインを非表示にします。                           |
| `batchEditor.toolbar`      | `false` に設定すると、ページのサムネイル ペインは表示しますが、ツールバー ペインを非表示にします。          |
| `batchEditor.autoCollapse` | `true` に設定すると、手動確認クライアント インターフェースを開いたときに、ページのサムネイル ペインを折りたたみます。 |
| `docEditor`                | `false` に設定すると、ページ画像ペインを非表示にします。                                |
| `docEditor.toolbar`        | `false` に設定すると、ページ画像ペインは表示しますが、そのツールバーを非表示にします。                 |
| `formEditor`               | `false` に設定すると、抽出されたフィールドの一覧ペインを非表示にします。                        |
| `rulesReport`              | `false` に設定すると、ルール エラーの一覧ペインを非表示にします。                           |
| `sendToStageAvailable`     | `true` に設定すると、**Send to Stage...** ボタンを表示します。                   |

これらのオプションは 1 つの JSON オブジェクトにまとめられています。次のサンプル コードは、ルール エラー ペインを非表示にし、ページのサムネイル ペインを折りたたんだ状態の iframe を表示します。

```json theme={null}
"features": {
   "batchEditor": {
      "autocollapse": true,
   },
   "rulesReport": false,
}
```

手動確認用のリンクに、この JSON オブジェクトの内容を含む `settings` クエリ Parameter を追加してください。

```html theme={null}
<iframe src="manual-review-link&settings=%7B%22features%22%3A%7B%22batchEditor%22%3A%7B%22autoCollapse%22%3Atrue%7D%2C%22rulesReport%22%3Afalse%7D%7D"></iframe>
```

<div id="iframe-events">
  ## Iframe イベント
</div>

iframe オブジェクトは、手動確認クライアントインターフェースでのレビュアーの操作を親ウィンドウに通知するためにメッセージを送信します。これにより、適切なタイミングで次のステップに進むことができます。

イベントは `targetOrigin=parent` Parameter とともに送信されます。監視すべきイベントは以下のとおりです。

* `ManualReviewWasPaused`。レビュアーが **Reject** ボタンをクリックしたときに送信されます。
* `ManualReviewWasCompleted`。レビュアーが **Complete** ボタンをクリックしたときに送信されます。
* `ManualReviewWithdrawn`。レビュアーの無操作が一定時間続いた場合に送信され、手動確認クライアントのタスクが共通のタスクキューに戻されます。

以下のサンプルコードは、手動確認用の iframe を表示し、上記のいずれかのイベントが発生したら非表示にする方法を示しています。

**iframe イベントをリッスンするためのサンプルコード:**

```html theme={null}
<html style="min-height: 100%; height: 100%;">
<head>
  <script>
    var manualReviewLink; // トランザクションステータスレスポンスからのリンク
    window.addEventListener("DOMContentLoaded", init, false);
    function init() {
      var iframe = document.createElement("iframe");
      iframe.src = getUrl();
      iframe.style.width = "100%";
      iframe.style.height = "95%";
      try {
        document.getElementById("main").removeChild(document.querySelector("iframe"));
      } catch (e) { }
      document.getElementById("main").appendChild(iframe);
      window.addEventListener("message", receiveMessage, false);
    }
    function getUrl() {
      return manualReviewLink + "&displayMode=iframe";
    }
    function receiveMessage(event) {
      console.log(event.data);
      if (event.data.target === "parent") {
        if (event.data.eventName === "ManualReviewWithdrawn" || 
            event.data.eventName === "ManualReviewWasPaused" || 
            event.data.eventName === "ManualReviewWasCompleted" ) {
          document.getElementById("iframe").style.display = "none";
        }
      }
    }
  </script>
</head>
<body
  style="background-color: #999999; min-height: 100%; height: 100%; position: relative; margin: 0; padding: 0; background: linear-gradient(to bottom right, #4380bc, #5ba484);">
  <div id="main"
    style="height: 100%; position: relative; padding:20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
  </div>
</body>
</html>
```
