日本語版 - MyShuttle.biz demo apps from Connect(); – ① Global Introduction
皆様、こんにちは！
表題のタイトルにある、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)
このブログエントリは、MYSHUTTLE.biz サンプルアプリケーションに関する複数のブログエントリの最初のものになります。このサンプルアプリは、Visual Studio 2015 Preview と .NET 2015 Preview を使って実装されています。
ブログエントリのリストは下記の通りです:（追って順次公開していきます）
1. (本エントリ）日本語版 - MyShuttle.biz demo apps from Connect(); – ① Global Introduction
2. 日本語版 - MyShuttle.biz demo apps from Connect(); – ② ASP.NET 5 Web Apps and Services
5.日本語版 - MyShuttle.biz demo apps from Connect(); – ⑤ Backend integration with LOB services (Invoicing, Azure WebJob, Azure queues, O365 API and SalesForce API)
Connect(); Visual Studio and Azure event イベントは、ニューヨークで、2014年11月12日 に行われました (基調講演とセッションはChannel9のこちら)。昨年夏から、分かり易いデモアプリに沿ったエンドツーエンドのシナリオを作って、このイベントで紹介しようとしてきました。
この架空のビジネスアプリケーションが、MyShuttle.biz です。このソリューションのためにロゴまで作ってしまいました！
ビジネスドメインの話は後でご説明するとして、 このアプリは何のアプリかをご説明しましょう。主たる目的は、極めてスケーラブルなマルチテナントのタクシー＆企業顧客向け B2B ソリューションです。”Uber” のようで、しかし企業向けに特化したアプリ/システムです。
これは、Visual Studio 2015 と .NET 2015 の下で、マイクロソフトのいくつかの異なる新しい開発技術を説明するためのものです。
Connect(); イベントの ScottGu のキーノート中の Nicole のデモで 、ドメインと当該アプリのライブイントロダクションが相互作用しているのを見ることができます (アプリ間のプッシュ通知等、基調講演 12:00 分あたり) 。
使用されているテクノロジー
このデモは、多くの異なる新技術にわたるもので、Connect(); イベントでは、 .NET 2015 Preview と Visual Studio 2015 Preview を使って、プレゼン&紹介されました。このデモでは、異なるコンテキストに対してすべて異なる技術が使われているため、ブログエントリは各々のコンテキストごとに分けて書くことにします。このエントリは、いわばすべてを網羅した、MyShuttle.biz デモアプリ紹介のイントロダクションということになります。
このデモは、単一のビジネスソリューションの中で、下記のテクノロジー群をカバーしています。このソリューションは多くの異なるアプリとサービスから構成されます:
Web applications
- ASP.NET 5 MVC サイト (新しい .NET 2015 ウェーブの一環)
- Angular.js, jQuery, bootstrap を使った Single Page Application
- ASP.NET 5 Web API サービスの利用（これも新しい .NET 2015 ウェーブの一環)
- Visual Studio 2015 Preview による Bower、NPM、Grunt のサポート
Services, Azure, middleware and LOB integration
- ASP.NET 5 Web API サービス (新しい .NET 2015 ウェーブの一環)
- ASP.NET 5 SignalR (新しい .NET 2015 ウェーブの一環)
- Azure Web Sites
- Azure Mobile Service (Web API)
- Azure Web Job
- Azure Push Notifications Hub
- Entity Framework 7
- Connected Services: O365 API および SalesForce API
Cross-platform Mobile apps
- Universal Windows Apps C# (Windows Phone、Windows ストアアプリ)
- Xamarin C# アプリケーション (iOS アプリ および Android アプリ)
- Cordova HTML/JS Hybrid アプリケーション (Android, iOS, Windows Phone)
IoT devices and Cloud Services for IoT
- GHI FEZ Raptor board（多くの IoT センサー付 (Accelerometer, GPS, Compas, 等.） 上で動く .NET Micro Framework クライアントプログラム
- Azure サービス (Azure Events Hub 等) による膨大な量の IoT イベントの収集
Big Data and Cloud processes
- HDInsight (Microsoft Azure の Hadoop )
- Azure Machine Learning
- Power Map および Power Query
もし、ここにある技術群に関する前提知識が欲しい場合、こちらのブログエントリ “What is ASP.NET 5 and .NET Core 5 within .NET 2015”を読んでみて下さい。これは（このブログエントリの）数日前に書かれたものです。ここにある情報で、いくつかの異なる .NET テクノロジーを、このデモの中で、適切に位置づけることができることでしょう。
ビジネスドメイン
MyShuttle は、B2B の極めてスケーラブルなマルチテナントの SaaS ソリューションで、ターゲットとしている企業シナリオは、タクシー会社がタクシーによるトランスポートサービスを企業顧客にオファーすることです。
そしてこのマルチテナントの SaaS システムにより、このシステムと連携できる、多くのタクシー会社は、彼らのサービス（タクシー）を、直接、顧客/企業顧客に対してl供給することができ、顧客/顧客企業はそのためにMyShuttle.biz システムに登録しておく必要があります。この最終的な成果物は？企業顧客の社員の誰もが、タクシーをいつでもどこでもリクエストすることができ、支払いの心配をする必要がありません。全ての取引は彼らの企業とタクシー会社との間で行われています。これが、ビジネスドメインの説明ということになります。
シナリオ
1．Mobile First と Cloud First
最初の（グローバル）シナリオを書き下ろしたのが、次の図です (ここには、IoT & Big Data シナリオは書いてありません。IoT & Big data シナリオは、次のセクションで説明します)。
このダイアグラムでは、いくつかのシナリオが存在します。全てはクラウド上のサービス群により、相互に接続されています。Web アプリを実装し、その実装には、最新の ASP.NET 5 (“Project K”) を採用しました。MVC も、Web API サービスも、そして SignalR も使っています。また、企業顧客用に、モバイルのネイティブアプリも準備してあります (C# で開発、Universal Windows Apps および iOS/Android の Xamarin ネイティブアプリ)。さらに、より簡易なモバイルのハイブリッドアプリを、Cordova (HTML/JS) と、Visual Studio 2015 の Cordova ツールを使って実装してあります。加えて、WPF のデスクトップアプリも実装し、最終的には、LOB システムのプロセス（インボイス発行）の中に、すべてを統合しました。そして、連携先のサービスとして、Office 365 API と SharePoint ライブラリを使用して、PDF インボイスのレポジトリを作成し、また、Salesforce の API を使って、顧客のデータを CRM にアップロードします。
２．IoT と Big Data
二番目の大きなシナリオは、IoT デバイスがクラウドサービス(Azure services) に繋がって、膨大な量の IoT イベントを、センサーから取得することです。例えば、小さなボードをタクシーの中に設置することができます。このボードには、センサー群があり、それぞれにアクセルメーター、コンパス、GPS、そしてエンジンからのガソリン残量や故障などに関する警告が出るようになっています。いったん、このようなデータをクラウドに保存してしまえば、そのデータを分析し、HDInsight (Hadoop in Azure). を活用した Azure Machine Learning を使ったビッグデータ分析により、将来の予測を立てることもできます。この図は、この2番目のシナリオのハイレベルな外観図です:
重要: この2番目のシナリオ(IoT と Big Data)に関するデモアプリとソースコードは、1番目の “Mobile First, Cloud First アプリ”の数週間後にリリース予定です。この2番目のシナリオ(IoT と Big Data)では、2015年1月末から2月初旬くらいにリリースします。Azure のバックエンドの大規模な修正が必要となります。
それでは、さっそく、最初のパートである、最新の ASP.NET 5 をベースにした Web アプリケーションについて、ご紹介しましょう。
Public Web Site – ASP.NET 5 MVC
このシリーズの、次のブログエントリは、この最新の ASP.NET 5 をベースにした Web アプリケーションと MyShuttle.biz となります。そこで、少し技術的に詳細に、この Web サイトと、SPA（Single Page Application）について記述します (日本語：Blog Post on Deep dive about the MyShuttle.biz ASP.NET 5 web Apps and Services )。
これは典型的なパブリック Web サイトです。このサイトの主目的は、ビジネスに関する情報を紹介することであり、しかもきわめてモダンなクリーンな方法で紹介することです。
スクロールダウンしてみると、このサイトが、レスポンシブ Web デザインを提供していることから、ブラウザーのサイズを変更しても正しく表示され、モバイルデバイス、スマートフォンでも正確に表示されることがわかります。
ここでは詳細に触れずに、次のブログエントリーでご紹介予定です（日本語版：deeper blog post about the MyShuttle.biz ASP.NET web apps）。Visual Studio 2015 を使ってどのようにフロントエンドの Web 開発フレームワークや JavaScript/HTML5/CSS 用のツール、たとえば、Bower, NPM, Grunt そして Gulp 等を利用していくのかをご紹介します。これらのツールは、Visual Studio 2015 に統合されています。同時に、新しい ASP.NET 5 と .NET Core 5 について詳しく掘り下げていきます。
Private Web App – SPA (Single Page Application) Angular.js, jQuery, ASP.NET 5 Web
2つめのアプリケーションは、Web Single Page Application で、パブリックな Web サイトから、ログインできるものです。ただこれは、全くパブリックな Web サイトとは異なる Web アプリケーションで、主にタクシー会社の管理用に特別に作られたものです。 このシナリオでは、このアプリケーションは、データ駆動で CRUD 処理のできるアプリであり、運転手や、タクシーの車種、等の新規レコードを作成し、情報を更新することができます。
内部構成としては、JavaScript, Angular.js, jQuery, LESS そして Bootstrap などを極めて多用しており、そこから ASP.NET 5 Web API サービスを利用します。このサービスは、Azure Web Sites 上に公開され、Visual Studio 上のローカル Web 開発サーバーでもテスト済みです。なお、この Web API サービスは、新しい Entity Framework 7 を使って構成されています。
ASP.NET 5, .NET Core 5 そして、.NET Compiler Platform (“Roslyn”) などのおかげで、ASP.NET アプリケーションの開発と実行が、Mac や Linux でも可能になりました。Microsoft は、Mac 用のエディタである Sublime Text editor と Emacs 用のプラグインを作るコミュニティもサポートしており、そのため、拡張された特長として、C# と ASP.NET インテリセンスとリファクタリングタスクを、これらのエディタで実現できます。 これにより、Mac、Linux、そして Windows の Web 開発者が、一つの同じ ASP.NET Web プロジェクトを共同で開発することができます。
この MyShuttle.biz Web アプリケーション (パブリック Websites および SPA Web アプリの両方) は、Mac 上の Mono と Kestrel (Web サーバー)でもテストされ検証されています。
もう一度書きますが、このアプリと、それが利用する、ASP.NET 5 Web API Services に関する技術的詳細、および、Visual Studio 2015 に関する多くの新機能や特長(References の新たな設定方法、 NuGet パッケージ、 .NET Core 5 フレームワークのサイドバイサイド実行、等)に関しては、こちらのブログをご参照ください（英語版：my blog post about it）。
アーカイブ済みのScott Hanselman の Connect(); イベントでのプレゼンとデモを聴いて、更にハイレベルな概要を把握したい方は、ぜひこちらを見てください。彼はこれらのデモを使って説明をしています: Cloud development with Azure and Visual Studio keynote (基調講演の最初のデモ)
LOB integration with VS Connected Services, Azure, O365 API and SalesForce API
MyShuttle.biz アプリケーションには、LOB integration シナリオがあります。このシナリオは、ドライバーのアプリ(Cordova Hybrid アプリ)から起動されます。このアプリは、データを生成し、そのデータには、一回のインボイス作成が必要とされています(乗車コスト、顧客データ、顧客の署名、等々が書かれます)。このデータは、クラウドに送信され(Azure Mobile Services 経由) 、そしてそこから、いくつかのアクションを起動することになります。一方で、Salesforce REST API を利用し、顧客データを Salesforce CRM にアップロードします。そして他方では、Azure Queues と Azure WebJob を使った非同期プロセスを使って、個々のインボイスのデータの PDF ファイルを生成し、最終的には当該 PDF ファイルは、O365 API を使ってOffice 365 サイト内の SharePoint ライブラリにアップロードされます。
O365 API と Salesforce REST API へのコード/参照設定は、Visual Studio 2015 の新しい “Add Connected Services” で提供されます。
このサービス連携に関しては、参照設定のダイアログボックス内で API カタログにて提供されますので、インターネット上であらためて検索する必要はありません。
このデモのさらに技術的な詳細については (Azure WebJobs, サービス連携、および上記のすべてのシナリオ)、こちらのブログエントリを見てください(日本語版): Blog post: MyShuttle.biz ASP.NET 5 Web Apps and Services
アーカイブ済みのScott Hanselman の Connect(); イベントでのプレゼンとデモを聴いて、更にハイレベルな概要を把握したい方は、ぜひこちらを見てください。彼はこれらのデモを使って説明をしています：Cloud development with Azure and Visual Studio keynote (27:41 ~ 33:30 迄)
Cross-platform mobile development for native apps: C#, .NET, Xamarin and C++
次のシナリオは、企業顧客向けのアプリです。企業の社員が彼らのスマートフォンを使って、タクシーを呼び、または、企業の管理者がWindows タブレット（Windows 8.1、Windows RT、および Windows 10）を使って、従業員の乗車内容や、費用、そしてPDFファイルになったインボイスを、Office 365 API を経由して SharePoint ライブラリを検索して、分析することができます。
このシナリオでは(エンドの企業顧客向け) 、モバイルのスマートフォンユーザー向けに、ベストなユーザーエクスペリエンスが必要となります。そこで、この場合、ネイティブのモバイルアプリを作成し、デバイスの機能にフルにアクセスできるようにすることで、ベストなパフォーマンスを実現します。その一つの選択肢が、個別の OSにすべて投資することで、iOS には ObjectiveC/Swiftで、Android には Java で、 Windows には .NET で実装することですが、ROI を最も高めるためのベストなやり方は、ネイティブ言語アプローチではなく、クロスプラットフォームアプローチといえるでしょう。 すなわち、C# (.NET + Xamarin) を使って、3つの異なる OS プラットフォーム(iOS, Android, Windows) を一度に開発するのです。
C# と .NET と Xamarin を使うことにより、およそ 80% 近いクライアントコードを共有できます (実際に、 MVVMCross フレームワークに基づく ViewModels の再利用や、サービスエージェントの再利用、そして、他の Portable Class Libraries に基づくクライアント側アプリロジックでその通りできました)。しかし、エンドユーザー体験の可能性は、各 OS プラットフォームの異なるスタイルとデザインガイドによることになります。通常、明らかに異なるデザインが、Windows Phone アプリ、iOS アプリ および Android アプリには求められ、それは、各々の環境のルック&フィールが異なるため、そのためこの写真を見ただけで、どれがどれ用のアプリなのかが推測できるわけです。
PCL (Portable Class Libraries) を C# クライアントコードの中で共有度を高めたため、当該コードはまた、電話用のアプリだけではなく、 “Windows Tablet” 用の Windows ストアアプリ(写真参照) 及び WPF デスクトップアプリにも再利用されました。最後には、C# コードと PCL ライブラリは .NET または Xamarin (またはサーバーサイドでいえば ASP.NET 5 と Mono)で、共有できることになりました。
Microsoft の新しいリリースで、ネイティブアプリとクロスプラットフォーム関連では、また、新しい Visual C++ for Cross Platform Mobile Development があります。ここでは、クロスプラットフォームの C++ library を作って OpenGL transition を実装し、それが Android Xamarin アプリで稼働します。詳しくはこちらのリンクをご覧ください。 Visual C++ for Cross Platform Mobile Development.
C# ネイティブ&クロスプラットフォームモバイルアプリに関するさらに技術的な詳細に関しては、こちらをご参照ください: Deep dive on MyShuttle native mobile Apps powered by C# Cross-Platform-mobile development .
アーカイブ済みのAmanda Silver の Connect(); イベントでのプレゼントでもを聴いて、更にハイレベルな概要を把握したい方は、ぜひこちらを見てください。彼女はこれらのデモを使って説明をしています: Visual Studio in a world of multiple devices (基調講演 35:20 ~)
Hybrid mobile apps: VS 2015 Tooling for Apache Cordova, HTML and JavaScript
次のシナリオは、ドライバーのアプリです。これを使って各タクシー会社のタクシードライバーは、乗車のリクエストを受け付けることができます。この場合、このアプリケーションがシンプルであるゆえに、デバイスごとにパーソナライズされたユーザーエクスペリエンスは必要ないと考えられます。そこで、モバイルアプリを、Hybrid app として構成し、HTML5/JavaScript と Apache Cordova で開発します。 これにより、GPSやカメラ、その他のハードウェアの機能に Cordova のプラグインを使ってアクセスできます。これを開発するには、Visual Studio 2015 Tools for Apache Cordova を使用します。
Cordova を使えば、既存のWeb 開発者としてのスキル（HTML5/JavaScript）やアセットや Web 開発者としてのプロセスを活用して、iOS, Android, Windows 向けのモバイルアプリを開発可能です。そして、アプリは、共通 JavaScript API を介して、ネイティブの機能 (例えば、カメラ等) だけではなく、カスタムプラグインを利用してネイティブ機能よりも豊富な機能 (例えば、カメラをバーコードスキャナにする)も実装できます。
Visual Studio を使うことにより、ビルドするにもメンテナンスするにも、非常に簡単に、よく構成された環境として、サードパーティー製のプラグインの依存関係の管理に使い、マルチデバイスの開発に役立てることができます。更に良いのは、ツールチェインの依存関係の中で新しいものがリリースされた場合、弊社のチームが互換性をテストして、更新可能な時にツールに対して通知することになります。
この場合、アプリが異なる OS 上で同じように稼働することを確認することができます。ほぼ100% 同じです。良い点は、異なるターゲット OSに対して最速のアプローチであり、JavaScript または TypeScript の開発チームを持っていれば、極めて現実的であるということです。 悪い点は、ネイティブアプリと同じレベルのパフォーマンスは得られないということです(例えば、C#, .NET, Xamarin, C++ を使ってネイティブアプリを作った場合と比べて)。しかし、ここで重要なのは、特定のシナリオまたはアプリケーションに対して、何が必要十分なことなのか、という点です。
Visual Studio 2015 Tools for Apache Cordova に関するさらに技術的な詳細に関しては、こちらをご参照ください : Deep dive on MyShuttle hybrid mobile App powered by Visual Studio Tools for Apache Cordova
IoT と Big Data
前述の通り、MyShuttle.biz アプリの IoT および Big Data デモに関しては、2015年1月末~2月初旬にかけて、公開しますので、それまではここでは詳細を述べることができません。
今のところ、Scott Hanselman の基調講演のデモをご覧ください。その中で、MyShuttle.biz シナリオの IoT と Big Data のエッセンスは示されています : Cloud development with Azure and Visual Studio – (33:35~ )
IoT devices with .NET MF
HDInsight Tooling in VS Power Map
Azure Machine Learning
これらは、何週間後か後に出すブログエントリのスクリーンショットとなります (上記で書いた IoT と Big Data デモ)。
この後、アプリのシナリオ (Web, Cloud, Native Mobile apps, Hybrid Mobile apps and LOB integration) を順番にブログエントリでご紹介しますので、技術的な詳細は、このブログエントリの最初にあるリンクから、たどって読んでみてください。
(日本語版公開次第、随時、リンク先は差し替えます)
プロジェクトのソースコードはこちら のMSDN サンプルページより、ダウンロードしてください。
それでは、また次のエントリまで！
鈴木 章太郎