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

  • [アーティクル]

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 サインイン コントロールを表示できます。サインインの後、まだユーザーがこのアプリについて同意していなければ、ユーザーのプロファイル情報にアプリからアクセスするための同意を求めるメッセージが表示されます。

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

  1. 次のようにして、Live SDK への参照を設定します。

    1. [ソリューション エクスプローラー] の [参照設定] を右クリックし [参照の追加] をクリックします。
    2. [Windows]、[拡張機能] の順にクリックし、[Live SDK] の横のボックスをオンにします。一覧に [Live SDK] が表示されない場合は、Live SDK を再インストールして、この手順を再試行します。
    3. [OK] をクリックして、ダイアログ ボックスを閉じます。

  2. アプリに、Live SDK ファイルの wl.js ファイルへの参照を追加します。JavaScript プロジェクト用の "空のアプリケーション" テンプレート内で、これが Default.html に追加されます。

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

    <script src="///LiveSDKHTML/js/wl.js"></script>

  3. 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 サービスをアプリに追加する方法」をご覧ください。サインイン機能、サインアウト機能、プライバシー ポリシーを追加する方法が説明されています。