Live SDK のダウンロードとインストール まず、『Live SDK for Windows and Windows Phone』をダウンロードしてインストールします。アプリを登録 Windows8(コンシューマ) + VisualStudio 11 でプロジェクトを作成してから、Live Connect のアプリ管理 (英語) サイトで、Metro スタイル アプリをマイクロソフトのクラウド サービスにアクセスするように構成します。( アプリケーション名を登録して、ID を取得する ) 以下の画像の一番下の部分(2つ)に、アプリケーション名( ここでは SkyApp )と、サンプル通りの Publisher として CN=lightbox と入力しました。
この後でパッケージ名が表示されるので、それを Visual Studio のほうにセットします。この内容は記録しなくても、以下のページで確認できます。 ▼ 登録後の状態です。
Visual Studio より参照設定 SDK を使用するように構成します
実際の実行の画面遷移
Windows Live から見たアプリの管理画面 プロフィールから『管理』へ移動するとアプリの一覧が表示されて個別に管理できます。最初のほうの詳細情報はアプリを作った開発者が利用する画面で、こちらは使用するユーザが管理する画面です( Twitter と同じです )
ソースコード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8">
<title>SkyApp</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<script src="///LiveSDKHTML/js/wl.js"></script>
<!-- SkyApp references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js"></script>
</head>
<body>
<h1>JavaScript Code Sample</h1>
<div id="signin"></div>
<label id="info"></label>
<script>
WL.Event.subscribe("auth.login", onLogin);
WL.init({
scope: ["wl.signin", "wl.basic"]
});
WL.ui({
name: "signin",
element: "signin"
});
function onLogin() {
WL.api({
path: "me",
method: "GET"
}).then(
function (response) {
document.getElementById("info").innerText =
"Hello, " + response.first_name + " " + response.last_name + "!";
},
function (responseFailed) {
document.getElementById("info").innerText =
"Error calling API: " + responseFailed.error.message;
}
);
}
</script>
</body>
</html>
※ こちらにあったソースでテストしました 関連する Microsoft のページ Live SDK による Windows 8 アプリへのシングル サインオン機能の実装と SkyDrive との連携
|
|
【Windows8 Metro(JS/C#)の最新記事】
- Win8(JS Metro)の『分割･･･』テンプレートにアプリバーを追加して、新しいページを定義する
- Win8(JS Metro)の『分割･･･』テンプレートを使って RSS を収集するサンプル
- Win8(JS Metro)の『分割･･･』テンプレートから追加のページを定義する方法
- 『分割アプリケーション』/ Win8(Metro)テンプレートのテンプレートたる意味
- Windows8(JavaScript Metro Style) 関連リンク
- Windows8 で SkyDrive にアップロードするサンプル
- Windows8 Metro(JS) でのカメラの利用は簡単ですが、まだ製品版では無いせいか他の処理と同時に動かすと、問題もあるようです
- Windows8 Metro(JS) で Three.js の 3D モデル表示(Canvas)を行う
- Windows8 Metro(JS)の画面切り替えが解る、jQuery とのコラボ
- Google ドキュメントを使ってソースコード配布と解説
- 余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移
- querySelectorAll(結果はNodeList) と forEach( Array のメソッド ) の動作確認コード
- Win8 Metro(JS) のクラス定義用クラスでの記述仕様で、getter が存在します
- Win8 Metro で画面の表示変更は、画面部分(?)オブジェクトの入れ替えを自分で行います
- Win8 Metro(JS) : 印刷処理
- Win8 Metro(JS) : WinJS.xhr の内容(XMLHttpRequest)
