素早く簡単に作るならRAD開発ツール第1回

ジェスチャーに対応するコード

続いて、ジェスチャーに対応するコードを記述していきます。まず、フォルダーを選択したときの処理です。このコードは、選択したフォルダーのすべてのJPEGファイル名を文字列リストに格納するものです。最後に、現在のインデックス（この場合は0）のファイルをImage1に読み込み、表示させます。

procedure TForm1.BrowseForFolder1Accept(Sender: TObject);
var
  FileName: string;
begin
  FIndex := 0;
  FList.Clear;

	for FileName in TDirectory.GetFiles(BrowseForFolder1.Folder, '*.jpg', TSearchOption.soAllDirectories) do
  	FList.Add(FileName);

	if FList.count > 0 then
  	Image1.Picture.LoadFromFile(FList[FIndex]);
end;

次に、左に指を動かしたときです。リストのインデックスを1つ減らして、そのファイルをImage1に読み込みます。

TForm1.Action_LeftExecute(Sender: TObject);
begin
  //Left
  if (FList.Count > 0) and (FIndex > 0) then begin
  	Dec(FIndex);
  	Image1.Picture.LoadFromFile(FList[FIndex]);
  end;

end;

右に動かしたときは、インデックスを1つ増やします。

procedure TForm1.Action_RightExecute(Sender: TObject);
  begin
  //Right
  if (FList.Count > 0) and (FIndex < FList.Count - 1) then begin
  	Inc(FIndex);
  	Image1.Picture.LoadFromFile(FList[FIndex]);
  end;
end;

コンポーネントに対してジェスチャーを定義する

では、いよいよジェスチャーによる動作を定義していきましょう。ジェスチャーは、Image1上で行われたものについて処理します。そこで、Image1のGestureManagerプロパティへ、最初に配置したGestureManager1を設定します。

すると、図のように標準で定義されているいくつものジェスチャーが、オブジェクトインスペクタに表示されます。

図8：ジェスチャーの設定（クリックで拡大）

ここで、Leftにチェックを入れ、ドロップダウンリストから、先ほど作成したAction_Leftを選択します。同じように、Rightに対して、Action_Rightを指定します。最後に、Checkに対して、BrowseForFolder1を指定します。

ジェスチャーの設定はこれだけです。ジェスチャーの種類は、標準のものだけでも34種類ありますが、独自にカスタムジェスチャーを定義することもできます。

図9：カスタムジェスチャーの定義（クリックで拡大）

アプリケーションを実行する

以上でアプリケーションは完成です。早速実行してみましょう。

図10：イメージビューワーの実行

起動したアプリケーションのウィンドウ上でチェックマークを描くと、フォルダーを選択するダイアログボックスが表示されます。チェックマークは、タッチスクリーン上で指を使って操作するだけでなく、マウスによって描いてもOKです。

フォルダーを選択すると、ウィンドウに画像が表示されます。

図11：画像の表示

ウィンドウ上を指で右になぞると、次の画像が表示されます。

改良のヒント

操作手順としては、iPhoneなどのイメージビューワーと同じように画像をブラウジングできるようになりましたが、画像をスムーズにスクロールしている感じはありません。また、複数の指（マルチタッチ）を使ったズームなど、まだまだほしい機能がいろいろありそうです。

こうした拡張は、取りあえず動くアプリケーションを作ってみて気がつくことも多いでしょう。Delphiを使ったプロトタイピングでは、拡張のアイデアを現在のアプリケーションを改良していくことで、どんどんかたちにしていくことができます。アジャイル開発のプロセスとうまく組み合わせることで、よりよいソフトウエアを本当に素早く開発できるようになるでしょう。

※編集部注：一部の文章・構成に誤りがあったため、修正しました。（2011.05.24）