日本語版 - MyShuttle.biz demo apps from Connect(); – ④ Multi device development of hybrid apps for iOS, Android and Windows with Visual Studio Tools for Apache Cordova

  • Article

皆様、こんにちは！

このシリーズ、次は④番目、Apatche Cordova による Hybrid Apps のお話です。

表題のタイトルにある、Connect();イベント、昨年末のオンラインイベントなので覚えておられる方も多いかと思います。これに関連して、このブログエントリについて、何件かのお問い合わせを、日本のお客様やパートナー様から戴きました。お答えしているうちに、この内容には、ソースコードもありせっかくの良いリソースなので、日本語でも紹介しよう！と思いつきました。そこで、Microsoft 本社のアーキテクトである、Cesar de la Torre [MSFT]と連絡を取り、彼の許諾を得て、本ブログエントリーシリーズ(全5回)の翻訳を行うことになりました。まだ5個目の５．のエントリが書かれていませんが、Cesar によれば、追って更新されるそうです。またソースコードも随時更新の予定とのこと。ぜひお付き合いください！(徐々に公開していきますので、お待ちください(^^))

※ オリジナルのブログのURLはこちらです。

Cesar de la Torre – Software Architect at Microsoft Corp. Redmond, Seattle, U.S.

Original Blog URL: https://blogs.msdn.com/b/cesardelatorre/archive/2014/11/30/myshuttle-biz-demo-apps-from-connect-visual-studio-and-azure-event.aspx   (The original blog URL might be different depending on the post, of course)

image_thumb5 image image image_thumb13

このブログエントリ(HTML/JavaScript & TypeScript と、Apache Cordova コンテナを使用したハイブリッドモバイルアプリケーションの開発)は、MyShuttle.biz apps によって実装された異なるシナリオをカバーする、このブログシリーズの4番目です。

1. 日本語版 - MyShuttle.biz demo apps from Connect(); – ① Global Introduction

2. 日本語版 - MyShuttle.biz demo apps from Connect(); – ② ASP.NET 5 Web Apps and Services

3.日本語版 - MyShuttle.biz demo apps from Connect(); – ③ Cross-platform Mobile Development of native apps for iOS, Android and Windows with .NET and Xamarin

4.(本エントリ)日本語版 - MyShuttle.biz demo apps from Connect(); – ④ Multi device development of hybrid apps for iOS, Android and Windows with Visual Studio Tools for Apache Cordova

5.日本語版 - MyShuttle.biz demo apps from Connect(); – ⑤ Backend integration with LOB services (Invoicing, Azure WebJob, Azure queues, O365 API and SalesForce API)

時として、アプリ開発において、基本的には同じルックアンドフィールのもので、異なるモバイルデバイスで使えるものを作りたくなります。その際には、トレーニングコストを抑えて、あるいは、さらに幅広いデバイスサポートを求めてスケールアップして、ということを望むことになります。加えて、Web アプリを開発したとしても、オフラインサポートやGPS等のデバイスの固有の機能は使いたいですし、ストアに登録して配布や検索に役立てて貰いたいとも思います。

Apache Cordova は、オープンソースのプロジェクトで、これによりモバイルアプリを開発すれば、当該アプリは Web 標準技術である、JavaScript、HTML、 そして、CSS をベースにしているものとして構築できます。

image

Cordova アプリは、ハイブリッドアプリとして知られています。これは、開発するときに、Web アプリと同じように開発できるものの、ネイティブアプリで実現できるいくつかの機能、例えば、いくつかのハードウェア機能へのアクセスができるというものです。他方で、重要なのは、通常このようなハイブリッドのアプリは、ネイティブアプリと同じレベルでのパフォーマンスまでは実現できません。そこで、ターゲットとするアプリの種類により、ハイブリッドな Cordova アプリは、ビジネスゴールに対して “これで十分” なものになります(例えば、多くのシンプルな LOB アプリや、データ駆動のアプリこそが、Cordova アプリのターゲットとなるでしょう)。したがって、パフォーマンスが高くすぐれた UX を持つアプリであれば、十分なものとは言えないでしょう。

Visual Studio provides Cordova templates either for JavaScript or TypeScript.

Cordova JavaScript テンプレート

image

Cordova TypeScript テンプレート

image

TypeScript は、フリーでオープンソースのプログラミング言語で、Microsoft により開発及びメンテナンスされているものです。これは厳密な JavaScript のスーパーセットで、JavaScript に対してオプションのスタティックなタイプとクラスベースを追加するオブジェクト指向のプログラミング言語です。TypeScript のデザインゴールは、幅広いアプリケーション開発と、JavaScript へのクロスコンパイルです。前述のように TypeScript は JavaScript のスーパーセットですので、どのような既存の JavaScript で書かれたプログラムでも、TypeScript で書かれたプログラムでも有効です。TypeScript を使えば、複雑さを回避しながら、開発生産性を取得することができ、JavaScript ベースのアプリ開発に役立てることができます。

本ブログエントリシリーズのMyShuttle.biz アプリで、タクシードライバー向けに開発されているのが、Apache Cordova アプリで、これは TypeScriptat を使用しています。 Myshuttle シナリオの中では、下記のライトブルーの☆マークのところで使われているのがわかります。

image

そして、下記は、完全に同じ Cordova アプリが、異なるデバイスとモバイル OS に配布された状態の写真です (Windows Phone, Android and iOS)。

image

image

MyShuttle.biz の Cordova アプリを、Visual Studio で設定する方法は、下記の通りです。

まず、これらのクライアントアプリを Visual Studio で設定するために必要な条件・環境は、下記の通りです :

- 1. Visual Studio 2015 Preview (または Visual Studio 2013 および Update 4 に加えて Visual Studio Tools for Apache Cordova CTP3.0 for VS 2013)

- 2. (オプション) Devices/Hardware (Android, iOS または Windows Phone) もし、これらのアプリを実機のデバイスで試したい場合には、デバイスも必要です。通常、Android デバイスは Cordova アプリを快適に動かせます。iOS デバイスがこの(サイドローディングの)作業に Mac を必要とするのに比べ、簡単です。

- 3. Emulators: Android と Windows Phone および Windows ストアアプリの場合には、Visual Studio 2015 Preview にあらかじめエミュレータが生みこまれています。iOS エミュレータは、XCode がインストールされた Mac が必要です。iOS エミュレータは当然 Mac で動かします。

Configuring the MyShuttle.biz Cordova app to consume the Azure Mobile Service and Bing Maps key

ソリューション名 MyShuttle.Client.Cordova (Multi-Device Hybrid App) を開きます。下記のような構成になっています。

image

NuGet Packages Configuration

Visual Studio が正しい NuGet フィードを指定しているかチェックします：

Visual Studio –> Tools –> Options –> NuGet package Manager –> Package Sources

nuget.org –> https://www.nuget.org/api/v2/

image

Cordova App Custom Settings Configuration

カスタムの設定で Microsoft Azure Mobile Services と、SignalR Services とを呼び出します。そのためには、別途、 Microsoft Azure 上にそれらのサービスがデプロイされていなければなりません。最終プロセスとしてアプリが動作するためには必要です (インボイスデータを Mobile Service に送付したら、.PDF のインボイスファイルが作成され、O365 SharePoint ライブラリに送信される、等々)。 しかし、それらのすべてのサーバー側設定は、上級設定です。それら設定がされていない場合にも、Cordova アプリをとりあえず動作させて、最初のシンプルな画面を動作させるシミュレーションを行い、タクシー配車サービスがスタートできます。単にインボイスのデータをバックエンドに送れないというだけです。

下記ファイルを開きます： app>modules>core>services>settingsService.ts

image

Change the following URLs and keys to your own data, urls and IDs.

Microsoft Azure Mobile Service が、Microsoft Azure 上にデプロイされている必要があり、 Microsoft Azure Notifications Hub が構成されている必要があります。それにより、このアプリは、他のクライアントの MyShuttle.biz アプリとの統合 (プッシュ通知と、SignalR リアルタイムコミュニケーション)、および、LOB 統合 Office 365 SharePoint ライブラリにより.PDF インボイスファイルを格納し、インボイスファイルと顧客データが SalesForce にアップロードされます。

this.bingMapsKey = 'YOUR_BING_MAPS_TOKEN_KEY';   

--> (下記の Bing Maps key 説明をご参照ください)

this.realTimeNotificationsServerUrl = 'https://YOUR_SITE.azurewebsites.net/';   

--> (Microsoft Azure にデプロイされた ASP.NET 5 Web サイトの URL です。同時に SignalR Hub Service もホストしています)

this.mobileServiceKey = 'YOUR_MOBILE_SERVICE_KEY';

--> (これは、デプロイされた Microsoft Azure Mobile Service の Key で、Cordova アプリから、また、LOB Office 365 と SalesForce の LOB 統合から、それぞれ利用されます)

this.gcmSenderId = 'YOUR_GCM_Sender_ID';  

--> この ID についてはこちらの情報をチェックしてください : https://developer.android.com/google/gcm/gs.html

this.storageService.getValue('serviceUrl', 'https://YOUR_SITE.azure-mobile.net/');

--> (これは、デプロイされた Microsoft Azure Mobile Service の URL で、Cordova アプリから、また、LOB Office 365 と SalesForce の LOB 統合から、それぞれ利用されます)

image

Bing Maps key

同じ Bing Maps key が、MyShuttle ソリューションの、Xamarin、Cordova 及び Windows アプリケーションで必要となります。もし、Bing Maps key を一つも持っていない場合には、Microsoft のWeb サイトから取得する必要があります。こちらの手順に従い、Bing Maps Key を取得してください。

この Bing Maps API には、 map コントロールとサービスが含まれており、Bing Maps とアプリケーション内や Web サイト内で連携できます。インタラクティブマップや、静的な地図に加えて、この API が提供するのは、他の Geospatial Features(地理空間情報の取り扱い)、例えば、Geocoding（住所から緯度経度を検索）や、ルート案内、交通情報、そして 空間データソース等で、これを使ってデータを保存・検索することができます。このデータは、空間データコンポーネント、たとえば store locations などを持っています。

※ 必要な場合に随時参照してください: Getting a Bing Maps Key.

Familiar Web Development frameworks

ここで scripts フォルダを開くと、Cordova アプリの中に、普段から慣れ親しんだ JavaScript, CSS 用の Web フレームワークを見つけられるでしょう。例えば、 Angular.js、 jQuery、BootStrap、LESS、 等で、それらは一行のコードの変更もなく、ブラウザで稼働する Web アプリとまったく同じです。

ここでは、SignalR JavaScript クライアントを、リアルタイムコミュニケーションに利用しています！ (顧客が自分のモバイルアプリの地図上で自分の位置を指定すると、リアルタイムに運転手のアプリ、すなわちこの Cordova アプリに通知されます)。

image

したがって、ここでは、同じフレームワークに加えて、Web プログラミングと同じ慣れ親しんだ同じツールを使うことができるということになります。

Cordova Plugins

Web アプリと、Apache Cordova アプリの違いといえば、このアプリは、まさにアプリとして動くということ – ブラウザのコンテナ無しで、かつ、デバイスのネイティブの機能にアクセスできる、という点です。

Cordova コミュニティでは、このようなプラグインの膨大なカタログを所持しています。プラグインは、ネイティブデバイスの機能を開放し、Cordova アプリから 通常の JavaScript API を使って開発できるようにしてあります。

1. “config.xml” ファイルをダブルクリックします。

2. “Plugins” タブをクリックします。

image

そうすると、カメラ、バッテリ情報、ファイルシステム、Geolocalization、 等が扱えることがわかります。これが、Cordova アプリが時としてハイブリッド モバイルアプリと呼ばれる所以です (例えば、PhoneGap は、Adobe が買収していますが、以前、Apache Cordova に依存しています。等々).

Visual Studio が提供するのは、素晴らしいツールで、これを使って Apache Cordova アプリを開発できますが、同時に弊社も、コミュニティに対して、お返しとして貢献するようにしています。この数か月を振り返ってみても、下記のような内容を実施してきました :

- Cordova support for Windows 8.1 Universal Apps の追加

- Cordova support for platform specific project resources like icons and config settings の追加

- いくつかの セキュリティバグ FIX で、全てのプラットフォームに貢献できるもの 、等々

弊社は、コミュニティと協業して、Cordova を企業にとって価値あるものにしているといえるでしょう。

Cordova apps and Microsoft VS Android emulator

Cordova アプリはまた、全く新しい Microsoft Visual Studio Android Emulator を使用できます。これは、テスト用にも、JavaScript と HTML DOM のデバッグ用などにも使えます。下記にスクリーンショットを上げておきます。

image

Debugging Cordova apps in iOS devices

Visual Studio Tools for Cordova が 2014年5月に (CTP1として)リリースされて以来、Visual Studio による Cordova アプリのデバッグは、Android デバイスおよびエミュレータ用ともに可能です。もちろん、このツールで、iOS デバイスおよびエミュレータでのデバッグも可能です。しかしながら、Visual Studio 2015 Preview 以降、iOS デバイスおよびエミュレータでのアプリ実行とデバッグは、Mac 上にデプロイされた iOS build host を使って可能となっています。そこで、Mac 側では、iOS デバイス (iPhone または iPad) との接続が必要です。

いまや、全ての慣れ親しんだデバッグ用のツールは Visual Studio で利用可能であることは、iOS デバイスの場合も同様です。ブレイクポイントを設定して、ウォッチ式を書き、ローカル値を調査し、JavaScript 紺ロールとやり取りし…その他、が可能です。完全なデバッグ体験が3つのメジャーモバイルデバイス OS にまたがって可能で、それは Windows 及び Android エミュレータと連携し、そして、リモート Mac エージェントを通じて、iOS シミュレータとも連携できます。

iOS 出のビルドとデバッグを可能にするには、vs-mda-remote build agent を Mac 側にインストールする必要があります。基本的には、Node.js を Mac にインストールするだけで、その後、下記のコマンドを管理者権限でターミナル上から打ち込んでください：

"sudo npm install -g vs-mda-remote --user=$USER"

この最新のリリースは、最初のセットアップをさらに簡単にし、そしてより対話的なインストラクションを提供し、ビルド状態におうじて当該エージェントが実行されます。ついでにいうと、Visual Studio と Mac 上で稼働するビルドエージェントとのコミュニケーションは、セキュアに行なわれます：

Secure communication between VS and build agent on Mac

さらに詳細に、Visual Studio の iOS アプリ用のビルド、デバッグ、デプロイを知りたい場合には、この MSDN 記事 をチェックしてください。

Cordova アプリの Visual Studio によるデバッグ体験を見てみたい場合には、Connect(); イベントでの Amanda によるデモのアーカイブビデオをご覧ください:

基調講演デモ - Visual Studio in a world of multiple devices (59:35 から)

Wrap up about MyShuttle.biz hybrid app built with Visual Studio Tools for Apache Cordova

Cordova アプリは、主に Web テクノロジー (HTML/JS/TypeScript) によって構築されますが、ネイティブデバイスの機能、例えば GPS やネイティブ電話機能にも、Cordova プラグインからアクセスできます。

Apache Cordova 用のツールを使えば、Visual Studio 開発者は、同じ開発体験を、iOS、Android、そして、Windows にわたるすべてのエミュレータ、シミュレータ、デバイス、で共有できます。

Download the code!

Download page from MSDN Samples

鈴木 章太郎