PR
PROJECT KySS(プロジェクト・キッス)
四国のSOHO。薬師寺 国安(フリープログラマ)と薬師寺聖(個人事業所自営)による,コラボレーション・ユニット。1997年結成。XMLや.NETプログラミングに関する執筆多数。両名とも,Microsoft MVP for Development Platforms - XML(Oct 2003-Sep 2009),http://www.PROJECTKySS.NET

 本連載では,検索キーに言葉を指定しない,非言語検索処理の開発方法を紹介しています。今回から,色によるXAML形式画像の検索処理を実際に開発していきます。

完成アプリケーション。画像をクリックすると,サンプル・アプリケーションの動作を確認できます
完成アプリケーション。画像をクリックすると,サンプル・アプリケーションの動作を確認できます
 本稿の内容は,Silverlight 2,Silverlight 3 に共通です。Silverlight 3 開発環境の場合は,第2回目のカコミ記事を参照して,環境を構築してください。ただし,画面キャプチャは,Silverlight 2を基本としています。
 今回のサンプルファイルは,こちらからダウンロードできます。Silverlight 2 アプリケーションは「PantomimeSearch 」プロジェクト,Silverlight 3 アプリケーションは「PantomimeSearch_3_Silverlight3」プロジェクトです。

実装する処理の確認

 今回のアプリケーションでは,XAML形式の画像の中の色を検索します。検索対象となる色は,<Path>要素の"Fill"属性値であり,第1回目で述べたとおり,これはRGBを表す16進数です。

 16進数のデータを検索するのですから,検索キーも16進数でなければなりません。ところが,スライダーのドラッグによって直接16進数を得られるわけではありません。そこで,図1のように,3段階の手順を踏んで,検索キーとする16進数を生成していきます。

(1)まず,Sliderコントロールのスライダーのドラッグにより,色相を表す「0」~「360」までの値を取得します。

(2)次に,取得した0~360の数値に対応する,R,G,Bの値を算出します。それらの値は各々「0~255」です。

(3)最後に,RGBの値を,16進数に変換します。

図1●スライダーのドラッグにより得られる値から,検索キーとなる色の16進数を生成する
図1●スライダーのドラッグにより得られる値から,検索キーとなる色の16進数を生成する
[画像のクリックで拡大表示]

 実際に,任意の色の場合の変換過程を追ってみましょう。例えば,黄色は,360°の中の1/6の位置にあります。Sliderコントロールの1/6の位置までスライダーをドラッグして「60」が得られると(実際には,ちょうど60°までドラッグすることは難しいものですが),これが色相の値となります。

 次に,色相が60°の場合のR,G,Bの値を算出します。図1からわかるように,Rは255,Gは255,Bは0となります。

 そして,この数値を16進数に変換します。255,255,0は,それぞれFF,FF,00となり,結果としてFFFF00という16進数が得られます。

 今回は,このような16進数の検索キー生成処理のサンプルプログラムを,ビジュアルデザインを度外視して書いてみます。先にコードを記述し,動作を確認したうえで,装飾用の画像やデザインに関わる処理を追加していきます(次回解説)。RIAだからといって,必ずしもビジュアルデザイン先行で進める必要はないのです。