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

皆様、こんにちは! このシリーズ、次は③番目、Xamarin iOS/Android と、Universal Apps のお話です。 表題のタイトルにある、Connect();イベント、昨年末のオンラインイベントなので覚えておられる方も多いかと思います。これに関連して、このブログエントリについて、何件かのお問い合わせを、日本のお客様やパートナー様から戴きました。お答えしているうちに、この内容には、ソースコードもありせっかくの良いリソースなので、日本語でも紹介しよう!と思いつきました。そこで、Microsoft 本社のアーキテクトである、Cesar de la Torre [MSFT]と連絡を取り、彼の許諾を得て、本ブログエントリーシリーズ(全5回)の翻訳を行うことになりました。まだ5個目の5.のエントリが書かれていませんが、Cesar によれば、追って更新されるそうです。またソースコードも随時更新の予定とのこと。ぜひお付き合いください!(徐々に公開していきますので、お待ちください(^^)) ※ オリジナルのブログのURLはこちらです。 Cesar de la Torre – Software Architect at Microsoft Corp. Redmond, Seattle, U.S. Original Blog URL: http://blogs.msdn.com/b/cesardelatorre/archive/2014/11/30/myshuttle-biz-demo-apps-from-connect-visual-studio-and-azure-event.aspx   (The original blog URL might be different depending on the post, of course) このブログエントリ(ネイティブアプリ開発にフォーカス)は、MyShuttle.biz アプリケーションがカバーする異なるシナリオの中の3番目のブログエントリです。. 1. 日本語版 – MyShuttle.biz demo apps from Connect();…


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

皆様、こんにちは! 9月17日、私も長らく執行役員を拝命させて戴いている、ASPIC(ASP, SaaS, Cloud コンソーシアム)主催のクラウドフォーラム2014が、霞ヶ関コモンゲートにて開催されます。 こちらで、30分程度の短い時間ではありますが、午後一のセッションで、Microsoft Azure Mobile Services と Xamarin とでマルチデバイスの開発をご紹介したいと思います。この団体は、総務省系なので、午前中はまず、総務省政策統括官の南俊行氏の特別講演があり、その後、KMD 特別招聘教授 夏野剛氏の基調講演を終えた後に、午後のブレイクアウトトラックが4つ並行で開催され、そのうちの一つの先端クラウドトラックの最初になります。 もしかしたら、もう締め切られているかもしれませんが、もしご来 場いただく予定がおありの方は、是非ご覧ください。デモなどは、こちらでまた事後にでもご紹介できればと思っています! それではまた(^^)/ 鈴木 章太郎


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

皆様、こんにちは! 引き続き、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…

3

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

皆様、こんにちは! 引き続き、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 をクリックします。 そうすると、下記のコントローラーが自動生成されます。…


Windows 8 アプリとデータベース/サービスとの連携 – ① データモデル作成とデータベース生成

皆様、こんにちは!今期(7月以降)初めての投稿となります。今年もよろしくお願いします! 9/2(火) タッチ/ペン対応アプリの開発とクラウドを活用した既存サービスとの接続方法のセミナーにご参加いただきました皆様、お忙しいところありがとうございました。今後も、皆様の関心のあるテーマを中心にセミナーの企画とセッションのご提供をして行きたいと考えていますので、今後ともよろしくお願いします。 さて、早速、お約束した通り、私が担当しましたこのセッションの詳細情報とコードにつき、ご紹介していきたいと思います。 概要 Windows ストアアプリからデータベースへの連携を行う場合には、直接のデータ連携はできず、Web サービス経由で行う必要があります。ここでは、SQL Server Express Edition 上に生成されたデータベースを、ASP.NET Web APIから、REST インターフェースとJSON形式のペイロードを使用して公開し、それをWindows ストアアプリから利用するシナリオをご紹介します。 ADO.NET Entity Framework 5.0以降で実装された、Code First の機能を使い、Visual Studio 上のソースコードをビルドすることにより、SQL Server Express Edition 上に、各カラムの属性やリレーションシップ等のメタ情報を含めつつデータベースを生成することが可能です。また、Migration 機能により、カラムの追加等のデータベースへの変更を、データに影響を与えることなく行うことが可能です。ここで出来上がったデータベースを、ASP.NET Web API を使い、REST のインターフェースで公開します。 ここでは、商品管理用のWindows ストアアプリを実装します。これらの機能を実現するために、SQL Server Express Edition 、ADO.NET Entity Framework 6.0、Code First、ASP.NET Web API、そして Windows ストアアプリのテンプレートの各技術の基本的な使い方をご紹介します。 このエントリは、① バックエンドサービス作成 ① -1 データモデル作成とデータベース生成について、ご紹介します。 必要なソフトウェア他 · Microsoft…


5/29-30 de:code セッション SV-007 “パワフル モバイル アプリ開発 ~ 最新 Microsoft Azure Mobile Services をフル活用しよう!~ ” フォローアップ (4)

皆様、こんにちは!多くの方に (1)  (2) (3) を読んでいただいて、大変感謝しています。 今回は、4番目のセッションフォローアップである、Microsoft Azure Active Directory 連携、に行きたいと思います。 セッションでもご紹介した通り、主に、Azure ポータル上で必要な手順と、ADAL(Active Directory Authentication Library)を使ったネイティブアプリの認証コードの記述、に分かれますので、順にご紹介していきます。 1.Azure ポータル上で必要な手順ーWebアプリ(Mobile Services のプロキシであるWebSites)の登録 まず最初に、アプリが Azure Active Directory を認証プロバイダーとして使用してMobile Services にログインできるように登録する方法をご紹介します。 Azure ポータルにログインし、Mobile Services タブをクリックして、対象のMobile Services をクリックします。 Identity(ID)タブをクリックします。 Azure Active Directory の箇所まで、当該セクションをスクロールダウンし、リストされている アプリケーション URL をコピーします。   管理ポータルから Active Directory に移動し、自分で作った Active Directory をポイントします(まだ作ってない場合には、新規作成ですぐに作りましょう)。もちろん、ユーザーも登録しておく必要があります。   アプリケーション タブをクリックし、 アプリを 追加します。 画面下部の追加ボタンを押して、組織で開発中のアプリケーションを追加 をクリックします。…


5/29-30 de:code セッション SV-007 “パワフル モバイル アプリ開発 ~ 最新 Microsoft Azure Mobile Services をフル活用しよう!~ ” フォローアップ (3)

皆様、こんにちは!さっそく多くの方に (1) と (2) を読んでいただいて、大変感謝しています。 続いて、今回は、3番目のセッションフォローアップである、オフラインサポートの実装、に行きたいと思います。 サービス側のデータの確認 スーパーマーケット従業員のToDo リストを作ります。まずは、(1)でご紹介した Mobile Services 側のアプリで、忘れずに ToDoItem テーブルに適当な初期データを作成しておいてください。もし未だの場合には、下記の通り、WebApiConfig.cs の Seed メソッド内に追加し、もう一度、Azure に発行しておいてください。下記がその例です。このデータは、フォローアップ(5)の Xamarin 対応の箇所でも使います。 1: ・・・ 2: List<TodoItem> todoItems = new List<TodoItem> 3: { 4: new TodoItem { Id = "1", Text = "商品の棚卸をする", Complete = false }, 5: new TodoItem { Id = "2", Text = "レジ周りを片付ける", Complete…


5/29-30 de:code セッション SV-007 “パワフル モバイル アプリ開発 ~ 最新 Microsoft Azure Mobile Services をフル活用しよう!~ ” フォローアップ (2)

皆様、こんにちは!多くの方に(1)をご参照いただき、感謝です。引き続き、(2)に入りたいと思います。今回は、Windows ストアアプリ側の CRUD 処理ですね。 これに関しては、参加者向けの事前公開資料の中にある、Windows 8.1 ビジネス ストアアプリ開発-ハンズオンラボ.zip のUI(XAML)をそのまま使うという話をさせていただきました。こちらは、参加者の皆様に限り、ダウンロードできるようになっていますので、参加された方は、メール等に記載されている URLを参照して戴き、ZIP(の中にあるPDFやプロジェクトファイル等)をダウンロードしてください。 というわけで、このフォローアップは、本 de:code イベント参加者向けのセッションフォローアップですので、ここでは、その(ストアアプリ内にある)XAMLがあることを前提に、セッションでご紹介したクライアント側の CRUD の処理をご紹介したいと思います。ご了承くださいませ。 Mobile Services のエンドポイントの追加 まずは、当該 ストアアプリ部分を、ハンズオンラボの手順に従って追加して戴きます。その後、App.xaml.cs を開き、下記の部分をエンドポイントとして追加してください。これにより、CRUD(新規作成、読み取り、更新、削除)処理が可能となります。 1: ・・・ 2: /// <summary> 3: /// 既定の Application クラスに対してアプリケーション独自の動作を実装します。 4: /// </summary> 5: sealed partial class App : Application 6: { 7: //Mobile Services エンドポイント 8: public static MobileServiceClient MobileService = new MobileServiceClient(…


“Windows 8.1 におけるストア ビジネスアプリの開発”(MVP Community Camp 2014)DEMO解説 #5:ユーザー入力の検証

皆様、こんにちは! 明日からは、いよいよ Build 2014 @ San Francisco なので、その前に片づけておかないと…ということでw、MVP Community Camp 2014 デモ解説の最後、ユーザー入力の検証です。まず冒頭は、スライドシェアのリンクです。 <Windows 8.1 におけるストア ビジネスアプリの設計と開発> Windows 8.1 におけるストア ビジネスアプリの設計と開発 from Shotaro Suzuki ユーザー入力の検証に関しては、このトピックになりますので、ご覧ください。 http://msdn.microsoft.com/ja-jp/library/windows/apps/xx13659.aspx おそらく業務でストアビジネスアプリ、を開発する際には、もっとも重要な機能となってくるでしょう。主要な要素としては、下記のスライドの通り、ValidatableBindableBaseクラス、System.ComponentModel.DataAnnotations 名前空間、そして ValidateProperties メソッド、になります。 デモアプリの概要 当日デモでご紹介したものは、こんなアプリでした。まずアプリを起動すると、このような画面になります。 契約業務ボタンをタッチすると、入力用の画面に遷移します(ナビゲーション)。 ドロップダウンリストから製品を選んで、数量を決めて、 注文に追加します。   このまま注文実行すると、氏名欄は必須なので検証エラーが出ます。 ここを適当に入力しても、電話番号に文字列を入れると、こちらは正規表現で10ケタのチェックディジットを入れてあるので、検証エラーが出ます。 アプリ全体の方は、こちらにこの後あげますので、参考までに見てみてください。元々のサンプルがWindows 8のテンプレートで作成されたもので、それを、日本語化しつつ、8.1 用にターゲットし直していますので、Common フォルダ等も残っていますが、構成はわかり易いかと思います。 ソリューションの作成 データを入力する このようなフィールドを持つ画面を作成します。XAML は次に示す通りです。 1: <prism:VisualStateAwarePage x:Name="pageRoot" 2: x:Class="PrismAppValidation.Views.AddSalePage" 3: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5:…