スクリーンキャスト、Community Ring Day で行った InkCanvas のデモ

11/5(日)には、秋葉原コンベンションホールで「Microsoft Community Ring Day」というイベントが開催されました。このイベントは、9月にはじまった新たなコミュニティへの支援活動「Community Ring」の一環として、コミュニティに参加されている、あるいはこれから参加したい方々との交流を深めたり、マイクロソフトの取り組みをご紹介するものです。当日は、休日にも関わらず大勢の方がご来場くださり、ありがとうございました。

さて、この日は、IT Proデベロッパーともにエバンジェリストチーム全員で「デモ・フェスティバル」というタイトルでデモを中心としたセッションを連続的に行いました。当初、ひとつのデモで15分を繰り返すという予定だったのが、一人20分の持ち時間で好きなデモをするという形に変わったため、予定していたデモができなかったことをお詫びします。

私は持ち時間のほとんどを Windows Presentation Foundation における InkCanvas のデモに費やしました。実は、最初の打ち合わせでは Microsoft On で行っているデモを披露しようということになっていたのですが、コミュニティに参加されている方の多くは Tech Ed などの弊社のイベントに参加されている方も多いでしょうから、これまであまりやって来なかったことをテーマにしようということになりました。そこで私が選んだのが WPF のインク機能(手書き処理)です。

Tablet PC 向けのアプリケーションを開発されたことがある方は、インク(INK)についてよくご存知かもしれません。WPF には、最初からインク機能が組み込まれているため、Tablet PC 以外でも使えます。InkCanvas は、まさに手書き用のキャンバス(描画領域)なのですが、その特長について取り上げられることはなかったと思います。ただ、一般的な WPF の「派手さ」からは程遠いもので、実際のデモは画面に黒い軌跡を描くだけで見た目は大変地味でした。

InkCanvas は、単純にフォームに貼り付けると、その場所に手書きで描画できるようになります。描画した軌跡(ストローク)は Strokes というプロパティに保持されます。しかし、InkCanvas の機能は、これだけではありません。編集モード(EditingMode)を変更すると、描画した軌跡を選択して変更したり、削除することもできます。あるいは選んだ軌跡を削除したり、ファイルへの保存や読み込みもできます。さらにジェスチャー(Gesture)を使って、書いた内容を認識もできるのです。

例によってスクリーンキャストを作ってみました。今回のデモからは、Community Ring Day で行ったデモのうち「変形したボタン」を扱う部分を除いてあります(が、それでもちょっと長くなってしまいました^_^;)。

inkcanvas1.wmv
※800x600、250kbps、12分58秒、音声なし、Windows Media Video 9 Screen、8.4MB

ここで行っていることは、以下のとおりです。

•新しいプロジェクトを開く。※時間を短縮するため、空のプロジェクトを開いています。
•領域を区切って、ボタンを配置する。これらの Click イベントを定義して、InkCanvas の編集モードを変更できるようにする。※現在の Visual Studio "Orcas" CTP では、WPF 上のボタンのイベントハンドラは自分でコードを書かなければなりません。
•アプリケーションを実行し、"Ink" モードで描画した内容を、"Select" モードに切り換えて変更する。※実行したアプリケーションが初期状態で左上にはみ出している点はご容赦ください。
•"EraseByStroke" モードで、描画した軌跡ごとに削除する。※ "GestureOnly" は後で使います。
•軌跡(ストローク)を test.ink というファイルに保存したり、読み込めるようにする。※ファイル名の選択ダイアログなどは、ここでは使っていません。
ジェスチャー(Gesture)を使って、何が描画されているかをラベル(Label)に表示するようにする。※最初、間違えてモードの切り替えをせずに描画していますがご容赦ください。三角形や四角形、星形などが認識されていることがわかります。

プログラム(C#)では、XAML で定義したオブジェクト名を直接参照しています。XAML は、最終的にはクラスの一部としてコンパイルされるのです。XAML に紐付けられているコード(.xaml.cs など)で、クラスの宣言を見ると public partial class Window1 のようにクラスが部分定義となっていることがわかります。

WPF では、実に色々な機能が提供されているので、使ってみるのはきっと楽しいですよ。残念ながら、まだビジュアルな開発環境が整備されてはいないのですが、XAML ベースで記述するだけでも、ほんとうに色々できます。

なお、デベロッパエバンジェリストの松崎は Office と TxF(トランザクションファイルシステム)の2つのデモを行いました。ほんとうは Office だけの予定だったのですが、Windows Vista の特長として紹介したいというので急きょ休憩時間に TxF のデモを追加することになったのです。これらは、松崎のブログに詳細が掲載されているので、あわせてご覧ください。
Office SharePoint Server での Office 文書の作成と登録
Windows Vista における TxF

※本エントリは、MSDNブログのアカウント削除にともない転載しました(2010/12/26)。