gihyo.jpサイトのロゴ

はじめようWindows 8世代のアプリ開発

第2回Windowsストア アプリでサインイン！

2012-11-28

はじめに

前回の「SkyDriveと連携したWebアプリ開発」から少し間が空いてしまいましたが、今回から何回かに渡ってWindowsストア アプリ開発を紹介します。

ちょっと他ではあまり見ない？ SkyDrive連携などを目標に進めます。今回はMicrosoftアカウント情報でサインインしてユーザー情報を取得するところまでです。

Windowsストア アプリ

既にWindowsストア アプリにふれた方も多いかと思いますが、簡単に紹介すると、Windowsストア アプリは、Windows 8から新しく登場したアプリの形式です。これまでのWindowsアプリと比べると次のような特徴があります。

  • ひとつのウィンドウで構成され画面全体に表示されます。
  • タッチによる操作が強く意識されています。これまでの、ペン、マウス、キーボードもサポートします。
  • アプリは原則、Windowsストアで提供されます（図1⁠）⁠。
図1　Windowsストア
図1　Windowsストア

もう1点、Windows 8だけでなく、ARM版のWindows RTで動作するアプリも大きな特徴ですね。

開発する場合、これまでと違った部分が多々あります。Windowsストアで配布するため、審査（認定）があるのもそのひとつです。また、Windowsストア アプリ開発のため、細かなガイドラインが提供されていますが、とりあえず気にせず作ってみるのがおすすめです！

この連載では、Windowsストア アプリの開発について、はじめから順にすべて紹介はできませんが、ポイントやトピックをしぼっておもしろそうな内容を紹介していきたいと思います。

Microsoftアカウントでのサインイン

Windows 8の特徴のひとつとして、Microsoftアカウント（旧Windows Live ID）でサインインがあります。Microsoftアカウントでサインインしていると、Outlook.comなどMicrosoftアカウントを利用したサービスは、毎回アカウント情報を入力することなく、すぐにサービスを使えます（シングル サインオン⁠）⁠。

このシングル サインオン機能は、Microsoft公式アプリだけでなく、サードパーティ製でも実現できます。それを実現するのが、前回も今回からも扱うLive Connectです。Live Connectで提供されるAPIを利用すると、Microsoftアカウント情報や、SkyDriveやHotmail（Outlook.com）といったサービスにアクセスできます。

よって今回は、Windowsストア アプリとLive Connectによる開発です。Live Connectは、前回はWebアプリ連携を行ったように、プラットフォームを選ばず利用できますが、しばらくはWindowsストア アプリ連携にお付き合いください。

ここで、事前準備が長いので、最初に登場するコードの一部を紹介します。Windowsストア アプリをC#で作った場合、次のようにサインインします。そして、ユーザー名を取得しています。利用しているクラスは、Live SDKによって提供されています。簡単にMicrosoftアカウント情報にアクセスできるのがわかるかと思います。

var authClient = new LiveAuthClient();
LiveLoginResult authResult = await authClient.LoginAsync(new string[] { "wl.basic" });
if (authResult.Status == LiveConnectSessionStatus.Connected)
{
    var connectClient = new LiveConnectClient(authResult.Session);

    // Microsoftアカウント情報の取得
    LiveOperationResult opMeResult = await connectClient.GetAsync("me");
    dynamic meResult = opMeResult.Result;
    this.NameTextBlock.Text = meResult.name;
}

もちろん、サードパーティ製のアプリの場合、はじめてサインインするとき、サインインの確認プロセスがあります。

Windowsストア アプリの開発

ここからは、Windowsストア アプリを開発する事前知識と準備を見てみましょう。

開発環境

まず、開発にはWindows 8とVisual Studio 2012が必須です。無償のVisual Studio Express 2012 for Windows 8も使えます。

開発言語は、C++（C++/CX）、C#・Visual Basic、JavaScript・HTML5・CSSが使えます。すべての言語で同等のアプリが作れるわけではなく、得意・不得意なものがあります。バリバリのDirectXを使ったゲームを作るにはC++を選択するかありません。ただし、Windows Runtime（WinRT）と呼ばれる共通のAPIで、Windows 8の機能を呼び出したり等は各言語からできるようになっています。

この連載では、C#・Visual Basic、JavaScriptを主に使います。

Windowsストアと開発者アカウント

次に、Windowsストア アプリは、原則Windowsストアで公開して配布・販売します。企業向けに、ストアを使わずデバイスに直接インストールを行うサイドローディングという方法もありますが、この連載では扱いません。

Windowsストアでアプリを配布するためには、Windowsストア開発者アカウントの登録が必要です。現在の登録料は、年間4,900円です。

身元確認のためにクレジットカードを使うため、クレジットカードが必須です。少額の請求がされるので（後で払い戻されます⁠）⁠、その金額または、請求者名に付加されているコードを使って身元を確認します。そのため、請求内容がすぐに確認できない方は、登録に時間がかかります。

ちなみに、MSDNサブスクリプションのアカウントがある方は、無償になる登録コードがMSDNサブスクリプションのアカウントのページから手に入ります。

年間の登録料が発生する開発者アカウントの登録は、アプリが完成してからでも遅くはないと思います。ただし、今回のLive Connectを利用したアプリを動作させるためには、登録が完了している必要があります。また、登録に時間を要する場合もありますので、まだ登録していない方は事前に手順を確認してみてください。

登録は、デベロッパー センターの「Windows ストア開発者になるための手順（図2⁠）⁠」より行えます。

図2　Windowsストア開発者になるための手順
図2　Windowsストア開発者になるための手順

Live Connectを利用したアプリの開発

さっそくアプリを作っていきましょう。今回の目標は、Microsoftアカウントでサインインするところまでです。

Live SDKのインストール

はじめに、Live Connectデベロッパーセンターから、Live SDKをダウンロードし、インストールします。

「WindowsおよびWindows Phone向け」のLive SDKを選択します。現在の最新バージョンは、v5.3です。

新規プロジェクトの作成

Visual Studioを起動して、新しいプロジェクトを作ります。今回は、C#の新しいアプリケーション（XAML）を選択します（図3⁠）⁠。図は、Visual Studio 2012 Express for Windows 8の画面です。

図3　新しいプロジェクト
図3　新しいプロジェクト

プロジェクトには、いろいろなファイルが作成され、いくつか既にコードが書いてありますが、気にせず進めましょう。今はまだ真っ暗な画面を表示するだけのアプリです。

ツールバーでシミュレーターを選択して（図4⁠）⁠、実行（デバッグの開始）すると、シミュレーターが起動して、その中でアプリが動きます。アプリを停止する時は、Visual Studioの「デバッグの停止」を使います（図5⁠）⁠。

図4　シミュレーターの選択
図4　シミュレーターの選択
図5　デバッグの停止
図5　デバッグの停止

参照の追加

次に、Live SDKに含まれているライブラリを参照します。メニューの「プロジェクト⁠」⁠-「⁠参照の追加」から参照マネージャーを開いて、「⁠参照」ボタンをクリックします。

ライブラリは、通常「C:\Program Files (x86)\Microsoft SDKs\Live\v5.0\Windows Store app XAML\References\CommonConfiguration\Neutral」にインストールされています。「⁠Microsoft.Live.dll」を選択して追加します（図6⁠）⁠。

図6　参照の追加
図6　参照の追加

サインイン処理の記述

続いて、コードを記述していきます。Microsoftアカウント情報にアクセスするため、サインインする処理を記述しましょう。

MainPage.xaml.csファイルを開きます。LoadProfileメソッドを追加して、OnNavigateToメソッドから呼ぶようにします。これで、アプリが表示されたときにLoadProfileが実行されます。

MainPage.xaml.cs
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    LoadProfile();
}

private async void LoadProfile()
{
}

サインインの処理を追記します。

// ファイル先頭に using Microsoft.Live; を追加すること
private async void LoadProfile()
{
    var authClient = new LiveAuthClient();
    LiveLoginResult authResult = await authClient.LoginAsync(new string[] { "wl.basic" });
    if (authResult.Status == LiveConnectSessionStatus.Connected)
    {
        // (サインイン完了)
    }
}

サインインなど認証関連は、LiveAuthClientクラスを使います。サインインは、LoginAsyncメソッドを呼ぶだけです。結果をLiveLoginResultオブジェクトで受け取り、Statusプロパティによってサインインしたかどうかを判断します。

コードでは、“⁠wl.basic⁠”という文字列を指定しています。これは、アプリが要求するユーザーの情報です。wl.basicは基本的な情報を求めています。Live Connectは、ユーザーがアプリに対してユーザーリソースにアクセスすることを許可する（認可する）一般的な手法のOAuthを利用しています。このアクセス許可の内容を、スコープ（Scope）と呼びます。Live Connectで利用できるスコープや、詳しい内容は、スコープとアクセス許可を参照してください[1]⁠。

さて、これを実行して動作を確認してみたいところですが、このままでは動きません。次の手順に進みましょう。

Live Connectの利用

Windowsストア アプリでLive Connectを利用するためには、Windowsストア開発者アカウントの登録が完了している必要があります。アプリの一意なIDが必要になるためです。この手続きは、Windowsストア アプリのデベロッパーセンター行います。

それでは、その手順を説明します。この作業は、最終的にどのアプリでも必要な作業です。

アプリの名前

デベロッパー センターにサインインして、「⁠アプリの提出」を選択します（図7⁠）⁠。ここで、開発するアプリの名前や情報を登録し、最終的にはアプリをアップロードし、認定処理へ進めます。

図7　アプリの提出
図7　アプリの提出

Live Connect利用のアプリの開発作業で最低限 必要な作業は、アプリの名前を付けることだけです。「⁠アプリの名前」を選択して、名前を登録（予約）しましょう（図8）（⁠※2⁠）⁠。

図8　アプリの名前
図8　アプリの名前

名前を決めるとアプリのIDが決まり、Visual Studioを使って作成中のアプリと関連付けることができます。

高度な機能

ちなみに、アプリの名前を付けると有効になる「高度な機能」には、Live Connectに関する設定が含まれています。

少し覗いてみましょう。高度な機能内にある「プッシュ通知とLive Connectサービスの情報」をクリックします。続いて、「Live Connect ユーザーへのアプリの表示」をクリックします（図9）。

図9　プッシュ通知とLive Connectサービスの情報
図9　プッシュ通知とLive Connectサービスの情報

ここでは、アプリの利用規約やプライバシーポリシーのURLの設定、ロゴの指定などができます。

アプリをストアと関連付ける

それでは、Visual Studioに戻ります。デベロッパーセンターで登録したアプリを、作成中のアプリと関連付けます。

メニューの「ストア」‐「アプリケーションをストアと関連付ける」を選択します（図10）[3]。

図10　「アプリケーションをストアと関連付ける」メニュー
図10　「アプリケーションをストアと関連付ける」メニュー

次のウィンドウが開きます（図11）。サインインして、アプリケーション名を選択します（図12）

図11　アプリケーションをストアと関連付けるウィンドウ
図11　アプリケーションをストアと関連付けるウィンドウ
図12　アプリケーション名を選択
図12　アプリケーション名を選択

「次へ」をクリックし、次の画面で「関連付け」をクリックして完了です。

サインイン処理の確認

アプリと関連付けたので、先ほどのコードが動作するようになりました。ユーザー視点から見ると、アクセスを許可するアプリが明確になったからです。

アプリを実行してみましょう。起動するとすぐにサインイン処理に進み、図13のような画面が表示されます。

図13　アクセスの許可
図13　アクセスの許可

「はい⁠」⁠・「⁠いいえ」のどちらを選択しても、次の処理は何も書いていないため何も起こりません。

MicrosoftアカウントでWindowsにサインインしている場合、そのアカウントでサインインします。ローカルアカウントを利用している場合は、図14のようにMicrosoftアカウントの入力を求められます。

図14　Microsoftアカウントの追加
図14　Microsoftアカウントの追加

一度、ユーザーが許可すると、次からユーザーの操作なしにサインイン状態になります。もう一度、実行してみるとアクセス許可の画面は表示されません。

アプリへの許可の取り消し

アクセス許可の画面に書いてある通り、ユーザーは、いつでもアプリに与えた許可を取り消せます。

チャーム[4]を表示して「設定」から、「⁠PC設定の変更」を選択して、「⁠ユーザー」の「アカウント設定の詳細をオンラインで確認する」を選ぶとhttps://account.live.com/summarypage.aspxへ移動します。このページの「アカウント許可」の「リンクされたアカウントの管理」にある「アカウントの管理」に許可したアプリが出てきます（図15⁠）⁠。

図15　アカウントの管理
図15　アカウントの管理

日本語の場合は、正しく表示されないなど使い勝手はよくありません。https://consent.live.comでもアクセス許可の内容を確認ができます。

アカウント情報の取得

コードの記述に戻ります。サインインした後、アカウント情報を取得してみましょう。今回は、アカウントの名前と表示アイコンを取得します。

名前と表示アイコンを表示する場所を、アプリ画面に用意しておきます。次のようにMainPage.xamlを開き編集してください。<Grid>要素の中に、StackPanel、TextBlock、Imageを追加します。

ツールボックスから、StackPanel、TextBlock、Imageをドラッグ＆ドロップして、プロパティウィンドウで名前やWidth、Heightなど設定しても同様のことができます。

MainPage.xaml
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <TextBlock Name="NameTextBlock" />
        <Image Name="ProfileImage" Width="96" Height="96" HorizontalAlignment="Left" />
    </StackPanel>
</Grid>

次は、サインイン後の処理を追記し、次のように変更します。

MainPage.xaml.cs
private async void LoadProfile()
{
    var authClient = new LiveAuthClient();
    LiveLoginResult authResult = await authClient.LoginAsync(new string[] { "wl.basic" });
    if (authResult.Status == LiveConnectSessionStatus.Connected)
    {
        var connectClient = new LiveConnectClient(authResult.Session);

        // 名前の取得
        LiveOperationResult opMeResult = await connectClient.GetAsync("me");
        dynamic meResult = opMeResult.Result;
        this.NameTextBlock.Text = "こんにちは！ " + meResult.name;

        // 表示アイコン URL の取得
        LiveOperationResult opPicResult = await connectClient.GetAsync("me/picture");
        dynamic picResult = opPicResult.Result;
        this.ProfileImage.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(
            new Uri(picResult.location, UriKind.Absolute));
    }
}

ユーザーリソースを取得するには、LiveConnectClientクラスを使います。インスタンス時にLiveAuthClient.Sessionプロパティを指定します。

実際に名前などの情報を得る時は、GetAsyncメソッドを使います。名前の場合は“⁠me⁠”⁠、表示アイコンの場合は“⁠me/picture⁠”と指定しています。実は、この“⁠me⁠”などは、URLのパスの一部で、https://apis.live.net/v5.0/meにアクセスしています。

結果は、JSON形式で受け取ります。“⁠me⁠”の場合は次のような結果が返ってきます。

{
   "id": "xxxxx", 
   "name": "中野梓", 
   "first_name": "梓", 
   "last_name": "中野", 
   "link": "http://profile.live.com/cid-xxxxx/", 
   "gender": "female", 
   "locale": "ja_JP", 
   "updated_time": "2012-11-11T12:00:00+0000"
}

“me/picture⁠”の場合は、アイコンのURLです。

{
   "location": "https://cid-xxxxx.users.storage.live.com/users/xxxxx/myprofile/expressionprofile/profilephoto:UserTileStatic"
}

アプリでは、これらの結果から値を取り出して使っています。

リソースの操作について、詳しい仕様はREST APIを参照してください[5]⁠。

ここまでを実行してみましょう（図16⁠）⁠。名前とアイコンが表示されましたか？

図16　実行結果
図16　実行結果

今回はここまでです。いかがでしたか。Microsoftアカウント情報を扱って、ユーザーごとに異なるアプリも簡単に作れそうな気がしますね。次回は、ガイドラインに従った、サインイン処理と実装について扱う予定です。

おすすめ記事

記事・ニュース一覧