「Web技術でアプリ開発2016」ということで、この記事ではPCからIoT機器まで、Windows 10プラットフォームであればデバイスを問わず動作する ユニバーサルWindowsプラットフォーム (以下、UWPと記述) 上で動作するアプリについて紹介します。

このアプリはもちろんHTML、CSS + JavaScriptといったWeb開発者が慣れ親しんだ技術で開発することができます。また、インターネットでホストされているWebページをラップしてアプリ化することができます。

UWPをターゲットとしたアプリ開発では、新規開発はもちろん、既存のWeb資産を利用してアプリを開発し、さまざまな Windows 10デバイスに横断的に機能を提供することができます。

この記事では、UWPがどのようものであるか、UWP上で動作するアプリの開発方法と公開方法について紹介します。

ユニバーサルWindowsプラットフォーム (UWP)アプリ とは

Windows 10では、PC、モバイル、XBOX、Surface Hub、HoloLens、IoT 機器といったデバイスファミリーで共通のカーネルを採用しており、これによりアプリケーションのプラットフォームが統合されました。

このWindows 10デバイスファミリーで統合されたプラットフォームをユニバーサルWindowsプラットフォーム (Universal Windows Platform : UWP)と呼びます。

UWP用のアプリは、OSのバージョンではなくデバイスファミリーを対象としますが、UWPのコアAPIはすべてのWindowsデバイス ファミリーに共通であり、アプリにコアAPIのみを使う場合は、そのアプリはいずれのWindows 10デバイスでも動作します。

つまり、固有のデバイスに縛られることなく、目的のデバイスファミリーをターゲットして再コンパイルすることでPCから IOT基板まで、さまざまな機器に配置し、動作させることができるのです。

Webの開発者からみればハードルが高そうなIoT機器用のアプリもHTML、CSS + JavaScriptで開発することができます。

たとえば、以下の記事では、Raspberry Piとディスプレイをマジックミラーの裏に配置し、洗面台の鏡の中に情報を表示するアプリを紹介していますが、この上表を表示するアプリはHTML、CSS + JavaScriptを使用したUWPアプリです。

• Building an IoT Magic Mirror with Hosted Web Apps and Windows 10

また逆に、拡張機能SDKにより特殊なデバイス用のアプリも開発することもできます。

UWPアプリのメリット

UWPアプリのメリットは、前述したようにデバイスファミリーを横断したアプリの開発が容易であるということもありますが、それ以外でも、複数の言語で開発することができることや、UWPが公開する豊富なAPIを直接使用できるということがあるでしょう。

UWPアプリのロジック部分はC#、Visual Basic、C、C++、JavaScriptといった開発言語で記述することができ、UI部分は XAML (C#、VB、C、C++)、DirectX (C、C++)と、HTML/CSS (JavaScript)で記述することができます。

UWPのリソースにアクセスするためのWindowsランタイム(WinRT) APIには、各言語ともWindows名前空間を空間を介して接続することができます。

WinRT APIは Windows 10の予定表や連絡先、タイルといったOSが持つソフト的なリソースからBluetoothやWi-Fi、USBといったハード的リソースへのアクセスなど、幅広く機能を提供します。そしてこれらのAPIはUWPでサポートされている言語であれば、言語を問わず利用することができます。

Windowsランタイムがアプリ向けに公開しているAPIのついての詳細は以下のドキュメントをご参照ください。

• Windows ランタイム アプリのWindows APIリファレンス

開発環境

UWPアプリの開発はWindows 10とVisual Studio 2015もしくは、Apache Cordovaを使用して行うことができます。

Visual Studio 2015とApache Cordovaの使い分け

Visual Studio 2015では、それ単体によるUWPアプリの開発はもちろん、Visual Studio Tools for Apache Cordova を使用してiOS、Android、UWPアプリの開発が行えます。

つまり、Visual Studio 2015ではそれ単体とApache Cordovaのどちらかを使用してUWPアプリを開発することができますが、これは単に機能が重複しているということではなく、以下のように状況や目的に合わせて使い分けるためにあります。

なお、Visual Studio 2015は有償製品ですが、非営利目的やオープンソースソフトウェアの開発であれば、無償の Visual Studio Community　を使用することができます。

Visual Studio Communityは、機能的にはVisual Studio Professionalと同等であり、クロスプラットフォーム開発をサポートしています。

開発できるアプリの形式

HTML、CSS + JavaScriptで開発できるUWPアプリの形式は、大まかにUI部分をクライアントサイドにインストールするパッケージ型と、ネットワークにホストされているコンテンツをラップしたホスト型の2つのタイプに大別されます。

一部をWebViewコントロールで覆ったものもVisual Studioのプロジェクトテンプレート上はパッケージ型に含まれます。

パッケージ型、ホスト型アプリにはそれぞれ特徴とメリットがあります。

パッケージ型アプリは、動作に必要なリソースをクライアントサイドにインストールできるので、アプリの作りによっては、動作にサーバーサイドのリソースを必要としない完全にオフラインのアプリを作ることも可能です。

ホスト型のアプリの場合は、ネットワーク上に公開されているコンテンツを表示しているので、画面や機能を変更する際でも再インストールの必要はなく、常に最新の情報を提供することができます。また、Webサイト向けのコンテンツの開発と作業が一元化できます。
ホスト型のアプリはその性質上オンラインでの使用が大前提となりますが Progressive Web Apps の実装が可能になればこういった制限も大幅に緩和され、パッケージ型よりもホスト型が選択されるケースが増えることでしょう。

パッケージ型のアプリはもちろん、ホスト型のアプリも、適切なセキュリティ設定を行うことにより、Windowsランタイム API にアクセスできます。

たとえば、以下の記事では、Webサイトに公開されているページに記述されているJavaScirptからNFCデバイスにアクセスする方法について紹介しています。

• UWPのHosted WebアプリからのNFCデバイスへのアクセス

開発方法

Visual Studio 2015に用意されたプロジェクトテンプレートを使用してプロジェクトを作成し、コーディングしていきます。

HTML、CSS + JavaScriptで開発するUWPアプリに用意されているプロジェクトテンプレートの種類は以下のとおりです。(2016年9月現在)

開発を開始するための具体的な手順について、以下のチュートリアルを参照してください。

• JavaScript とHTMLのチュートリアル
• C#とXAMLのチュートリアル
• C++とXAMLのチュートリアル

配布方法

UWPアプリの公開は、一般的にはWindowsストアを介して行われます。

Windowsストアにアプリを公開するには、Windowsデベロッパーセンターのダッシュボードから、appx形式にパッケージングしたアプリを提出します。Windowsストア側で安全性を含め様々な審査が実施され、合格すると公開されます。

UWPアプリをWindowsストアに公開するまでの、開発者アカウントの作成からパッケージの提出、支払いの受け取り (販売した場合) までの具体的な方法については以下のドキュメントを参照してください。

• Windowsアプリの公開

会社組織のみの利用を想定した場合など、Windowsストアで公開を希望しない場合にはサイドローディングという方法を使用して、管理化にあるデバイスにUWPアプリを直接インストールすることができます。

サイドローディングの具体的な方法については以下のドキュメントを参照してください。

• DISM を使ったアプリのサイドローディング

収益モデル

Windowsストアでは提出したアプリを販売することができます。また、アプリ内の課金も可能です。開発者Windowsストアが用意するさまざまな仕組を利用して収益を上げることができます。

現在Windowsストアで収益を上げるには、以下の3つの方法があります。

1. アプリそのものの販売
2. アプリ内課金(In-App purchase : IAP)
3. アプリ内広告

これら収益に関する詳しい内容は、以下のドキュメントを参照してください。

• アプリの価格と使用可能状況の設定
• IAPの申請
• 広告による収益獲得

まとめ

この記事ではWindows 10から採用されたユニバーサルWindowsプラットフォーム用のアプリ(UWPアプリ) について紹介しました。

UWPアプリは Window 10デバイスファミリーに対し横断的にアプリを開発できます。そのためPC、スマートフォンはもちろん、Web開発者からは技術的に遠いIoTデバイス向けのアプリも使い慣れた HTML,CSS + JavaScriptで開発することができます。

Continuumにも対応しているため、対応スマートフォンをテレビやディスプレイに接続した際にユーザーにデスクトップエクスペリエンスを提供することもできます。

Webブラウザー上で動作するアプリはもちろん、他のハイブリット アプリ用フレームワーク向けのコンテンツでも、HTML、CSS + JavaScriptを使用して作られているのであれば、特別なことをしていない限りはUWPアプリへの移植はそれほど難しくはありません。

新規での開発はもちろん、既存のアプリの新たな市場獲得のための移植先としても検討してもいいかもしれません。

UWP開発についてのより詳しい情報は以下をぜひご覧ください。

• ユニバーサル Windowsプラットフォーム(UWP)向けアプリの開発
• ユニバーサル Windowsアプリの開発 – Windowsアプリの開発
• ユニバーサルWindows プラットフォームアプリ(UWP)のデザイン – Windowsアプリ開発

Visual Studioの開発機能は、これまでWindowsプラットフォーム向けのものでしたが、Visial Studio 2013 Update 2からは、Multi-Device Hybrid Appsというアドインをインストールすることにより Apache CORDOVA を使用したAndroid、iOS用アプリを開発することができます。

今回はVisual Studio 2013 Update 2用のアドイン Multi-Device Hybrid Appsについて紹介します。

(Multi-Device Hybrid Appsの構成)

Multi-Device Hybrid Appsとは

Multi-Device Hybrid AppsはProfessional以上のエディションのVisual Studio 2013でApache CORDOVAを使用してAndroid、iOSアプリの開発を可能とするためのアドインです。

Visual Studio 2013の提供する強力なコード補完機能、デバッグ機能を使用して、Android、iOS (およびWindows 8とWindows Phone 8.0) のアプリを開発することができます。

Multi-Device Hybrid Appsが提供する機能は以下の図のとおりです。

(Multi-Device Hybrid Appsが提供する機能)
※Windows 8、Windows Phone 8.1については割愛

開発のターゲットとなるプラットフォーム

• Android 4+ (4.4 にもっとも最適な開発エクスペリエンスが提供されます)
• iOS 6 & 7
• Windows 8.0 (ストアアプリ)
• Windows Phone 8.0

ビルド

• Android : 〇
• iOS : ×
• Windows 8 : 〇
• Windows Phone 8.0 : 〇

[Mac OS用アプリのビルドについて]
現状、iOS用アプリはWindows上でビルドすることはできません。Multi-Device Hybrid Appsで開発したソースをビルドしてApp Storeに公開するには、Mac OS X Mavericks上のXcode 5.1でコンパイルするか、Mac OS上にインストールしたリモートビルド用のエージェントを使用してビルドを行う必要があります。iOSアプリのリモートビルドの詳細な方法については、以下のドキュメントを参照してください。

Documentation Multi-Device Hybrid Apps for Visual Studio
http://go.microsoft.com/fwlink/?LinkID=397716

デバッグ

Cordovaアプリの開発にVisual Studioがもたらす利点のひとつは、アプリの種類およびデバイス、 プラットフォーム全体を横断するシームレスかつ共通化されたツール類です。しかしながら現リリース (CTP1.1) の Multi-Device Hybrid Appsでは、すべてのデバイス、プラットフォームで同じVisual Studioデバッガ機能を利用することができません。

現在のデバッガのサポート状況は以下の通りです。

Visual Studio デバッガサポート

• Android 4.4 : 〇
• Android < 4.4 : ×
• iOS 6 & 7 : ×
• Windows 8 (ストア アプリ) : 〇
• Windows Phone 8.0 : ×

(※)Visual Studio デバッガーはRippleやAndroid 4.4 エミュレーターまたはデバイスでの最初のページの読み込み前に発生するブレークポイントでは停止されません。ただし、ブラウザー  (Ripple)を更新またはJavaScriptコンソールから “window.location.reload()” を実行したあとではこれらのブレークポイントにヒットします。

アウトプット ウインドウでのJS コンソール メッセージ

• Android 4.4 : 〇
• Android < 4.4 : 〇
• iOS 6 & 7 : ×
• Windows 8 (ストア アプリ) : 〇
• Windows Phone 8.0 : ×

エミュレーター

Multi-Device Hybrid Appsには、エミュレーターとしてApache Rippleがインストールされます。Apache Ripple エミュレーターはChromeのようなWebKitブラウザー内部の Webアプリケーションとして実行されます。CORDOVA環境では、複数のデバイスとプラットフォームをシミュレートし、位置情報やデバイスの向きのような、CORDOVAプラグイン コアの基本的な機能をサポートします。

Apache Rippleは、AndroidとiOS上で動作するアプリのオーサリングと検証の第一歩を簡単かつ迅速に提供しますが、Rippleは、iOS シミュレータのように、そのエミュレーションにおいて決して完全ではありません。「Web View (WebKit)での動作検証 + 基本的なCORDOVAコアAPIのテスト」くらいにとらえておくがよいでしょう。よって、完全な検証は実機で、少なくともネイティブのエミュレーターで行うことをお勧めします。

Multi-Device Hybrid Appsのインストール

Multi-Device Hybrid Appsを使用するメリットのもうひとつに、Cordova開発環境構築にかかる工数が圧倒的に少なくてすむということがあげられます。

VisualStudio 2013 Update2 + Multi-Device Hybrid Appsを使用しない、従来の方法で Windows OSにCordoveの開発環境を構築するには、大まかに以下のステップが必要となります。

1. Node.jsのインストール
2. Node.jsのnpmコマンドを使用したApache Cordoveのインストール
3. Apache Antのインストール
4. Java(JDK)のインストール
5. Android SDKのダウンロードと展開
6. Android SDK のパスを通すための作業
7. Androud SDKにあるSDK Managerを使用して必要なツールと拡張をインストールする
8. ひな形となるCordoveプロジェクトの作成
9. Cordoveプロジェクトから、目的のプラットフォーム用のプロジェクトを作成

この手順は、インストールはもちろん、プロジェクトの作成まで、すべてコマンドラインで行う必要があります。

こう書くと、手順が多く操作も煩雑で、なんだかとても大変そうですが、実際のところとても大変です。Multi-Device Hybrid Appsを使用する場合は、Windows  8.1に  Visual Studio 2013 Update 2がインストールされた環境で、Multi-Device Hybrid Appsのセットアップウィザードを実行するだけです。

また、Cordove開発環境が使用している各モジュールに更新が行われた場合には、VisualStudioが通知してくれるので、安心して使い続けることができます。

インストールの前提条件

Multi-Device Hybrid Appsアドインをインストールする前に、以下のソフトウェアと各オプションをインストールし、正常に動作するようにしておく必要があります。

• Windows 8.1
• Visual Studio 2013のProfessional,、Ultimateもしくは、Premiumエディション
     以下の機能がインストールされている必要があります。
  • Tools for Maintaining Store apps for Windows 8
  • Windows Phone 8.0 SDK (Windows Phone 8.0 アプリを開発するのであれば)
• Visual Studio 2013 Update 2

Multi-Device Hybrid Appsのインストール手順

Muiti-Device Hybrid Appsアドインのインストールは。インストールをイメージを入手して実行し、セットアップウィザードのボタンをクリックしていくだけです。

具体的な手順は以下のとおりです。

1. Multi-Device Hybrid Apps (Preview) の配布ページで「Download」リンクをクリックします。
   
   

   Multi-Device Hybrid Apps (Preview)
   http://msdn.microsoft.com/ja-jp/vstudio/dn722381

2. Download Center に遷移するので、ページ内の [Download] ボタンをクリックします。
    
3. 「Choose the download you want」のパネルが表示されるので、vs2013mda_0.1.1.exe と Documentation for Multi-Device Hybrid Apps for Visual Studio CTP1.1.pdf  にチェックをつけ [Next] ボタンをクリックします。
    

   

   exeファイルは Multi-Device Hybrid Appsのインストールイメージ、pdf は Multi-Device Hybrid Appsの詳細なドキュメント(英語)です。このドキュメントは、Multi-Device Hybrid Appsについての非常に詳細な情報が書かれているので一読されるのをおすすめします。
    
4. exe ファイルとpdfファイルは別々にダウンロードされるので、「download.microsoft.comからvs2013mda.exeを実行または保存しますか?」ダイアログで [実行] ボタンをクリックしします。
    

   

5. インストールウィザードが起動してくるので、[Select All] にチェックが付いた状態で [INSTALL] ボタンをクリックし、インストールを行ってください。
    

   

   あとはウィザードの内容に従って作業を進めてください。
   なお、インストール作業は、必ずコンピューターをネットワークに接続した状態でインストールを行ってください。 
        
   

Muiti-Device Hybrid Appsがインストールするもの

Muiti-Device Hybrid Appsアドインのセットアップウィザードは、以下のサードパーティー製のものも同時にインストールします。

• Joyent Node.js — Apache CordovaのコマンドラインインターフェースとApache RipperエミュレーターをVisual Studioに統合します。
• Git CLI — プラグイン用にgitのURLを手動で追加する場合にのみ必要です。
• Google Chrome — Apache Ripperエミュレーターを動作させるのに必要です。
• Apache Ant 1.8.0+ — Android ビルドプロセスの依存関係として必要です。
• Oracle Java JDK 7 — 〃
• Android SDK — 〃
• SQLite for Windows Runtime — SQL接続をWindowsアプリに追加するのに必要です。(WebSQLのポリフィルプラグイン)
• Apple iTunes — Windows PCに接続されたiOSデバイスにアプリを展開するのに必要

アンインストールする際、Muiti-Device Hybrid Appsのインストーラーは、これれらのすべてを削除してはくれませんので、残ったものに関しては、それぞれ個別にアンインストールする必要がありますので、ご注意ください。

Muiti-Device Hybrid Appsを使った Android、iOSアプリの開発

Visual Studio 2013 で Cordoveを使用した開発を行うMuiti-Device Hybrid Appsプロジェクトを作成するには以下の手順を実行します。

1. Visual Studio 2013のメニュー [ファイル] – [新規作成] – [プロジェクト] を選択します。
2. [新しいプロジェクト] ダイアログボックスが表示されるので、同ダイアログボックス左のテンプレートツリーより[テンプレート] – [JavaScript] – [Muiti-Device Hybrid Apps ] を選択します。
    

   
   (作成するプロジェクトを選択するダイアログボックス)

3. 同ダイアログ中央のリストより、「Blank App(Apache Cordova)」を選択します。
    

   
   (Apache Cordova用プロジェクト)

4. ダイアログボックス下部の [参照] ボタンをクリックし、プロジェクトを保存する場所のパスをスペースや日本語を含まないものに変更し、[OK] ボタンをクリックします。
5. Visual Studio 2013 の IDEにプロジェクトがロードされるので、ウィンドウ右の [ソリューションエクスプローラー] からindex.htmlをダブルクリックします。
    

   
   (ソリューションエクスプローラーでの index.html の選択)

6. IDE のエディタにindex.htmlの内容が展開されるので、</body>の上に一行あけます。
   「h1」とタイプし、[Tab] キーを押下するとdivタグが挿入されるので、同タグ内に 「Hello World」と記述します。
   

   

7. ツールバーの実行ボタン横のリストから「Ripple – Nexus (Galaxy)」が選択されていることを確認し、クリックします。
    

   
   (実行ボタンのデバイスリスト)

8. Google Chromeが起動し、ウィンドウ内のRippleエミュレーターに実行結果が表示されます。
    

   
   (アプリの実行結果)

9. 実行を終了するにはVisual Studio 2013のツールバー上の [デバッグの停止] ボタンをクリックします。

   
   ([デバッグの停止]ボタン)

対象プラットフォームの切り替え

Muiti-Device Hybrid Apps プロジェクトの既定の対象プラットフォームは Android OS となっています。

ここでは、対象のプラットフォームをiOSに変更する手順を例に紹介します。

1. Visual Studio 2013 のメニュー [ビルド] – [構成マネージャー] をクリックします。
2. [構成マネージャー]  ダイアログボックスが表示されるので、[アクティブ ソリューション プラットフォーム]ドロップダウンリストから「iOS」を選択し、[閉じる] ボタンをクリックします。
    

   
   (開発対象プラットフォームの一覧)

3. 設定が完了するとツールバーの実行ボタン横のリストにiOSデバイスが表示されるので、任意のデバイスをクリックして実行します。

   
   (テスト可能なiOSデバイス一覧)

Google Chrome が起動し、ウィンドウ内の Rippleシミュレーターに実行結果が表示されます。
なお、Rippleエミュレーターは、Mac OS上で動作する iOSシミュレーターほど正確ではありませんので、アプリを提出する前には必ずMac OS上のiOSエミュレーターか、できれば実機でテストすることをお勧めします。
Visual Studio 2013から、Mac OS上の iOSシミュレーターにアプリを転送してリモート実行する方法については、以下のドキュメントの Remote Build & Simulation Agent for iOS [Optional]をご覧ください。


Document for Multi-Device Hybrid Apps for Visual Studio
http://go.microsoft.com/fwlink/?LinkID=39771

まとめ

Multi-Device Hybrid Appsアドインをインストールすると、Visual Studio 2013でCordovaを使用したAndroid、iOS、Windows 8、Windows Pnone 8.0のアプリを開発できるようになります。

Visual Studio 2013のエディションはProfessionalである必要がありますが、試してみたい、という方は90日間有効の試用版を使用してみるとよいでしょう。また、Macユーザーだけど Visual Studio 2013を使ってみたい、という方にはWindows 8.1 の試用版とあわせ、以下のドキュメントをご参照ください。

Mac に Windows 8と開発者ツールをインストールする

http://msdn.microsoft.com/ja-jp/library/windows/apps/jj680133

<備考>

今回の記事は以下をHTML5 Experts用に再編集したものです。

Visual Studio 2013でAndroid、iOSのアプリを開発するためのアドイン

Visual Studio 2013 へのMulti-Device Hybrid Appsアドインのインストール

Muiti-Device Hybrid Apps を使ったAndroid、iOSアプリの開発

現在最新のVisual Studio 2013のHTML5関連の開発機能全般に興味をお持ちの方は以下の記事をご参照ください。

Visual Studio 2013 Update 2でのHTML5関連の強化点