Virtuoso - Shotaro Suzuki's Blog

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

鈴木章太郎 — Tue, 27 Jan 2015 19:47:42 GMT

皆様、こんにちは！

このシリーズ、次は④番目、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)

このブログエントリ(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 をベースにしているものとして構築できます。

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

Visual Studio provides Cordova templates either for JavaScript or TypeScript.

Cordova JavaScript テンプレート

Cordova TypeScript テンプレート

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

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

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

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) を開きます。下記のような構成になっています。

NuGet Packages Configuration

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

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

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

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

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 統合から、それぞれ利用されます)

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 アプリに通知されます)。

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

Cordova Plugins

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

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

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

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

そうすると、カメラ、バッテリ情報、ファイルシステム、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 のデバッグ用などにも使えます。下記にスクリーンショットを上げておきます。

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 上で稼働するビルドエージェントとのコミュニケーションは、セキュアに行なわれます：

さらに詳細に、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

鈴木章太郎

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

鈴木章太郎 — Tue, 20 Jan 2015 15:52:31 GMT

皆様、こんにちは！

このシリーズ、次は③番目、Xamarin iOS/Android と、Universal Apps のお話です。

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

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

このブログエントリ(ネイティブアプリ開発にフォーカス)は、MyShuttle.biz アプリケーションがカバーする異なるシナリオの中の3番目のブログエントリです。.

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)

モバイルアプリを、異なる OS のプラットフォーム(Windows, iOS, Android)で開発しようとするとき、多くのケースでは、エンド顧客やシナリオをターゲットとして、そこで、ベストな UX、すなわち、こなれた、ビジュアルにデザインされた UX を提供しようとするでしょう。その場合の UX は、ここの特定のデバイスプラットフォームのスタイル/ガイドラインとコントロール群(Windows Phone vs. iOS vs. Android)に沿ったものであること、同時に、パフォーマンスもベストであること、が望ましいです。
ネイティブアプリの開発でこれらのゴールを達成することは、もちろん可能です(Android では Java、iOS では ObjectiveC/Swift、というように)。しかし、マイクロソフトは、ネイティブアプリの開発における同様のゴールを、C# と .NET、そしてランタイムとしての Xamarin をベースとした、クロスプラットフォーム アプローチに賭けています。

次のダイアグラムでは、どのようにして C#、.NET および Xamarin を使ってクロスプラットフォーム開発を行うのか、纏めてあります。:

Xamarin 及び .NET を使って、100% ネイティブのアプリを開発可能です。しかも、およそ 80% の C# クライアント側のコードが、異なるプラットフォーム間で共有でき、他の 20% は、ほぼマークアップ言語 (XAML, AXML, 等) またはプラットフォーム特有のコードであり、こなれた UI でプラットフォームごとに最適化されているものです。

この MyShuttle.biz シナリオ(下記ダイアグラムをご覧ください)では、いくつかのネイティブアプリ（デスクトップアプリ、モバイルアプリ）を開発しました。下図内では、黄色い星で強調してあります。

開発するアプリは、まず、デスクトップアプリ（WPF）、Windows 8.1 ストアアプリおよび Windows Phone 8.1 アプリ です。これらは Universal Windows Apps として .NET で開発します。そして、 iOS アプリと Android アプリは、Visual Studio および Xamarin で開発します。

(注: このダイアグラムと写真では、モバイルアプリを表示しています。WPF デスクトップアプリは写っていないですが、これは、サンプルデモアプリのソースコードのフォルダの中の …\MyShuttle_V1.01\src\MyShuttle.Client.Desktop に入っています)。

さて、どこが重要なポイントでしょうか？全てのこれらネイティブアプリが、同じ C# コードを再利用し、.NET アプリケーションと Xamarin アプリケーションとの間で、シェアされていることです。

これこそが、真のC#ベースのネイティブクロスプラットフォームモバイルアプリです!!

Setting up the MyShuttle.biz native apps solution in Visual Studio

これらのクライアントアプリをVisual Studio でセットアップするために必要な環境 は下記の通りです。 :

- 1. Visual Studio 2015 Preview (または Visual Studio 2013 with Update 4、但し ASP.NET 5 Services と連携させるには、Visual Studio 2015 Preview が必要)

Visual Studio 2015 Preview download

- 2. Xamarin (for Visual Studio 2015 Preview)

Xamarin for VS 2015 Preview - download and installation (Kzu,XamarinKzu、これ必読です！)

This is also a good post about current Xamarin's installation on VS 2015 Preview (Brian Lagunas、こちらも必読です！)

- 3. Nugget.org への VS Nuget Package Manager からのパッケージソース参照先設定を忘れずに行います。これにより、使用するすべての外部依存関係を検索し把握することができます。例えば、MVVMCross 等です。

- 4. MyShuttle.biz ASP.NET 5 Web API Services（Microsoft Azure 上または他のサーバーにデプロイ済み）が必要です。内容的には、前回②で解説したものです。ASP.NET 5 サービスをローカルに配置することもできます。その場合には、Visual Studio で、その local Web Server を使って、モバイルアプリを使うたびにサービスを起動することになります。しかし、そのやり方は、当該サービスを、グローバルで、どこからもアクセス可能で、安定している場所、例えば Azure に配置する事に比べると、ずっと大変です。サービスをローカル（例えば開発機内）で実行する場合、問題が生じ得るのは、サービスに対してモバイルデバイスか、あるいはエミュレータから利用する場合に、当該デバイスまたはエミュレーターが、同じノートパソコンのローカル IP やサービスにアクセスできない可能性があるからです。この場合、経験上は、当該サービスをAzure にデプロイして実行しておけば、どんなモバイルアプリからも利用可能です。

- 5. MyShuttle.biz Azure Mobile Service プロジェクトが、Microsoft Azure 上にデプロイされていることが必要です。このサービスは、プッシュ通知を異なるモバイルアプリ間で扱います。そこで、もし、この機能が使いたい場合には、この Mobile Services プロジェクトを Azure 上にデプロイする必要があるのです。

- 6. いったん全ての必要な者のセットアップが終了したら、Xamarin プロジェクトを扱うことに慣れていない限り、お薦めするのは、各ソリューションを、Xamarin プロジェクトとしてではなく（Xamarin Studioで開くのではなく）、 Visual Studio で、01.1_Demos_NativeApps_Microsoft.sln で開くことです。その他のもの、もし Xamarin について詳しくてまたきちんと Xamarin がインストールされているのであれば、01_Demos_NativeApps.sln を開いてください。こちらは、Xamarin プロジェクトを含みます。

重要: 注意点を述べます。最初にこのソリューションを開いたとき、多くの NuGet の依存関係が存在していることと、特に Xamarin プロジェクトのフルバージョンを開いた場合、開くのにかなり時間がかかることがあり得ます。数分ではないレベルです。次に当該ソリューションを開いた場合には、Nuget の依存関係もほとんど構成済みなので、開くのはずっと速いでしょう。

Sharing code between all your C# apps with PCL (Portable Class Libraries)

Visual Studio を開いて、重要な点は、C# のコードが共有できるという点です(約 80% の UI ロジック、例えば、ViewModel、Service Agents でリモートサービスを利用するもの、等々) 。これは、Universal Windows Apps および Xamarin アプリすべてにわたっていて、PCL (Portable Class Library)がコンパイル済みのライブラリとして共有されます。

まずは、PCL プロジェクトを開きます。名前は、MyShuttle.Client.Core (Portable) です。

Setting up the PCL project

この PCL “MyShuttle.Client.Core (Portable)” のプロジェクトは、共通の設定コード（Common Configuration Code）を含んでおり、これらは、Windows 8.1 ストアアプリ,、Windows Phone 8.1 アプリ、Xamarin Android アプリ、そして Xamarin iOS アプリから再利用されます。利用可能な配置済みサービスの URL のようでもあり、Bing Maps key と他の設定のようでもあります。共通の設定を一つの箇所に置いてあり、それが PCL 内部ですので、異なるクライアントアプリ軍にそれらの情報を入れておく必要がありません。

1. MyShuttle.Client.Core (Portable) プロジェクトを展開します。

2. ApplicationSettingServiceSingleton.cs という名前のファイルを開きます。Infrastructure フォルダにあります。

3. DefaultUrlPrefixValue の値を代入します。URL の文字列で、前回の手順で ASP.NET 5 Web API サービスを Azure にデプロイしたものを入れます。例えば下記のような感じです。

下記のようになります。

private const string DefaultUrlPrefixValue = “https://[yourserver].azurewebsites.net”;

4. DefaultUrlPrefixValue の文字列を取得した Bing Maps key に変更します。

もし Bing Maps key, を一つも持ってなければ、Microsoft のサイトから取得してください。Bing Maps APIs を使うためには、Bing Maps Key が必要です。

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

キーを取得したら、ApplicationSettingServiceSingleton.cs ファイルの DefaultVingMapsTokenValue の箇所に、当該文字列を代入します。

5. 次に、PCL プロジェクトで、CommonAppSettings.cs ファイルの中で、下記の静的文字列に、それぞれ値を導入して書き換えます:

_MobileServiceUrl (デプロイ済みの Mobile Service の URL)

_MobileServiceKey (Azure Management Portal から取得した Mobile Service のキーl)

_SignalRUrl (デプロイ済みの ASP.NET 5 サービスの URL、これは ASP.NET 5 Web アプリケーションと Web API サービスと同じ URL).

PCL code/assets

それでは、コードの中を見ていきましょう。どのようにして多くの ViewModel を実装したかが良くわかるはずです。この ViewModel は異なる C# アプリ間で共有されます :

このことは、例えば VehicleDetailViewModel.cs というコードが異なる複数の C# アプリから共有されるというだけではなくて、同時に一貫性を持ったやり方で、それらアプリ間で共有されるということで、これは MVVMCross フレームワークによって実現されています。これを今回は .NET および Xamarin アプリ全てにわたって使用しています。

PCL プロジェクトプロパティを見れば、この PCL こそが異なるプラットフォームをサポートしていることがわかります :

当該 PCL プロパティを見るとわかるのは、異なるプラットフォームを PCL ライブラリでどうサポートするのかがわかります : Windows デスクトップアプリ、Windows 8 ストアアプリ、Windows Phone 8.1 アプリ、および Xamarin サポートのおかげで、Android および iOS、等全ての PCL ライブラリ/DLL としてコンパイルされた C# コードです。

ここで、Visual Studio Ultimate の素晴らしい機能である Code Map を使うことで、実際にこのシナリオに登場する全ての異なるクライアントから取得した PCL であることを証明できる。Code Map により、このケースのようにあまり詳しくない、なじみがないものでも、コードに辿りくつくことができます。

基本的に、この Code Map では、アプリケーションの構造を、マップにして表すことができます。アセンブリとメソッドにアクセスすることにより、どのメソッドとメソッドが互いにリンクしているのかがわかるので、ビジュアルに当該アプリケーションの動きを把握できるのです。

このケースでお見せしているのは、Visual Studio Code Map を使って、PCL 名 MyShuttle.Client.Core (Portable) が、他の異なるアセンブリ/アプリからどのように参照されるか、という点です :

これを見てください！この PCL の中の C# コードを、Windows デスクトップアプリ、Windows 8 ストアアプリ、Windows Phone 8.1 アプリ、および Xamarin Android アプリ、そして Xamarin OS アプリから、再利用できます。全ての C# コードはネイティブアプリ各種の間で再利用されています！

Code Map はまた、クラス間、メソッド間、の関連性を推測して提示します。それにより、Code Map を使ったビジュアルなデバッグさえできるのです。

The MyShuttle.biz WPF desktop application

伝統的な WPF デスクトップアプリについて、ご紹介していきます。これも、MyShuttle.biz シナリオの一つです。.

WPF デスクトップアプリが便利なケースは、まさに Windows デスクトップシナリオであり、例えば、オフラインで稼働するアプリケーションなどがありますが、他にも様々な理由で、Windows デスクトップアプリが必要な場合があります。

Setting up the WPF app

この WPF アプリを起動するには、WPF アプリを適切に構成し、 “point to” 前述の ASP.NET Web API サービスを”参照”するようにして、中央に置かれたデータおよびサービスを利用できるようにする必要があります。

1. MyShuttle.Client.Desktop プロじぇくを選択し、展開します。

2. App.config ファイルを開き、URLPREFIXKEY の値を、URL に変更します。この URL は、ASP.NET 5 Web API サービスのもので、例えば、Azure 上にデプロイされたものです。.

もし、まだ Azure 上にサービスをデプロイしていなければ、サービスを Visual Studio から起動し、ASP.NET 5 アプリケーションから取得したローカルの URL を記述してください。したがって、この場合には、Web API サービスを起動するため、ASP.NET 5 アプリケーションの起動が必要になります。

ここでは、既に Microsoft Azure にデプロイ済みなので、こちらの URL を記述しました。 https://myshuttlebiz.azurewebsites.net/ 下記のようになります:

https://myshuttlebiz.azurewebsites.net/" />

3. F5 を押して、WPF アプリを起動してください。下記のような画面が出てくると思います。

MyShuttle.biz WPF アプリケーション

このサンプル WPF アプリケーションは、Daniel Moth が彼の IDE とパフォーマンスのデモに使ったもので、彼は少し修正したもののいくつかのバグをフィックスして再度アップしたものです。

このデモは、Daniel の実施した Visual Studio 2015 Preview IDE の生産性とパフォーマンス診断の箇所で見ることができます :

Visual Studio in a world of multiple devices (基調講演 21:50 ~).

WPF Roadmap

WPF については詳しくここでは説明しません。その理由は、これが .NET コミュニティではよく知られているためです。しかし、強調しておきたいのは、最新の WPF に関するニュースで、WPF チームから発表されたロードマップに関するものです:

The Roadmap for WPF (Nov. 12th 2014)

https://blogs.msdn.com/b/dotnet/archive/2014/11/12/the-roadmap-for-wpf.aspx

※ ここに関しては、私と同じチームのエバンジェリスト荒井省三さんが書かれた、これを和訳したブログエントリの方を参照してください。

https://blogs.msdn.com/b/shozoa/archive/2014/12/02/the-roadmap-for-wpf.aspx

多くの人がこれに関心があるようですが… とりあえずこのブログへのコメントをもとに言っています☺

The MyShuttle Universal Windows apps for Windows Store and Windows Phone

さて、C# ネイティブアプリのパートとして、次にお見せしたいのは Universal Windows Apps（ユニバーサル Windows アプリ）で、これも “MyShuttle.biz” シナリオのために作ったものです。ターゲットとなるのは、Windows 8.1 ストアアプリおよび Windows Phone 8.1 アプリです。

これらのユニバーサル Windows アプリは、C# を再利用して開発されており、また、以前にご紹介した PCL も再利用して開発してあります。もちろん、これらは Xamarin アプリからも共有されます。

しかし、Windows アプリはより Xamarin アプリよりも、更に類似しているので、これらに加えて、Shared プロジェクトを作成し、これらのコードを Windows ストアアプリと Windows Phone アプリで共有されるようにします。

Shared プロジェクトは、リンクされたプロジェクトのように、コードをシェアします。また、もちろん、Shared プロジェクトを使って C# コードを Xamarin プロジェクトとも、共有することが可能です。しかし、このデザインでは、PCL こそを最もグローバルで共通のコードとしてシェアすることにし、それにより、一つの Shared プロジェクトを使ってコードを Windows ストアアプリとの間でシェアしました。というのも、Shared プロジェクトは、ユニバーサル Windows アプリにとって典型的な共通プロジェクトだからです。もちろん、異なるアプローチも可能ではあります。

Running the Universal Windows apps (Windows Store and Windows Phone) in the emulators

もちろん、ユニバーサル Windows アプリをデバイスで稼働させることはできますが、デバイスにデプロイする前に、あるいはデバイスを持ってない場合等に、それらのアプリの稼働確認をエミュレータ上で行うことができます。

最初に、Windows ストアアプリをダイレクトにローカルマシン Windows 8.1 上で動かすよりも、エミュレータで動かしたい場合、Windows ストアアプリプロジェクトに設定をする必要があります。下記の通りで、 “シミュレータ” をターゲットデバイスに設定しています（これは実行時に変更することもできます）:

ところで、最初にアプリを実行するとき、アプリを右クリックで一つ一つデプロイする必要があります。プロジェクトファイルの “Deploy”をクリックします:

そして:

しかし、その後に、スタートアッププロジェクトを変更すると、ユニバーサル Windows アプリを同時に異なるエミュレータで実行することができます (タブレットと Phone).

ここで、OK をクリックして Ctrl+F5 を押すと、Windows ストアアプリと、Windows Phone アプリが、両方のシミュレータ上で、同時に実行されます！

ここでのポイントは、ほとんどの C# コードが異なる Universal アプリに再利用されているのに、引き続き、フォームファクターに依存したパーソナライズされた UX を作成できる点です。それは上記の通り、レイアウトもデザインガイドラインも、Phone アプリ用のものは、通常は、タブレットアプリ用のそれとは、大きく異なるのに、です。

しかし、もっとシンプルにしたければ、全く同一の XAML ビューを Windows Phone アプリと Windows ストアアプリ間で、再利用することができます。

例えば、XAML ビューのうち、About.xaml を Shared プロジェクト “MyShuttle.Client.UniversalApp.Shared” から開きます。Views フォルダにあります。この場合、再利用するのは、“about Xaml page” で、それを2つのフォームファクターで共有します。もちろん、他のPage/View でも同様のことが可能です。

ビジュアルに、XAML ビューを編集でき、タブレットでどのように見えるか確認できます…

または、さらに進んで、選択されたフォームファクターデザインモードを変更することができます。ビジュアルデザイナーの一番下の左側にあるコンボボックスで、Windows Phone フォームファクターに変更します。

もしこのフォームファクター選択コンボボックス(ユニバーサル Windows アプリ関連)が見つからない場合、有効にするには、下記の手順で行います。

Tools—>Options—>XML—>General—>Navigation bar (Visual Studio 2015 Preview のデフォルトでは有効になっていません).

そこで、Phone アプリでどのように見えるか見てみると、下記のような感じです。

これで、はっきりと、この XAML ビューは二つのフォームファクターで共有されている、ということがわかります。

The MyShuttle.biz native Apps for iOS and Android powered by Xamarin, C# and Visual Studio 2015

ご存知の通り、Microsoft は、 .NET ネイティブアプリ開発を、我々の戦略的パートナーである Xamarin 社とともに大変強く推進しています。

Xamarin を使うことで、フルネイティブの iOS および Android のアプリを開発でき、そのためには、C/# のスキル再利用したり、そしてもっとも慣れているツールであり開発環境を利用できます: Visual Studio.

ここでは、“MyShuttle.biz” アプリで、C# と Xamarin で開発され、iPhone および Android スマートフォンで稼働するアプリを見れます。これらは、そのほとんどの C# クライアント側コードを共有しており、このコードは、またユニバーサル Windows アプリおよび WPF アプリからも、共宇通の PCL を介して再利用されます。

Xamarin installation and Configuration

1. Xamarin を Visual Studio 2015 Preview にインストールします。

Xamarin for VS 2015 Preview - download and installation (Kzu, Xamarin、これ必読です！)

This is also a good post about current Xamarin's installation on VS 2015 Preview (Brian Lagunas、これも必読です！)

(2015/1/9 更新): 今日時点で、アップグレードには、Alpha チャンネルが必要で、これは Mac 版の Xamarin Studio でも、Windows の中の Visual Studio 2015 Preview の Xamarin でも同様です。それ以外のものを使うと（Stable、Beta、等）Visual Studio 2015 Preview から、Mac にある Xamarin iOS Build Host にはつながらないので、ビルドやデバッグができません。

2. Log in with you Xamarin account, from Visual Studio, before opening the MyShuttle SOLUTION. 自分の Xamarin アカウントにログオンして、iOS プロジェクトからのワーニングを受け取らないようにすると、Visual Studio 起動プロセス時のプロジェクトもスローダウンしないです。でなければ、このように後程設定しておいてください。

まず、Visual Studio –>Tools—> Xamarin Account をポイントします。

Xamarin の Business アカウントを持っていれば、下記のようなダイアログが、ログオン後に現れるはずです :

3. VS Solution with Xamarin projects

01_Demos_NativeApps.sln. を開いてください。どんな Xamarin プロジェクトでも、iOS 版を含む場合には、下記のようなダイアログが出て、iOS build host (Xamarin がインストールされて Xamarin build host が稼働中)への接続を求められます。もし iOS 版をインストールしてなければ、このダイアログをキャンセルし、Android プロジェクトは作れますので、そちらを作成してください。

4. Set the apps custom configuration up (Within the Shared PCL)

Xamarin アプリからサービスを利用するように設定するには、PCL を変更する必要があります。ここはこのブログエントリの以前のセクションで解説済みです(“Setting up the PCL project”).

Xamarin templates for Visual Studio

プロジェクト詳細を見る前に、Visual Studio のXamarin テンプレートで、 iOS および Android アプリを開発できるものを見てみましょう。

Visual Studio 2015 Preview 内の Xamarin インストール後の iOS プロジェクトテンプレート（C#）

Visual Studio 2015 Preview 内の Xamarin インストール後の Android プロジェクトテンプレート（C#）

MyShuttle.biz ソリューションの中では、２つの Xamarin プロジェクトがあります。一つは、 iOS 用で、もう一つは、Android 用です。いずれも C# で開発されています。

もう一度言うと、両方のプロジェクトは、同一の C# ロジックを再利用しています。そのロジックは、同時に Windows アプリから再利用されています。置き場所は、 PCL ライブラリの中で、多くの操作、ViewModels などは MVVMCross フレームワークと、Service-Agents に基づいています。

Intellisense in Xamarin projects

もちろん、Visual Studio および C# を使っている以上、期待できることは同じです。開発時にすべての Visual Studio のリッチな機能、例えば intellisense も使用できます。モバイルデバイスに関連するクラスやコードについてさえ、例えばここでは、Android のカメラまたは他のハードウェアで Android の特徴づけているものでも、当該ネームスペースをタイプすると、どんな C# ファイルでも、Xamarin Android プロジェクトでは、このように操作できるのです。

Xamarin Designers in Visual Studio, for iOS and Android views

Xamarin はVisual Studio の拡張として、ランタイムとプログラミングレベルだけでなく、生産性向上ツールとしての Visual designers for iOS および Android App Views を持っています。

例えば、ここでは、Android Views designer または iOS designer があり、ここで簡単かつビジュアルに自分の iOS アプリの Storyboard を利用できます。

1. iOS Storyboard view: Open the MyShuttle.Client.iOS project root --> Storyboard.storyboard ファイル

この iOS Designer for StoryBoards は、Xamarin 3 から搭載されたものです。強調すべきなのは、このスクリーンは、リモートホストの Mac で、Xamarin build Agent によりレンダリングされて、それを Visual Studio が受診して、WYSIWYG で表示しているのもです。iOS designer を使うことで、コントロールをドラッグアンドドロップして、最高の生産性を iOS 開発にもたらします。

NOTE:前述した通り、iOS Storyboard をレンダリングするためには、Visual Studio が Mac に接続している必要があります。当該 Mac 上では Xamarin Build Host エージェントが実行され稼働している必要があります。Xamarin iOS projects について詳細はこちらをご参照ください :

Introduction to Xamarin.iOS for Visual Studio

iOS User Interface design in Visual Studio and Xamarin Studio

2. Android view: Android project を開く --> Resources --> Layout --> VehicleDetailView.axml

Android Views は、レンダリング、編集、ともに、ダイレクトに Visual Studio から可能で、他の機器への接続は不要です。

Microsoft Visual Studio Android Emulator

これらのデザイナーツールは大変便利ですが、デザイナーだけでは、不十分です。真に必要なのは、迅速な開発と実行の環境が、アプリ実行時に体験できることです。そのため、マイクロソフトは、Microsoft Visual Studio Android Emulator をリリースし、Visual Studio 2015 Preview からバンドルすることにしました。

これは x86 ベースのイメージが Hyper-V で実行され、Windows マシンでの実行に最適化されています。したがって、Windows から Android アプリにスイッチするときにリブート等もいらないです。アプリを実行でき、デバッグでき、その他すべて可能です。実機の Android device でデバッグしているのと同じです。

Disable Fast Deployment of Android Project when deploying to VS Android Emulator

現在のバージョンの Microsoft Visual Studio Android Emulator と Xamarin (VS 2015 Preview の時点、2014年12月あたり)では、Microsoft Android Emulator を Xamarin プロジェクトで動かすためには、“Use Fast Deployment” というチェックをオフにしておく必要があります。これは、Xamarin-Android Project のプロパティの、Android Options タブにあります:

これを行った後、Android Project を Microsoft Android Emulator でデバッグ、またはこれにデプロイすると、ちゃんと動きます。

Wrap up about C# cross-platform development, .NET and Xamarin

ネイティブアプリの Xamarin による開発は、Objective-C や Swift による iOS 開発や、Java による Android 開発でできることならどんなことでも、同じように Visual Studio と、C#、および Xamarin で可能です。

このブログエントリで見て戴いた通り, C# は非常にユニークなアプローチで、クロスプラットフォームのモバイルネイティブアプリ開発が、Windows (デスクトップアプリ、Windows ストアアプリ、Windows Phone アプリ) では .NET で、iOS および Android では Xamarinを使って、可能です。しかし、ここで重要なのは、C# および Visual Studio を使っていて、同じスキルを再利用して、同じ使い慣れた開発環境査さえ使って、異なる OS プラットフォームのネイティブアプリ開発ができる、という点です！

ダウンロードはこちらから！

Download page from MSDN Samples

鈴木章太郎

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

鈴木章太郎 — Mon, 19 Jan 2015 23:47:10 GMT

皆様、こんにちは！ちょっと遅くなり申し訳ありません。このシリーズ、次は、②番目として、ASP.NET 5 Web Apps and Services について、ご紹介していきます。

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

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

ASP.NET 5 and .NET Core 5 の概要については、こちらのブログエントリを見てください。

このブログエントリは、ASP.NET 5 Web アプリケーション開発についてのもので、MyShuttle.biz で実装された、異なるシナリオの中の2番目のポストとなります。ブログエントリのリストは下記の通りです: （追って順次日本語化していきます）

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)

最初のエントリ（上記1．URL）で書いた通り、いくつかのアプリケーションとサービスを ASP.NET 5 (codename “Project K”) ベースで開発しました :

- ASP.NET 5 MVC サイト - “パブリックな” Web サイトで、タクシー会社と顧客会社間の最初のエンゲージメントを行います。

- ASP.NET 5 Web API および SignalR サービスは、モバイルアプリと、Web SPA（Single Page Application)のバックエンドとなります。

- SPA (Single Page Application) - “プライベートな” Web アプリケーションで、タクシー会社の管理者が、タクシー車両や、ドライバー、その他のアセットw管理するために使います。

MyShuttle.biz ASP.NET 5 Web アプリケーションと Web API Services の設定

必要な環境

- Visual Studio 2015 Preview: ダウンロードはこちら

- Windows Azure Subscription: Azure トライアル版はこちら

Azure はオプションで、ASP.NET 5 Web アプリケーションのテストだけなら、なくても可能です。但し、Azure があった方が、ASP.NET 5 サービスの配置に役立ちます。特に、モバイルアプリをからこれらのサービスを利用する場合です（後述します）。

- MyShuttle.biz アプリケーション自体のダウンロードはこちら.

- 04_Demos_ASPNET5.sln という名前のソリューションファイルを開きます(拡張子を .sln に変更してください。MSDN の仕様で、サンプルソリューション内には、単一の .ZIP ファイル内に一つの.sln しか入れられないので、残りのソリューションは、.ZIP にアーカイブする前に rename したものです)。

- NuGet config: 当該 ASP.NET Web アプリケーションは、KRE BETA1 (Project K Runtime Environment Beta 1、すなわち ASP.NET 5 Beta 1) を使っているので、Visual Studio が正しい Nuget Feed を使用するように構成します : https://www.myget.org/F/aspnetrelease/api/v2

- Bing Maps config: 別途取得した Bing Maps key を、wwwroot>Scripts>Pages>config.js 内に代入します。

同じ Bing Maps key が必要となるのは、クライアントのモバイルアプリを設定するときでです。それをここで説明しておきますね。

Bing Maps key

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

はじめてのASP.NET 5：ASP.NET 5 Hello World

この Web アプリケーションの解説に入る前に、スクラッチからの ASP.NET 5 の開発方法について、ご紹介していきます。そこでまずは、”hello-world” アプリケーションの作成を通じて、Visual Studio 2015 でどのようにASP.NET 5 アプリケーションを開発するのかを体験し、その後に、MyShuttle.biz Web アプリケーションを解説していきます。

新しい ASP.NET 5 アプリケーション開発は、すでにお馴染みとなった ONE ASP.NET ダイアログから始まります。ファイル -->新しいプロジェクト --> Visual C# –>Web-->ASP.NET Web アプリケーション、と選択していくと,この ONE ASP.NET テンプレートを使用できます :

この見た目からも、新しい ASP.NET 5 テンプレートがいかに One ASP.NET ダイアログ体験に統合されているかわかるでしょう。他の残りのテンプレートは、伝統的な、ASP.NET 4.6 ベースのテンプレートを元にしています。

単一の ASP.NET 5 プロジェクトだけです。というのも、MVC, Web API そして SignalR は、一つのフレームワークに統合されたからです！
そこで、何も躊躇せずに、ASP.NET 5 Starter Web テンプレートを選び、開発を始めることができるのです。

Ctrl+F5 を押して実行してみると、 “外見上は”このアプリは典型的な ASPNET MVC の hello world アプリケーションです。

しかしながら、このプロジェクトには、新しい ASP.NET 5 テクノロジーに基づき、多くの新しい特長が付加されています。これらの新しい特長についてみてみましょう。.

フロントエンド Web 開発者 (HTML5、JavaScript、及び CSS) 向けのニュースと VS 2015 による Bower、NPM、Grunt、そして Gulp などのツールレベルのサポート

新しい ASP.NET 5 プロジェクトが、従来の MVC プロジェクトと、まず最初に異なる点は、ソリューションとプロジェクトの構成です。

例えば、ソリューション内の全てのコードは、 “src” フォルダーに格納されています。

もし、Unit Test 用のコードがある場合 (あった方が良いですｗ!) 、2番目のルートレベルのフォルダができて、名前は “test”となります。

これらの設定は、“global.json” ファイルによって、管理されます :

また、Web プロジェクト内に、新しいフォルダ、“wwwroot”が作成されます。

このフォルダは、静的なコードを含みます。例えば、JavaScript ファイルや、.CSS ファイルなどが該当します。自分のコンテンツディレクトリを編集することもできますし、 Grunt/Gulp も使えます(後程説明します）。 Grunt を使うと、自分のコンテンツをこの“静的フォルダ”にコピーすることができます。

しかしながら、Web 開発、特にフロントエンド Web 開発は、伝統的なバックエンド開発に比べて、大変複雑になりがちで、洗練されていることが多いです。多くのプロジェクトは、いくつかの JavaScript や CSS のファイルを FTP を使ってはアップロードしません。今は、フロントエンドのビルドプロセスがあり、これにより SASS と LESS の拡張や、CSS/JS ファイルの最小化、JSHint または JSLint の稼働、その他が可能になっています。これらのビルドタスクとプロセスは、Grunt のようなツールで統合されています。加えて、クライアント側のライブラリは、パッケージとして管理されます。これには、NPM とか BOWER のような管理システムを使います。

ここで重要な単語は何でしょう？それは、“自動化”です。より少ない工数で、しなければならないこと - 繰り返されるタスク、最小化、コンパイル、ユニットテスト、等-、が行えれば、より仕事は楽になります。

良いニュースでしょう？ Visual Studio 2015 には、Grunt、Gulp、Bower、そして NPM に対する、ファーストクラスのサポートが、あります!

すなわち、NuGet に加えて、Visual Studio は現在、2つの追加のパッケージマネージャを持ちます：

1. Bower、またはクライアント側パッケージ群 : Bower は大変 NuGet に似ていますが、特定のクライアント側のパッケージ（JavaScript ライブラリおよび CSS フレームワーク）に依存します。

2. NPM は、Node パッケージマネージャの一つで、Web 開発者ツールを管理するものです。NPM の依存家計はこんな感じです。

続いて、Bower.json を見てみましょう。これは、どのパッケージを使いたいかを決めるために必要なファイルです。

どのようにパッケージを決めるかにも、intellisense が有効です。

また、smart-tags があり、これを使ってパッケージのインストール、アンインストール、または更新、等を行えます。そのため、JSON エディタにはフルコントロール権限があります。

NPM ファイル (package.json) に関しては、似たような intellisense 有効という特長があります。

このように、Visual Studio 2015 と ASP.NET は自動的にパッケージの復元を可能にします。したがって、ソリューションを開いたときに、全ての Bower および NPM パッケージ群は、復元されますので、ソースコントロールシステムでそれらをチェックする必要はありません。

Task Runner Explorer in MyShuttle.biz ASP.NET 5 demo apps

“04_Demos_ASPNET5.sln” という名前のソリューションを (拡張子を“.sln” にしてから)開いてください。

NuGet の依存関係が回復されるまで、しばらく待ちます。

MyShuttle.Web プロジェクトをスタートアッププロジェクトに変更します。

同じ手順を、以下のソリューションについて、行います。

ASP.NET 5 サーバー側に入っていく前に、その他のVisual Studio 2015 の新しいツールについて、掘り下げましょう。それは、Task Runner で、クライアント側における Grunt、Gulp 等がクライアント側のビルドプロセスタスクに使われるのと同じような関係です。

この Task Runners を、クライアント側コード用の MSBuild と比較することもできます。 LESS と SASS、または CoffeeScript もしくは TypeScript、バンドル化と最小化を他のクライアント側タスクと同じようにできます。

そこで、Visual Studio では、現在、TASK RUNNER EXPLORER が追加され、Grunt および Gulp 両方をサポートします。

これは自動的に全ての異なるタスクをリスト化します。それらのタスクは、各プロジェクト向けに定義されます (この場合、MyShuttle.biz プロジェクト群、Grunt 使用)。

Visual Studio 2015 で、View –> Windows—>Other Windows—>Task Runner Explorer とポイントすると、どのような設定をしたかを確認できます：

そして、各々のタスク（例えば“jshint”）をダブルクリックするだけで、その場で結果が Visual Studio 内で確認でき、コマンドラインウィンドウで確認する必要はありません :

また、複数の異なる Grunt/Gulp タスクを、Visual Studio イベントで接続することができます。例えば、Visual Studio でコンパイルをした後に、それをセットすれば、どの Grunt タスクでも実行できます(下図のケースでは“jshint”）。ここでは、下図の通り Build event の後に設定しています。

そして、このソリューションをビルドすると (Ctrl+Shift+B) 、Grunt が起動され、Grunt build タスクを自動的に行っていることがわかります。

So this VS tooling makes it easy to use the most popular client side frameworks within having to leave Visual Studio!

ASP.NET 5: サーバー側！

それではここから、もっとも ASP.NET 5 が重要な箇所、サーバー側に行きましょう！

ASP.NET 5 は、.NET Core 5 をベースにしています(コードネームは Project K)。特長は、より速い起動時間と、より低い必要メモリと高いサーバーdensityなので、低レベルのソケットも使え、ハイレベルの Web コンポーネントを使って開発でき、片方又は双方を享受できます。ASP.NET 5 は、サーバーやクラウドのワークロードに最適化されています。
ASP.NET 5 アプリケーションは Visual Studio で開発できるのに加えて、他のサードパーティー製のエディタ、またはクラウド上のエディタで開発できます。そして、 ASP.NET 5 は、オープンソースで、クロスプラットフォームで動作します。これこそ、皆が待ち望んだものでした！

ここから、新しいサーバー側のテクノロジーを、MyShuttle.biz のサーバー側 Web アプリケーションとサービスを使って説明していきます。これらは、モバイルアプリのバックエンドとなるものです。
ソリューション名を変更して、04_Demos_ASPNET5.sln としてから、Visual Studio 2015 で開いてみてください。

さて、ここで全ての Web アプリケーションのコードは、1つのプロジェクトに含まれているのがわかります (たとえば、MyShuttle.Web プロジェクト)、しかし、複数のプロジェクトを持っていると、特定のコードエリアを明確な場所に格納できます。これは関心の分離と呼ばれることで、レイヤー分けの原則（Martin Fowler 's Layering Principles）です。例えば、MyShuttle.Web プロジェクトはWeb サイトアプリに関する一切の関心を持っています。そして、フロントエンドの SPA(Single Page Application）は HTML5 と JavaScript にフォーカスしています。

他方で、全ての展開された Web API コントローラー群は、分離されたライブラリに格納され、MyShuttle.API とされています。全ての Web API コントローラー群を同じ MyShuttle.Web プロジェクトに、入れようと思えば入れておけるのにも拘らず、です。

そして、特定のライブラリで全てのインフラストラクチャーデータのパーシステンスのコードもあります(リポジトリ、等) 。これは Entity Framework 7 に関連するもので、そして付加的でシンプルなライブラリが entity data-model として提供され、これは POCO entity クラス群を基にしています。

先に進んで、もし開発中のアプリが多くのドメインロジックを持っていたとしたら、たぶんアプリをデザインするのに、さらにドメイン駆動デザインアプローチで行うことでしょう。この場合には当てはまらず、MyShuttle.biz デモアプリケーションは、極めてシンプルでかつまさに データ駆動と CRUD 処理を志向したものです。

さて、“MyShuttle” MVC アプリケーション (パブリック Web サイト) を Ctrl+F5 を押して、実行しますと、初回は少しだけ起動時間が長いかもしれません。その理由は、SQL Server 2014 LocalDB database を“その場で” 作成し、いくつかのサンプルデータを挿入しているからです。こんな感じになります :

このアプリケーションは、モダンな Web サイトで、レスポンシブな UI を持っています。したがって、ブラウザのサイズが変わった時にそのレイアウトがどう変わるかを確認できます。

生成されたデータベースを見てみましょう。Visual Studio からは、このように接続できます :

挿入されたデータは、Visual Studio 2015 上で確認することができます(もちろん、SQL Server Management Studio でもOK):

しかし、このデモアプリは、シンプルな Web サイトで MVC で作られています。ログインすると、またその中にプライベート Web アプリケーションがあります。そしてこれは、タクシー会社の管理者によって管理されています。このアプリは、SPA (Single Page Application) として構成され、大変大規模な JavaScript、 Angular.js、そして利用する ASP.NET 5 Web API サービス（ローカルまたは Azure WebSites 上にデプロイ済み）から構成されています。

この SPA プライベート Web アプリケーションの認証方法は、極めてシンプルで ASP.NET Identity に基づきます。ログインのリンクから、下記のクレデンシャル情報を入力してみてください :

User: carrier

Password: P2ssw0rd0)

ここで気づくのは、全てのページがロードされたときに、異なるセクション間（Drivers ←→ Vehicles ←→ Rides）を移動しても、ラウンドリップが全くないことです。バックグラウンドで、JavaScript が動いてリモートの ASP.NET 5 Web API サービスを呼び出しています。

NuGet packages, References and .NET Frameworks

ここで、.NET とサーバー側と Visual Studio に話題を移します。

この新しい ASP.NET 5 の世界では、全ての .NET フィーチャーは NuGet パッケージとしてリリースされます。

それがわかるのは、このアプリを異なるフレームワークから起動可能だからです。依存関係を .NET および .NET Core パッケージに持っているからです。

プレーンな “ASP.NET 5” アプリケーションは、フルバージョンの .NET Framework 4.6 とレギュラー版の CLR 上で稼働します。

”ASP.NET Core 5” runs on top of .NET Core 5.
ここで重要な強調しておきたい点は、単体の ASP.NET 5 framework で .NET Framework 4.6 スタックのトップ上で動くものと、より小さくて新しい、そしてよりシンプルな .NET Core 5 で動くものがあるということです。
※ 前にも書きました通り、さらに詳細を知りたい場合には、以前にポストしたこちらのブログエントリをご参照ください : What is .NET Core 5 and ASP.NET 5 within .NET 2015 Preview

※ また、Publickey 新野さんにこのあたりを纏めて戴いたブログも大変有用ですので、こちらもぜひ併せてご参照ください！

オープンソース化され、MacOS XとLinuxに対応する「.NET Core」とは何か？

しかし、メニューオプションに移動して、依存関係を管理しようとすると、できることは自分の作ったプロジェクト群のソリューション内での依存関係の管理だけです。直接外部のアセンブリやDLLを参照することはできません！

これはなぜかというと、この新しい ASP.NET 5 “Unit of measure” for the external .NET dependencies は、NuGet パッケージをベースにしているからです。NuGet こそがメインストリームなのです！

したがって、”Nuget パッケージの管理” から外部依存関係は管理しなければなりません。

そして、新しい NuGet 管理画面は、このようになっています。様々なソートや検索、フィルタリングができます :

しかし、最もここで重要なことは、IDE からできるすべてのことは、ファイルエディタからもできるということです。同じことをファイルエディタを使って行うことができ、実際、当該 NuGet パッケージで依存しているものは、project.json ファイルに記述されています。

この ASP.NET 5 プロジェクトで、レギュラーの .NET Framework 4.6 の CLR 上または .NET Core 5 の Core CLR 上の指定できます。

ターゲットとするランタイムまたはフレームワークを変更することが可能です(.NET Framework 4.6 または .NET Core 5) 。これは、IDE を使って、ソリューション内の各プロジェクトのプロパティを開いて行います :

Running the MyShuttle.biz ASP.NET 5 web applications and Web API Services on .NET Core 5 and the Core CLR.

MyShuttle.biz Web アプリケーションと .NET Core 5 および Core CLR サービスは実行可能です。これは、MyShuttle.biz ASP.NET 5 アプリケーションとサービスを開発時には、.NET Core で使えないどんなライブラリも使わない、と分かっていたからです。したがって、Target KRE-CLR バージョンを下記のすべてのプロジェクトに変更すると (全てのプロジェクト/依存関係は当該フレームワークにしたがって同期する必要があります)、これを .NET Core 5 上で実行可能なはずです。

そこで、各々のプロジェクトのプロパティを選択して見ましょう。Application tab から行います :

- MyShuttle.Web project–> KRE-CoreCLR-x86.1.0.0-beta1

- MyShuttle.Model project–> KRE-CoreCLR-x86.1.0.0-beta1

- MyShuttle.Data project –> KRE-CoreCLR-x86.1.0.0-beta1

- MyShuttle.API project –> KRE-CoreCLR-x86.1.0.0-beta1

しかしながら、言っておきたいのは、この試みのゴールの一つは、NuGet パッケージを参照のプライマリユニットにすることでした。そこで、シナリオの一つが、この機能を使って NuGet パッケージに依存させ、そして、後にソースをクローンして自分のプロジェクトに導入することです。もちろん、プロジェクトには何の変更も加えずに、です。これができれば、画期的にデバッグのフリクションは減らせますし、ソースとして提供できるライブラリをフィックスすることもできます。

例えば、自分のマシンで、C:\Users\[user]\.kre\packages\KRE-CoreCLR-amd64.1.0.0-beta1 を見てみてください。ここには、.NET Core 5 ふれーむわーくがあり、単一の NuGet パッケージのようになっています！約 15MB のファイルに、全ての .NET Core 5 フレームワークとランタイムが入っています！:

KRE-CoreCLR フレームワーク NuGet パッケージをブラウズするには、NuGet package explorer を使います。mscorlib.dll または異なる “k” ライブラリ群が見えます :

しかしながら、これは NuGet パッケージとそのライブラリに関してだけではありません。2番目のもっとも重要な互換性に関するニュースは、当該フレームワークがアプリケーションの一部をスキップすることができ、また、それ故に、真のサイドバイサイドの実行を行うことができる、ということです。ちょうど、２つの異なるバージョンの CLR 上で動くアプリケーションが、同じサーバーの上で SxS を実行でき、それは総合に干渉しないというような形です。

これにより、ゼロデイのセキュリティバグでマイクロソフトがパッチを出しているものでは、同じコードを開発環境と製品環境で実行し、開発者がオプトインで新しいバージョンを組み込むことができ、異なるアプリケーション間での大きな変更が許容されることになります。

Unified MVC/Web API controllers and out-of-the-box Dependency Injection

少し掘り下げて、ASP.NET5で書くことができる新しいコードについて、解説していきます。

これは、C# のコードで、この Web アプリの HomeController です。

この ASP.NET Controllers を統合しました。これは、MVC で使われようが Web API で使われようが同じクラスタイプなのです。さらに言えば、これらのコントローラーは、慣例により、POCO (Plain Old CLR Object) コントローラーになり得ます。そこで、見て戴いてわかる通り、これは何もベースクラスは持っていません。これがコントローラーベースクラスから派生するものだとしてもです。

どれかの Web API コントローラーを開いてみましょう。MyShuttle.API にあるものです(これらはもちろんWeb プロジェクトと同じフォルダに配置することもできます。この点は前述した通りです）。この場合、コントローラーのベースクラスの利用を強制されますが、それは統合されたベースクラスで、MVC コントローラーにも、Web API コントローラーにも使えます。

これらのコントローラーの内部では、SQL Server データベースまたは Azure SQL データベースにアクセスするコードを実装しています。これはリポジトリクラスである LINQ to Entities と Entity Framework インフラストラクチャーコードを使用しています。例えば、_vehicleRepository.GetAsync() メソッドがその例です。

最後に、このコントローラー群がどのように統合されているかは、Startup.Routes.cs ファイルを Web プロジェクトの中から開けばわかります。ここには、ルートの定義がされており、それは通常の MVC コントローラーか、または、Web API コントローラーかに関わらず、現在はシンプルに同じ種類の“コントローラー”として異なるMap Route とともに書かれているのがわかります。

Dependency Injection（依存性の注入）については、現在は、out-of-the-box Dependency Injection in ASPNET 5 が利用されています。このケースでは、使われているのは、Constructor based DI であり、これを使ってリポジトリを注入し、property based DI を使って IUrlHelper と ViewDataDictionary を注入します。内部的には、ASP.NET は basic IoC コンテナをフィーチャーしますが、自分の好みの IoC コンテナを使えば良いことになります。例えば、AutoFac や Ninject などがあります。

この Dependency Injection Registration code は、MyShuttle.biz ASP.NET プロジェクトの中の、Startup.Dependencies.cs にあります。

これを見ると、例えばアプリケーションコードが（コントラクタまたはプロパティの中で）ICarrierRepository およびその他のタイプのオブジェクトを呼び出した時はいつでも、IoC コンテナは、CarrierRepository およびその他のタイプ/クラスのオブジェクトを生成するだろうということがわかります。

そして、この “タイプの登録” タスクメソッドである、ConfigureDependencies() は、グローバルの Startup.cs から呼び出されます。

しかし、この新しい世界において、DI に関して最も重要なことは、ASPNET 5 はネイティブに Dependency Injection を使ってビルドして実行し、それが全てのスタックにわたっており、それ故に簡単に異なるランタイムに変更することができること (CLR から Core CLR、またはその逆) 、またASP.NET を異なる OS (Windows, Mac, Linux) 上で極めて明白に動かせることです。

“Edit C# code, sabe .cs file and refresh the browser”: No explicit compilation!

更にここで紹介したいのは、より速い開発体験を、伝統的な開発体験に比べより低いフリクションしかないコンパイル時間で行えるということです。このアプローチが同時に許容するのは、シンプルなエディタでの開発体験に近いものであり、それはアプリケーションが実行されるときに暗黙のコンパイルが走るということです。

プロジェクトフォルダに行って、bin\Debug フォルダを見ると、何も明示のコンパイルされたアセンブリがないことがわかります。例えば、プロジェクトメニューを右クリックして、“エクスプローラーでフォルダを開く” を選ぶと、プロジェクトフォルダの実体が開けます。そこから bin\Debug に移動します。

空っぽです。コンパイルされた DLL などはありません。

しかし、デバッグなしで Ctrl+F5 でアプリケーションをじっこうすると、MVC アプリケーションがブラウザ上でうごきます。チェックするまでこのブラウザは落とさないでください :

HomeController に戻り、C# のコードの中で、“The Ultimate B2B Shuttle Service Solution” と書いてある文字列を適当な文字列に変更します。たとえば、“Cool C# change with no explicit compilation!”とかでも良いでしょう。

そして、ブラウザでリロードしてみてください。

なぜ数秒でロードされるのか、といえば、このプログラムは .NET Compiler Platform (“Roslyn”) で、“server side”でコンパイルされるからです。しかし、この場合コンパイルするに値すると考慮されるのは、C#コードの変更のみで、単なる文字列の変更は考慮されません :

もう一度、\bin\obj フォルダをもう一度見てみても、やはり何もなく空っぽのままです！

もちろん、 DLLs の比較をして、適切な当該バイナリ―をサーバーに送ることもできます :

そこでリコンパイルすると、当該アプリケーションのためのNuGet パッケージが出来上がります :

そして、特定のアセンブリでフレームワーク/ランタイムに依存しているもの (.NET 4.6 または .NET Core 5)も出来上がります :

しかし、“明示でない=黙示のコンパイル”の特長は、アジャイル開発環境を志向していて、そこでは C# コードをどんなエディターでも編集することができるのです (Visual Studio, Sublime 3 Text, Emacs, Notepad, 等)。これは、オンラインブラウザベースのエディタ、例えば Monaco または他のエディタでも、それがどんな OS 上で動いていたとしても（Windows でも Mac でも Linux でも）可能です。C# コードを編集できます！

How to deploy MyShuttle.biz ASP.NET 5 Web/Services to an Azure Web Site

最後のステップとして、特にここでは, Web API サービスを MyShuttle.org モバイルアプリのバックエンドとして再利用したい場合、この Web アプリケーション/API を、Azure Web Sites にデプロイすることです。

プロジェクトを右クリックして、“発行(Publish)” を選択します :

Azure Subscription のクレデンシャルを入力して認証した後、ウィザードが立ち上がり、“New” ボタンを押して、新しい Website を作成することができます :

このWebsite の名前を、ここでは myshuttlebiz.azurewebsites.net としています。（※名前は適宜変更してくださいね！）

Azure SQL データベースをここで作成するか、データベースをデータベースサーバーから、Azure Management Portal 作成するかは、どちらでもOKです。

ここでは、明確に Azure データベースを Azure Management Portal でサーバーから作成するのがお薦めで、それにより、より意味のある名前をサーバーにつけることができるからです。例えば、 “hdkjmgwm1i” 等に比べて :)。しかし、もっとステップを減らすため、ここでは、Visual Studio からダイレクトに作成することにします。

重要な事は、Azure SQL データベースサーバーの名前、ユーザー名、パスワードを、知っておく必要があることです。

“Create” ボタンを押して、プロファイルの変更を承諾したら、下記のようなダイアログが出てきます。これは単純に Azure web site に接続できるように順番に情報を入れるだけです。

“Next” をクリックすると下記のようなダイアログが出ます :

このダイアログボックスで、どの.NET framework を使いたいのか、.NET Framework 4.6 (KRE-CLR-xxxxxx) なのか .NET Core 5 (KRE-CoreCLR-xxxxxxx)を決定します。

この場合、デフォルトオプションなので、KRE-CLR-x86.1.0.0.-beta1 が選択されるということになります。

************************************************************************************************

IMPORTANT!!!

CONNECTION STRING CONFIGURATION IN “PROJECT K” and AZURE WEB SITE APP SETTINGS

ここで、“Publish” はクリックしないでください！ (もししてしまうと、Azure 内の接続文字列の設定をしてアプリケーションのリロードをしなければなりません)

************************************************************************************************

この ASP.NET 5 Web アプリケーションを Azure にデプロイする前に、ASP.NET 5 サイトが使う予定の connection string を更新しなければなりません。

このコンフィグレーションは、ASP.NET 5 (Project K) で、これは ASP.NET 5 より以前の伝統的な ASP.NET と Entity Framework とは異なります。

そこで、ASP.NET 5 (codename Project K) では、コンフィグレーションは、Environment Variables に基づいていますので、それは Windows Server にデプロイする場合も、Microsoft Azure にデプロイする場合も、同じように動きます。これは大変素晴らしいニュースで、部分的には、オンプレミスとクラウドの場合にも同様なのです。それでは、どう変えればいいのでしょか？

この場合の、Connection String で、開発環境で SQL Server LocalDB に繋がっているものは、config.json ファイルに書かれています。ちょっと見てみてください：

このConnection String は、当然ながら Local SQL Server の localDB をポイントしてますので、このままでは、Azure 上にデプロイした場合には、動きません。

しかし、このファイルを変更する必要はないのです。一番良いスマートなやり方は、Azure Web Site の Configuration を、Azure Management Portal 上で更新することです。そうすれば、このプロパティセッティング（config.json）をオーバーライドしてくれます。

そこで、発行を行う前に、Azure Management Portal で Web Site 設定の画面に、移動します。そして、Web Site SETTINGS—>Application Settings で設定できます（古いポータルでも新しいポータルでもOKです）。ここでは、新しい Azure portal を利用しています :

その中の、Application Settings を、App settings セクションから検索します :

ここで、新しいキーバリューのペアを入力する必要があります。基本的には下記の通りです :

KEY: EntityFramework:MyShuttleContext:ConnectionStringKey

VALUE: data source=YOUR_SERVER_NAME.database.windows.net;initial catalog=YOUR_DATABASE_NAME;persist security info=True;user id=YOUR_USER_NAME@YOUR_SERVER_NAME;password=YOUR_PASSWORD;MultipleActiveResultSets=True

Where:

YOUR_SERVER_NAME == Your Azure SQL DB Server name

YOUR_DATABASE_NAME == Your Azure SQL DB database name

YOUR_USER_NAME == The user name you chose when creating the Azure SQL DB database

YOUR_PASSWORD == The password you chose when creating the Azure SQL DB database

そして、このような形になるはずです :

(オプション / チェック): もし、Azure SQL データベースに正しく接続できているか確かめたい場合には、 SQL Server Management Studio を使うとよいでしょう。

しかし、Azure の外からツール (SQL Server Management Studio または Visual Studio)で接続する前に、下記のルールを設定しておく必要があります。例えばこんな感じです :

単一の IP でも全ての IP でもOKです。この場合、全ての IP について設定しています。

これをやっておけば、自分のマシンの SQL Server Management Studio から、Azure SQL データベースに接続して、サーバーやデータベースの状態を見ることができます。

下記は、Visual Studio Server Explorer から接続する場合です。この場合、最初のクラウド上の実行の回までは、まだデータベースにデータが入っていませんので、その点に注意してください。

いちど Connection String が Azure 上の Web Site app settings で決まれば、“Next” をクリックして、Visual Studio からこの Website を”Publish”してください。Visual Studio は、ソリューションをコンパイルして、Azure へのデプロイを開始します :

You can Check how it advances with the “Web Publish Activity” window in VS:

終了するとこんな感じです :

そして、クラウド上から実行した MyShuttle.biz サイトが立ち上がりました。Microsoft Azure Web Site 上で実行されています！

もちろん、このサイトは、たんなる MVC サイトではなく、全ての Web API サービスと Single Page Application を、ログイン後にテストすることできます。

次は、MyShuttle.biz モバイルアプリ(Universal Windows Apps for WP、Windows ストアアプリ、そして Xamarin Apps for iOS、および Android) の概要とテストに移ることができそうです。これら全てのアプリは、どういうつの（今回構築した）ASP.NET 5 Web API サービスを利用します。

これで、ASP.NET 5 (codename Project K) と、MyShuttle.biz Web アプリケーションとサービスの説明は終わりです。

ダウンロードはこちらから！

Download page from MSDN Samples

鈴木章太郎

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

鈴木章太郎 — Mon, 19 Jan 2015 11:41:06 GMT

皆様、こんにちは！

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

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

このブログエントリは、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

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)

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 サンプルページより、ダウンロードしてください。

それでは、また次のエントリまで！

鈴木章太郎

Xamarin.FormsとDynamics CRM Online との接続サンプル（Cortanaベースも含む）アプリ公開 on Github/MSDN

鈴木章太郎 — Tue, 06 Jan 2015 17:32:27 GMT

皆様、本年もどうぞよろしくお願いします。

さて、表題の件、最新のサンプルが公開されていますので、こちらをぜひご覧ください。

iOS 版

iOS Activity Tracker Sample app for Microsoft Dynamics CRM

https://github.com/DynamicsCRM/iOS-Activity-Tracker-for-Dynamics-CRM

このネイティブアプリは、Objective-C と XCode を使って開発されています。

Android版

Android Activity Tracker Sample app for Microsoft Dynamics CRM

https://github.com/DynamicsCRM/Android-Activity-Tracker-for-Dynamics-CRM

こちらは、Java と Android Studio を使って開発されています。

Windows Phone 版-1

Activity Tracker Sample app for Dynamics CRM

https://code.msdn.microsoft.com/Activity-Tracker-Sample-c8da7a1e

こちらは、C# と Visual Studio で開発されています。

Windows Phone 版-2

Activity Tracker Plus Sample app for Dynamics CRM

https://code.msdn.microsoft.com/Activity-Tracker-Plus-f62d80a5

このアプリの特長は、Cortanaカスタムボイスコマンドを、このActivity Tracker のシナリオのトップに入れたことです。このアプリでは、音声ベースの検索と、アクティビティへの’チェックイン’をキーボードを使わずに行えること、がフィーチャーされています。スタート画面にコンタクト先をピン止めすることも可能です。

いずれも簡単なサンプルではありませんが、業務アプリとしては参考にして戴けるのではないかと思います。Mobile Development Helper Code for Dynamics CRM.なども必要になってきますし、Active Directory Authentication Library（ADAL）の使い方も紹介されています。

それでは、また！

鈴木章太郎

Xamarin と Apache Cordova と Office 365 API を使ってマルチデバイスアプリを作ろう ①

鈴木章太郎 — Thu, 11 Dec 2014 16:40:56 GMT

皆様、こんにちは！

こちらは、Qiita の Xamain Advent Calenderの一つとなる予定です（遅くなりすみません…）。このテーマは、かなり広い領域にわたるので、このエントリーをきっかけに、個別の要素について書いていこうと思っています。その意味で、①ということで、ご了承くださいませｗ

さて、皆さん既にご存知の Visual Studio 2015 Preview ですが、既に使ってみたよという方も多いと思います。私は、個人的には、なんといっても Android エミュレーターが一番気に入りました。非常に速いですし、デバッグ実行してても気分が良いですね。

この辺りの関連情報は、エクセルソフト田淵さんが既に先月中旬に書かれていますので、是非ご覧ください。

Visual Studio Emulator for Android のインストール方法と使い方そのものの詳細については、渡辺友太の該当 Blog エントリが詳しいです！

Visual Studio におけるマルチデバイスアプリ

選択肢としては、以下の2つを準備しています。

Visual Studio には２つの強力なマルチデバイスアプリ開発のためのオプションがあります。それが Cordova と Xamarinです。Cordova が Visual Studio でサポートされることにより、HTML5/JavaScript で書かれたアプリを開発できるのに対し、Xamarin が Visual Studio でサポートされることにより、iOS、Android、そして Windows / Windows Phone のアプリを、すべて C# で開発できます。

このシリーズの中では、Microsoft Office 365 API をどうモバイルデバイスアプリ開発の中で使うか、特に Office 365 の中の多くのサービスを利用するためのビルトインされたプロジェクトタイプ等について、書いていきます。

また、Office 365 API を使うことにより、次に列挙するようなサービスを使うことができます。Microsoft Azure Active Directory、ユーザーとグループ、ファイル (OneDrive および OneDrive for Business)、メール、カレンダー、コンタクト、そして SharePoint サイトなど、です。これらを使った、Xamarin および Cordova のアプリの実サンプルをご紹介していきます。最終的には、Office 365 API を Xamarin や Cordova のVisual Studio Projects でどう使うかという話ですね。

Azure Active Directory Authentication Library（ADAL）for Xamarin

まず最初に把握しておく必要があるのは、 Xamarin iOS プロジェクトと Xamairin Android プロジェクト用の Azure Active Directory Authentication Library (ADAL) です。現在のところ、例えば Xamarin Android プロジェクトの中でサポートされている ADAL の使い方は、Xamarin binding をビルドして ADALのネイティブ Android Library を利用することです。

Binding a Java Library（Xamarin Binding）

ADAL SDK for Android

（参考）ADAL SDK for Objective C

生成されたバインディングは特定の Android プロジェクトから参照され、これによりOffice 365 API リソースにアクセスするための認証とそのためのトークンを取得することができます。

ADAL 開発チームは、Xamarin プロジェクトに対して、さらに多くのサポートと多くの機能追加を考えているようです。しかし、それまでは、Xamarin binding が、ADAL ライブラリのビルドと Android project に必要です。ここから ADAL v3.0 preview をダウンロードできます。もし次のバージョンに興味があれば是非ご覧ください。ADAl v3.0 は、PCL になっていて、まもなく Xamarin Android と Xamarin iOS プロジェクトでサポートされるかと思います。しかしながら、まだ ADAL v3.0 はプレビューなので、製品に使うのはお勧めできません。一応、ここに、 ADAL v3.0 preview を使ったサンプルがあります。

次の ②では、Xamarin Bindings プロジェクトのビルドの手順と、その Xamarin Android からの参照をやってみたいと思います。

それではまた！

鈴木章太郎

Schoo 授業 (11/27) のMobile Services 部分の補足：Project Siena でアプリ開発！エクセルやパワーポイントの知識でWindows タブレット対応アプリを作ってみよう！

鈴木章太郎 — Thu, 11 Dec 2014 11:44:45 GMT

皆様、こんにちは！

だいぶ MSDN Blog の方が間が空いてしまいましたが、また書いていきたいと思います。よろしくお願いします！

さて先日のSchooの授業は、多くの方に視聴して戴いてありがとうございました。

https://schoo.jp/class/1612

こちらにビデオもありますしスライドもありますが、一点だけ、補足させてください。

まず、チュートリアル資料は、このスライドにもありますが、こちらにあります。ぜひダウンロードしてください。

https://1drv.ms/1C7fTKy

補足としては、主に、Mobile Services との連携の部分です。

1. Mobile Services の作成
ここで、Azure のダッシュボードにサインインします
https://manage.windowsazure.com/

モバイルサービスを表示して「＋新規」をタップします。

「作成」をタップします。

ユニークな URL を入力し、東京又は大阪の日本リージョン、あるいは東アジアリージョンを選択して、をタップします。

次にSQLデータベースを設定します。

で、ここがポイントですが、テーブルの追加をタップして以下のテーブルを作成します。これがないと、Project Siena のアプリからみて、Mobile Services の対象テーブルが認識できませんので、必ず作ってください。

それぞれのテーブルを開いて、id 列以外を削除します。あとは、SQL データベースを開いて、作成した DB 名を選択します。

SQL データベースの設計をタップして、

ユーザ名とパスワードを入力してログオンし、設計を行います。

テーブルの編集で以下列名を設定します。

zz_ config テーブルに以下のデータを入力します。

テーブルに、最初の演習で使った Items.xlsx と同じデータを入力して、終了です。

あとは、Mobile Services の URL と、アプリケーションキーをコピーして、Project Siena に張り付けてみてください。

Project Siena も、11月の更新版では、Office 365 APIとの連携が強化され、Microsoft Azure Active Directory との緊密な連携もされています。

ますます強化されそうですので、この機会にぜひ触ってみて戴ければと思います。

それではまた！

鈴木章太郎

Microsoft Azure Mobile Services in ASPIC クラウドフォーラム 2014 ～クラウドが創発する新たなビジネス領域～ on 9/17

鈴木章太郎 — Wed, 03 Sep 2014 01:56:14 GMT

皆様、こんにちは！

9月17日、私も長らく執行役員を拝命させて戴いている、ASPIC（ASP, SaaS, Cloud コンソーシアム）主催のクラウドフォーラム2014が、霞ヶ関コモンゲートにて開催されます。

こちらで、30分程度の短い時間ではありますが、午後一のセッションで、Microsoft Azure Mobile Services と Xamarin とでマルチデバイスの開発をご紹介したいと思います。この団体は、総務省系なので、午前中はまず、総務省政策統括官の南俊行氏の特別講演があり、その後、KMD 特別招聘教授夏野剛氏の基調講演を終えた後に、午後のブレイクアウトトラックが4つ並行で開催され、そのうちの一つの先端クラウドトラックの最初になります。

もしかしたら、もう締め切られているかもしれませんが、もしご来場いただく予定がおありの方は、是非ご覧ください。デモなどは、こちらでまた事後にでもご紹介できればと思っています！

それではまた(^^)/

鈴木章太郎

Windows 8 アプリとデータベース/サービスとの連携 – ③ Windows ストアアプリとの連携（C#/XAML）

鈴木章太郎 — Tue, 02 Sep 2014 18:51:44 GMT

皆様、こんにちは！引き続き、9/2(火) タッチ/ペン対応アプリの開発とクラウドを活用した既存サービスとの接続方法のセミナーでの、私が担当したセッション ”Windows 8 アプリでのデータベース/サービスとの接続 “ の詳細情報とコードにつき、ご紹介していきたいと思います。最後にリソースとしてソースコードの置場等を入れてあります。

Windows ストアアプリの追加と Data Adapter の作成

次に、このタイムセール商品情報アプリケーションのソリューションに、Windows ストアアプリを追加してみましょう。最初に、DataAdapter を作成します。これは、この前に作成した、TimeSalesApp Web API にアクセスするための呼び出しのHttpclient クラスとなります。

ストアアプリの追加

TimeSaleソリューションを右クリックし、追加→新しいプロジェクトを選択します。新しいプロジェクトダイアログボックスで、左側のテンプレートを展開し、Visual C＃の Windows ストアアプリを選択し、右側の、新しいアプリケーション（XAML）を選択します。次のように指定してください。

・種類：新しいアプリケーション（XAML）（Visual C#）

・場所：他のTimeSaleプロジェクトと同じソリューションフォルダ

・プロジェクト名：TimeSaleStoreApp

プロジェクトを追加したら、まずはローカルマシンで実行します。黒い画面が立ち上がったらいったんアプリを落とし、Visual Studio に戻ってデバッグを停止します。このときのMainPage.xaml 画面は使わずに削除して、その後、新しい画面を追加します。

TimeSaleStoreApp プロジェクトを右クリックし、追加→新しい項目を選択し、基本ページを選択して、名前を、MainPage.xaml として追加、をクリックします。

この時に、このようなダイアログボックスが出ますので、はい、を選んで追加します。

※ これをしないと画面遷移等に必要な共通ファイル群（Commonフォルダ配下）が作成されないので注意してください。この共通ファイル群が必要です。

ProductWithPriceをリンクとして追加

まず、TimeSale クラスライブラリの中の ProductwithPrice.cs クラスを参照できるようにします。ソリューションエクスプローラーでプロジェクト TimeSaleStoreApp を右クリックし、追加→既存の項目、を選択します。そして、TimeSale フォルダにある ProductwithPrice.cs ファイルを選択し、リンクとして追加、を選択します。

Json.NET のインストール

ついで、Json.NET のインストールを行います。Json.NETは、ProductWithPriceデータクラスのインスタンスと、JSONの相互変換処理をするためのライブラリです。こちらは、NuGet から取得できます。これを使うのはWindows 8/8.1 ストアアプリにも対応しているためです。実際、Microsoft Azure Mobile Services のクライアントライブラリには、最初から標準でこのライブラリが含まれています。

ソリューションエクスプローラーでプロジェクト TimeSaleStoreApp を右クリックし、NuGet パッケージの管理を選択します。左側のオンラインを展開し、Newtonsoft で検索、NuGet公式パッケージソースを選択し、右側で、Json.NET を選択して、インストールボタンをクリックします。これでこのプロジェクトでJson.NETが使えるようになります。

DataAdapter の作成

次に、HTTP Clientを使って、DataAdapter すなわち TimeSaleApp API の呼び出し部分のコードを作成します。ソリューションエクスプローラーでプロジェクト TimeSaleStoreApp を右クリックし、追加→クラスを選択します。名前は、ProductsDataAdapter.cs として、クラスを追加します。この ProductsDataAdapter.cs を下記の通り実装します。

        1: using TimeSale;

       2: using System;

       3: using System.Collections.Generic;

       4: using System.Linq;

       5: using System.Text;

       6: using System.Threading.Tasks;

       7: using System.Net.Http;

       8: using Newtonsoft.Json;

       9: using System.Net;

  

namespace TimeSaleStoreApp

{

    class ProductsDataAdapter

    {

        //Web API の URL (ポート番号は適宜変更してください)

        const string serviceUri = "https://localhost:5922/api/TimeSaleApp";

  

        //全タイムセール対象商品の取得

        public static async Task> GetAllProductsAsync()

        {

            //HttpClient インスタンスを生成

            using (var client = new HttpClient())

            {

                // GETコマンドを非同期で実行

                var response = await client.GetAsync(serviceUri);

                if (response.IsSuccessStatusCode)

                // コンテンツの取得を非同期で実行する

                {

                    var jsonText = await response.Content.ReadAsStringAsync();

                    // Json 文字列を List に変換して返す

                    return

                       JsonConvert.DeserializeObject>(jsonText);

                }

                return null;

            }

        }

        // ProductwithPrice の取得

        public static async Task GetProductwithPriceAsync(int id)

        {

            //HttpClientのインスタンスを作成する。

            using (var client = new HttpClient())

            {

                //GETコマンドを非同期で実行する。

                var response = await 

                    client.GetAsync(string.Format("{0}/{1}", serviceUri, id));

                if (response.IsSuccessStatusCode)

                {

                    //コンテンツの取得を非同期で実行

                    var jsonText = await response.Content.ReadAsStringAsync();

                    //json文字列を ProductwithPrice に変換して返す

                    return JsonConvert.DeserializeObject(jsonText);

                }

                return null;

            }

        }

  

        // ProductwithPrice 内の検索

        public static async Task> 

                            SearchProductwithPriceAsync(string queryText)

        {

            //HttpClientのインスタンスを作成する。

            using (var client = new HttpClient())

            {

                //GETコマンドを非同期で実行する。

                var response = await client.GetAsync(string.Format("{0}?query={1}", 

                            serviceUri, WebUtility.UrlEncode(queryText)));

                if (response.IsSuccessStatusCode)

                {

                    //コンテンツの取得を非同期で実行

                    var jsonText = await response.Content.ReadAsStringAsync();

                    //json文字列を List に変換して返す

                    return 

            JsonConvert.DeserializeObject>(jsonText);

                }

                return null;

            }

        }

  

        // ProductwithPrice の追加

        public static async Task<int> AddAsync(ProductwithPrice ProductwithPrice)

        {

            //HttpClientのインスタンスを作成する。

            using (var client = new HttpClient())

            {

                //ProductwithPriceのインスタンスを json の文字列に変換する。

                var jsonText = JsonConvert.SerializeObject(ProductwithPrice);

                //Web API での POST を非同期で実行

                var response = await 

                    client.PostAsync(serviceUri, new StringContent(jsonText, 

                                Encoding.Unicode, "application/json"));

                if (response.IsSuccessStatusCode)

                {

                    //戻ってきた値から json を取得

                    var result = await response.Content.ReadAsStringAsync();

                    //json 文字列から ProductwithPrice に変換

                    var newProductwithPrice =

                        JsonConvert.DeserializeObject(result);

                    //id の値を元の ProductwithPrice に反映

                    ProductwithPrice.StoreId = newProductwithPrice.StoreId;

                }

                return (int)response.StatusCode;

            }

        }

  

        // ProductwithPrice の削除

        public static async Task<int> DeleteProductwithPrice(int id)

        {

            using (var client = new HttpClient())

            {

                //DELETEコマンドを非同期で実行

                var url = string.Format("{0}/{1}", serviceUri, id);

                var response = await client.DeleteAsync(url);

                return (int)response.StatusCode;

            }

        }

    }

ビルドして問題なければ、DataAdapter の作成は完了です。これで、Windows ストアアプリの作成 - Data Adapter の作成の箇所は終了です。

XAML の編集と GridView 追加・編集

アプリ名の変更

最初に、画面の左上に表示されるアプリ名の変更を行います。XAML エディタで MainPage.xamlを開くと、Visual Studio の左下のデザインタブと、XAML タブとで、表示を切り替えられます。ソリューションエクスプローラーで MainPage.xaml を開き、XAML タブをクリックすると、XAML のテキストが表示されますので、これを編集します。

MainPage.xaml の中の、My Application となっている箇所を、タイムセール商品管理に変更してみましょう。

       1: 

       2:         "AppName">タイムセール商品管理

       3:

ソリューションエクスプローラーで TimeSaleStoreApp を右クリックし、スタートアッププロジェクトに設定して、実行すると下記のようになります。

GridView の追加

商品情報リストを表示する部分を追加しましょう。GridViewコントロールは、データの集まりを、表形式で表示できる標準的なコントロールです。

MainPage.xaml 内のGridの定義の上に、下記のように1行追加します。

       1: ・・・

       2:  

       3: "ProductGridView" Margin="120,0,0,0" Grid.Row="1" />

       4: 

       5:             

       6: ・・・

GridView による商品情報リストの表示

この GridView を使って、商品情報リストを表示しましょう。

まずは、ソリューションエクスプローラーで、MainPage.xaml を展開し、XAML のエディタの領域のどこかで右クリックし、コードの表示を選択します。MainPage.xaml.cs 内の navigationHelper_LoadState メソッドを、下記のように実装し、メソッドの前に非同期呼び出しを意味する async を追加します。

       1: private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)

       2:  {

       3:      try  {

       4:         //全商品取得してそれをDataContextにする

       5:             DataContext = await ProductsDataAdapter.GetAllProductsAsync();

       6:     }

       7:     catch (Exception ex)  {

       8:                 var messageDialog = new Windows.UI.Popups.MessageDialog

       9:                 ("商品データが見つかりません。", "エラー");

      10:     }

      11: }

ついで、データを GridView にバインドします。これには、GridView の ItemsSource 属性でデータバインドを行います。GridView の ItemsSource に、MainPage.xaml.cs 内で DataContext に指定した商品情報のリストのデータバインドを行うことで、GridView での表示が可能となります。

MainPage.xaml のGridView の定義を変更し、下記の通り、ItemsSource 属性を追加します。

       1: "ProductGridView" 

       2:                 Margin="120,0,0,0" Grid.Row="1" ItemsSource=”{Binding}” />

これでビルドして実行すると下記のようになります。

各商品の表示方法を指定していないため、このままだと、TimeSale.ProductwithPrice というクラス名がデータ件数文表示されてしまいます。そこで、表示方法を指定します。

GridView による商品情報リスト表示のカスタマイズ

この GridView に、ItemTemplate を追加することにより、各商品の表示方法をカスタマイズできます。MainPage.xaml の GridView の定義を、下記の通り変更します。

       1: "ProductGridView" Margin="120,0,0,0" Grid.Row="1"  

       2:                                     ItemsSource="{Binding}">

       3:     

       4:         

       5:             "{Binding ProductName}" Height="250" Width="250"/>

       6:         

       7:     

       8:

これで、GridViewで表示される各商品データの商品名カラムのみがTextBlock で表示されます。再度実行すると、下記のようになります。

各商品の表示が変更されたことが分かります。もう少しきれいに成形してみます。下記のように DataTemplate の中にGrid を入れ、その中に TextBlock を配置する等、XAML を使って様々な要素を追加可能です。

       1: "ProductGridView" Margin="120,0,0,0" Grid.Row="1"  

       2:                                     ItemsSource="{Binding}">

       3:         

       4:                 

       5:                     "Left" Height="250" Width="250">

       6:                         "Blue">

       7:                             "{Binding ProductName}" 

       8:                                     Height="250" Width="250"/>

       9:                         

                        "Stretch">

                            

                                "Auto"/>

                                "*"/>

                            

                            

                                "50"/>

                                "50"/>

                                "50"/>

                                "50"/>

                                "50"/>

                            

                            "店舗名"

                                       Style="{StaticResource 

                                CaptionTextBlockStyle}"

                                       Margin="15,15,15,15"/>

                            "1"

                                       Text="{Binding StoreName}"

                                       Style="{StaticResource TitleTextBlockStyle}"

                                       Height="60" Margin="15,15,15,15"/>

  

                            "1" Text="売価"

                                       Style="{StaticResource 

                                    CaptionTextBlockStyle}"

                                       Margin="15,15,15,15"/>

                            "1" Grid.Column="1"

                                       Text="{Binding RetailPrice}"

                                       Style="{StaticResource TitleTextBlockStyle}"

                                       Height="60" Margin="15,15,15,15"/>

                            

                            "2" Text="価格変更理由"

                                       Style="{StaticResource 

                                    CaptionTextBlockStyle}"

                                       Margin="15,15,15,15"/>

                            "2" Grid.Column="3"

                                       Text="{Binding ReasonforChangePrice}"

                                       Style="{StaticResource TitleTextBlockStyle}"

                                       Height="60" Margin="15,15,15,15"/>

                            

                            "3" Text="売価変更時刻"

                                       Style="{StaticResource 

                                    CaptionTextBlockStyle}"

                                       Margin="15,15,15,15"/>

                            "3" Grid.Column="3"

                                       Text="{Binding PriceFixedDate}"

                                       Style="{StaticResource TitleTextBlockStyle}"

                                       Height="60" Margin="15,15,15,15"/>

  

                            "4" Text="担当者"

                                       Style="{StaticResource 

                                    CaptionTextBlockStyle}"

                                       Margin="15,15,15,15"/>

                            "4" Grid.Column="4"

                                       Text="{Binding Contact}"

                                       Style="{StaticResource TitleTextBlockStyle}"

                                       Height="60" Margin="15,15,15,15"/>

                        

                    

                

            



これで再度実行すると、下記のようになります。

このように、GridView の ItemTemplate をカスタマイズすることで、表示方法をカスタマイズできます。

DataTemplate のリソース化

この＜GridView.ItemTemplate> 配下のは、リソースとして、Grid の外においた方が、今後のメンテナンスにも便利です。そこで下記の通り、を、配下に移動します。このとき、x:Key 属性にキーを設定します。

       1: 

       2:     "AppName">タイムセール商品管理

       3:         "ProductsTemplate">

       4:             "Left" Height="250" Width="250">

       5:                 "Blue">

       6:                     "{Binding ProductName}" Height="250" 

       7:                                         Width="250"/>

       8:                 

       9:                 "Stretch">

                    

                        "Auto"/>

                        "*"/>

                    

                    

                        "50"/>

                        "50"/>

                        "50"/>

                        "50"/>

                        "50"/>

                    

                    "店舗名"

                                       Style="{StaticResource 

                                    CaptionTextBlockStyle}"

                                       Margin="15,15,15,15"/>

                    "1"

                                       Text="{Binding StoreName}"

                                       Style="{StaticResource TitleTextBlockStyle}"

                                       Height="60" Margin="15,15,15,15"/>

  

                    "1" Text="売価"

                                       Style="{StaticResource 

                                    CaptionTextBlockStyle}"

                                       Margin="15,15,15,15"/>

                    "1" Grid.Column="1"

                                       Text="{Binding RetailPrice}"

                                       Style="{StaticResource TitleTextBlockStyle}"

                                       Height="60" Margin="15,15,15,15"/>

  

                    "2" Text="価格変更理由"

                                       Style="{StaticResource 

                                    CaptionTextBlockStyle}"

                                       Margin="15,15,15,15"/>

                    "2" Grid.Column="3"

                                       Text="{Binding ReasonforChangePrice}"

                                       Style="{StaticResource TitleTextBlockStyle}"

                                       Height="60" Margin="15,15,15,15"/>

  

                    "3" Text="売価変更時刻"

                                       Style="{StaticResource 

                                    CaptionTextBlockStyle}"

                                       Margin="15,15,15,15"/>

                    "3" Grid.Column="3"

                                       Text="{Binding PriceFixedDate}"

                                       Style="{StaticResource TitleTextBlockStyle}"

                                       Height="60" Margin="15,15,15,15"/>

  

                    "4" Text="担当者"

                                       Style="{StaticResource 

                                    CaptionTextBlockStyle}"

                                       Margin="15,15,15,15"/>

                    "4" Grid.Column="4"

                                       Text="{Binding Contact}"

                                       Style="{StaticResource TitleTextBlockStyle}"

                                       Height="60" Margin="15,15,15,15"/>

                

            

        



GridViewの方は、下記の通り、ItemTemplate にこのリソースのキーを指定するだけです。

       1: "ProductGridView" Margin="120,0,0,0" Grid.Row="1" 

       2:                   ItemsSource="{Binding}" 

       3: ItemTemplate="{StaticResource ProductsTemplate}"/>

これで実行しても、変更前と同じように表示されることが確認できます。

アプリバーの追加とCRUD 処理実装

AppBarの追加

このアプリで、データの表示（読み取り＝R）はできるようになりました。それでは、データの新規作成（＝C）、そして削除（＝D）もできるようにしましょう。また後述する、共有コントラクトを使った共有処理も、このAppBarのボタンからできるようにしておくと便利です。そこでまず、AppBarを追加しておきましょう。

AppBar の追加には、ドキュメントアウトラインウィンドウからドラッグ&ドロップで追加する方法や、Expression Blend で追加する方法、等GUIを使った方法もありますが、今回は構造を知るためと、各種指定のために、XAMLエディタに直接書き込んでみましょう。下記の通り、先ほどのの下に追加します。

       1: 

       2:         

       3:             "addButton" Label="商品追加" Icon="Add" />

       4:             "removeButton" Label="削除" Icon="Remove" />

       5:             "shareButton" Label="共有" Icon="ReShare" />

       6:         

       7:

AppBar とAppBar ボタンがXAMLデザイナー画面に表示されるはずです。

これで実行するとこのようになります。

それぞれのボタンのイベントハンドラの実装

それでは、続いて、AppBarの各ボタンが押された時の処理を追加していきましょう。

まずは、XAMLデザイナー画面で、ドキュメントアウトラインウィンドウをポイントし、addButton を選択します。

プロパティウィンドウのタブを稲妻型のアイコンのイベントに切り替えます。そして、Click イベントの右のテキストボックスに、OnAddButtonClick と入力し、ダブルクリックします。

これでMainPage.xaml.cs 内にイベントハンドラが生成されます。

       1: private void OnAddButtonClick(object sender, RoutedEventArgs e)

       2: {

       3: }

同様に、removeButton にOnRemoveButtonClick、shareButton にOnShareButtonClick を入力して、設定します。

追加用ユーザーコントロールの作成と商品情報の追加処理の実装（OnAddButtonClick）

続いて、OnAddButtonClickのイベントハンドラ内の処理を記述します。まずは、追加用の簡単な入力フォームを、ユーザーコントロールとして追加します。

ソリューションエクスプローラーでプロジェクトTimeSaleStoreAppを右クリックし、追加→新しい項目を選択します。新しい項目の追加ダイアログボックスで、ユーザーコントロールを選択します。名前は、AddProductDialog.xaml として、追加ボタンをクリックします。

プロジェクト内に、AddProductDialog.xamlと、AddProductDialog.xaml.cs が追加されます。それぞれ、下記のように実装してください。

・AddProductDialog.xaml

       1: 

       2:     x:Class="TimeSaleStoreApp.AddProductDialog"

       3:     xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

       4:     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

       5:     xmlns:local="using:TimeSaleStoreApp"

       6:     xmlns:d="https://schemas.microsoft.com/expression/blend/2008"

       7:     xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"

       8:     mc:Ignorable="d" Height="300" Width="600">

       9:  

    "{StaticResource ApplicationPageBackgroundThemeBrush}">

        

            "Auto"/>

            "*"/>

        

        

            

            

            

            

            

            

            

        

        

            "  "/>

            "店舗名"/>

        

        "1"  x:Name="codeTextBox" Margin="5" />

        "1" Text="商品名" Margin="5"/>

        "1" Grid.Column="1"  x:Name="nameTextBox" Margin="5"/>

        "2" Text="売価" Margin="5"/>

        "2" Grid.Column="1"  x:Name="sellPriceTextBox" 

                                        Margin="5"/>

        "3" Text="価格変更理由" Margin="5"/>

        "3" Grid.Column="1" x:Name="priceChangeReason" 

                                        Margin="5"/>

        "4" Text="売価変更時刻" Margin="5"/>

        "4" Grid.Column="1" x:Name="priceChangeDate" Margin="5"/>

        "5" Text="担当者" Margin="5"/>

        "5" Grid.Column="1" x:Name="Contact" Margin="5"/>

        "2" Grid.ColumnSpan="2" Orientation="Horizontal" />

        

                                Margin="8,3,0,6" Grid.Row="6"/>

        

                            Margin="8,3,0,6" Grid.Column="1" Grid.Row="6"/>

    



・AddProductDialog.xaml.cs

       1: using TimeSale;

       2: using System;

       3: using System.Collections.Generic;

       4: using System.IO;

       5: using System.Linq;

       6: using System.Runtime.InteropServices.WindowsRuntime;

       7: using Windows.Foundation;

       8: using Windows.Foundation.Collections;

       9: using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

  

// ユーザー コントロールのアイテム テンプレートについては、https://go.microsoft.com/fwlink/?LinkId=234236 を参照してください

  

namespace TimeSaleStoreApp

{

    public sealed partial class AddProductDialog : UserControl

    {

        public AddProductDialog()

        {

            this.InitializeComponent();

        }

        public event Action ProductAddEnded;

        private void addButton_Click(object sender, RoutedEventArgs e)

        {

            if (ProductAddEnded != null)

                // 新しい Product を作ってイベント ハンドラーに渡す

                ProductAddEnded(this, new ProductwithPrice

                {

                    StoreName = codeTextBox.Text,

                    ProductName = nameTextBox.Text,

                    RetailPrice = sellPriceTextBox.Text,

                    ReasonforChangePrice = priceChangeReason.Text,

                    PriceChangedDate = DateTime.Now.ToString(),

                    Contact = Contact.Text

                });

        }

        private void cancelButton_Click(object sender, RoutedEventArgs e)

        {

            if (ProductAddEnded != null)

                // キャンセルの場合はイベント ハンドラーに null を渡す

                ProductAddEnded(this, null);

        }

  

    }

}

OnAddButtonClick の実装

次に、MainPage.xaml.cs 内のOnAddButtonClick メソッドの実装をします。下記の通り、実装してください。

       1: private void OnAddButtonClick(object sender, RoutedEventArgs e) {

       2:             // ダイアログの作成

       3:             var addProductDialog = new AddProductDialog();

       4:             addProductDialog.ProductAddEnded += OnProductAddEnded;

       5:  

       6:             // ポップアップの作成

       7:             var popup = new Windows.UI.Xaml.Controls.Primitives.Popup

       8:             {

       9:                 Child = addProductDialog,

                IsLightDismissEnabled = true

            };

  

            // サイズ変更時の調整

            addProductDialog.SizeChanged += (dialogSender, dialogArgs) =>

            {

                popup.VerticalOffset = this.ActualHeight

                    - addProductDialog.ActualHeight

                    - BottomAppBar.ActualHeight - 48;

                popup.HorizontalOffset = 48;

            };

            //Popup 開く

            popup.IsOpen = true;

        }

  

        async void OnProductAddEnded(AddProductDialog dialog,

                                    TimeSale.ProductwithPrice productwithprice)

        {

            if (productwithprice != null)

            {

                try

                {

                    // 新しい商品を追加

                    await ProductsDataAdapter.AddAsync(productwithprice);

                    // データを取得し直して DataContext に設定

                    DataContext = await ProductsDataAdapter.GetAllProductsAsync();

                }

                catch (Exception ex)

                {

                    var messageDialog =

                        new Windows.UI.Popups.

                            MessageDialog("商品データが見つかりません。", 

                                            "エラー");

                    messageDialog.ShowAsync();

                }

            }

            // ポップアップを閉じる

            ((Windows.UI.Xaml.Controls.Primitives.Popup)dialog.Parent).IsOpen = false;

        }

これで実行し、Addボタンをクリックすると、下記のようになります。すべての項目（時刻以外）に入力してOKを押すと、SQL データベースにレコードが1件追加され、再度読み込まれます。

OnRemoveButtonClick の実装

同じく、MainPage.xaml.cs 内のOnRemoveButtonClickの実装を行います。async 属性をメソッドに付与したうえで、下記の通り実装してください。

       1: private async void OnRemoveButtonClick(object sender, RoutedEventArgs e)

       2:         {

       3:             var productwithprice = 

       4:                         (TimeSale.ProductwithPrice)ProductGridView.SelectedItem;

       5:             if (productwithprice != null)

       6:             {

       7:                 // 確認のメッセージを表示

       8:                 var messageDialog = new 

       9:                 Windows.UI.Popups.MessageDialog(string.Format("{0}:{1}を削除します。",

                    productwithprice.StoreName, productwithprice.StoreName),

                    "削除の確認");

                var okCommand = new Windows.UI.Popups.UICommand("OK");

                var cancelCommand = new Windows.UI.Popups.UICommand("キャンセル");

                messageDialog.Commands.Add(okCommand);

                messageDialog.Commands.Add(cancelCommand);

                var result = await messageDialog.ShowAsync();

                if (result.Equals(okCommand))

                {

                    try

                    {

                        // 商品を削除

                        await 

                        ProductsDataAdapter.

                            DeleteProductwithPrice(productwithprice.StoreId);

                        // データを取得し直して DataContext に設定

                        DataContext = await 

                            ProductsDataAdapter.GetAllProductsAsync();

                    }

                    catch (Exception ex)

                    {

                        messageDialog =

                            new Windows.UI.Popups.

                                MessageDialog("商品データが見つかりません。",

                                         "エラー");

                        messageDialog.ShowAsync();

                    }

                }

            }

}

実行してみます。章:品を1件タップして選択し、AppBarをスワイプして表示します。Removeボタンをクリックすると、確認のダイアログが出ます。

その後、OKボタンを押すと、選択された商品がSQL データベースから1件削除され、再度読み込まれます。

共有コントラクト実装

Windows ストアアプリは、共有コントラクトに対応することにより、クリップボードを経由せずに他のアプリとデータを共有することができます。

OnShareButtonClick の実装

先ほど追加したAppBar の中のOnShareButtonClickのイベントハンドラを実装しましょう。MainPage.xaml.cs 内でこれを開き、using 句に

       1: using Windows.ApplicationModel.DataTransfer;

を追加したうえで、下記の通り実装します。

       1: private void OnShareButtonClick(object sender, RoutedEventArgs e)

       2: {

       3:     var dataTransferManager = DataTransferManager.GetForCurrentView();

       4:     // イベント ハンドラーの二重登録を防ぐため一度購読解除して登録し直す

       5:     dataTransferManager.DataRequested -= OnDataRequested;

       6:     dataTransferManager.DataRequested += OnDataRequested;

       7:     DataTransferManager.ShowShareUI();

       8: }

OnDataRequestedの実装

MainPage.xaml.cs 内にイベントハンドラとして、OnDataRequested が必要なので、こちらも実装します。

       1: void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs args)

       2: {

       3:     // 選択中の商品データを ProductGridView から取得

       4: var productwithprice = (TimeSale.ProductwithPrice)(

       5:     ProductGridView.Visibility == Windows.UI.Xaml.Visibility.Visible

       6:                 ? ProductGridView.SelectedItem : ProductGridView.SelectedItem);

       7:             // 選択中の商品データがなければ何もしない

       8:             if (productwithprice == null)

       9:                 return;

      10:             args.Request.Data.Properties.Title =

      11:                 string.Format("{0}: {1}",

      12:                 productwithprice.StoreName, productwithprice.ProductName);

      13:             args.Request.Data.SetText("タイムセール商品情報について共有します。");

      14: }

これで実行してみましょう。AppBar を表示して共有ボタンを押します。画面の右側に共有ターゲットのストアアプリが並びます。

ここではテストのため、Windows8.1 SDK に入っている Share Target C# Sample を選択しています。下記の図のような画面になります。どのようなスキーマが対象となっているのかよくわかります。設定通り、商品データが選択されて入ればテストはクリアです。

もちろん、どんなマシンにもインストールされているWindows ストアアプリ “メール” でもOKです。

以上です。今回で、Windows 8アプリからデータベース/サービス連携のセッション解説は終了です。

リソース

ソースはこちらになります。ここに完成品のソリューション一式と、コードスニペットが入っていますので、ご参照ください。de:code イベントで参加者の方向けに、事前配布物としてZIPファイルで公開されたものです。

https://1drv.ms/1pn2gtY

なお、こちらをベースに、Microsoft Azure Mobile Services に対応させたのが、以前のエントリーでこちらになります。

https://blogs.msdn.com/b/shosuz/archive/2014/06/04/5-29-30-de-code-sv-007-microsoft-azure-mobile-services-2.aspx

併せて前後のエントリーもご参照ください。Microsoft Azure Mobile Services と .NET バックエンド使えば、このようなアプリが、さらに簡単に実装できることがよりよくお分かりいただけるかと思います。

次回は、またこの Microsoft Azure Mobile Services ネタになる予定です。それではまた(^^)/

鈴木章太郎

Windows 8 アプリとデータベース/サービスとの連携 – ② バックエンド Web サービス作成

鈴木章太郎 — Tue, 02 Sep 2014 15:14:46 GMT

皆様、こんにちは！

引き続き、9/2(火) タッチ/ペン対応アプリの開発とクラウドを活用した既存サービスとの接続方法のセミナーでの、私が担当したセッション ”Windows 8 アプリでのデータベース/サービスとの接続 “ の詳細情報とコードにつき、ご紹介していきたいと思います。

Web サービス作成とデータ公開

Windows ストアアプリからリモートデータを使用するためには、なんらかの REST または SOAP サービスが公開されている必要があります。ASP.NET Web APIは、ASP.NET MVC 4からサポートされたHTTPによるリクエストを受けるRESTfulなサービスです。このサンプルでは、ASP.NET Web API を使って、Windows ストアアプリから基本的なデータ操作ができるようなサービスを作成します。

当該ソリューションを右クリックし、新しいプロジェクトの追加、を選択しクリックします。Web テンプレートから、ASP.NET Web Application を選択し、名前を適当につけ（ここでは RestService）、OK ボタンをクリックします。

次に出てくるダイアログボックスで、Web API を選択し、OKをクリックします。

※ この図を見て戴くとお分かりの通り、Windows Azure の箇所で、クラウド内のホストにチェックが入っていますが、ここではまだクラウドには発行しないので、チェックを外しておいてください。

これで、RestService の初期のスケルトンが作成されます。ここでいったんソリューションのビルドを行ってください。

コントローラーの実装

次に、このプロジェクトからTimeSale プロジェクトに参照設定を追加し、次いで、コントローラーを実装します。RESTService プロジェクトのController フォルダーを右クリック->追加->コントローラーを選択します。

スキャフォールディングの追加からEntity Framework を使用したアクションがあるWeb API 2コントローラーを選んで、

コントローラー名は、TimeAppSaleController という名前にして、データコンテキストには自動的にTimeSaleAppContextが入っているのを確認して、モデルクラスからは、ProductWithPriceを選びます。コントローラー名の下の”非同期コントローラーアクションを使用します”にチェックを入れて、OK をクリックします。

そうすると、下記のコントローラーが自動生成されます。

        1: using System;

       2: using System;

       3: using System.Collections.Generic;

       4: using System.Data;

       5: using System.Data.Entity;

       6: using System.Data.Entity.Infrastructure;

       7: using System.Linq;

       8: using System.Net;

       9: using System.Net.Http;

using System.Web;

using System.Web.Http;

using TimeSale;

  

namespace RESTService.Controllers

{

    public class TimeSaleAppController : ApiController

    {

        private TimeSaleAppContext db = new TimeSaleAppContext();

  

        // GET api/TimeSaleApp

        public IEnumerable GetProductwithPrices()

        {

            return db.ProductwithPrices.AsEnumerable();

        }

  

        // GET api/TimeSaleApp/5

        public ProductwithPrice GetProductwithPrice(int id)

        {

            ProductwithPrice productwithprice = db.ProductwithPrices.Find(id);

            if (productwithprice == null)

            {

                throw new HttpResponseException

(Request.CreateResponse(HttpStatusCode.NotFound));

            }

  

            return productwithprice;

        }

  

        // PUT api/TimeSaleApp/5

        public HttpResponseMessage PutProductwithPrice(int id, ProductwithPrice 

productwithprice)

        {

            if (ModelState.IsValid && id == productwithprice.StoreId)

            {

                db.Entry(productwithprice).State = EntityState.Modified;

  

                try

                {

                    db.SaveChanges();

                }

                catch (DbUpdateConcurrencyException)

                {

                    return Request.CreateResponse(HttpStatusCode.NotFound);

                }

  

                return Request.CreateResponse(HttpStatusCode.OK);

            }

            else

            {

                return Request.CreateResponse(HttpStatusCode.BadRequest);

            }

        }

  

        // POST api/TimeSaleApp

        public HttpResponseMessage PostProductwithPrice(ProductwithPrice 

productwithprice)

        {

            if (ModelState.IsValid)

            {

                db.ProductwithPrices.Add(productwithprice);

                db.SaveChanges();

  

                HttpResponseMessage response = 

Request.CreateResponse

(HttpStatusCode.Created, productwithprice);

                response.Headers.Location = new Uri

(Url.Link("DefaultApi", new { id = productwithprice.StoreId }));

                return response;

            }

            else

            {

                return Request.CreateResponse(HttpStatusCode.BadRequest);

            }

        }

  

        // DELETE api/TimeSaleApp/5

        public HttpResponseMessage DeleteProductwithPrice(int id)

        {

            ProductwithPrice productwithprice = db.ProductwithPrices.Find(id);

            if (productwithprice == null)

            {

                return Request.CreateResponse(HttpStatusCode.NotFound);

            }

  

            db.ProductwithPrices.Remove(productwithprice);

  

            try

            {

                db.SaveChanges();

            }

            catch (DbUpdateConcurrencyException)

            {

                return Request.CreateResponse(HttpStatusCode.NotFound);

            }

  

            return Request.CreateResponse(HttpStatusCode.OK, productwithprice);

        }

  

        protected override void Dispose(bool disposing)

        {

            db.Dispose();

            base.Dispose(disposing);

        }

    }

}

RESTServiceをスタートアッププロジェクトに設定して、実行します。

Internet Explorer が起動したら、下記のアドレスを入力します : ※ ポート番号は適宜読み替えてください。

https://localhost:61495/api/TimeSaleApp

”ファイルを開く”を選択するとメモ帳が立ち上がり、データベースから全ての Products が取得できます。

このデータは、前回実行した TimeSaleTest コンソールアプリケーションが挿入したものです。

※ .json ファイルを、メモ帳にあらかじめ関連付けしてあります。

以上です。次回は最後の箇所、Windows ストアアプリとの連携で、このデータをコントロールに張り付けて、CRUD処理を追加します。

鈴木章太郎

Virtuoso - Shotaro Suzuki's Blog

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

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

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

NuGet Packages Configuration

Cordova App Custom Settings Configuration

Familiar Web Development frameworks

Cordova Plugins

Cordova apps and Microsoft VS Android emulator

Debugging Cordova apps in iOS devices

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

Download the code!

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

Setting up the PCL project

PCL code/assets

The MyShuttle.biz WPF desktop application

Setting up the WPF app

WPF Roadmap

The MyShuttle Universal Windows apps for Windows Store and Windows Phone

Running the Universal Windows apps (Windows Store and Windows Phone) in the emulators

The MyShuttle.biz native Apps for iOS and Android powered by Xamarin, C# and Visual Studio 2015

Xamarin installation and Configuration

Xamarin templates for Visual Studio

Intellisense in Xamarin projects

Xamarin Designers in Visual Studio, for iOS and Android views

Microsoft Visual Studio Android Emulator

Wrap up about C# cross-platform development, .NET and Xamarin

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

MyShuttle.biz ASP.NET 5 Web アプリケーションと Web API Services の設定

必要な環境

はじめてのASP.NET 5：ASP.NET 5 Hello World

NuGet packages, References and .NET Frameworks

Running the MyShuttle.biz ASP.NET 5 web applications and Web API Services on .NET Core 5 and the Core CLR.

“Edit C# code, sabe .cs file and refresh the browser”: No explicit compilation!

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

使用されているテクノロジー

Web applications

Services, Azure, middleware and LOB integration

Cross-platform Mobile apps

IoT devices and Cloud Services for IoT

Big Data and Cloud processes

ビジネスドメイン

シナリオ

1．Mobile First と Cloud First

２．IoT と Big Data

Public Web Site – ASP.NET 5 MVC

LOB integration with VS Connected Services, Azure, O365 API and SalesForce API

Cross-platform mobile development for native apps: C#, .NET, Xamarin and C++

Hybrid mobile apps: VS 2015 Tooling for Apache Cordova, HTML and JavaScript

IoT と Big Data

プロジェクトのソースコードはこちら のMSDN サンプルページより、ダウンロードしてください。

Xamarin.FormsとDynamics CRM Online との接続サンプル（Cortanaベースも含む）アプリ公開 on Github/MSDN

Xamarin と Apache Cordova と Office 365 API を使ってマルチデバイスアプリを作ろう ①

Azure Active Directory Authentication Library（ADAL）for Xamarin

Schoo 授業 (11/27) のMobile Services 部分の補足：Project Siena でアプリ開発！エクセルやパワーポイントの知識でWindows タブレット対応アプリを作ってみよう！

Microsoft Azure Mobile Services in ASPIC クラウドフォーラム 2014 ～クラウドが創発する新たなビジネス領域～ on 9/17

Windows 8 アプリとデータベース/サービスとの連携 – ③ Windows ストア アプリとの連携（C#/XAML）

Windows 8 アプリとデータベース/サービスとの連携 – ② バックエンド Web サービス作成

プロジェクトのソースコードはこちらのMSDN サンプルページより、ダウンロードしてください。

Windows 8 アプリとデータベース/サービスとの連携 – ③ Windows ストアアプリとの連携（C#/XAML）