【連載】

ゼロからはじめるAzure

7 Azureとモバイルアプリを連携させる

7/8

はじめに

前回は、Azureの仮想マシンを使ってWindows Server上に構築したASP.NETのWebアプリケーションを動作させる環境構築手順などについて紹介しました。Azureには、用途にあったサービスの構築済みテンプレートが豊富に用意されており、それらの中から選ぶことで目的に沿った環境を簡単にすばやく用意することができるようになります。今回はモバイルアプリ向けのサービスと、アプリとAzureを連携するためのSDKについて紹介します。

前回同様、本連載では次の環境で動作確認を行っています。本記事ではクライアントの開発環境としてXamarin.Androidを利用しています。
・Windows 10 Home
・Visual Studio Community 2017 Version 15.2(以降、VS2017)

本稿で説明するリストはサンプルの中に収録しています。ご活用ください。

Azureのモバイルアプリ向けサービス

スマートフォンやタブレットなど、多くの人にとってモバイル端末は生活に欠かせないものになっています。モバイル端末にはユーザのやりたいことを実現するためのアプリケーション(以降、モバイルアプリと省略します)が多くインストールされており、何らかのサービスを提供する側としては、これらモバイルアプリへ対応するかどうかで使ってもらえるユーザ数が大きく変わってきます。

Azureでもこれらモバイルアプリに対応させるため、次のような機能が提供されており、それぞれサーバ側サービスとクライアント側SDKを利用することで簡単に自分のモバイルアプリに取り入れることができるようになっています。

モバイルアプリ向けサービスで提供されている機能

機能概要
認証と承認IDプロバイダによるアカウントの認証と承認
データアクセスSDKを利用することによるクライアントとサーバ間のデータアクセス
オフライン同期クライアント側SDKを使うことでオフライン時のキャッシュが可能
プッシュ通知大規模なデバイス数にまで対応可能なプッシュ配信

認証と承認

Azureでエンタープライズ用に提供されているActiveDirectoryだけでなく、TwitterやFacebook、Google、そしてMicrosoftアカウントなどのソーシャルプロバイダを利用したアカウント情報の認証と承認をシンプルな手順で実現するための機能が提供されています。またこれら以外でもOAuth2.0に対応しているIDサービスプロバイダであれば同様に対応可能です。

データアクセス

モバイルアプリサービスでは、AzureのSQLデータベースやオンプレミス環境にあるSQL Serverと簡単に接続することが可能となっています。またEntity Frameworkに基づいた仕組みであることから、AzureテーブルストレージやCosmosDBなどのデータプロバイダとも統合することが可能です。

オフライン同期

基本的にはクライアント側での対応となりますが、クライアントSDKを利用することでオフライン時はデバイス内のデータベース(OSの種類によって異なる)にデータを保存するなどの対応を簡単に実現できます。

プッシュ通知

最近のモバイルアプリではリテンションを上げるために頻繁にプッシュを送るようになっていますが、アクティブユーザの多いサービスほど大量のプッシュを送る必要があります。大量かつ短時間でのプッシュ配信には、規模によっては複雑かつ大規模なバックエンドシステムが必要になりますが、AzureのNotification Hubsを使うことでこれらの手間やコストを自前で構築するよりもお得に実現できます。

サーバ側のサンプルプロジェクト

本記事では、これまでの連載で作ってきたアドレス帳サービスをモバイルアプリに適用させてみます。モバイルアプリの場合にはサーバ側、クライアント側の両方でAzureのポータルから基本となるプロジェクトファイル一式がダウンロードできるようになっていますので、こちらを拡張する形で説明します。またクライアントアプリはXamarin.Androidで作成します。

本サンプルではSQLデータベースに値を保存します。第5回目の記事を参考に、AzureのSQLデータベースの作成と設定を行ってください。今回のサンプルで利用するSQLデータベース名は「AzureSQLSample」としました。

Azureのモバイルアプリサービス作成

Azureのポータルからモバイルアプリサービスを作成します。モバイルアプリはApp Serviceの一つとして用意されているため、ダッシュボードからApp Serviceを選択します。

ポータルからApp Serviceを選択

上部の「追加」(1)をクリックすると用意されているサービスの一覧が表示されるため、Web+モバイルペインの検索バーに「Mobile App」と入力して絞込を行います(2)。絞り込まれた一覧から「モバイルアプリ」を選択して(3)、「作成」ボタンをクリックします。

モバイルアプリを選択

次に作成するモバイルアプリの名前、App Serviceのプランなどを選択します。ここで設定する値は次のものです。

モバイルアプリサービス設定

項目名説明
アプリ名モバイルアプリのホスト名。ユニークである必要がある
サブスクリプション契約しているサブスクリプションの種類。従量課金など
リソースグループこのサービスが所属するリソースのグループ。すでに作成済みの場合には既存のものを指定
App Serviceプラン/場所このサービスを実行するマシンのプラン

モバイルアプリサービスの入力時設定

上記の内容を入力したら「作成」ボタンをクリックします。指定された内容でAzure上にこのサービスを動かすための環境が構築されます。

サーバ、クライアントのコードをダウンロード

サーバ側とクライアント側の両方のコードをダウンロードするには、Azureのダッシュボードから先ほど作成したモバイルアプリサービスを選択し、左側の一覧から「クイックスタート」を選択し(1)、右側に表示されるクライアントの一覧の中から「Xamarin.Android」を選択します(2)。

クイックスタートからクライアントアプリの種類を選択

クイックスタート画面では、SQLデータベースの接続設定や、サーバ側の利用言語などを指定することでSQLデータベースの接続設定やクライアントから呼び出すAPIサーバのホスト名などがあらかじめ設定された状態でプロジェクトファイルをダウンロードできるようになっています。

サーバ側ダウンロード

「1 データベースの接続」を選択すると、サーバ側サービスとデータベースとの接続設定を指定することができます。 追加ボタンをクリックし、あらかじめ作成しておいたSQLデータベースとの接続に必要な情報を指定します。

データベースの接続設定

データベースの接続設定が完了したら「2 テーブルAPIの作成」でC#を指定してダウンロードをクリックします。引き続き、クライアント側のプロジェクトファイルも同様に「3 クライアントアプリケーションの構成」のダウンロードをクリックしてファイルを取得しましょう。

クライアント側ダウンロード

それぞれzipで圧縮されたファイルとしてダウンロードされ、次のようなファイル名となります。

モバイルアプリサービス設定

種類ファイル名
サーバ側<モバイルアプリサービス名>_Runtime.zip
Xamarin.Androidのクライアント側<モバイルアプリサービス名>_Xamarin_Android.zip

Xamarin for Visual StudioとAndroid関連のコンポーネントをインストール

クライアント側のアプリケーションはXamarin.Androidで作成するため、必要なコンポーネントをインストールします。VS2017ではXamarinの開発環境が統合されおり、必要なコンポーネントはVisual Studio Installerからインストールすることができます。まずはWindowsの検索バーに「Visual Studio Installer」と入力し、インストーラアプリを起動します。

Visual Studio Installerを起動する

インストーラアプリが起動したら、VS2017の「変更」ボタンをクリックし、必要なコンポーネントを選択します。

変更を選択

必要なコンポーネントはワークロードという単位でまとめられていますので、ワークロード一覧から「.NETによるモバイル開発」にチェックを付けます。

モバイル開発のワークロードを選択

次にワークロードに含まれるコンポーネントを選択します。今回はXamarinを使ったAndroidアプリ開発に必要なコンポーネントのためAndroid SDK(Software Development Kit)やJavaの開発キットなどが必要となります。本サンプルではNDK(Native Development Kit:CやC++言語でAndroidアプリを開発するためのツール類)は不要のためインストール対象からは外しています。これだけで約23GBにもなりますので、PC側の空き容量には注意してください。

コンポーネントを選択

サーバ側プロジェクトの修正

ダウンロードしたサーバ側プロジェクトはTODO管理用のデータモデルおよびコントローラがあらかじめ実装されていますので、これにアドレス帳のデータとコントローラを追加していきます。

ダウンロードしたプロジェクトの内容

修正の前に、まずはモバイルアプリサービスプロジェクトに含まれる主要なファイルについて紹介します。

主要なファイル

ファイル名概要
App_Start\Startup.MobileApp.csモバイルアプリサービスの初期化処理。データベースの初期値など設定を行う
Controllers\TodoItemController.csTODOデータの操作を行うテーブルAPIコントローラ
Controllers\ValuesController.csテーブルデータ以外のAPI用コントローラ
DataObjects\TodoItem.csTODOデータそのものを定義しデータオブジェクトクラス
Models\AzureMobileAppSampleContext.csデータベースとデータオブジェクトを取り持つクラス

モバイルアプリで扱うコントローラは二種類あり、それぞれテーブルデータを直接操作するテーブルコントローラとカスタムコントローラとなります。またAzureMobileAppSampleContextクラスは登録したモバイルアプリサービス名によって変わってきますので以降はコンテキストクラスと呼びます。

アドレス情報データオブジェクトの作成

それではアドレス帳を表すデータオブジェクトをクラスを作成しましょう。VS2017のソリューションエクスプローラーで「DataObjects」フォルダを指定して右クリックし、[追加]-[新しい項目]から新しい項目の追加ダイアログを開き、クラスを選択して「Address.cs」ファイルを追加します。Addressクラスは「Microsoft.Azure.Mobile.Server.EntityData」から継承し、必要なプロパティを定義します。

Address.cs

 using Microsoft.Azure.Mobile.Server;

 namespace AzureMobileAppSampleService.DataObjects
 {
   public class Address : EntityData
   {
     public string Email { get; set; }
     public string FirstName { get; set; }
     public string LastName { get; set; }
   }
 }

EntityDataは「Microsoft.Azure.Mobile.Server.Tables.ITableData」インターフェイスを実装した仮想クラスであり、IdやCreatedAt、UpdatedAtなどの基本的に必要となるプロパティを定義しています。

次にデータベースとこのデータオブジェクトクラスを関連付けるためのメソッドをコンテキストクラスに対して追加します。

AzureMobileAppSampleContext.cs(抜粋)

   public DbSet<TodoItem> TodoItems { get; set; }
   // Addressデータオブジェクト用として以下のメソッドを追加
   public DbSet<Address> Addresses { get; set; }

アドレス帳データ操作APIコントローラの作成

次に作成したアドレス帳データをアクセスするためのテーブルコントローラを追加します。コントローラ用のコンテキストメニューにはテーブルAPIコントローラを作成するオプションがあるのですが、残念ながらVS2017ではうまく動作しないため、今回は既存のコントローラをコピーして追加します。

TodoItemController.csファイルをコピーし、AddressController.csを作成します。このファイルを開いてVS2017のクイック置換機能を使ってTodoItemをAddressに置き換えます。テーブルAPIコントローラには、一覧取得、Idを指定しての単独のデータ取得、更新、削除、新規追加用のメソッドが定義されています。

修正したサーバ側プロジェクトの発行

以上でサーバ側のプロジェクトは準備できましたのでAzureに発行してみましょう。発行用のプロファイル設定を作成するために、ツールバーの「Webの1クリック発行」から新しいカスタムプロファイルの作成を指定します。

新しいカスタムプロファイル作成

次のように発行情報を設定する画面では、まずは発行先を指定します。モバイルアプリサービスはApp Serviceの一種のため、「Microsoft Azure App Service」を選択します。次に発行先のサービスはすでにAzureポータルで作成しているため「既存のものを選択」を選択します。

App Serviceへの発行先を指定

この状態で「発行」ボタンをクリックすると作成済みApp Service選択画面が開かれますので、作成済みのサービスを指定してください。

作成済みのモバイルアプリサービスを指定

ここでOKボタンをクリックすると、Azureへの発行処理が実行されます。ただしこのままではSQLデータベースと接続情報がプロジェクトに存在しません。念のために接続情報の指定を行っておきましょう。発行先を指定すると発行画面は次のようになっているはずです。ここで「設定」をクリックして設定情報の追加を行います。

発行先指定済み発行画面

左側のペインから「設定」を選択するとデータベース関連の設定を行う事ができます。通常であればAzureのポータルで設定したデータベース設定情報を自動的に取得して設定してくれます。ここで「保存」をクリックしもう一度発行します。

データベースの接続設定

Xamarin.Androidによるモバイルアプリの修正

サーバ側に引き続きクライアント側のサンプルについて見ていきます。ダウンロードしたプロジェクトファイルを展開し、VS2017で開きます。サーバ側と対となるアドレス帳データのやり取りに必要なコードを記述していきます。

ダウンロードしたプロジェクトの内容

クライアント側でもダウンロードしたプロジェクトに含まれる主要なファイルおよびフォルダを紹介します。

主要なファイルおよびフォルダ

ファイル/フォルダ名概要
Properties\AndroidManifest.xmlAndroidのアプリとして必要な定義を記述する
Resourcesこのフォルダ以下には画像やレイアウトなどの各種リソースを格納
ToDoActivity.csTODOアプリの画面を定義しているクラス
ToDoItem.csTODOデータを定義しているクラス
ToDoItemAdapter.csTODOデータをリスト形式で表示するためのアダプタクラス

Android StudioなどでAndroidアプリを開発していた経験のある方が見るとなんとなくファイルの対応関係がわかると思います。違いとしてはAndroidManifest.xmlにはActivityの情報が記述されていません。Activityの情報についてはビルド時に各ActivityクラスのActivity属性値によって抽出され、マニフェストファイルに取り込まれるようになっています。

クライアント側プロジェクトの修正

今回のサンプルプロジェクトでは既存のActivity、Adapter、データクラスをコピーし、名前を変更して利用しています。サンプルのために追加、修正したファイルは以下のとおりです。

サンプルのために追加、修正したファイル

ファイル名概要
Resources\layout\Activity_Address.axml(新規)アドレス帳画面のレイアウト定義ファイル
Resources\layout\Row_List_Address.axml(新規)リスト形式でアドレス情報を表示するためのレイアウト定義ファイル
Resources\values\Strings.xml(修正)文字列リソース
AddressActivity.cs(新規)アドレス帳の画面を定義しているクラス
Address.cs(新規)アドレスデータを定義しているクラス
AddressAdapter.cs(新規)アドレスデータをリスト形式で表示するためのアダプタクラス

Xamarin.AndroidではC#でクラスなどを実装することになりますが、Androidアプリの開発経験のある方ならば対応関係はなんとなく理解できると思います。ただXamarin.Androidでは開発言語がC#であることから.NET(Mono)のオブジェクトとJavaのオブジェクトの両方が存在し、それぞれが行き来しながらデータをやり取りするようになっています。例えばAddressクラスではC#でのクラスに加えてJavaのラッパークラスを定義しています。

Address.cs(抜粋)

 // (1)アドレスデータ定義クラス
 public class Address
 {
   // 省略
 }
 // (2)Javaのオブジェクトから.NETのオブジェクトを取得するためのラッパークラス
 public class AddressWrapper : Java.Lang.Object
 {
   // 省略
 }

上記のようにAddressクラスは.NETのクラスとして定義していますが(1)、これをJavaオブジェクトとしてラップするAddressWrapperクラスはJava.Lang.Objectから継承しています(2)。

サーバ、クライアントそれぞれのサンプルを実行するには、NuGetの復元を実行して依存関係のライブラリを取得してから行ってください。またクライアントサンプルから皆さんの作ったサーバサイドのAPIを呼び出すにはAddressActivityクラスで定義している「applicationURL」の値を修正する必要がありますのでご注意ください。

<編注>VisualStudio 2017で実行する場合、ツールバーのAndroidメニューから適切なAndroid環境を選択しておこないます。この場合、使用するPCの環境によって作業が終了するまでに相当時間がかかることがあります。

以下は修正したAndroidアプリを実行した例です。

Android端末での表示例

オフライン対応

サンプルプログラムの最後に、オフライン対応について紹介します。モバイルアプリSDKを利用すると機内モードなどネットワークに接続していない場合に、アプリ内のSQLiteデータベースにデータを保持しておくための仕組みが用意されています。オフライン対応はクライアント側のビルド設定で条件付きコンパイルのシンボルとしてOFFLINE_SYNC_ENABLEDを指定するだけで対応可能となっています。

ビルド設定画面はVS2017のメニューから[プロジェクト]-[<プロジェクト名>のプロパティ]から開くことができます。

ビルド設定画面

まとめ

クライアント側については駆け足になってしまいましたが、Azureのモバイルアプリサービスではサーバ側とクライアント側の両方でライブラリが提供されており、これらを使うことで簡単にモバイルアプリを作成することができるようになります。

さて、本連載も私の執筆担当分はここまで、次回からは同じくWINGSプロジェクトの秋葉 龍一さんへバトンタッチとなります。一部の機能しか紹介できませんでしたが、Azureでは他にも機械学習など便利な機能が提供されています。また2017年9月からは、パブリッククラウドであるAzureをオンプレミス環境に構築できるAzure Stackが出荷される予定です。これまでデータを外部のクラウド環境に置くことのできなかった会社の方々には、Azureの利便性を自社のデータセンターで利用できるようになります。拙稿がきっかけでAzureに興味を持っていただければ幸いです。

WINGSプロジェクト 花田善仁著/山田祥寛監修
<WINGSプロジェクトについて>テクニカル執筆プロジェクト(代表山田祥寛)。海外記事の翻訳から、主にWeb開発分野の書籍・雑誌/Web記事の執筆、講演等を幅広く手がける。一緒に執筆をできる有志を募集中。

7/8

インデックス

連載目次
第8回 Functionsを使ったイベント駆動アプリ
第7回 Azureとモバイルアプリを連携させる
第6回 仮想マシンでサーバごと管理する
第5回 クラウド環境のリレーショナルデータベース
第4回 テーブルストレージによる更新、削除、複雑な検索処理
第3回 テーブルストレージを用いたWebアプリケーション
第2回 ストレージの種類と概要
第1回 Azureの登録からWebアプリケーションの公開

もっと見る

クラウド,Microsoft,マイクロソフト,Microsoft Azure,Azure,Windows 10,


人気記事

一覧

イチオシ記事

新着記事