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

第47回 デスクトップアプリでWindows Live統合

この記事を読むのに必要な時間:およそ 8 分

メインウィンドウ

次は,メインウィンドウを作ります。プロジェクトにデフォルトで作成されているウィンドウのMainWindow.xamlのXAMLコードを以下のように編集します。

MainWindow.xaml

<my:RibbonWindow x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
    Title="アプリ" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <my:Ribbon FontFamily="Meiryo UI">
            <my:RibbonTab Header="ホーム">
                <my:RibbonGroup>
                    <my:RibbonButton 
                        x:Name="SignInButton"
                        Label="サインイン"
                        LargeImageSource="signout.png" />
                    <my:RibbonMenuButton 
                        x:Name="SignOutMenuButton"
                        LargeImageSource="signout.png"
                        Label="名前"
                        Visibility="Collapsed">
                        <my:RibbonMenuItem 
                            x:Name="SignOutMenuItem"
                            Header="サインアウト" />
                    </my:RibbonMenuButton>
                </my:RibbonGroup>
            </my:RibbonTab>
        </my:Ribbon>
    </Grid>
</my:RibbonWindow>

上記のコード編集のとき,ツールボックスからリボンコントロールをドラッグ&ドロップすると自動的にリボンコントロールのライブラリーの参照が追加されますので,利用しましょう。<Window>要素は,上記のようにリボン用のウィンドウに変更します。LiveメールなどのUIにならって,サインインはRibbonButton,サインアウトはRibbonMenuButtonを使います。

サインインボタンをクリックしたときに,作成したサインインウィンドウの表示を行います。MainWindow.xaml.vbファイルに次のコードを追加します。

Private Sub SignInButton_Click(sender As Object, e As System.Windows.RoutedEventArgs) Handles SignInButton.Click

    Dim window = New SignInWindow("*** Client ID を指定***", New String() {"wl.share"}) With {
        .Owner = Me,
        .WindowStartupLocation = Windows.WindowStartupLocation.CenterOwner}

    If window.ShowDialog <> True Then
        Exit Sub
    End If

End Sub

SignInWindowオブジェクトを生成する際に,Client IDとScopeを指定します。Client IDは,適切なものに置き換えてください。Scopeのwl.shareについては後述します。

ここまでを一度実行してみましょう。作成したサインインウィンドウが表示されましたか?図4

図4 サインインウィンドウ

図4 サインインウィンドウ

サインインウィンドウで認可処理を行うとウィンドウが閉じます。その後の処理は,まだ書いていません。次は,サインイン後(認可後)の処理を書いていきましょう。

サインインウィンドウのクラスからアクセストークンを得て,REST APIを呼出します。サインインしたユーザーの名前を取得して,リボンの表示を変更します。コードを次のように変更します。

' 必要な Imports
' Imports System.Net
' Imports System.Threading.Tasks
' Imports Newtonsoft.Json
' Imports Newtonsoft.Json.Linq

' Developer Preview の REST API URI
Private Const LiveUriFormat As String = "https://beta.apis.live.net/v5.0/{0}?access_token={1}"
Private AccessToken As String

Private Sub SignInButton_Click(sender As Object, e As System.Windows.RoutedEventArgs) Handles SignInButton.Click

    Dim window = New SignInWindow(ClientId, New String() {"wl.share"}) With {
        .Owner = Me,
        .WindowStartupLocation = Windows.WindowStartupLocation.CenterOwner}

    If window.ShowDialog <> True Then
        Exit Sub
    End If

    ' (メソッド内は下記のコードを追加)

    Me.AccessToken = window.AccessToken

    Task.Factory.StartNew(
        Function() As JObject

            ' REST API の呼び出し
            Using client = New WebClient With {.Encoding = System.Text.Encoding.UTF8}
                ' ユーザーの情報を JSON データを取得
                Dim json = client.DownloadString(String.Format(LiveUriFormat, "me", Me.AccessToken))
                Return JObject.Parse(json)
            End Using

        End Function).ContinueWith(
        Sub(o As Task(Of JObject))
            ' UI の変更 (サインインボタンの非表示,ユーザーのアイコン表示など)
            Me.SignInButton.Visibility = Windows.Visibility.Collapsed
            Me.SignOutMenuButton.Visibility = Windows.Visibility.Visible
            Me.SignOutMenuButton.Label = o.Result("name").Value(Of String)()
            Dim iconUri = New Uri(String.Format(LiveUriFormat, "me/picture", Me.AccessToken))
            Dim bmp = New BitmapImage(iconUri)
            Me.SignOutMenuButton.LargeImageSource = bmp

        End Sub, TaskScheduler.FromCurrentSynchronizationContext)
End Sub

追加した主なコードは,REST APIの呼び出しとUIの変更部分です。REST API呼出しでは,https://beta.apis.live.net/v5.0/meにHTTP GETメソッドでアクセスして,ユーザーの基本情報を取得しています。URLは,Developer Preview版のものを使用していますので,Live Connectの正式版リリース後には,正式なURLに置き換える必要があります。

UIの変更では,ボタンなどの表示切り替えと名前の表示などを行っています。ユーザーのアイコンは,https://beta.apis.live.net/v5.0/me/pictureにアクセスすると得られます。

サインアウト処理も書いておきましょう。実は,サインアウトする手段は特に用意されていません。ここでは単にUIの表示の切り替えと,取得したアクセストークンの破棄を行います。

Private Sub SignOutMenuItem_Click(sender As Object, e As System.Windows.RoutedEventArgs) Handles SignOutMenuItem.Click
    Me.AccessToken = Nothing
    Me.SignInButton.Visibility = Windows.Visibility.Visible
    Me.SignOutMenuButton.Visibility = Windows.Visibility.Collapsed
End Sub

ちなみに,JavaScript APIではlogoutメソッドが用意されています。

以上で,デスクトップアプリによるWindows Liveサービスの統合の基本的な内容でした。実行画面は図5のようになります。

図5 実行結果

図5 実行結果

コードからわかる通り,エラー処理は含まれていません。実際は,ネットワーク接続のエラーや,アクセストークンの有効期限切れによるエラーレスポンス処理などを考慮する必要があります。

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp