Windows Azure とXamarin で作るマルチプラットフォームアプリケーション

2014/03/22DevLOVE 仙台 &JAZUG 仙台山本　誠樹

本日のアジェンダ• 自己紹介

• Windows Azure 概要

• Windows Azure モバイルサービスとは

• Xamarin とは

• マルチプラットフォーム開発

本日のアジェンダ• 自己紹介

• Windows Azure 概要

• Windows Azure モバイルサービスとは

• Xamarin とは

• マルチプラットフォーム開発

自己紹介• 山本 誠樹 (Yamamoto Masaki)

• @nnasaki

• Facebook, Twitter, github, hatena 等

本日の開催会場

Xamarin 率 5/8 !!

なぜ私はここにいるか？

2013 年の Community Open Day

Build Insider の記事

こんな感じで大体自分からぶっ込んでる

私のコンテキスト• 請負の開発会社に所属• 社名は表には出せない• 開発内容は守秘義務があるので公開できない

なぜこんな話をしているか？

• 請負の開発会社に所属• 社名は表には出せない• 開発内容は守秘義務があるので公開できない

同じような境遇の方いませんか？

勇気を出して行動すればちょっとは道が広がります。

コミュニティを探そう

本日のアジェンダ• 自己紹介

• Windows Azure 概要

• Windows Azure モバイルサービスとは

• Xamarin とは

• マルチプラットフォーム開発

クラウド プラットフォーム

物理 PaaS SaaS仮想化 IaaS

プラットフォーム活用のパターン

Windows Azure ハンズオンラボテキストより引用

パターン毎の責任範囲の考え方

ストレージ

サーバー

ネットワーク

OS

ミドルウエア

仮想化

データ

アプリケーション

ランタイム

ストレージ

サーバー

ネットワーク

OS

ミドルウエア

仮想化

データ

アプリケーション

ランタイムユー

ザー

管理

ストレージ

サーバー

ネットワーク

OS

ミドルウエア

仮想化

アプリケーション

ランタイム

データ

ベンダー

管理

ストレージ

サーバー

ネットワーク

OS

ミドルウエア

仮想化

アプリケーション

ランタイム

データ

仮想マシンWindows Server Web サイトモバイルサービス

Office 365Dynamics CRM

ベンダー管理

ベンダー

管理

ユー

ザー

管理

ユー

ザー

管理

オンプレミス IaaS PaaS SaaS

Windows Azure ハンズオンラボテキストより引用

ネットワーク

仮想ネットワーク

トラフィックマネージャー

コンピューティング

仮想マシン

クラウドサービス

Webサイト

モバイルサービス

開発言語

キャッシュ メディア CDN データ分析HPC 統合ID サービスバス

アプリケーションバックアップ

データ管理

SQLデータベース ビックデータ テーブル BLOB

世界規模のクラウド基盤データセンター：　北米 4 か所、ヨーロッパ 2 か所、　アジア 2 か所にて稼働中　日本（ 2014 年に東日本、西日本開設予定）　豪州（開設予定）、中国（中国国内から利用）　CDN ： 全世界に 24 カ所

Windows Azure ハンズオンラボテキストより引用

たくさんありすぎて何をすればいいかわからない

この３つがオススメ

仮想マシンWeb サイトモバイルサービス（イチオシ）

ネットワーク

仮想ネットワーク

トラフィックマネージャー

コンピューティング

仮想マシン

クラウドサービス

Webサイト

モバイルサービス

開発言語

キャッシュ メディア CDN データ分析HPC 統合ID サービスバス

アプリケーションバックアップ

データ管理

SQLデータベース ビックデータ テーブル BLOB

世界規模のクラウド基盤データセンター：　北米 4 か所、ヨーロッパ 2 か所、　アジア 2 か所にて稼働中　日本（ 2014 年に東日本、西日本開設予定）　豪州（開設予定）、中国（中国国内から利用）　CDN ： 全世界に 24 カ所

仮想マシン： IaaSWindows Server / Linux 選択

可能オンプレミスとの容易な連携

Web サイト： Web サイト構築専用 PaaS モバイルサービス：

マルチデバイス向けアプリ用バックエンドサービス

Windows Azure ハンズオンラボテキストより引用

Windows Server と Linux のサポート 多くの既存ワークロードを稼動可能 オンプレミスと仮想マシンを移動可能

Windows ベースの汎用 PaaS 事実上無限のスケーラビリティ 運用管理の自動化

Web サイト構築に最適なサービス オープン ソース ソフトの活用 無償で開始、成長に合わせた利用

マルチデバイス向けアプリ構築に特化 Windows 8, iOS, Android に対応 開発工数を削減

Windows Azure コンピューティング機能

仮想マシン

クラウドサービス

Web サイト

IaaS

PaaS モバイルサービス

Windows Azure ハンズオンラボテキストより引用

最近 Web サイトすごく良いですよJava (New!)• Tomcat OR Jetty

PYTHONPHP• WordPress をワンクリックで実行

Ruby ちょっと裏技的

Web サイトで Ruby Web サイトの実態は IIS Java に対応したこと

で、 httpPlatformHandler が追加 詳細はしばやんさんの記事参照

http://shiba-yan.hatenablog.jp/entry/20140315/1394889702

使っている人いるの？

海外はもちろん国内でも採用実績多数あります！

Windows Azure 事例 (企業向けサービス )TOYOTA が考える新たなモビリティ社会・低炭素・省エネルギー社会の実現に向けて、 2015 年までに次世代テレマティクス向けグローバル クラウド プラットフォームを構築する

デジタル放送の未来へ備えるプラットフォームを Windows Azure メディア サービスで実現

NISSAN ディーラー マネジメントシステム（ Microsoft Dynamics CRM ベース）の開発によるパートナー関係の維持

Linux ベースの 学術リポジトリ システム

インターネット通販を中心に展開してきた Juliette は請求書や納品書入力の大幅な時間短縮を実現。 SQL データベース に集積したデータをマーケティング分析に活用

高効率風力発電と太陽光発電、蓄電池を組み合わせた最新エコ住宅を管理するハウスマネージメントシステム

震災復興のために各府省、県、市町村と横断的な情報連携を実施。数百の支援制度を横串検索できる「復旧・復興支援制度データベース 」を Windows Azure 上に構築

「 GEOSPACE CDS」 GIS コンテンツをネット配信

Windows Azure ハンズオンラボテキストより引用

Windows Azure 事例 ( コンシューマーサービス )

2011 年に続き、 2012 年も mixi Christmas は　Windows Azure を 採用250万会員が集中アクセスするクラウド向きアプリ

Docomo の動画配信プラットフォームである、「 d マーケット VIDEO ストア」をご支援

55万人の国内最大イベントであるコミックマーケットにて「コミケ Web Catalogue」の構築・運用を サポート

即応性の高いクラウドベースのビッグ データ ソリューションを使用して BI 情報をすばやく配信

PHP や Unity などを利用したソーシャルアプリ、 iPhone/Androidアプリなどの開発基盤として採用

フィーチャーフォンの公式メニューやスマートフォンから利用できる　デコレーション メール サービス。

複数の映画会社と興行会社が参加する世界でも初の試みとなる、映画観賞券の前売券購入と座席予約ができるオンライン サービス Windows Azure ハンズオ

ンラボテキストより引用

でも、お高いんでしょ？

無料で利用できるプランがありますAWS さんより割安なことが多いです

仮想マシン（無料プランなし）Web サイト（ 1 年無料）モバイルサービス（ 1 年無料）

本日のアジェンダ• 自己紹介• Windows Azure 概要• Windows Azure モバイルサービスとは• Xamarin とは• マルチプラットフォーム開発

Windows Azure モバイルサービスとは

DEMO

モバイルサービス作成時のポイント

東アジアを選ぶ• 残念ながら日本は準備中。リクエスト

中なので清き一票を！• http://bit.ly/1hPmZVB

.NET を選ぶ

WINDWOS AZUREモバイルサービス

認証 データ

カスタム API

スケジューラ

プッシュ

ログ

デバイス モバイルサービス

.NET

IDtwitter

facebook

Google

Microsoft

開発期間の短縮

クライアントアプリ開発 サーバーサイド開発

クライアントアプリ開発 サーバーサイド開発

モバイルサービス導入前

モバイルサービス導入後

ちなみに略称Windows Azure Mobile Services ⇒ WAMS Windows Azure Media Services とかぶる

Windows Azure Mobile Services

ZUMO （ずーも？）

Windows Azure モバイルサービスの便利なポイント４つ

ここが便利だよ ZUMO!

動的スキーマ.NET FrameworkGitNew Relic

ここが便利だよ ZUMO!

動的スキーマ.NET FrameworkGitNew Relic

サーバーに保存したらカラム自動生成NO SQL ではないSQL Server にカラムが追加され

る本番運用時は設定で OFF すること

が可能

ここが便利だよ ZUMO!

動的スキーマ.NET FrameworkGitNew Relic

.NET Framework

C#

.NET Framework

TDD

DEMO

折り返し地点

ここが便利だよ ZUMO!

動的スキーマ.NET FrameworkGitNew Relic

Git

バージョン管理が可能にサーバーにプッシュすれば即時反映

ここが便利だよ ZUMO!

動的スキーマ.NET FrameworkGitNew Relic

NewRelic

運用管理が 楽にボトルネックの可視化

バックエンドに .NET 選んだ場合

JavaScript よりポータルで出来ることが減ります

VisualStudio が必須

バックエンドに .NET 選んだ場合

JavaScript よりポータルで出来ることが減ります

VisualStudio が必須

バックエンドに .NET 選んだ場合

赤枠の部分が .NET には無い

バックエンド .NET Pro Tips

データについては Azure SQL で確認可能• ダッシュボードの右下のリンクをク

リック• 画面下部の管理をクリック

バックエンド .NET Pro Tips

データについては Azure SQL で確認可能

バックエンド .NET Pro Tips

API はメニューには無いが Visual Studio から作れます

バックエンド .NET Pro Tips

ダウンロード出来ないプラットフォームは JavaScript から持ってくる

バックエンド .NET Pro Tips

API キーを確認する

バックエンド .NET Pro Tips

URL と API キーを変えれば良い

バックエンドに .NET 選んだ場合

JavaScript よりポータルで出来ることが減ります

VisualStudio が必須

VisualStudio が必須• ダウンロードしてビルドして発行する必

要があります• バックエンドが JavaScript の場合は不要

です• メンドクセーって人は JavaScript のほうが

良いです。

本日のアジェンダ• 自己紹介• Windows Azure 概要• Windows Azure モバイルサービスとは• Xamarin とは• マルチプラットフォーム開発

Xamarin とは• 「ザマリン 」と呼びます

• c# で Android・ iOS・Windows・Mac の開発ができるプラットフォーム

なぜ Xamarin が必要なの？

今までのマルチプラットフォーム開発

Java

今までのマルチプラットフォーム開発

Java

こんなに覚えられない！

Xamarin マルチプラットフォーム開発

C#

Xamarin マルチプラットフォーム開発

C#

これでかつる！

使っている人いるの？

たくさんいます

http://www.xlsoft.com/jp/products/xamarin/

NHK紅白のアプリも Xamarin製

http://biz.fenrir-inc.com/application_development/casestudy_app/nhk_kouhaku.html

遅いんじゃないの？

いいえ、高速です• Android は JIT コンパイラで動作• iOS は AOT コンパイラで動作

つまり、通常のアプリとまったく同じ実行形式になります。

でも、お高いんでしょ？

はい。ちょっと高いです

http://www.xlsoft.com/jp/products/xamarin/price.html

１ヶ月の試用期間があります

サブスクリプション終了後も使用可能

キャンペーン中！

本日のアジェンダ• 自己紹介• Windows Azure 概要• Windows Azure モバイルサービスとは• Xamarin とは• マルチプラットフォーム開発

Xamarin を利用したアーキテクチャ

サーバーサイド

ModelView

Controller

クライアントWebView

肥大化する

イベントを 投げて表示するだけ

肥大化する

従来の Web アプリ

クライアント

サーバーサイドModel

Controller

ViewModel

データに特化してシンプルに

最近の Web アプリ

View

HTMLからデータ中心に

JSONmsgpack

View 用のModel を追加View がサーバーからクライアントへ移動

クライアント

サーバーサイド

MBaaS

Controller

サーバー側はコーディングしない

さらにこれからのアプリ

View

データのみJSONmsgpack

すべての実装がクライアントに集約 ViewM

odel

Model

Android Windows 8iOS

サーバーサイドMBaaS

Controller

こんなことになるんじゃ？

View

JSONmsgpack

ViewModel

Model

Controller

View

ViewModel

Model

Controller

View

ViewModel

Model

iOS

サーバーサイド

MBaaS

そこでXamarin

View

JSONmsgpack

View

View

Xamarin ControllerModelViewModel

ロジックはXamarin で管理して、View は個別に作成

よくある誤解：

Xamarin さえ覚えれば全部できる！！

Xamarinだけ覚えれば良い？• 答えは NO• Xamarin が共通化できるのはコアロジッ

ク• View は個別に作成

iOS View

View

View

Xamarin ControllerModelViewModel

Xamarinだけ覚えれば良い？• アプリのイベントはそれ ぞれのプラット

フォームで異なる• 例えば画面表示のイベント名は 違う• Android ： OnCreate• iOS ： ViewDidLoad• Xamarin は薄いラッパーに過ぎない

Xamarin マルチプラットフォーム開発

C#

各プラットフォームの知識は必要

DEMO

Xamarin Studio （ Mac ）のバグ• 日本語入力でハングする• ちょっと致命的。現状は他のテキストエディ

タからコピペするしかないです。• https://bugzilla.xamarin.com/

show_bug.cgi?id=18385

続きは記事にて

ご静聴ありがとうございました