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


de:code 2016、1 日めのセッション DEV-008「Developing on the Edge. ~Web プラットフォームと Cordova~」 にお越しくださいました皆さま、ありがとうございました。

このセッションでは、Windows 10 Anniversary Update で Edge に新たに追加される機能と UWP (Universal Windows Platform) と Cordova で Hosted アプリを作る方法について紹介しました。

その中から実際にデモでご覧いただいた、Web サイトでホストされているページを UWP の Hosted アプリとして NFC を認識させる方法について紹介したいと思います。

UWP Hosted Web アプリからのデバイスアクセスについて

UWP の Hosted Web アプリは、単に Web サイトでホストされているアプリとシングルコードベースで開発できるというだけでなく、物理的に同一のリソース (HTML、JS、CSS,各メディアファイルなど) を共用して開発を行います。

もちろん、アプリ側ではそのアドバンテージを活かして、プラットフォーム固有のリソースである連絡先や予定表へアクセスしたり、Cortana との連携なども可能です。

Web サイトにホストされているページを UWP でラップし、適切にアクセス権を設定することで、Web サイトのページ内にある JavaScript からでも Windows ランタイムの API を介してクライアントデバイス内のハードウェアリソースにアクセスできます。

セッションのデモで紹介したページ

セッション中の UWP の Hosted Web アプリで紹介したページのソースは以下になります。

ページのロードが完了したタイミングで(実際はもっと早いタイミングでも大丈夫ですが)、そのページが Web ブラウザー上で動作しているか、UWP 上で動作しているかを変数 Windows が未定義かどうかで判断しています。

これは、UWP の場合は、Windows ランタイムを使用するための Windows という名前空間が存在するからです。

//Windows Runtime が検出されたら
if (typeof Windows !=='undefined')

同様に Cordova から使用された場合には Cordova という名前空間が存在するので、この二つの名前空間の有無を判断することで、Web でも UWP でも Cordova でも共用可能でかつ、それぞれの特色を活かしたコードを記述することができます。

このコードでは、その後 proximityDevice  のインスタンスが生成できるかどうかで NFC リーダーの有無を判断し、NFC リーダーがあれば画面の色を blue とし、なければ red に設定します。

さらにカードを検知したら画面の色を lime、離れた場合には yellow に設定しています。

ただし、これらのコードは Web ブラウザー上では動作しないので、Web ブラウザーで表示した場合は画面の色は Web ブラウザー既定の色 (白)です。

Visual Studio 2015 を使用した UWP Hosted Web アプリの作成

Visual Studio 2015 を使用して、前出のページを UWP の Hosted Web アプリを作成する手順を以下に示します。

なお、前出のページはすでにインターネットにホストされているものとします。

【手順】

  1. Visual Studio 2015 のメニュー[ファイル] から [新規作成] – [プロジェクト] を選択します。
     
  2. [新しいプロジェクト] ダイアログボックスが表示されるので、左側のツリービューから [テンプレート] – [JavaScript] – [Windows] – [ユニバーサル] を選択し、中央のテンプレートの一覧から [空白のアプリ(Universal Windows)] を選択して [OK] ボタンをクリックします。
     
    image
     
    これでプロジェクトが生成されます。
     
  3. 画面右側にある [ソリューションエクスプローラー] で Hosted Web アプリで使用しないリソース、フォルダ css と js と、ファイル index.html を削除します。
     
    image


     

  4. 画面右側にある [ソリューションエクスプローラー] で package.appmanifest をダブルクリックして、画面中央に設定画面を表示します。
  5. 設定画面の [アプリケーション] タブの [スタートページ] に前出の Web サイトの URL を記述します。
    この URL にあるページが、アプリが起動した際に最初に表示されるページになります。
     
    image


     

  6. Windows ランタイムへのアクセス権を設定します。
    [コンテンツ URI] タブをアクティブにし、[URI] に Web サイトの URL を設定し、[WinRT アクセス] ドロップダウンリストボックスから [すべて] を選択します。
     
    image


     

  7. アプリの NFC 利用を許可するための宣言を行います。
    [機能] タブをアクティブにし、[機能] リストで 「近接通信」 にチエックをつけます。
     
    image


     
    これで Hosted Web アプリの準備は完了です。

Hosted Web アプリが正しく起動できるかどうか、キーボードの [F5] キーを押下してデバッグ実行します。
NFC リーダーが接続されていない Windows 10 上で実行した場合は以下のような画面が表示されるはずです。

image


 

NFC  リーダーが搭載、あるいは正しく接続されている PC で実行した場合は、青い画面に「NFC が使用できます」と表示されます。

 

NFC リーダーをもっていない場合でも、Windows Phone を持っており、その機種が NFC リーダーを搭載している Windows 10 Mobile であった場合は同アプリを Windows Phone に転送して試してみることができます。

 

Windows Phone に転送して実行するには

Windows 10 Mobile が実行されている Windows Phone にアプリを転送してデバッグ実行するには、Windows Phone 側でいくつかの準備が必要です。

開発者モードの有効化

Windows 10 Mobile の「開発者モード」を有効にしておく必要があります。

「開発者モード」を有効にするには、Windows 10 Mobile の [設定]メニューから [更新とセキュリティ] – [開発者向け] と順タップと、[開発者モード] ラジオボタンにチェックをつけます。

USB 接続

Windows Phone と Visual Studio 2015 が実行されている PC を USB ケーブルで接続します。

PC からきちんと認識されているかエクスプローラーなどから確認してください。

image

デバッグ実行先の指定

Visual Studio 2015 のツールバーで [ローカルコンピューター] と書かれているボタン右の下向き三角(▼) をクリックし、表示されるドロップダウンリストより 「デバイス」 を選択します。


 

image


 

[ローカルコンピューター] の表示が [デバイス] に変更されたら、Windows Phone の画面ロックを解除し、[デバイス] ボタン、あるいはキーボードの [F5] キーを押下してデバッグ実行を開始してください。

NFC が搭載されている場合、以下のような画面が表示されます。

wp_ss_20160602_0001


 

Suica などを近づけると、カードを認識して以下のような表示に変化します。(※)
(※)環境によって、デバッグ実行の状態では、ハードウェアウェアがカードを認識してもアプリ側が反応しない場合があるようです。その場合は、Visual Studio 側のデバッグ実行を終了し、Wndows Phone 側にデバッグ用にインストールされたアプリを起動して同様の動作を行ってみてください。

wp_ss_20160602_0002


 

カードを NFC から離すと、以下のように画面の表示が変化します。

wp_ss_20160602_0003


 

上記のように、インターネットにホストされている Web ページ内の JavaScript であっても、UWP で Hosted Web アプリを作成する際に適切にアクセス権を設定することでハードウェアの機能を使用できることをご理解いただけたかと思います。

また、UWP は、Windows 10 であれば、PC でもスマートフォンでも IoT デバイスでも同じアプリを動作させることができます。

 

利用シナリオ

Windows 10 の既定の Web ブラウザーは、それまでの Internet Explorer から Edge に切り替わりました。

Edge は Web 標準と他のブラウザーとの相互運用性を重視し ActiveX はサポートしません。しかしながら、複数のお客さまから 「Web ページで IC カードを使用したい」というご要望があります。

IC カードなどの読み取りは、残念ながら現状 Edge では実現することができず、ClickOnce でアプリケーションを配布して、それを使用して行うなどの工夫が必要になります。ClickOnce によるアプリの配布は画期的ではありますが、インストールの際に警告を出さないようにするために証明書の購入が必要だったり、Web のページとエクスペリエンスが違ったり、個別にメンテナンスが必要だったりと、いささか面倒な点があります。

今回紹介した UWP による Hosted Web アプリであっても、Edge 内のコンテンツにその機能を埋め込めるわれではないので、ActiveX が提供していたようなエクスペリエンスは提供できません。

しかしながら、Web ページのリソースを物理的に共有できたり、Web ページのリンクから直接起動できたり(アプリがインストールされていない場合は、Windows ストアのアプリの DL ページに案内される) するので、ClickOnce によるデスクトップアプリケーションと合わせて、代替え案のひとつとして検討していただければと思います。

Real Time Analytics

Clicky

Comments (0)

Skip to main content