gihyo.jpサイトのロゴ

使ってみよう！ Windows Live SDK/API

第3回Tafiti Search Visualization

2008-03-18

Tafiti Search Visualization

Tafiti Search Visualization（Tafiti）はSilverlightとLive Search APIを利用した試験的な検索サービスとして2007年8月に公開されました。また同年12月にはWindows Live Quick Apps（WL Quick Apps）のひとつとしてソースコードも公開されています。WL Quick AppsはWindows Liveを中心とした技術を利用したアプリケーションのサンプル群です。オープソースとして公開されておりライセンス（Ms-PL）の元に自由に変更が可能です。

Tafitiには、Live Search APIだけでなくLive ID Web AuthenticationサービスやLive Spaces Blog APIも利用されています。2008年２月末にはWindows Live Messenger Libraryを使った機能も追加されました。実際に動作しているTafitiはhttp://www.tafiti.comやhttp://tafiti.mslivelabs.com/で見ることができます。

今回はこのTafitiをローカル環境に構築してみましょう。また、Live Search APIの紹介の続きとしてLive Searchの特長でもある画像検索部分についても紹介します。

開発ツール・ライブラリのインストール

本記事では次のツールを使ってTafitiをローカルPCにセットアップします。いずれも無料でダウンロードが可能です。

Visual C#・Web Developerのインストール時にオプションとしてSQL Server 2005 Express EditionとSliverlight Runtimeがインストールできますので、インストールしていない場合は選択してください。

またTafitiに必要なライブラリもインストールしておきます。

Tafitiのダウンロード

CodePlexからWindows Live Quick Appsのソースコードをダウンロードします。執筆時点での最新版は6.0（Beta）となっており、WLQuickApps_6.0というリンクからダウンロードできました。

WL Quick Appsのすべてがひとつの圧縮ファイルになっています。展開したフォルダとファイルはドキュメントフォルダのVisual Studio 2008\Projectsの下に置くとよいでしょう。

データベースの設定

SQL Server Managementを起動してサーバに接続します。オブジェクトエクスプローラの「データベース」を右クリックし、「⁠新しいデータベース」を選択します。そして、データベース名にTafitiと入力し［OK］をクリックします（図1⁠）⁠。これでTafitiというデータベースができました。

図1　新しいデータベースの作成
図1　新しいデータベースの作成

続いて、SQLクエリを実行してテーブルを作成します。WLQuickApps.Tafitiフォルダにあるcreate.sqlをファイルメニューから開きます。データベース エンジンへ接続した後、実行ボタンを押します（図2⁠）⁠。以上でデータベースの設定は終了です。

図2　クエリの実行
図2　クエリの実行

プロジェクトの設定

Visual C# 2008からWLQuickApps.Tafiti.slnを開きます。ソリューションファイルにはVisual C# 2008用ではないプロジェクトも含まれているのでメッセージダイアログが表示されますが、気にせず［OK］ボタンをクリックします。そして、ソリューションをビルドします。

Visual Web Developer 2008からWebサイトを開きます。「Webサイトを開く」ウィンドウのファイルシステムからWLQuickApps.Tafiti.WebSiteフォルダを開きます。

プロジェクトを開いたら、Visual C# 2008でビルドしたアセンブリの参照を追加します。ソリューションエクスプローラのプロジェクト名を右クリックし、参照の追加を選択します。開いたウィンドウの参照タブからWLQuickApps.Tafiti.Business\bin\Debugフォルダ（Releaseビルドした場合はReleaseフォルダ）内にあるDLLを2個とも選びます。

続いてAnti-Cross Site Scriptingライブラリの参照も同様に追加します。インストールした場所[3]のLibrary\.NET 2.0フォルダにあるAntiXssLibrary.dllを追加します。

デフォルトではデバッグを開始するたびにポート番号が変化します。動的に変化すると都合が悪いので、プロジェクトのプロパティから動的ポートの使用をFalseに設定しておきます。またTafitiはルートディレクトリに設置することが想定されています。併せて仮想パスを「/」にしておきます（図3）。

図3　Webサイトのプロパティ設定
図3　Webサイトのプロパティ設定

Application IDの取得

さて、Tafitiは検索結果を保存しておくことができます。これをshelfと呼び、Windows Live ID Web Authenticationサービスが利用されています。このサービスはWebサイトにLive IDによる認証の仕組みを提供します。URLドメインとユーザごとに一意な文字列を取得でき、それを使用することでユーザの識別が可能になります。サービス利用にはアプリケーションの登録が必要ですのでhttp://msm.live.com/app/から登録をしておきます。

左のメニューリンクから「Register an Application」をクリックし必要事項を入力します（図4）。各項目は以下になっています。

Application Name:

アプリケーション名です。適当な名前を入力します。

Return URL:

WebサイトからLive ID認証ページへ移動して、認証後に戻ってくるURLになります。localhostの指定も可能です。今回はlocalhost上で動かし、認証後に戻ってくるべきページはRegister.aspxですので次のように入力しておきます。ポート番号の50000は、プロジェクトのプロパティのポート番号と同じにします。

http://localhost:50000/Register.aspx
Domain Name:

Web Authenticationでは使用されない項目ですので空白で結構です。

Secret Key:

WebサイトとLive IDサービスで共有する秘密鍵になります。これを用いてサービスから受け取った値を復号することになります。16～64文字の長さで入力します。

Application Verifier Required:

Web Authenticationでは0を選択しておきます。

利用規約を確認後、［⁠Submit］ボタンをクリックして完了です。クリックするとApplication IDが表示されます。Application IDとSecret Keyは、のちほど使用します。また、登録した内容はいつでもManage My Applicationsのリンクから編集可能です。

図4　Application IDの登録
図4　Application IDの登録

Web.Configの編集

Visual Web Developer 2008のプロジェクトに戻り、プロジェクト内にあるWeb.Configファイルを編集します。

Web Authenticationサービス用に取得したApplication IDとSecret Keyを以下の部分に記述します。

<add key="wll_appid" value="取得したApplication ID"/>
<add key="wll_secret" value="設定したSecret Key"/>
<add key="wll_securityalgorithm" value="wsignin1.0"/>

Live Search APIのApplication IDも記述します。取得方法は本連載の第1回目を参照してください。

<add key="LiveSearchAppID" value="取得したApplication ID"/>
<add key="LiveSearch.webservices" value="http://soap.search.msn.com/webservices.asmx"/>

データベースの設定を記述します。Data Sourceの部分のサーバ名を変更します。「⁠.\SQLEXPRESS」でも問題ありません。

<connectionStrings>
  <add name="（略）" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=Tafiti;Integrated Security=True" providerName="System.Data.SqlClient"/>
</connectionStrings>

以上で最低限の設定は完了です。ほかの設定項目についてはWeb.Config内のコメントとDeployment Guideを参照してください。

Tafitiの実行

設定が終了したらWebサイトを表示してみましょう。ソリューションエクスプローラ内のDefault.aspxを右クリックし「ブラウザで表示」を選択します。うまく表示されたでしょうか？　検索もしてみてください。残念ながら日本語表示はうまくできませんが……[4]⁠。

Shelf機能を確認してみます。左上の「sign in」のリンクからLive IDを使ってサインインします。その後、右上の「Add Stack」をクリックし新しいshelfを作ります。検索結果をドラッグ＆ドロップでshelfに入れることができるようになります（図5⁠）⁠。Webサイトを閉じても再びサインインすればshelfが復元されます。

図5　Shelf
図5　Shelf

ほかの機能や使い方についてはニュースサイトの紹介やTafiti Walkthroughを参考にしてください。

Live Search APIで画像検索

ここでTafitiから少し離れます。Live Search APIで画像を検索する場合はSourceRequestオブジェクトのSourceプロパティにSourceType.Imageを指定します。また、ResultsプロパティにResultFieldMask.Imageを含める必要があります。

Dim sourceRequest As New SourceRequest
sourceRequest.Source = SourceType.Image
sourceRequest.ResultFields = ResultFieldMask.Url Or ResultFieldMask.Image

画像情報の結果はResultオブジェクトのImageプロパティに入っています。ImageプロパティはImage型（System.Drawing名前空間のものではなくVisual Studioにより生成されたクラスです）になっています。

Imageクラスのプロパティには次のものがあります。

ImageFileSize:
画像ファイルのバイト数
ImageWidth:
画像の横幅のピクセル数
ImageHeight:
画像の縦幅のピクセル数
ImageURL:
画像のURL
ThumbnailFileSize:
サムネイル画像ファイルのバイト数
ThumbnailWidth:
サムネイル画像の横幅のピクセル数
ThumbnailHeight:
サムネイル画像の縦幅のピクセル数
ThumbnailURL:
サムネイル画像のURL

上記プロパティに加えて、各プロパティ名の末尾にSpecifiedが付いたプロパティがあります（ImageFileSizeSpecifiedなど⁠）⁠。Specifiedの付いたプロパティの値がTrueだった場合のみ上記プロパティに値が格納されています。

結果画像の含まれるURLについては、ResultオブジェクトのUrlプロパティに入っています。画像のファイル名のみ取得したい場合はTitleプロパティを使います（ResultFieldMask.Titleの指定が必要⁠）⁠。

Tafiti内のLive Search APIを利用したコード

Live Search APIを利用しているTafiti内のコードを見てみましょう。コードはSearch.aspx.cs内にあり、その中のSoapSearchメソッドを見るとAPIを呼び出す一連のコードがあることがわかります。これまで触れていませんでしたが本連載ではLive Search APIサービスのオブジェクトはWCF[5]に基づいたクラス（MSNSearchPortTypeClient）がVisual Studioにより生成されていました。TafitiのコードはVisual Studio 2008以前で自動生成されたMSNSearchServiceクラスを使用しています。そのため発生する例外やCloseメソッドを呼ぶ必要がないなどの点が異なっています。

さて、画像検索部分について紹介したのでTafitiの画像検索の部分を少し変更してみたいと思います。TafitiのコードではConvertImageResultsメソッドがSourceResponseオブジェクトを引数で受け取り、Tafiti用の結果を作成しています。ここでサムネイルの値を利用しているのがわかります。Live Searchでは検索クエリに「imagesize:DIM_H_1024」のようなキーワードを指定すると画像の幅によって検索対象を絞るということができます。これを用いて検索クエリに「imagesize」が含まれている場合はサムネイル画像を使用せず、元の画像を表示するように変えてみましょう。

検索クエリを知るためにprivate変数_queryを追加してSoapSearchメソッドが呼ばれたときに記憶しておきます。

private string _query;

private void SoapSearch(SourceType sourceType, string query, int first, int count, string domain)
{
    _query = query;
    (略)
}

ConvertImageResultsメソッド内の処理を変更します。forループ内の処理を次のようにしました。_queryに「imagesize」が含まれる場合、フルサイズの画像の幅を使用しています。ただし、500ピクセルを超える横幅のときは幅を制限しています。

Result sourceResult = sourceResponse.Results[i];
LiveXmlResult result = new LiveXmlResult();
if (sourceResult.Image != null)
{
    if (_query.IndexOf("imagesize") >= 0)
    {
        int w = sourceResult.Image.ImageWidthSpecified ? sourceResult.Image.ImageWidth : 100;
        int h = sourceResult.Image.ImageHeightSpecified ? sourceResult.Image.ImageHeight : 100;
        if (w > 500)
        {
            h = (int)(h * (500.0 / w));
            w = 500;
        }
        result.width = w.ToString();
        result.height = h.ToString();
        result.imageUrl = sourceResult.Image.ImageURL;
    }
    else
    {
        result.width = sourceResult.Image.ThumbnailWidthSpecified ? sourceResult.Image.ThumbnailWidth.ToString() : "100";
        result.height = sourceResult.Image.ThumbnailHeightSpecified ? sourceResult.Image.ThumbnailHeight.ToString() : "100";
        result.imageUrl = sourceResult.Image.ThumbnailURL;
    }
}
result.domain = domain;
result.url = sourceResult.Url;
results[i] = result;

図6が実行した結果です。いかがでしたでしょうか。ほかにもいろいろと変更してみてください。

また、今回はドメインをlocalhostとして動かしましたが、すべての機能を試すにはLiveサービスのドメインからの通信も受け取れるようにドメインを設定する必要があります。

図6　実行結果
図6　実行結果

おわりに

今回でLive Search APIに関する内容はひとまず終わりです。Live Search APIはSOAPとWSDLを用いたAPIでしたが、今後はRESTfulなAPIも控えているようですので、今後もまた取り上げることもありかもしれません。最後にLive Search Interactive SDKを紹介しておきます。Live Search APIの動作をWebサイト上で確認できリファレンスも参照できるページです。C#とSOAPのコードも参照でき、開発する際は役立つと思います。

おすすめ記事

記事・ニュース一覧