起動後の画面です。サインインを実行してからアップロードボタンをクリックしてアップロードするファイルを選択しますまずはサインイン
サインインが完了したのでメッセージを表示しています。 ( ここまでで、▲ リンク先と同じです )
▲ アップードボタンをクリックすると、▼ に画面が切り替わります。
ファイルを選択し終わりましたので、『開く』でアップロードが開始されます。終了メッセージの表示を実装していないので、Debug.writeln の結果で確認します。
<!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 style="padding: 30px;">
<h1>Sky Drive アップロードサンプル</h1>
<div id="signin" style="margin-bottom: 20px;margin-top: 20px;"></div>
<button id="upload" style="width:112px;background-color:skyblue;color:black;">アップロード</button>
<br />
<label id="info"></label>
<script>
document.getElementById("upload")
.addEventListener("click", function () { uploadFile('me/skydrive/my_photos'); }, false);
WL.Event.subscribe("auth.login", onLogin);
WL.init({
scope: ["wl.signin", "wl.basic", "wl.skydrive_update"]
});
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;
}
);
}
function uploadFile(path) {
setupOpenPicker().pickSingleFileAsync().then(
function (file) {
if (file) {
return WL.upload({ path: path, file_name: file.fileName, file_input: file });
} else {
Debug.writeln("No file was picked to upload.");
}
}
).then(
function (resp) {
if (resp) {
Debug.writeln(JSON.stringify(resp,null," "));
}
},
function (error) { Debug.writeln(JSON.stringify(error, null, " ")) },
function (progress) { Debug.writeln(JSON.stringify(progress, null, " ")) }
);
}
function setupOpenPicker() {
// Required - picker does not work without setting these properties
var openpicker = new Windows.Storage.Pickers.FileOpenPicker();
openpicker.fileTypeFilter.replaceAll(["*"]);
return openpicker;
}
</script>
</body>
</html>
my_photos は、Pictures というフォルダが無ければ作成されます。以下のような仕様になっていますが、USER_ID の代わりに me が通常使用されます。USER_ID は、API 等で取得できる数字文字列で、それでもアクセスは可能です。ユーザが作成したフォルダの一覧は、me/skydrive/files で取得できますが、一番上位の階層のみです。 me/skydrive/xxxxx の代わりに、FOLDER_ID を 使ってそのフォルダにアクセス可能です。その下の階層のフォルダ等は、 FOLDER_ID/files で取得します。 例) folder.573059a93afc9e45.573059A93AFC9E45!487/files USER_ID/skydrive/camera_roll represents the SkyDrive camera roll folder. USER_ID/skydrive/my_documents represents the Documents folder. USER_ID/skydrive/my_photos represents the Pictures folder. USER_ID/skydrive/public_documents represents the Public folder.
|
|
【Windows8 Metro(JS/C#)の最新記事】
- Win8(JS Metro)の『分割･･･』テンプレートにアプリバーを追加して、新しいページを定義する
- Win8(JS Metro)の『分割･･･』テンプレートを使って RSS を収集するサンプル
- Win8(JS Metro)の『分割･･･』テンプレートから追加のページを定義する方法
- 『分割アプリケーション』/ Win8(Metro)テンプレートのテンプレートたる意味
- Windows8(JavaScript Metro Style) 関連リンク
- Windows8 Metro(JS) で LiveSDK を使って signin してテキスト表示するだけのサンプルコードの実行
- 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)
