クイックスタート: アプリのカスタマイズ (HTML)

[アーティクル]
08/29/2015

JavaScript を使った Windows ランタイムアプリでは、Live SDK により、ユーザーの Microsoft アカウントの情報にアクセスできます。

アプリの実行時に、ユーザーは自分の Microsoft アカウントを使ってサインインし、アプリがデータにアクセスすることに同意する必要があります。ユーザーがサインインして同意すると、アプリはユーザーのプロファイルデータにアクセスしてエクスペリエンスをカスタマイズできるようになります。

重要このクイックスタートは説明とデモンストレーションのみを目的としています。Windows ストアにアップロードしてユーザーに配布するアプリでこの機能を使うには、サインアウト機能、プライバシーポリシー、サインイン機能を含める必要があります。このクイックスタートを完了した後で、「Microsoft アカウントのサインインの要件」を読んで、これらの機能を追加する方法をご覧ください。

重要このトピックのチュートリアルでは、Windows ストアアプリについて説明します。また、Windows Phone ストアアプリに Microsoft サービスを追加することもできます。

必要条件

JavaScript を使った Windows ランタイムアプリを Windows Live サービスを利用して開発する前に、必要なソフトウェアを開発用コンピューターにインストールする必要があります。

Windows ストアアプリを開発するためのツールと SDK (まだインストールしていない場合)。ツールには、Microsoft Visual Studio などがあります。
Live SDK。
JavaScript を使った Windows ストアアプリ。

注このクイックスタートで示すコードは、Visual Studio の JavaScript プロジェクト用 "空のアプリケーション" テンプレートに含まれています。

ユーザーをサインインさせ、ユーザーのデータにアクセスする同意を得る

Windows Live サービス機能にアクセスするコードを追加します。

アプリの実行時には、ユーザーが Microsoft アカウントでサインインするための Windows サインインコントロールを表示できます。サインインの後、まだユーザーがこのアプリについて同意していなければ、ユーザーのプロファイル情報にアプリからアクセスするための同意を求めるメッセージが表示されます。

アプリの実行時にユーザーをサインインするには、プロジェクトで次の手順を行います。

次のようにして、Live SDK への参照を設定します。
1. [ソリューションエクスプローラー] の [参照設定] を右クリックし [参照の追加] をクリックします。
2. [Windows]、[拡張機能] の順にクリックし、[Live SDK] の横のボックスをオンにします。一覧に [Live SDK] が表示されない場合は、Live SDK を再インストールして、この手順を再試行します。
3. [OK] をクリックして、ダイアログボックスを閉じます。
アプリに、Live SDK ファイルの wl.js ファイルへの参照を追加します。JavaScript プロジェクト用の "空のアプリケーション" テンプレート内で、これが Default.html に追加されます。

アプリのメインコードファイルの <head> タグ内の、default.js ファイルへのリンクより前に、次のような <script> タグを追加します。
```
<script src="///LiveSDKHTML/js/wl.js"></script>
```

default.html の <body> タグ内に、ユーザーを Microsoft アカウントにサインインしてユーザーの情報で表示を更新するコードを追加します。

注ユーザーのコンピューターアカウントが Microsoft アカウントに関連付けられている場合、Microsoft アカウントのサインインコントロールは表示されません。その場合、アプリは自動的にサインインします。

<body> タグ内に、次のコードを追加します。

<!--This is where the user's info will be written
 after the user has signed in.-->
<label id="info"></label>

<!--This is the script code that will sign the user in
 and display their name.-->
<script>
    // Initialize the Live Connect features.
    //  This should be called from each file that 
    //  uses Live Connect features.
    WL.init();

    // Sign the user into their Microsoft account or connect 
    //  the app to the Microsoft account the user has associated 
    //  with their computer account.
    WL.login({
            scope: ["wl.signin"]
        }).then(
            function (response) {
                onLoginComplete();
            },
            function (loginError) {
                document.getElementById("info").innerText =
                   "Login Error: " + loginError.error + " - " + loginError.error_description;
            }
        );

    // If the user is signed in, then get their profile info
    function onLoginComplete() {
        WL.api({
            path: "me",
            method: "get"
        }).then(
            function (response) {
                // update the display to show the user's name
                document.getElementById("info").innerText =
                    "Hello " + response.name + "!";
            },
            function (infoError) {
                document.getElementById("info").innerText =
                    "Data Request Error: " + infoError.error.message;
            }
        );
    }
</script>

要約と次のステップ

このトピックでは、Outlook.com や Microsoft OneDrive などの Microsoft クラウドサービスに保管されているユーザーのデータに、アプリで Windows Live サービスを使ってアクセスする方法について説明しました。

Windows Live サービスの使用についてさらに学習するには、「Microsoft アカウントのサインインの要件」と「Microsoft サービスをアプリに追加する方法」をご覧ください。サインイン機能、サインアウト機能、プライバシーポリシーを追加する方法が説明されています。

クイック スタート: アプリのカスタマイズ (HTML)

必要条件

ユーザーをサインインさせ、ユーザーのデータにアクセスする同意を得る

要約と次のステップ

その他のリソース

クイックスタート: アプリのカスタマイズ (HTML)