Silverlight 実用サンプル「パントマイム・サーチ~The Japanese Wild Flowers~」
このサンプルプログラムの開発手順を,日経IT Proに8月25日より掲載しています。全7回の予定です。
サンプルは,Windows Vista + IE7 + Silverlight 2,および,IE8 + Silverlight 3の環境で動作を確認済みです。
開発環境については,現時点では,Visual Studio 2008 SP1 用 Microsoft Silverlight 3 Toolsは発表されていますが,Expression Studio 3 日本語版は発表されていません。操作手順説明の画面キャプチャの関係上,開発環境は,Expression Design 2,Expression Studio 2,Visual Studio2008を前提としています。ただし,バージョンに左右される機能は使っていません。
■操作手順
検索キー入力ボックスに,言葉を入力する必要はありません。スライダーをドラッグするか,白い花マークあるいは黒い花マークをクリックすると,検索キーとなる色が自動的に指定されます。
スライダーをドラッグした場合は,スライダーの幅に相当する範囲の色が,検索キーとなります。
白い花マークをクリックした場合は,白色が検索キーとなります。
黒い花マークをクリックした場合は,黒色が検索キーとなります。
色を選択すると,検索キー入力ボックスに,検索キーとなる色が表示されます。ルーペの形のボタンをクリックすると,検索結果の画像が表示されます。
検索結果の中に,目的の花があれば,画像の上をクリックします。すると,詳細データが表形式で表示されます。実データは一部で,大半はダミーデータです。
■処理の概要
本サンプルの処理は,色を検索キーとする,XAMLドキュメントの検索です。
詳細データは,XML文書ファイルとして作成していますが,その中に花の色を記録しているわけではありません。
■コラボレーション体制
Silverlightアプリケーションのプログラミングは,画面の左半分の処理を薬師寺聖が,右半分の処理を薬師寺国安が担当しています。サンプルデータ生成プログラミングは,プロシジャ単位の分担です。どちらも,1個のプログラムファイルを二人の間でやりとりしながら仕上げています。
薬師寺聖:企画・設計・Expression Designによるイラスト作成・Expression Blendによる画面レイアウト・検索キー生成処理プログラミング(Silverlightアプリケーション)。および,サンプルデータ生成プログラミング(Windowsアプリケーション)。
※サンプル公開時点では,XSLTで作成していたのですが,記事執筆にあたり,LINQで書き換えました。
薬師寺国安:Expression Blendによる検索結果表示用コントロールの各種設定・検索処理プログラミング(Silverlightアプリケーション)。および,サンプルデータ生成プログラミング(Windowsアプリケーション)。