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

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#にてDIYWindows 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 NSEGNSEG 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:最初はアルクマスケジュールのスクレイピングの予定でしたが、文字化けしたデータしか取れなかったので、今回は諦めました