> ## 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.

# Reference layout

> ABBYY FlexiLayout Studio で Reference layout を作成および編集し、マッチング結果の比較、差分の確認、ブロック描画ツールの使用を行います。

バッチ内の各画像に対して、Reference layout を作成できます。Reference layout には、画像上でブロックを配置したい場所が表示されます。Reference layout は手動で作成することも、FlexiLayout のマッチング結果から作成することもでき、ブロックの追加や削除、サイズや位置の変更によって編集することもできます。

Reference layout は、FlexiLayouts のデバッグ時に使用します。これにより、各画像上で、FlexiLayout のマッチング結果とブロックの位置を比較できます。

<div id="reference-layout-and-difference-layout-modes">
  ## Reference layout モードと Difference layout モード
</div>

参照レイアウトは **Reference layout** モードで作成します。このモードに切り替えるには、ツールバーの <img src="https://mintcdn.com/abbyy/fmgRWFNHKYN2MLSg/images/flexi-capture/fls/Mode_ReferenceLayout.gif?fit=max&auto=format&n=fmgRWFNHKYN2MLSg&q=85&s=ae59515ce5497aabaeb0a780685df3f6" alt="Reference layout ボタン" style={{display:"inline-block",verticalAlign:"middle",margin:0}} width="21" height="23" data-path="images/flexi-capture/fls/Mode_ReferenceLayout.gif" /> をクリックします。

**Difference layout** モード (ツールバーの <img src="https://mintcdn.com/abbyy/fmgRWFNHKYN2MLSg/images/flexi-capture/fls/Mode_Differences.gif?fit=max&auto=format&n=fmgRWFNHKYN2MLSg&q=85&s=8858abb0b1940432238e7581c56f75f1" alt="Difference layout ボタン" style={{display:"inline-block",verticalAlign:"middle",margin:0}} width="24" height="24" data-path="images/flexi-capture/fls/Mode_Differences.gif" /> ボタン) では、参照レイアウトと FlexiLayout のマッチング結果の差分が表示されます。

このモードでは、次の 2 種類の領域が強調表示されます。

* **Missing Areas** – 参照レイアウトのブロックには存在するものの、FlexiLayout のマッチングで検出されたブロックには存在しない領域で、赤で強調表示されます。
* **Excess Areas** – 参照レイアウトのブロックには存在しないものの、FlexiLayout のマッチングで検出されたブロックには存在する領域で、緑で強調表示されます。

**Batch** ウィンドウには、**Missing Areas** と **Excess Areas** の割合が表示されます。

<div id="create-a-reference-layout-manually">
  ## Reference layoutを手動で作成する
</div>

<Steps>
  <Step title="画像を開く">
    Reference layoutを作成する画像を開きます。
  </Step>

  <Step title="画像をFlexiLayoutとマッチングする">
    詳しくは、[画像をFlexiLayoutとマッチングする](/ja/flexi-capture/fls/settings/analyze)を参照してください。
  </Step>

  <Step title="Reference layoutモードに切り替える">
    ツールバーの<img src="https://mintcdn.com/abbyy/fmgRWFNHKYN2MLSg/images/flexi-capture/fls/Mode_ReferenceLayout.gif?fit=max&auto=format&n=fmgRWFNHKYN2MLSg&q=85&s=ae59515ce5497aabaeb0a780685df3f6" alt="Reference layoutボタン" style={{display:"inline-block",verticalAlign:"middle",margin:0}} width="21" height="23" data-path="images/flexi-capture/fls/Mode_ReferenceLayout.gif" />をクリックします。
  </Step>

  <Step title="ブロックを描画する">
    [「ブロック描画ツール」ツールバー](/ja/flexi-capture/fls/interface/toolbars#blockdrawingtools)を使用して、必要なブロックを描画します。
  </Step>

  <Step title="Reference layoutを保存する">
    ツールバーの<img src="https://mintcdn.com/abbyy/fmgRWFNHKYN2MLSg/images/flexi-capture/fls/Button_Save.gif?fit=max&auto=format&n=fmgRWFNHKYN2MLSg&q=85&s=846be68a674f044a4ed6434e3074affa" alt="保存ボタン" style={{display:"inline-block",verticalAlign:"middle",margin:0}} width="23" height="23" data-path="images/flexi-capture/fls/Button_Save.gif" />をクリックします。
  </Step>
</Steps>

<div id="create-a-reference-layout-from-a-matched-flexilayout">
  ## マッチング済みのFlexiLayoutからReference layoutを作成する
</div>

<Steps>
  <Step title="画像を開く">
    Reference layoutを作成する画像を開きます。
  </Step>

  <Step title="画像とFlexiLayoutをマッチングする">
    詳しくは、[画像とFlexiLayoutをマッチングする](/ja/flexi-capture/fls/settings/analyze)を参照してください。
  </Step>

  <Step title="マッチングされたレイアウトをコピーする">
    **Batch** メニューまたはショートカットメニューから **Copy Matched Layout to Reference** を選択します。
  </Step>

  <Step title="ブロックを調整する">
    コピーしたレイアウトの修正が必要な場合は、ブロックを移動またはサイズ変更します。
  </Step>

  <Step title="Reference layoutを保存する">
    ツールバーの <img src="https://mintcdn.com/abbyy/fmgRWFNHKYN2MLSg/images/flexi-capture/fls/Button_Save.gif?fit=max&auto=format&n=fmgRWFNHKYN2MLSg&q=85&s=846be68a674f044a4ed6434e3074affa" alt="保存ボタン" style={{display:"inline-block",verticalAlign:"middle",margin:0}} width="23" height="23" data-path="images/flexi-capture/fls/Button_Save.gif" /> をクリックします。
  </Step>
</Steps>

また、バッチのショートカットメニューにある **Copy Matched Layout to Reference** コマンドを使用して、選択したバッチページに対するFlexiLayoutのマッチング結果をReference layoutとして保存することもできます。

<div id="reference-layout-tools">
  ## Reference layout ツール
</div>

ブロックの作成および編集に使用するコマンドは、**View → Images → Tool → Select** にあります。これらのコマンドに対応するボタンはツールバーにあります。

<div id="move-a-block-border">
  ### ブロックの境界線を移動する
</div>

<Steps>
  <Step title="Select ツールをアクティブ化する">
    ツールバーの **Select** ツールをクリックするか、**View → Images → Tool** から選択します。
  </Step>

  <Step title="境界線をポイントする">
    移動するブロックの境界線にマウスポインターを合わせます。
  </Step>

  <Step title="境界線をドラッグする">
    マウスの左ボタンを押したまま、境界線を移動したい方向にドラッグして、ボタンを離します。
  </Step>
</Steps>

<Note>
  マウスポインターをブロックの角に合わせると、ドラッグしたときにブロックの縦横両方の境界線が移動します。
</Note>

<div id="move-a-selected-block">
  ### 選択したブロックを移動する
</div>

<Steps>
  <Step title="Select ツールを選択する">
    ツールバーの **Select** ツールをクリックするか、**View → Images → Tool** で選択します。
  </Step>

  <Step title="ブロックにポインターを合わせる">
    ブロックの上にマウスポインターを置きます。ブロックを移動できることを示すために、ポインターの形が変わります。
  </Step>

  <Step title="ブロックをドラッグする">
    マウスの左ボタンを押したまま、ブロックを目的の方向にドラッグして、ボタンを離します。
  </Step>
</Steps>

ブロックが小さすぎると移動できないことがあります。これは、境界線どうしの間隔が非常に狭く、どこにポインターを合わせてもサイズ変更モードになってしまうためです。そのようなブロックを移動するには、**Ctrl** キーを押したままにします。

<div id="create-a-new-block">
  ### 新しいブロックを作成する
</div>

<Steps>
  <Step title="Create Block ツールを選択">
    ツールバーの **Create Block** ツールをクリックするか、**View → Images → Tool** で選択します。
  </Step>

  <Step title="ブロックを描画">
    新しいブロックの角にマウスポインターを合わせ、左マウスボタンを押したまま、希望する方向へ対角線上にドラッグして離します。
  </Step>

  <Step title="ブロックに名前を付ける">
    **Create Block** ダイアログで、新しいブロックの名前を入力します。
  </Step>
</Steps>

<div id="draw-a-block-or-element">
  ### ブロックまたは要素を描画する
</div>

<Steps>
  <Step title="トレーニングモードに切り替える">
    **Training** メニューから **Training Mode** を選択します。
  </Step>

  <Step title="ブロックまたは要素を選択する">
    **FlexiLayout** ウィンドウで、ブロックまたは静的要素を選択します。
  </Step>

  <Step title="Draw Location ツールを選択する">
    ツールバーの **Draw Location** ツールをクリックするか、**View → Images → Tool** で選択します。
  </Step>

  <Step title="位置を描画する">
    新しいブロックの隅にマウスポインターを置き、左マウスボタンを押したまま、希望する方向に斜めにドラッグしてボタンを離します。
  </Step>
</Steps>

<div id="delete-a-block">
  ### ブロックを削除する
</div>

<Steps>
  <Step title="Delete Region ツールを選択する">
    ツールバーの **Delete Region** ツールをクリックするか、**View → Images → Tool** から選択します。
  </Step>

  <Step title="ブロックを削除する">
    削除するブロックをクリックします。
  </Step>
</Steps>

<div id="add-a-rectangular-area-to-a-block">
  ### ブロックに矩形領域を追加する
</div>

<Steps>
  <Step title="Add Region Part ツールを選択する">
    ツールバーの **Add Region Part** ツールをクリックするか、**View → Images → Tool** から選択します。
  </Step>

  <Step title="ブロック内をポイントする">
    矩形領域を追加したいブロックの内側にマウスポインターを置きます。
  </Step>

  <Step title="領域をドラッグする">
    マウスボタンを押したまま、ポインターを目的の方向に斜めにドラッグして、ボタンを離します。
  </Step>
</Steps>

矩形領域がブロックに追加されます。

<div id="cut-out-a-rectangular-area-from-a-block">
  ### ブロックから矩形領域を切り出す
</div>

<Steps>
  <Step title="「Cut Region Part」ツールを選択する">
    ツールバーの **Cut Region Part** ツールをクリックするか、**View → Images → Tool** から選択します。
  </Step>

  <Step title="ブロック内をポイントする">
    矩形領域を切り出したいブロック内にマウスポインターを置きます。
  </Step>

  <Step title="領域をドラッグする">
    左マウスボタンを押したまま、ポインターを目的の方向へ斜めにドラッグして離します。
  </Step>
</Steps>

矩形領域がブロックから切り出されます。

<Note>
  ブロックの上部または下部の領域を切り出すと、右側で隣接している領域もブロックの境界まで一緒に切り出されます。これは、Optical Character Recognition (OCR) エンジンが連続したテキストブロックしか認識できないためです。この制約は、左側と右側の領域には適用されません。
</Note>

<div id="add-a-vertical-separator">
  ### 垂直セパレーターを追加する
</div>

<Steps>
  <Step title="「垂直セパレーターを追加」ツールを選択する">
    ツールバーの **垂直セパレーターを追加** ツールをクリックするか、**View → Images → Tool** で選択します。
  </Step>

  <Step title="位置を指定する">
    **テーブルブロック**内の追加したい位置にマウスポインターを合わせます。ポインターの形が変わります。
  </Step>

  <Step title="セパレーターを追加する">
    ブロックをクリックします。
  </Step>
</Steps>

<div id="add-a-horizontal-separator">
  ### 水平の区切り線を追加する
</div>

<Steps>
  <Step title="Add Horizontal Separator ツールを選択する">
    ツールバーの **Add Horizontal Separator** ツールをクリックするか、**View → Images → Tool** で選択します。
  </Step>

  <Step title="位置を指定する">
    **テーブルブロック**内の追加したい位置にマウスポインターを合わせます。ポインターの表示が変わります。
  </Step>

  <Step title="区切り線を追加する">
    ブロックをクリックします。
  </Step>
</Steps>

<div id="delete-a-separator">
  ### 区切り線を削除する
</div>

<Steps>
  <Step title="Delete Separator ツールを選択する">
    ツールバーの **Delete Separator** ツールをクリックするか、**View → Images → Tool** で選択します。
  </Step>

  <Step title="位置に合わせる">
    **テーブルブロック**内の目的の位置にマウスポインターを合わせます。ポインターの形状が変わります。
  </Step>

  <Step title="区切り線を削除する">
    ブロックをクリックします。
  </Step>
</Steps>

<div id="create-a-reference-layout-for-table-block-columns">
  ### テーブルブロックの列の Reference layout を作成する
</div>

<Steps>
  <Step title="テーブルブロックを選択">
    画像内の**テーブルブロック**を選択します。
  </Step>

  <Step title="ブロックをセルに分割">
    <img src="https://mintcdn.com/abbyy/fmgRWFNHKYN2MLSg/images/flexi-capture/fls/Button_Vert_Sep.png?fit=max&auto=format&n=fmgRWFNHKYN2MLSg&q=85&s=7f87681ac68d0bdebcb781429495a8b1" alt="垂直セパレーターを追加ボタン" style={{display:"inline-block",verticalAlign:"middle",margin:0}} width="26" height="26" data-path="images/flexi-capture/fls/Button_Vert_Sep.png" />, <img src="https://mintcdn.com/abbyy/fmgRWFNHKYN2MLSg/images/flexi-capture/fls/Button_Hor_Sep.png?fit=max&auto=format&n=fmgRWFNHKYN2MLSg&q=85&s=9777e776939181836f9d2e25c0436fa9" alt="Add Horizontal Separatorボタン" style={{display:"inline-block",verticalAlign:"middle",margin:0}} width="26" height="26" data-path="images/flexi-capture/fls/Button_Hor_Sep.png" />, <img src="https://mintcdn.com/abbyy/fmgRWFNHKYN2MLSg/images/flexi-capture/fls/Button_Del_Sep.png?fit=max&auto=format&n=fmgRWFNHKYN2MLSg&q=85&s=b1623b412c2535871668ae1983079bf2" alt="Delete Separatorボタン" style={{display:"inline-block",verticalAlign:"middle",margin:0}} width="26" height="26" data-path="images/flexi-capture/fls/Button_Del_Sep.png" /> ツールを使用して、ブロックをセルに分割します。
  </Step>

  <Step title="列名を付ける">
    列を右クリックし、ショートカットメニューから列名を選択します。
  </Step>
</Steps>

**テーブルブロック**から列を削除するには、列を右クリックし、ショートカットメニューから **Delete Column** を選択します。