WPFでReactiveProperty入門 ~Bing画像検索ビューアを作る

ReactiveProperty を使ってみたい

と思いつつ、なかなか手を付けられなかった ReactiveProperty に入門すべく、WPF + ReactiveProperty で、サンプルアプリケーションを作ってみました。

ReactiveProperty

github.com

ReactivePropertyの概要はこちら。この解説を読むだけでもReactivePropertyの素晴らしさが分かります。
MVVMとリアクティブプログラミングを支援するライブラリ「ReactiveProperty v2.0」オーバービュー - かずきのBlog@hatena

作ったもの

Bingで画像検索をして結果を閲覧するWPFアプリケーションです。
検索した画像は Microsoft Project Oxford Computer Vision APIs を使って画像解析も行います。

f:id:pierre3:20150809110334p:plain

機能

  • 入力した検索ワードでBing画像検索を行います。
  • 検索結果をサムネイルで一覧表示します。
  • サムネイルを選択すると、その画像をフルサイズでダウンロードしてウィンドウ中央に表示します。
  • 同時に、Computer Vision API で画像解析を行い、その結果を画像プロパティとしてテキスト表示します。 ― さらに、Computer Vision APIで人の顔として認識されたものがある場合、顔領域の矩形と、その顔から推定される年齢と性別を画像に重ね合わせて表示します。
  • ステータスバーに、検索の進捗と現在の状況を表示します。
  • 画像の検索、ダウンロードなどで例外が発生した場合、エラーの内容を通知パネルで表示します。

f:id:pierre3:20150809224845p:plain

マナカナ以外の画像も集める!

このアプリケーションでは、以下のAPIを使用しています。

APIの概要、導入方法等は以下の記事を参考にさせていただきました。
(というか、完全にこちら↓の記事の二番煎じです。)

マナカナを集める - かれ4

マナカナの画像からProejctOxfordとimagemagickで顔を切り出す。 - かれ4

ソースコード

今回のサンプルコードは Githubに置いてあります。

ReactiveProperty はもちろん、 WPFやReactive Extensionsについても勉強しつつ探り探り実装しております。
「ここの使い方間違っているよ」や「これもっといい実装方法あるよ」等々ありましたらご指摘いただけると非常に助かります。

github.com

開発環境、ライブラリ

使用方法

試してみたい方がいらっしゃいましたら、GitHubでClone してコンパイルするか、Release からバイナリのzipをダウンロードしてみてください。

但し、実行するには Bing Search API と Project Oxford Computer Vision API の アクセスキーが必要になります。 Azure Market Place でアカウントを登録して、キーを取得してください (この辺りの手順も、前述のマナカナ画像の記事が詳しいです。)

アクセスキーを入手しましたら、App.config (ReactiveBingViewer.exe.config)のapplicationSettings に入力します。
"BingApiAccountKey" および"VisionApiSubscriptionKey" をそれぞれ入手したアクセスキーで置き換えてください。

<configuration>
    <applicationSettings>
        <ReactiveBingViewer.Properties.Settings>
            <setting name="BingApiAccountKey" serializeAs="String">
                <value>Input your account key.</value>
            </setting>
            <setting name="VisionApiSubscriptionKey" serializeAs="String">
                <value>Input your subscription key.</value>
            </setting>
        </ReactiveBingViewer.Properties.Settings>
    </applicationSettings>
</configuration>

次回

次回から、プログラムの解説的なものを 書いて行く予定です。