前提

プロジェクトの新規作成で「ナビゲーションアプリケーション」を選択

ボタンをクリックして～を実現したい場合

home.html

<body>
    <!-- 読み込まれて表示されるコンテンツです。 -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">カウンター</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p id="message">ぼたんを押そう！</p>
            <button id="count">ポチっとな</button>
        </section>
    </div>
</body>

home.js

        ready: function (element, options) {
            // TODO: ここでページを初期化します。
            var countBtn = document.getElementById("count");
            countBtn.addEventListener("click", this.countBtnClick, false);

            var appData = Windows.Storage.ApplicationData.current;
            var roamingSettings = appData.roamingSettings;

            if (roamingSettings.values["count"]) {
                count = roamingSettings.values["count"];
            }
        },
        countBtnClick: function (eventInfo) {
            count++;
            document.getElementById("message").innerText = "合計" + count + "回クリックしたよ！";
            var appData = Windows.Storage.ApplicationData.current;
            var roamingSettings = appData.roamingSettings;
            roamingSettings.values["count"] = count;
        }

データの保存

"ApplicationData.RoamingSettings"と"ApplicationData.LocalSettings"の二通りあるっぽい。で、違いは

The main difference is that RoamingSettings will be saved to the cloud and thus, can be transferred across different devices for the same user profile. LocalSettings is device-specific.

とのこと。

var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
var localSettings = Windows.Storage.ApplicationData.current.localSettings;

document.getElementById→addEventListenerは簡略化可能

ready: function (element, options) {
}

の中でしか有効ではないが通常

var addBtn = document.getElementById("addBtn");
addBtn.addEventListener("click", this.addBtnClick, false);

って書くコードを

element.querySelector("#addBtn").addEventListener("click", this.addBtnClick);

ってできるよ

ダイアログ

最も簡単な一行

Windows.UI.Popups.MessageDialog("本文", "タイトル").showAsync();

Yes/Noの質問型にしたい場合

var dlog = new Windows.UI.Popups.MessageDialog("本文", "タイトル");
dlog.commands.append(new Windows.UI.Popups.UICommand("ほげ", afterDlog));
dlog.commands.append(new Windows.UI.Popups.UICommand("ぴよ", afterDlog));
//dlog.defaultCommandIndex = 1;
dlog.showAsync();
function afterDlog(command) {
    console.log(command.label);
}

トースト通知

あらかじめソリューションエクスプローラー→package.appxmanifest→アプリケーションタブ→通知：トースト対応を「はい」にしておかないと通知されないので注意

var message = "トーストの表示\n2行目\n3行目";
var toastXml = ToastNotificationManager.getTemplateContent(ToastTemplateType.ToastText02);
var textNodes = toastXml.getElementsByTagName("text");
textNodes[0].appendChild(toastXml.createTextNode(message));
ToastNotificationManager.createToastNotifier().show(new ToastNotification(toastXml));

画像埋め込み型はまだ

ページ遷移

リンクを貼る側.js

ready: function (element, options) {
    WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);
},
linkClickEventHandler: function (event) {
    event.preventDefault();
    WinJS.Navigation.navigate(event.target.href);
}

リンク先のページに何らかのデータを受け渡したい場合

document.getElementById("hoge").addEventListener("click", function () {
    WinJS.Navigation.navigate("/pages/page1/page1.html", { "value1": "ほげほげ" });
});

リンク先.jsでready function内で「options.value1」でほげほげが使える

ログインするときに使うダイアログ

かっこいいけど使い道ない

var credentialPickerResults;
（略）
    function displayCredentialPicker() {
        var credentialPickerOptions = new Windows.Security.Credentials.UI.CredentialPickerOptions();
        credentialPickerOptions.targetName = "My App";
        credentialPickerOptions.caption = "My App";
        credentialPickerOptions.message = "Sign in to My App";
        credentialPickerOptions.authenticationProtocol = Windows.Security.Credentials.UI.AuthenticationProtocol.basic;
        credentialPickerOptions.alwaysDisplayDialog = true;
        var credentialPicker = Windows.Security.Credentials.UI.CredentialPicker;
        credentialPicker.pickAsync(credentialPickerOptions).done(
            function complete(result) {
                console.log("pickAsync complete: username = " + result.credentialUserName + ", password = " + result.credentialPassword + " errorCode = " + result.errorCode);
                credentialPickerResults = result;
            },
            function error(e) {
                console.log("pickAsync error: " + e.message);
            }
        );
    }

フライアウト

HTML

<button type="button" id="showFlyoutBtn">ふらいあうと</button>
<div id="sampleFlyout" data-win-control="WinJS.UI.Flyout">
    <input type="text" id="flyoutTxt">
    <button id="flyoutBtn">OK</button>
</div>

ready: function (element, options) {
    // TODO: ここでページを初期化します。
    document.getElementById("showFlyoutBtn").addEventListener("click", showFlyout, false);
}

function showFlyout(event) {
    var flyoutBtn = document.getElementById("flyoutBtn");
    //'top' (既定)、'bottom'、'left'、'right'、または 'auto' 
    document.getElementById("sampleFlyout").winControl.show(flyoutBtn, "auto");
    flyoutBtn.addEventListener("click", hideFlyout, false);
}
function hideFlyout(event) {
    var message = document.getElementById("flyoutTxt").value;
    document.getElementById("sampleFlyout").winControl.hide();
    console.log(message);
}

クイックスタート: ポップアップの追加(JavaScript と HTML を使った Windows ストアアプリ) (Windows)

アプリからURLを開く

window.openは使えないので

document.getElementById("launchUriButton").addEventListener("click", launchUri, false);

var uri = new Windows.Foundation.Uri("http://google.com");

Windows.System.Launcher.launchUriAsync(uri).done(
    function (success) {
        if (success) {
            console.log("s");
        } else {
            console.log("f");
        }
    });

開きたいだけなら

Windows.System.Launcher.launchUriAsync(Windows.Foundation.Uri("http://google.com"));

でも可 URI に応じて既定のアプリを起動する方法 (JavaScript と HTML を使った Windows ストアアプリ) (Windows)

ファイルによるデータの保存（書き込みと読み込み）

var filename = "a.txt";
var localFolder = Windows.Storage.ApplicationData.current.localFolder;
var str = new Date().getMinutes() + " " + new Date().getSeconds();
//書き込み
localFolder.createFileAsync(filename, Windows.Storage.CreationCollisionOption.replaceExisting)
    .then(function (file) {
        return Windows.Storage.FileIO.writeTextAsync(file, str);
    }).done(function () {
        //終了後の処理
    });
//読み込み
localFolder.getFileAsync(filename)
    .then(function (file) {
        return Windows.Storage.FileIO.readTextAsync(file);
    }).done(function (text) {
        //Success
        console.log(text);
    }, function () {
        //Error
    });
//削除
localFolder.getFileAsync(filename)
    .then(function (file) {
        return file.deleteAsync();
    }).done(function () {
        //Success
    }, function (err) {
        //Error
    });

外部からのダウンロード

WinJS.xhr({ url: "http://yahoo.co.jp" })
.done(function complete(result) {
    // Report download.
    console.log(result.response);
},
function error(result) {
    console.log("Error");
},
function progress(result) {
    //console.log(result.readyState);
});

画像の場合

WinJS.xhr({ url: "http://www.google.com/images/logo.gif", responseType: "blob" })
.done(function complete(result) {

    var imageBlob = URL.createObjectURL(result.response);
    document.getElementById("testImg").src = imageBlob;

},
function error(result) {
    console.log("Error");
},
function progress(result) {
    //console.log(result.readyState);
});

クイックスタート: WinJS.xhr によるファイルのダウンロード (JavaScript と HTML を使った Windows ストアアプリ) (Windows)

WinJS.Namespaceによる名前空間を作成

var SamapleNamespace = {
    setNum: function (num) {
        this.num = num;
    },
    getNum: function(num){
        return this.num;
    }
};

WinJS.Namespace.define("Samaple", {
    SamapleNamespace: SamapleNamespace,
});

Samaple.SamapleNamespace.setNum(10);
console.log(Samaple.SamapleNamespace.getNum());

WinJS.Namespace を使ったコードの整理 (JavaScript と HTML を使った Windows ストアアプリ) (Windows)

動かざることバグの如し

近づきたいよ君の理想に

めも

前提