第26回　Live FrameIt SDK ── 仮想フォトフレームの作成（1）

はじめに

前回から久しぶりの更新となりました。「⁠使ってみよう！ Live Framework」のほうはしばらくお休みして、またしばらくの間、この連載を再開したいと思いますのでよろしくお願い致します。

さて今回は、Windows LiveのSDKを利用して仮想フォトフレームを作りたいと思います。仮想フォトフレームという言葉は一般的ではないようで筆者が勝手に定義したものですが、PC上で動作するデジタルフォトフレームアプリケーションです。ハードウェアとして実体はありません。スライドショー機能のある画像ビューワーと違いがなさそうですが、今回作るアプリケーションはWindows Live FrameItというデジタルフォトフレーム用のWebサービスと連携し、サービスに対し実際のデジタルフォトフレームのように振る舞うところが画像ビューワーとの違いです。

開発環境および言語はVisual Studio 2008とVisual Basicを使用します。無償のVisual Basic Express Edition SP1でも開発可能ですので是非お試しください。またVB.NETを使用していますが、Live FrameItの利用は.NET Frameworkに依存した内容ではありません。HTTP接続およびXML処理さえできればどの言語でも利用可能です。

Windows Live FrameIt

Windows Live FrameIt（図1）はデジタルフォトフレーム向けのWebサービスで、日本では2009年4月からベータ版として開始しています。簡単に説明するとWebサイト上でユーザーがデジタルフォトフレームに表示したい写真を選択し、デジタルフォトフレームへ配信できるというサービスです。

Live FrameItの特徴のひとつは、配信する写真を多様なソースから選択・組み合わせできることです。ソースにはオンラインストレージのWindows Live SkyDriveにアップロードした写真、検索サービスのBingによる画像検索結果、各種写真共有サービスなどがあります（図2⁠）⁠。

また、写真だけでなく天気予報やニュースなどの情報も画像として配信することができ、フォトフレーム上でそれらの情報を確認することができます。図3はフォトフレームへ配信する内容をWebブラウザでプレビュー表示したものです。

ユーザーはこれらのソースを選択し、コレクションという単位でグループ化して管理します。それぞれのソースに対して各種設定およびスケジューリングできることも特徴です（図4⁠）⁠。例えば、平日の朝は天気予報とニュースを配信しそれ以外は複数の写真共有サービスの内容を配信するといったことができます。

このほかにも、ソース内の表示する画像の数や順序、有効期限の設定などが可能です。

以上のようにLive FrameItを利用すると、ユーザーはWebサイト上の操作でデジタルフォトフレームに表示する細かな設定、天気予報やニュースなどの情報が利用できるようになります。デジタルフォトフレーム側はLive FrameItに対応することで、このような機能の実装や設定の記憶領域を用意する必要がなくなります。

Windows Live FrameIt SDK

Windows Live FrameIt SDKは、Live FrameItを利用したデジタルフォトフレーム製造のための機器メーカー向けのSDKです。ただし、SDKの入手や利用は個人でも可能ですので、今回はこれを利用してLive FrameItに対応したアプリケーションを作ります。SDKの内容にはブランドロゴのライセンシングの手続きなども含まれていますが、本連載では扱いません。本連載では、Liveサービスに興味のある個人の方を対象とした内容とします。

Live FrameIt SDKはhttp://frameit.live.com/Partnersからダウンロードしてください。SDK内には各種文書およびサンプルプログラムなどが含まれています。Live FrameItはデジタルフォトフレーム用のWeb APIを用意しています。APIはSOAPと呼ばれる通信プロトコルを使用しています。これから作成する仮想フォトフレームは、このAPIを利用して各種ユーザー情報を取得して動作することになります。

SDKには、再配布可能なFrameIt Client PowerToyというアプリケーションも含まれています。これは、Live FrameItと同期しコレクションの内容をPCへ保存するアプリケーションです（図5⁠）⁠。FrameIt Clientのプラグインを作ることもでき、ダウンロードした画像をデジタルフォトフレームへ送信するために利用できます。

Live FrameItとの連携

それでは順にデジタルフォトフレームからLive FrameItと連携するために必要な手続きを確認していきましょう。Live FrameItではデジタルフォトフレームを含むLive FrameItと連携する機器をデバイスと表現しています。本連載でもこれ以降はデバイスと表記します。

Live FrameItとデバイスが連携するためには、ユーザーは少なくとも次の作業が必要です。

Live FrameItへデバイスの登録

また、次の操作も可能です。

Live FrameItからデバイスの削除
表示するコレクションの選択
表示するフィードの選択

ここで出てきたフィードについて少し説明します。Live FrameItのサービスはユーザーが作成したコレクションおよび設定に基づいてRSSフィードを生成します。フィードには個別にIDが割り当てられ、特定の書式のURLで表現されています。デバイスはこのRSSフィードのURLを取得し、さらに表示する画像のURLを得ます。

ユーザーはRSSフィードを意識することなく利用も可能ですが、直接フィードのIDやURLの参照もできます。表示するフィードの選択とは、それらの値を直接デバイスに入力するということになります。コレクションの設定からフィードのIDやURLが確認できます（図6⁠）⁠。

次は、デバイスが実装すべき事項です。必要な実装は次の通りです。

Live FrameItへデバイスの登録（の手続き）
コレクションの取得およびユーザーへの選択の提示
フィードの取得およびフィードに示された画像の取得・表示
フィードの登録
有効期限に基づいたフィードの再取得

また、ネットワークが接続されてない状態とネットワークが回復したときの動作についてもどのように実装すべきかがSDKでは触れています。

デバイスの登録方法

Live FrameItとの連携のためにはデバイスの登録作業が必要です。Live FrameItへ登録されたデバイスは図7のようにWebサイトからユーザーが確認でき、削除も行えます。

デバイス側から見た場合、デバイスの登録とはLive FrameItが発行したデバイスIDというデバイスに対して一意な識別子を取得することです。デバイスIDを得たデバイスは、Live FrameItからユーザーのコレクションの取得が可能になります。

Live FrameItへデバイスを登録する方法は次の2種類が用意されています。

デバイス上で直接またはPCアプリケーションを使用する方法
登録トークンを使用する方法

Live FrameItへデバイスを登録するにはWindows Live IDアカウントによるユーザー認証が必要です。以上の方法は認証に着目すると、Windows Live IDの認証を実装する必要がある、認証はLive FrameItのWebサイトで行い実装する必要がないものとなります。

デバイス上で直接またはPC上のアプリケーションを使用する方法

ひとつめの方法によるデバイスIDの取得までの手順は図8の通りです。

Windows Live IDアカウントによるサインイン画面をユーザーへ提示
Windows Live IDアカウントの入力
アカウントの認証およびLiveサービスアクセスに使用するチケットを取得
チケットを使用してデバイスIDの取得

PC上のアプリケーションというのは、デバイス自身はデバイスID取得機能を持たず、代わりにアプリケーションを用いた利用が想定されたものです。アプリケーションからデバイスへは何らかの通信手段（USB接続など）でデバイスIDを渡します。

この方法は、デバイスがLive FrameItとデバイスを結び付ける機能を実装するためもうひとつの方法に比べて若干ユーザーの手間が少なくなります。本連載ではこの方法を使用します。

登録トークンを使用する方法

もうひとつの登録方法は、登録トークンと呼ばれる文字列を使用したものです。その手順を図9に示します。

登録トークンの要求・取得
登録トークンをユーザーに提示
Live FrameItのサイトへサインインおよび登録トークンの入力
デバイスへ登録トークンを入力したことを通知
登録トークンを使用してデバイスIDの取得

デバイスはLive FrameItが発行した登録トークンという文字列を取得し、ユーザーにLive FrameItのWebサイト上（http://claimit.frameit.com/）でトークンを入力するよう提示します。ユーザーはトークンを入力し（図10⁠）⁠、デバイスに入力完了を知らせることでLive FrameItとデバイスを結び付けます。Live IDアカウントによる認証はユーザーがWebサイト上で行うのでデバイスは認証機能を実装する必要がなくなります。

デバイスIDの取得

ここからは実際にコードを書いていきましょう。今回はデバイスIDの取得部分まで行います。まずはVisual Studioで適当なWindowsプロジェクトを作成してください。今回の内容を試すにはプロジェクトの種類はWindows Forms、WPF、コンソールアプリケーションのどれでも構いませんが、最終的にはWPFアプリケーションでの作成を予定しています。

Windows Live ID によるサインイン

デバイスが直接、デバイス登録を行う手続きの方法では、Windows Live IDアカウント認証が必要です。この部分はWindows Live ID Client SDKを利用します。ダウンロードページからWLIDClientSDK.msiをダウンロード・インストールしてください。

Live ID Client SDKを利用すると図11のようなサインインダイアログボックスが使えます。またLiveサービスアクセス（今回の場合はLive FrameIt）に必要なチケットの取得も、クラスライブラリのメソッド呼び出しにより可能です。

インストール完了後、プロジェクトに参照を追加します。メニューの「プロジェクト」の「参照の追加」を選択し、開いたウィンドウから「Microsoft.WindowsLive.Id.Client」を選びます（図12）。

注意事項として、Live ID Client SDKは64bit版Windowsに対応していません。Visual Studioを使用している場合はプロジェクトのプロパティのコンパイルタブ内にある「詳細コンパイルオプション」からターゲットCPUをx86に指定します。Visual Basic Express Editionでは設定できません。

サインインを行うコードを以下に示します。

' Imports Microsoft.WindowsLive.Id.Client と Import 宣言
' および以下の Prrivate 宣言がされているものとします
' Private Manager As IdentityManager
' Private Identity As Identity
Try
    ' IdentityManager, Identity インスタンス生成
    Manager = IdentityManager.CreateInstance("VirtualPhotoFrame;***@live.jp;Virtual Photo Frame", "Virtual Photo Frame")
    Identity = Manager.CreateIdentity
Catch ex As Microsoft.WindowsLive.Id.Client.WLLogOnException
    Console.WriteLine(ex.ErrorMessage)
    Exit Sub
End Try

If Not Identity.IsAuthenticated Then
    ' 認証されていない場合
    ' ダイアログボックスの表示
    If Identity.Authenticate Then
        ' 認証が成功した場合
        ' (ユーザー名(メールアドレス)などが取得可能)
        Dim userName = Identity.UserName
    Else
        ' 認証キャンセル
        Exit Sub
    End If
Else
    ' (参考: サインアウトする場合)
    Identity.CloseIdentityHandle()
End If

使用するクラスは、認証サーバーと接続を行うIdentityManagerとユーザー情報を表すIdentityクラスです。

IdentityManagerのインスタンスは、CreateInstanceメソッドにアプリケーションIDとアプリケーション名を渡し、その戻り値として取得します。ここでのアプリケーションIDとは、組織名・電子メールアドレス・アプリケーション名を「;」で区切った文字列のことで、IDの取得手続き等は必要ありません。

Identityのインスタンスは、IdentityManager オブジェクトのCreateIdentityメソッドの戻り値として得ます。Identity オブジェクトのAuthenticateメソッドを呼び出すことでサインインダイアログボックスが表示されます[1]⁠。

続いてIdentityオブジェクトのGetTicketメソッドを使用して、チケットを取得します。GetTicketチケットの引数は、アクセス先、ポリシー、ローカルにキャッシュがある場合もサーバーからチケットを入手するか否かです。

' Web サービスの URL
Dim serviceUrl = "https://frameit.live.com/service/devicesvc.asmx"

' チケットの取得
Dim ticket = Identity.GetTicket(serviceUrl, "MBI", True)

ポリシーとは、Liveサービスによっては指定が必要な文字列です。詳細は不明ですがサンプルにならって同じ値を指定しています。以上によりチケットはこのあとLive FrameItへ接続する際に使用します。

サービス参照の追加

次に、Live FrameItのWebサービスの参照をプロジェクトに追加しましょう。メニューの「プロジェクト」の「サービス参照の追加」から行います（図13⁠）⁠。

アドレス欄に「https://frameit.live.com/service/devicesvc.asmx」と設定します。名前空間は「ServiceReference」としました。OKボタンをクリックするとWebサービスに必要なクラス群が自動生成されます。

上記アドレスはWebサービス記述言語（WSDL: Web Services Description Language）を提供しています。WSDLはXMLベースのWebサービス利用に必要な定義が記述されています。https://frameit.live.com/service/devicesvc.asmx?wsdlを参照するとその内容を直接確認できます。Visual Studioはこれを利用してクラス群を生成しています。実際にWebサービスと通信するにはHTTPとXMLをベースとしたSOAPというプロコルを使用しています。自動生成されたクラスを使うとプロトコルをほとんど意識することなく通常のメソッド呼び出しのように使用できます。

Webサービスの呼び出し

実際にLive FrameItにコードからアクセスしデバイスIDを取得してみましょう。

サービスの参照を追加すると、DeviceSvcSoapClientクラスができています。このクラスにはWebサービスを呼び出すメソッドも実装されています。また、Webサービスで利用するデータ型のクラスもできています。

チケットを利用したデバイスIDの取得には、DeviceSvcSoapClientクラスのDeviceBindUserメソッドを使用します。メソッドの呼び出しに必要なものは、先のチケットと、製造元の名前、シリアル番号です。製造元名とシリアル番号はメソッドの引数になります。

' (注: まだ不完全な例です)
Dim client = New DeviceSvcSoapClient
Dim result = client.DeviceBindUser("Virtual Photo Frame", Now.Ticks.ToString)
Dim deviceId = result.DeviceId

製造元名とシリアル番号は64文字以下で自由にデバイスが指定します。これらの値はユーザーもWebサイト上で登録されたデバイスとして確認可能です（図7 登録されたデバイス参照⁠）⁠。また、DeviceBindUserメソッドの戻り値はDeviceBindResultsクラス型です。このクラスのDeviceIdプロパティを参照するとデバイスIDが取得できます。

チケットの値ですが、これはWebサービスへアクセスする際のHTTPヘッダーにAuthorizationヘッダーフィールドとして追加する必要があります。これはDeviceSvcSoapClientクラスのメソッドやプロパティだけでは実現できません。

DeviceSvcSoapClientクラスはWindows Communication Foundation（WCF）という通信に関する統一的なプログラミングモデルに基づいてWebサービスを呼び出しています。本連載では説明しませんが、ヘッダーに情報を付け加えるには以下のコードのようにOperationContextScopeクラスを使用します。OperationContextScopeオブジェクトにより指定した区間で行う通信にはAuthorizationヘッダーフィールドを付加するよう記述しています。

' 次の Import 宣言をしているものとします
' Imports VirtualPhotoFrame.ServiceReference (VirtualPhotoFrame は アプリケーションのルート名前空間)
' Imports System.ServiceModel
' Imports System.ServiceModel.Channels

Dim result As DeviceBindResults
Using client = New DeviceSvcSoapClient
    Using scope = New OperationContextScope(client.InnerChannel)

        ' HTTP ヘッダーフィールドの追加
        Dim prop = New HttpRequestMessageProperty
        prop.Headers.Add(Net.HttpRequestHeader.Authorization, "WLID1.0 " & ticket)
        OperationContext.Current.OutgoingMessageProperties.Add(HttpRequestMessageProperty.Name, prop)

        ' デバイスの登録
        result = client.DeviceBindUser("Virtual Photo Frame", Now.Ticks.ToString)

    End Using
End Using

' デバイスID
Dim deviceId = result.DeviceId

以上が、デバイスIDを取得するコードです。うまく動作したでしょうか？　ちなみにSDKに含まれているサンプルのコードは、WCFを使用していません。SOAPに基づいたXMLをコードで記述し、Live FrameItとやり取りしています。内部の動作を理解するには参考になると思います。

また、今回紹介した方法はLive ID Client SDKを使用したために.NET Frameworkに依存しています。Webサービスには、もうひとつの登録トークンを使用したデバイス登録のためのメソッドも用意されています。それについても簡単に次回紹介したいと思います。

今回はここまでです。いかがでしたでしょうか。デバイスIDを取得するコードだけで、UIがありませんので次回は簡単にUI部分も作る予定です。そして、ユーザーのコレクションの取得処理へと続きます。