カスタムジェスチャで、簡単な文字認識アプリケーション

By: Chikako Yonezawa

Abstract: この記事では、カスタムジェスチャを使用して、簡単な文字認識アプリケーションを作成します。

予め用意されている標準ジェスチャ以外に、独自のジェスチャをカスタムジェスチャとして登録し、使用することができます。

この記事では、カスタムジェスチャを使用して、簡単な文字認識アプリケーションを作成します。

    カスタムジェスチャの登録

カスタムジェスチャは、GestureManager コンポーネント上で登録します。

    簡単な文字認識アプリケーションの作成

今回は、Delphi でカスタムジェスチャで文字を登録し、その文字を認識させるアプリケーションを作成します。

  1. IDE のメニューより [ファイル|新規作成|VCL フォームアプリケーション - Delphi] を選択します。

Hide image
Click to see full-sized image

  1. フォーム上に TButton, TEdit, TPanel, TActionList, TGestureManager をツールパレットからドラッグ&ドロップします。

Hide image
RADXE_Touch20

  1. フォームの体裁を整えます。

Hide image
RADXE_Touch21

  1. 今回は Panel 上でジェスチャを認識させるので、Panel コンポーネントに色をつけます。オブジェクトインスペクタで Panel1 を選択し、Color プロパティに clSkyBlue をセットします。また Caption プロパティの内容はクリア(削除)します。

Hide image
RADXE_Touch22

  1. オブジェクトインスペクタ上で Edit1 を選択し、Text プロパティの内容をクリア(削除)します。

Hide image
RADXE_Touch23

  1. オブジェクトインスペクタ上で Button1 を選択し、Caption プロパティに 'クリア' と入力します。

Hide image
RADXE_Touch24

  1. デザイナ上で、Button1 をダブルクリックすると、OnClick イベントが生成されるので、このイベントに以下のコードを記載します。
Edit1.Text := '';

Hide image
RADXE_Touch25

  1. デザイナ上で、ActionList1 をダブルクリックします。ActionList の編集ダイアログが表示されます。

Hide image
RADXE_Touch26

  1. 左上のプルダウンメニューより [新規] を選択し、新規のアクションを作成します。

Hide image
RADXE_Touch27

  1. この編集ダイアログ上に作成された Action1 をマウスでダブルクリックすると OnExecuteイベントが生成されます。このイベントに以下のコードを記載します。
Edit1.Text := Edit1.Text + 'e';

Hide image
Click to see full-sized image

  1. ActionList の編集ダイアログに戻り、同じような手順で Action2~8 までのアクションを生成し、それぞれの OnExecute イベントに、以下のコードを記載します。

Action2 の OnExecute イベント

Edit1.Text := Edit1.Text + 'm';

Action3 の OnExecute イベント

Edit1.Text := Edit1.Text + 'b';

Action4 の OnExecute イベント

Edit1.Text := Edit1.Text + 'a';

Action5 の OnExecute イベント

Edit1.Text := Edit1.Text + 'r';

Action6 の OnExecute イベント

Edit1.Text := Edit1.Text + 'c';

Action7 の OnExecute イベント

Edit1.Text := Edit1.Text + 'd';

Action8 の OnExecute イベント

Edit1.Text := Edit1.Text + 'o';

Hide image
Click to see full-sized image

  1. ActionList の編集ダイアログを閉じます。
  2. デザイナ上で GestureManager1 をダブルクリックします。カスタムジェスチャの編集ダイアログが表示されます。

Hide image
Click to see full-sized image

  1. [作成] ボタンを押し、カスタムジェスチャマネージャを起動します。

Hide image
Click to see full-sized image

  1. 画面の右側の「マウスまたはタッチスクリーンを使ってここにジェスチャを入力します」と書かれた箇所の上で、マウス等のタッチデバイスを使用して、一筆で「e」の文字を描きます。

Hide image
Click to see full-sized image

  1. 画面上部のプロパティの名前欄に 'e' を入力し、感度を 30% ぐらいに下げます。

Hide image
Click to see full-sized image

  1. [OK]ボタンを押すと、現在描いたものがカスタムジェスチャとして登録されます。(似たようなジェスチャが存在すると、競合が感知されます。そのまま登録するのであれば [続行]のボタンを押して登録します。やり直す場合は [キャンセル] | [キャンセル]で登録をキャンセルし、もう一度やり直します。
  2. この手順で 'e', 'm', 'b', 'a', 'r', 'c', 'd', 'o' のカスタムジェスチャを登録します。

Hide image
RADXE_Touch34

  1. 全部で 8つのジェスチャを登録したら、[OK]ボタンを押し、カスタムジェスチャの編集ダイアログを閉じます。
  2. オブジェクトインスペクタで、Panel1 を選択し、Touch.GestureManager プロパティに GestureManager1 をセットします。

Hide image
RADXE_Touch35

  1. Touch.Gesture.Custom プロパティを展開し、登録されたカスタムジェスチャに、作成したアクションを関連付けます。

e

Action1

m

Action2

b

Action3

a

Action4

r

Action5

c

Action6

d

Action7

o

Action8

Hide image
RADXE_Touch36

  1. アプリケーションが完成しました。メニューの [実行|実行]でアプリケーションを実行してみましょう。

Hide image
RADXE_Touch37

色の付いた Panel上でタッチデバイスで登録した文字を書きます。登録した文字と認識されると Edit上に文字が入力されます。(このアプリケーションでは、Panel上には文字は表示されません。マウスの動きが分かりやすいように文字を書き込んでいます)

Server Response from: ETNASC04