JavaScriptで書いたWindowsストアアプリをMADOSMAへデプロイする

JavaScript WindowsPhone

NSEG Advent Calendar 2015 - Adventarの16日目の記事です。

www.adventar.org

　
今年、技適を通ったWindows Phoneが次々と発売されまして、今後も発売が予定されています。
日本マイクロソフトがWindows 10スマホ国内投入を正式発表 ～VAIOなど新たに3社が加わり、6社から端末が投入 - PC Watch

　
一方、長野県とWindows Phoneの間では

と、なんとなく関係ある感じなので、記念にNSEG Advent Calendar 2015へWindows Phoneのネタを書いてみます。

　
さて、自分は発売されたWindows Phoneのうち、その先陣を切ったマウスコンピューターのMADOSMA Q501を買って愛用しています。
<窓>とあなたが、もっとつながる。 Windows OS搭載スマートフォン「MADOSMA」 | BTOパソコン・PC通販ショップのマウスコンピューター

そんな中、そろそろC#にてDIYのWindows Phoneアプリを作ろうかと思っていたところ、JavaScript + HTMLの実装例を見かけました。

JavaScriptで書けるWindowsストアアプリの作り方が気になっていたため、今回試してみました。

　

環境

　

2015/12/27 追記

12/24に、MADOSMAのWindows10 Mobileへのアップデートが公開されたため、手元で適用してみました。

その後、設定の更新とセキュリティ > 開発者向けで開発者モードにしてから、VisualStudioからデプロイしてみたところ、動作するのを確認しました。

今回の実装の範囲だと影響はなかったようです。

2015/12/27 追記 ここまで

　

環境準備

VS2015のインストール

公式サイトのダウンロード | Visual Studioより、Visual Studio Community 2015をダウンロード・インストールします。

インストールの際には、忘れずにWindows 8.1およびWindows Phone 8.0/8.1ツールも追加でインストールします。

　

プロジェクトの作成

VS2015を起動し、プロジェクトを作成します。

その際のテンプレートは以下の通りいくつか選べますが、今回は空のアプリケーションテンプレートを使います。
Windows ランタイム アプリ用の JavaScript プロジェクト テンプレート - Windows app development

f:id:thinkAmi:20151216184021p:plain

　
なお、開発者モードに関する旨のダイアログが表示された場合、以下を参考に、PCの設定を開発者モードへと変更します。
デバイスを開発用に有効にする - Windows app development

　

jQueryのインストール

アプリを書く前に、コードを簡略化するために、WindowsストアアプリでサポートされているjQueryをインストールします。
jQuery Version 2.0 での Windows ストア アプリのサポート - Windows 8 アプリ開発者ブログ - Site Home - MSDN Blogs

メニューより、プロジェクト > NuGetパッケージの管理を選択、jqueryを検索・インストールします。

f:id:thinkAmi:20151216185007p:plain

続いて、jQueryを使えるようにHTMLへと追加します。

default.html
<head>
...
    <script src="/js/default.js"></script>

    <!-- jQueryの参照を追加 -->
    <script src="Scripts/jquery-2.1.4.min.js"></script>
</head>

　

Windows Phone の画面出力アプリのインストール

動作のスクリーンショットを撮るために、以下を参考に、Windows10デスクトップへWindows Phone の画面出力アプリをインストールします。
Windows 10 Mobile の画面出力機能とは？ - 高橋 忍のブログ - Site Home - MSDN Blogs

　
以上で環境準備は終わりです。

　

Hello World的なアプリの作成

アプリの作成

以下を参考に、ボタンをタップすると画面のHello NSEGがNSEG Advent Calendar 2015へと切り替わるアプリを作ってみます。

　
表示する画面の内容は、HTMLへと実装します。

default.html
...
<body class="phone">
    <p>Hello NSEG!</p>
    <button id="action">アクション</button>
</body>
...

　
ボタンをタップした時のイベントは、JavaScriptへと実装します。

js\default.js
app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        args.setPromise(WinJS.UI.processAll());

        // ボタンを押したときのイベントを追加
        $("#action").on("click", function () {
            // NSEGの表示
            $("#hello").text("NSEG Advent Calendar 2015");
        });
    }
};

　

デプロイ

まずはUSBでMADOSMAを接続します。特に何もすることなく認識されると思います。

続いて、デバイスが選択されている状態で、デバッグの開始ボタンを押します。
Windows Phone 8 のアプリを配置し、実行する方法

f:id:thinkAmi:20151216205004p:plain

　
なお、MADOSMAのロック解除に関するメッセージが出た場合、以下を参考に、すべてのアプリ > Windows Phone SDK 8.1 > Windows Phone Developer Registrationから、MADOSMAのロック解除を行います。
Windows Phone 8 で電話を開発用に登録する方法

f:id:thinkAmi:20151216205332p:plain

　
ロックが解除された状態でデプロイすると、MADOSMAでアプリが動作します。Hello World的なアプリの場合、こんな感じで表示されました。

タップ前

f:id:thinkAmi:20151216230136p:plain

タップ後

f:id:thinkAmi:20151216230017p:plain

　

CSSを適用

文字の色を変更する内容をCSSへ追加します。

css\default.css
#hello{
    color: blue;
}

　
文字の色が変わりました。

f:id:thinkAmi:20151216213119p:plain

　

デバイスの列挙

JavaScriptでもデバイスの情報が取れるのか確認するため、以下を参考にMADOSMAのカメラ情報を取得してみます。
デバイスの列挙 (HTML) - Windows app development

HTMLでは、カメラ情報を表示する部分を追加します。

<body class="phone">
...
    <div>
        <h1>カメラ情報</h1>
        <p id="camera"></p>
    </div>
</body>

　
JavaScriptでは、カメラデバイスのチェックと列挙を実装します。

// ボタンを押したときのイベントを追加
$("#action").on("click", function () {
...
    // カメラデバイスのチェック
    var dev = Windows.Devices.Enumeration.DeviceClass.videoCapture;
    Windows.Devices.Enumeration.DeviceInformation.findAllAsync(dev).then(
        successCallback,
        errorCallback
    );
});

function successCallback(deviceInformationCollection) {
    var numDevices = deviceInformationCollection.length;
    if (numDevices) {
        var cameraInfo = "";
        for (var i = 0; i < numDevices; i++) {
            var info = deviceInformationCollection[i];
            cameraInfo += info.name + ",";
        }
        $("#camera").text(cameraInfo);
    }
};

function errorCallback(e) {
    console.log("error");
};

　
アプリを実行すると、カメラ情報が列挙されました。

f:id:thinkAmi:20151216215710p:plain

　

WinJS.xhr()の使用

WinJS.xhr()を使って、外部サイトとの通信を行います。
WinJS.Namespace.xhr function - Windows app development

今回は、NSEGのトップページをスクレイピングし、その結果を表示してみます*2。

　
HTMLでは、スクレイピング結果を表示する部分を追加します。

default.html
<body class="phone">
...
    <div>
        <h1>スクレイピング結果</h1>
        <p id="result"></p>
    </div>
</body>

　
JavaScriptでは、WinJS.xhr()を使ったスクレイピングを実装します。

js\default.js
// ボタンを押したときのイベントを追加
$("#action").on("click", function () {
...
    // NSEGのサイトをスクレイピングして表示
    WinJS.xhr({
        url: "http://nseg.jp",
        responseType: "document"
    }).done(function completed(result) {
        $(result.responseXML).find("h1").each(function (i) {
            // デバッグで確認するため、変数に入れておく
            var h1 = $(this).text();
            $("#result").text(h1);
        });
    });
});

　

デバッグ

ここまでデバッガを使ったことがなかったため、JavaScriptで作ったアプリでも使用できるかを確認してみます。

VS2015上にブレークポイントを置いて、スクレイピングした結果が取得できているかデバッグしてみます。

f:id:thinkAmi:20151216220033p:plain

ブレークポイントで止まり、取得できた値が変数h1に入っていることが確認できました。

　
その後、ステップ実行するとMADOSMAの画面にもスクレイピング結果が表示されました。

f:id:thinkAmi:20151216220134p:plain

　
以上より、JavaScriptでもWindows Phone向けのアプリが作成できることが分かりました。

　

参考

Windows Phone開発の大きな流れは、以下が参考になりました。

　
また、JavaScriptによるWindowsストアアプリ開発に関しては、以下を参考にしました。

　

ソースコード

GitHubに上げておきました。
thinkAmi-sandbox/WindowsPhoneJavaScriptSample

*1:現在、MADOSMAはWindows10 mobileでも動作しています。ただ、店舗に持ち込んだりすることができていないため、今回はWindows Phone 8.1のまま進めます。今回の範囲だと、アップデートしてもたぶん影響ないはず...

*2:最初はアルクマスケジュールのスクレイピングの予定でしたが、文字化けしたデータしか取れなかったので、今回は諦めました