物江 修

PCからIoTまで! Web技術を使ったユニバーサルWindowsプラットフォーム (UWP) アプリの開発

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

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

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

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

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

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

image


この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アプリです。

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

UWPアプリのメリット

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

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

image


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

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

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 単体特殊デバイス向けの開発など、UWP固有の機能を使用した実装を行う場合
Apache Cordova共通のソースで、UWP以外のiOSやAndroidにもアプリを提供する場合

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

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

開発できるアプリの形式

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

アプリの型式状態
パッケージ型UI部分をクライアントサイドにインストールするもの
一部 WebViewコントロールで覆ったものもプロジェクトテンプレート上はこれにあたる
ホスト型ネットワークにホストされている
Webコンテンツをラップしたもの

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

image

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

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

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

image


 

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

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

開発方法

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

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

プロジェクトテンプレートの種類説明
空白のアプリ事前定義されたコントロールやレイアウトのないユニバーサルWindowsアプリのためのプロジェクト。コンテンツセキュリティポリシー(CSP)を適用します。すべてのユニバーサルWindows APIに直接アクセスします。
WinJSアプリWinJS を使用しているユニバーサルWindowsアプリのプロジェクトです。すべてのユニバーサルWindows APIに直接アクセスできます。
ホストされるWebアプリリモートの開始ページを含むユニバーサルWindowsアプリのプロジェクトです。すべてのユニバーサル Windows APIにアクセスするには、URLをアプリケーション コンテンツURI規則に追加する必要があります。
空のアプリ-WebコンテキストローカルコンテンツをWebからのものとして処理します。既定のアプリケーションコンテンツポリシー(CSP)はありません。ユニバーサルWindows APIにアクセスするには、URIがアプリケーション コンテンツURI規則で宣言されている必要があります。

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

配布方法

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

image


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

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

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

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

収益モデル

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

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

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

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

まとめ

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

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

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

image

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

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

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

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js Polymer Progressive Web Apps React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket WebVR