> ## 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.
# グラフィカルユーザーインターフェイスを備えたアプリケーションの作成
> 画像の表示、ナビゲーション、認識結果の検証にビジュアルコンポーネントを使用して、Windows 上でグラフィカルユーザーインターフェイスを備えた ABBYY FineReader Engine OCR アプリケーションを作成します。
ビジュアルコンポーネント は、Windows 版 FRE で実装されています。
ユーザーインターフェイスを備えたアプリケーションを作成する際は、ABBYY FineReader Engine の [ビジュアルコンポーネント](/ja/fine-reader/engine/visual-components-reference) を使用できます。ビジュアルコンポーネント には、OCR アプリケーション用の独自のユーザーインターフェイスを構築するための、すぐに使える部品が用意されています。
処理中の文書をアプリケーションのユーザーに表示したり、認識結果を検証したり、認識されたテキストを編集したりできるようにできます。ビジュアルコンポーネント は、あらゆる処理シナリオで役立ちます。たとえば、[Document Conversion](/ja/fine-reader/engine/guided-tour/basic-usage-scenarios-implementation/document-conversion) シナリオではテキスト編集機能を提供でき、[Field-Level Recognition](/ja/fine-reader/engine/guided-tour/basic-usage-scenarios-implementation/field-level-recognition) シナリオでは検証機能が非常に有用です。
ここでは、シンプルな OCR アプリケーションをユーザーインターフェイスの観点から見てみましょう。文書は複数の処理ステップを経ます。
1. 画像を開く
開いた画像をユーザーに表示し、処理対象文書のページ間を移動できるようにできます。
2. 認識
文書からテキストデータを抽出するには、その文書を認識する必要があります。認識されたテキストをユーザーに表示し、編集できるようにできます。
3. 検証
認識されたテキストは、検証が必要になる場合があります。元の画像と認識されたテキストの両方をユーザーに表示して、比較できるようにできます。
4. エクスポート
認識された文書は、適切な保存形式で保存したり、外部アプリケーションで開いたりできます。
以下では、ABBYY FineReader Engine ビジュアルコンポーネント の使用方法について詳しく説明します。
ビジュアルコンポーネント を使用するには、Microsoft Windows Common Controls バージョン 6.0 以降が必要です。
Visual Studio では、ダイアログに ActiveX コントロールを挿入できます。ビジュアルコンポーネント を Toolbox ウィンドウ (Toolbox は View メニューから使用できます) に追加して利用できます。
1. Tools メニューで、Choose Toolbox Items (または Add/Remove Toolbox Items) をクリックします。
2. 開いたダイアログで、COM Components タブをクリックし、ABBYY DocumentViewer、ABBYY ImageViewer、ABBYY ZoomViewer、ABBYY TextEditor、ABBYY TextValidator コンポーネントを選択します。
3. OK をクリックします。選択した項目のアイコンが Toolbox に表示されます。各 ビジュアルコンポーネント のアイコンは、デザインビュー画面にドラッグ＆ドロップできます。この操作により、アクティブなプロジェクトファイルに、ビジュアルコンポーネント のインスタンスを作成するための基本コードも追加されます。
4. ビジュアルコンポーネント をフォームに追加したら、Visual Studio で使用可能なプロパティを指定できます。たとえば、各コンポーネントの [SettingsPath](/ja/fine-reader/engine/visual-components-reference/imageviewer#settingspath) プロパティは、設計時に指定する必要があります。
Visual Studio デザイナーは 64 ビット ActiveX コントロールをサポートしていません。そのため、64 ビット版の ビジュアルコンポーネント を Windows Form アプリケーションに追加することはできません。これは既知の動作であり、Microsoft ActiveX コントロールでも同様の問題が報告されています。詳細は、[http://support.microsoft.com/kb/980533/en-us](http://support.microsoft.com/kb/980533/en-us) を参照してください。この問題の回避策として、64 ビット システムで ビジュアルコンポーネント を開発者向けインストールの対象として選択すると、FineReader Engine は 32 ビット版と 64 ビット版の両方の ビジュアルコンポーネント をインストールします。この場合、Visual Studio デザイナーでは 32 ビット版のコンポーネントを使用できます。なお、ビジュアルコンポーネント を使用する 64 ビット アプリケーションでは、32 ビット版 ビジュアルコンポーネント をインストールする必要はありません。
Component Synchronizer コンポーネントを使用すると、アプリケーション内のビジュアルコンポーネントを同期できます。つまり、接続されているすべてのコンポーネントで、表示や編集の操作が同期して処理されます。ビジュアルコンポーネントを同期するには、次の手順を実行します。
1. フォームのロード時に、新しい [ComponentSynchronizer](/ja/fine-reader/engine/visual-components-reference/supplementary-objects/componentsynchronizer) オブジェクトを作成します。
2. ComponentSynchronizer オブジェクトの DocumentViewer、ImageViewer、ZoomViewer、TextEditor、TextValidator プロパティを使用して、各コンポーネントを synchronizer に接続します。
API を介してコンポーネントを synchronizer に接続すると、Component Synchronizer は [Component Synchronizer の動作の仕組み](/ja/fine-reader/engine/guided-tour/advanced-techniques/using-gui-elements/how-component-synchronizer-works) で説明されているとおりに動作します。
### C\#
```csharp theme={null}
private void VisualComponentsForm_Load(object sender, System.EventArgs e)
{
// コンポーネントを Synchronizer に接続
Synchronizer = new FineReaderVisualComponents.ComponentSynchronizerClass();
Synchronizer.DocumentViewer = ( FineReaderVisualComponents.DocumentViewer ) documentViewer.GetOcx();
Synchronizer.ImageViewer = ( FineReaderVisualComponents.ImageViewer ) imageViewer.GetOcx();
Synchronizer.ZoomViewer = ( FineReaderVisualComponents.ZoomViewer ) zoomViewer.GetOcx();
Synchronizer.TextEditor = ( FineReaderVisualComponents.TextEditor ) textEditor.GetOcx();
}
```
ABBYY FineReader Engine を使い始めるには、[Engine](/ja/fine-reader/engine/api-reference/engine-object-iengine-interface) オブジェクトを作成する必要があります。Engine オブジェクトを作成するには、エクスポート関数 [InitializeEngine](/ja/fine-reader/engine/api-reference/functions/initializeengine-function) を使用できます。あわせて、[Engine object をロードするその他の方法](/ja/fine-reader/engine/guided-tour/advanced-techniques/programming-aspects/different-ways-to-load-engine) も参照してください。Engine オブジェクトは、画像のロード時またはフォームの初期化時にロードできます。
### C\#
```csharp theme={null}
[DllImport( "FREngine.dll", CharSet=CharSet.Unicode ), PreserveSig]
private static extern int InitializeEngine(
String customerProjectID,
String licensePath,
String licensePassword,
String FREngineDataFolder,
String FREngineTempFolder,
Bool lsSharedCPUCoresMode,
ref FREngine.IEngine engine );
private void loadEngine()
{
int hresult = InitializeEngine( "",
"",
"",
"",
"",
false,
ref Engine );
Marshal.ThrowExceptionForHR( hresult );
}
```
ビジュアルコンポーネントに画像を表示するには、その画像を開く必要があります。画像を開くには、次の手順を実装できます。
1. 1 つのドキュメントの画像をロードするには、[FRDocument](/ja/fine-reader/engine/api-reference/document-related-objects/frdocument) オブジェクトを作成し、そこに画像を追加する必要があります。次のいずれかの方法を使用できます。
* Engine オブジェクトの [CreateFRDocumentFromImage](/ja/fine-reader/engine/api-reference/engine-object-iengine-interface/creation-methods/createfrdocumentfromimage-method) メソッドを使用して FRDocument オブジェクトを作成します。このメソッドは FRDocument オブジェクトを作成し、指定したファイルから画像をロードします。
* Engine オブジェクトの [CreateFRDocument](/ja/fine-reader/engine/api-reference/engine-object-iengine-interface/creation-methods/createlessobjectgreater-methods) メソッドを使用して FRDocument オブジェクトを作成し、その後、作成した FRDocument オブジェクトにファイルから画像を追加します (FRDocument オブジェクトの [AddImageFile](/ja/fine-reader/engine/api-reference/document-related-objects/frdocument/addimagefile-method)、[AddImageFileWithPassword](/ja/fine-reader/engine/api-reference/document-related-objects/frdocument/addimagefilewithpassword-method)、または [AddImageFileWithPasswordCallback](/ja/fine-reader/engine/api-reference/document-related-objects/frdocument/addimagefilewithpasswordcallback-method) メソッドを使用します) 。
2. [ComponentSynchronizer](/ja/fine-reader/engine/visual-components-reference/supplementary-objects/componentsynchronizer) オブジェクトの Document プロパティを使用して、ドキュメントを Component Synchronizer に接続します。
この手順は、画像を開くボタンのクリックイベントを処理するために使用できます。
### C\#
```csharp theme={null}
private void openImage( string imageFileName )
{
// ABBYY FineReader Engine をロード
if( Engine == null )
{
loadEngine();
Engine.ParentWindow = this.Handle.ToInt32();
Engine.ApplicationTitle = this.Text;
}
// 画像を開く
Document = Engine.CreateFRDocumentFromImage( imageFileName, null );
// Synchronizer を使用して画像をビジュアルコンポーネントに接続
Synchronizer.Document = Document;
}
```
ビジュアルコンポーネント での画像認識は、コンポーネントで使用できるコマンド、または FineReader Engine API を使用して実行できます (たとえば、FRDocument object の [Process](/ja/fine-reader/engine/api-reference/document-related-objects/frdocument/process-method) メソッドを参照してください) 。
認識には、次の手順を実装できます。
1. FRDocument object のメソッドを使用してドキュメントを認識します。
2. ドキュメントは ビジュアルコンポーネント GUI を介さずに変更されているため、その変更を ビジュアルコンポーネント に通知する必要があります。ドキュメント内の各ページに対して、[FRPage](/ja/fine-reader/engine/api-reference/document-related-objects/frpage) object の [Update](/ja/fine-reader/engine/api-reference/document-related-objects/frpage/update-method) メソッドを使用します。
この手順は、認識を実行するボタンの "on click" イベント ハンドラーとして使用できます。
### C\#
```csharp theme={null}
private void recognizeDocument()
{
// ドキュメント全体を認識して合成する
Document.Process( Synchronizer.ProcessingParams );
// 変更を ビジュアルコンポーネント に通知する
for( int i = 0; i < Document.Pages.Count; i++ )
{
Document.Pages[i].Update();
}
}
```
認識されたデータは Text Validator component を使用して検証できます。このコンポーネントには、文字が正しく認識されているかを確認し、必要に応じて修正できるユーザーインターフェイスが用意されています。
検証には、次の手順を実装できます。
1. Text Validator component を現在のフォームに追加するか、このコンポーネント用に新しいフォームを作成します。
2. Text Validator component を Component Synchronizer に接続します。[ComponentSynchronizer](/ja/fine-reader/engine/visual-components-reference/supplementary-objects/componentsynchronizer) object の TextValidator property を使用します。
3. [TextValidator](/ja/fine-reader/engine/visual-components-reference/textvalidator) object の [Spell](/ja/fine-reader/engine/visual-components-reference/textvalidator/spell-method) メソッドを使用して、検証プロセスを開始します。
### C\#
```csharp theme={null}
private void validateButton_Click(object sender, System.EventArgs e)
{
if( validatorForm == null )
{
// 検証用の新しいフォームを作成する
validatorForm = new ValidatorForm();
validatorForm.Owner = this;
// validator を synchronizer に接続する
Synchronizer.TextValidator = ( FineReaderVisualComponents.TextValidator ) validatorForm.TextValidator.GetOcx();
validatorForm.Show();
// 接続されたドキュメント内の認識されたテキストを検証する
validatorForm.TextValidator.Spell( null );
}
}
```
認識されたドキュメントは、[Document Viewer](/ja/fine-reader/engine/visual-components-reference/documentviewer/document-viewer-commands) で使用できるコマンド、または FineReader Engine API を使用して保存できます。
たとえば、FRDocument object の [Export](/ja/fine-reader/engine/api-reference/document-related-objects/frdocument/export-method) メソッドを使用し、パラメーターの 1 つとして [FileExportFormatEnum](/ja/fine-reader/engine/api-reference/enumerations/fileexportformatenum) 定数を指定します。FRDocument object での処理が完了したら、この object が使用していたすべてのリソースを解放してください。[IFRDocument::Close](/ja/fine-reader/engine/api-reference/document-related-objects/frdocument/close-method) メソッドを使用します。この手順は、エクスポートを実行するボタンの "on click" イベント ハンドラーとして使用できます。
### C\#
```csharp theme={null}
// 認識されたドキュメントを RTF として保存する
Document.Export( "", FREngine.FileExportFormatEnum.FEF_RTF, null );
// FRDocument object を解放する
Document.Close();
```
ABBYY FineReader Engine での作業が完了したら、[Engine](/ja/fine-reader/engine/api-reference/engine-object-iengine-interface) object をアンロードする必要があります。これには、エクスポートされた [DeinitializeEngine](/ja/fine-reader/engine/api-reference/functions/deinitializeengine-function) 関数を使用します。
Engine のデ初期化の前に Component Synchronizer を解放することをお勧めします。
この手順は、アプリケーションウィンドウを閉じるボタンの "on click" イベント ハンドラーとして使用できます。
### C\#
```csharp theme={null}
[DllImport( "FREngine.dll", CharSet=CharSet.Unicode ), PreserveSig]
private static extern int DeinitializeEngine();
private void unloadEngine()
{
if( Engine != null )
{// Engine がロードされていた場合はアンロードする
Engine = null;
int hresult = DeinitializeEngine();
Marshal.ThrowExceptionForHR( hresult );
}
}
```
説明した手順の実装例は、[VisualComponents](/ja/fine-reader/engine/guided-tour/samples#visualcomponents) サンプルにあります。
## 関連項目
[ビジュアルコンポーネントのコンテキストメニューとツールバーのカスタマイズ](/ja/fine-reader/engine/guided-tour/advanced-techniques/using-gui-elements/customizing-the-context-menu-and-toolbar-of-a-visual-component)