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

物江修

4年前

連載： Web技術でアプリ開発2016 (3)

「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 単体	特殊デバイス向けの開発など、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のプロジェクトテンプレート上はパッケージ型に含まれます。

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

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

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

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

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

UWPのHosted Webアプリからの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ストアを介して行われます。

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

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

Windowsアプリの公開

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

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

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

収益モデル

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

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

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

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

まとめ

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

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

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

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

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

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

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