[無料] Xamarin と Azure で、超効率的にクラウドと繋がるモバイルアプリを作ろう![Azure Mobile Apps][MBaaS]


Screen Shot 2016-10-31 at 21.18.31

このエントリーをはてなブックマークに追加

Microsoft の開発している、モバイルアプリのバックエンドの機能をまるっと提供するサービス Azure Mobile Appsを使ったら、どういうことができるのかな?

( *゚▽゚* っ)З「アプリ(フロントエンド)開発者が、サーバ構築とかの苦労をせずアプリ開発だけに集中できるようにするために作られたサービスらしいわよ!」

(*゚▽゚*)「おお!じゃあ私みたいにインフラの知識あんまり無い人でもサーバと通信するアプリが簡単に作れるってことなのかしら?今どきサーバとの通信の全く無いアプリも珍しくなってきたものね」

ということで、実際に触ってみました!

今回はクライアント側は Xamarinを使い、「TODOアプリ」を作ってみます!
azuremobileapps

この記事は何?

2016/11/1 – 2 にお台場で開催された Microsoft Tech Summit 2016 で、
私は「Xamarin と Azure で、超効率的にクラウドと繋がるモバイルアプリを作ろう!」というタイトルのセッションで登壇いたしました。

クライアントを Xamarin (*1) で作り、
サーバサイドは Microsoft Azure (=アジュール。MSのクラウドサービス) の Mobile Apps というサービス(mBaaS の一種)を使って、
簡単なアプリをひとつ作り、デモをしました。

(*1 Xamarin: ザマリン。C#だけで、フルネイティブな iOS/Android/Windows/Mac アプリを作れる、クロスプラットフォーム開発ツール。Microsoft が開発している)

そのセッションの内容を、後から復習できるように、ブログにまとめました。皆様のお役に立てれば幸いです。(もちろんセッションにお越しにならなかった方々にも読んでいただきたいです!)

keywords: MBaaS, Azure Mobile Apps

目次

  1. 作るサンプルTODOアプリの機能
  2. 全体の構成
  3. 『Azure Mobile Apps』『MBaaS』って何?
  4. Azure Mobile Apps を使って簡単に実現できること
  5. Azure Mobile Apps を使って 5分で TODOアプリを作る
  6. Mobile Apps クイックスタート 管理画面について

作るサンプルTODOアプリの機能

私はこのアプリをトータル20分で作りました。(ドヤア)
でも Azure Mobile Apps を使えば本当に簡単に出来るのです。
機能を見ていきます。

(1) Twitter 認証でログイン

アプリの「ログイン」ボタンを押すと、Twitterへのログイン画面が立ち上がります。そして Twitterにログインすると、ユーザIDが得られます。
Twitter auth

(2) 投稿データをクラウド上の DBに保存

ユーザが投稿したものは、すべてクラウド(Azure)上のDBに、ユーザIDと一緒に保存されます。
投稿データをクラウド上の DBに保存

(3) オフライン同期

オフライン時でもアプリが動くようにします。
一度データをローカルDBに保存しておいて、オンライン時にクラウド上のDBと同期します。
(自動的に同期処理が走るわけではなく、同期開始は好きなところにコードで指事する。例えば pull to refresh (引っ張る動作)のタイミングで、とか、アプリ起動時、とか、起動中 2秒ずつ確認、など。)
オフライン同期

↓仕組み
Screen Shot 2016-10-31 at 21.03.49

(4) push通知

時間の都合でデモは省略しましたが、Azure Mobile Apps を使えば push通知も飛ばせます。iOS/Android/Windows
push notification

全体の構成

Screen Shot 2016-10-31 at 19.48.10

項目
クライアント Xamarin.Forms
クライアント:対象プラットフォーム iOS, Android, Windows
サーバサイド Azure

『Azure Mobile Apps』って何?

Azure Mobile Appsとは、
Microsoft Azure(=MSのクラウドサービス)の中の、スマホアプリのバックエンドの汎用的な機能をまるっと提供してくれるサービスのことです。つまりMBaaS機能です。

MBaaS (mBaaS) って何?

mBaaS

( *゚▽゚* っ)З「『Azure Mobile Apps』が MBaaS (エムバース)っていうけど、そもそも MBaaS って何?」

MBaaS (mBaaS) とは、
Mobile Backend as a Service のことであり、

スマホアプリがよく使うバックエンド(サーバサイド)の機能を、クラウドから提供するサービスです。

つまり、アプリ開発者(フロントエンド開発者)が、サーバ構築などで煩わされず、アプリ開発だけに専念できるように生まれたサービスです!

( *゚▽゚* っ)З「なるほど、つまり、DB構築とかpush通知実装とかログイン機能とか そういうのを まるっとやってくれるサービスってわけね」

(*゚▽゚*)「もうアプリのバックエンドは自分では”作らない”のが当たり前の時代なのね」

無料なの?

( *゚▽゚* っ)З「ちょっと試してみたいだけだから無料じゃなきゃやる気でないわよ」

「Mobile Apps Quick Start」(後述)から作成すれば、全部無料で作ることができます!

ただ、このクイックスタートだと、すべてを無料範囲内で作ったものができるので、
DB には SQLite が使用されています。
しかしこれは、試しで使ってみるには良いけど、本番運用には貧弱なので、本番運用には SQL Database を使用することをご検討ください。

あと、もっとパフォーマンス出したいとか DBの容量を増やしたいとかいう希望があったら、課金をすることになります。月500円くらいからです。

Azure Mobile Apps を使って簡単に実現できること

Azure Mobile Apps
(吹き出しだらけで全体が見えづらくなったので吹き出し無し版も掲載)
Screen Shot 2016-10-31 at 21.19.01

Azure Mobile Apps の提供する機能:

  1. 認証 (ログイン機能)
  2. push通知
  3. DB・接続 (データストア)
  4. オフライン同期(オフライン時でもアプリが動くようにする仕組み)
  5. Easy API (簡単に自作 REST API を作れる仕組み)
  6. サーバサイド(node.js または ASP.NET)を編集できる(スクリプトを置いたりある程度自由)

Screen Shot 2016-10-31 at 19.53.55
↑すべての機能は REST API を介してアクセス可能。Azure Mobile Apps の SDKは、これらのAPIを wrap する形のメソッドを提供している

対応クライアント(プラットフォーム)一覧:
Screen Shot 2016-10-31 at 19.56.22

対応サービス名

それぞれの Azure 内での呼称
Azure Mobile Apps

Azure Mobile Apps を使って 5分で TODOアプリを作る

ログイン機能もオフライン同期も無くて、
ただ「ユーザの投稿をクラウド上のDBに保存する」だけのシンプルなアプリだったら 5分でできます
ためしにやってみてください

1: Mobile Apps デプロイ

まず Microsoft Azureの管理画面 に行きます。
https://portal.azure.com/

Screen Shot 2016-10-31 at 21.35.59

「新規」→ 検索バーに「mobile app」と入力。

出てきた検索結果の「Mobile Apps Quickstart」を選択する

Screen Shot 2016-10-31 at 21.39.02

「作成」を押す。(画面の下の方)

Screen Shot 2016-10-31 at 21.44.15

そうすると「アプリ名どうする?」など聞かれるので、すべて入力します。

Screen Shot 2016-10-31 at 21.47.42

  1. アプリ名」:アプリの名前。他が使っていない、一意のものにする必要がある
  2. サブスクリプション」:どのサブスクリプションで課金するか(とはいえデフォルトではMobileAppsは無料なのですが)選択
  3. リソースグループ」:リソースグループとは、後から整理整頓しやすくするフォルダみたいなものです。「新規作成」を選択し「アプリ名」をコピペしましょう。
  4. App Serviceプラン」:物理サーバー(のようなもの)はどうするか聞かれています。無料枠もあります。高いやつにすると、CPUの性能が良かったりメモリが潤沢だったりします。無料のもので大丈夫です
  5. App Insights」:これをオンにすると、App Insights 機能が有効になります。ユーザの使用状況などのテレメトリが取れる、Azureの機能です。今回はオフにしておきます
  6. 「ダッシュボードにピン留めする」:ダッシュボードにピン留めオンにしてください

で、「作成」ボタンを押します。
デプロイに 1-3分ほどかかります。

2: バックエンドに接続済みのクライアントをダウンロードする

デプロイが終わったら、そこをクリックし、Mobile Apps 管理画面に移ります。

Azure Mobile Apps Quickstart

「Connect Client Apps」→「Xamarin.Forms」をクリック。
2秒ほど待つと DB接続や テーブルへの CRUD操作のAPIの作成が終わる(グリーンになるから視覚的に分かる)ので、
「ダウンロード」ボタンを押します。

そうすると、Xamarin.Forms ソリューションファイルが落ちてくるので、それを解凍し、
.slnファイルを実行(ダブルクリック)すれば、完了です!

azuremobileapps

(ただ、このクイックスタートから作ると、全部無料枠内で収める都合上、DBには SQLite が使用されています。でも、それは本番運用には貧弱なので、本番運用には SQL Database の利用を検討して下さい。っていう警告が出ます)

Screen Shot 2016-11-01 at 1.58.52

あっという間だ!!
(バックエンドにつなげる操作は、ユーザは一切書いてない!すごい!)

Mobile Apps クイックスタート 管理画面について

Microsoft Azureの管理画面での話です。

「Mobile Apps Quick Start」では、
メニューのタイルが9つあります。

mobile_apps_quickstart

それぞれについて説明します。

0-0: Connect Client Apps

Connect Client Apps

作ったバックエンド(= Mobile Apps)に接続済みの
クライアントアプリのプロジェクトを、
まるっとダウンロードできる

0-1: モバイルアプリ

モバイルアプリ

アプリの稼働状況確認や
詳細な設定をすることができる。
(例:スケールアップ/アウトや push通知など)

0-2: ドキュメンテーション

ドキュメンテーション

Azure の公式ドキュメントサイトの Mobile Apps についてのページに飛ぶ。

1-0: Easy Tables (「かんたんテーブル」)

Easy Tables

Mobile Apps に 接続された DBの
データの閲覧や 各種設定ができる。
(例:データの削除/ スキーマの変更/ 権限付与/ etc)
この「Easy Tables」サービスは、日本語のドキュメントでは「かんたんテーブル」などと訳されていることがある。

Screen Shot 2016-10-31 at 22.09.12

1-1: Authentication (認証)

Authentication
認証について。
「アプリにTwitterでログイン」などが設定できる

Screen Shot 2016-10-31 at 16.39.39

対応認証プロパイダ:

  1. Azure Active Directory
  2. Facebook
  3. Google
  4. Twitter
  5. Microsoft アカウント

1-2: Easy APIs

Screen Shot 2016-10-31 at 16.32.40
簡単に REST API を作ることができる。
(例:現在オンラインのユーザの数を返す)

2-0: Edit Site Code

Screen Shot 2016-10-31 at 16.34.44

サーバのコード (node.js)を編集できるオンラインエディタが開く

Screen Shot 2016-10-31 at 16.42.06

2-1: Diagnostic Log Settings (診断ログ設定)

Diagnostic Log Settings

アプリや webサーバのログの設定ができる。
(例:アプリの障害時のログを出力するように設定できる)

2-2: Streaming Logs

Streaming Logs
リアルタイムでログを見ることができるツール
streaming_log

Azure Mobile Apps リファレンス:公式ドキュメント

Azure は日本語のドキュメントが充実しています。助かる!

  1. Mobile Apps とは:Azure Mobile Apps 概論
  2. Xamarin.Forms アプリの作成:Xamarin.Forms + Azure Mobile Apps でサンプルアプリを作ってみる詳細な手順書。クラウド上のDBにクライアントから投稿できるようになるところまで
  3. Azure モバイル アプリでのオフライン データ同期:オフライン同期についての概論
  4. Xamarin.Forms モバイル アプリのオフライン同期の有効化:Xamarin.Forms + Azure Mobile Apps で、オフライン同期を有効にするためにはどうしたら良いかの詳細な手順書
  5. Azure App Service での認証および承認:認証(ログイン機能実装)についての概要
  6. Twitter ログインを使用するように App Service アプリケーションを構成する方法
  7. Xamarin.Forms アプリにプッシュ通知を追加する
  8. ラーニングパス:学ぶべき道すじが示されている
Comments (2)

  1. クローチェ より:

    セッション登壇お疲れ様でした。私は参加できなかったのですが、このブログのおかげで概要が掴めました。とても分かりやすくまとめられていて、ありがたいです。

    1. chomado より:

      クローチェさんありがとうございます!

Skip to main content