Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

iOS/Androidアプリの開発を支援する「Visual Studio Mobile Center (preview)」を使ってみよう

最新バージョン「Visual Studio 2017(Visual Studio "15")」特集 第4回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 2016年11月にMicrosoftから、iOSとAndroidの開発を支援、管理するための、Visual Studio Mobile Centerのプレビュー版が公開されました。Visual Studioという名前がついていることから、Visual Studioなどと密接に連携することもできますが、このサービスはそれらのサービスやツールを使わない方にも非常に魅力的な機能を提供しています。今回は、このVisual Studio Mobile Centerがどのような機能を持っているのか、また、どのようにシーンで利用できるのかを紹介します。

対象読者

  • スマホアプリ(iOS/Andoroid)の開発者
  • スマホアプリの企画者、テスターなどの関係者
  • スマホアプリをリリースしているサービス事業者

Visual Studio Mobile Centerとは

 スマホアプリの開発をしていると、現場ではさまざまな問題にぶつかります。

 まず、最初にぶつかる問題がアプリの実機へのインストールです。特に開発者がアプリのリリース元と異なる場合には問題はより大きくなり、アプリのプロビジョニング(アプリへの署名)などを開発者以外が行う必要が出てきます。そして、Androidの場合であれば、さまざまな機器での動作確認が必要です。そして、リリース後でも、頻繁に更新されるOSのバージョンアップへの対応のビルド環境を用意するなど非常に苦労が多いのがスマホアプリの開発・運用になります。

 Visual Studio Mobile Centerはスマホアプリのテストから実際の運用までで必要となるこれらの問題を解決できる、以下の機能を備えています。

  • Build (アプリのビルド機能)
  • Test (約400機種とアプリテストツールを使っての自動テスト)
  • Distribute (テスターへのアプリの配布)
  • Tables (Microsoft AzureのモバイルEasy Tablesと連携した機能の提供)
  • Identity (FacebookやGoogle+などのソーシャルアカウントと連携したユーザ認証機能の提供)
  • Crashes (アプリの不正終了などのレポート情報を収集する機能)
  • Analytics (アプリの利用状況・アクセス状況などのレポート機能)

 これらの機能を利用する各管理の工程のイメージが図1です。

図1 各機能の利用工程図
図1 各機能の利用工程図

 Build、Test、Distributeまでは、アプリを配布するまでの工程を管理します。そして、Analyticsではアプリの利用状況が把握できるので、実際のサービスがどのように使われているのかや、今後、どのように改善していけば良いかを検討するために必要な情報が得られることでしょう。

 また、Crashesでは、アプリが不正終了してしまった場合にそのクラッシュレポート情報の収集が可能になります。リリース後に実際に問題が生じてしまった際に役立つことでしょう。

 ここまでの機能はアプリ開発や管理の各工程を管理するための機能でしたが、TablesとIdentityはMicrosoft Azureサービス――モバイルバックエンドサービスとの連携機能を提供します。従って、Microsoft Azureのサブスクリプションがないと利用できません。Microsoft Azureサービスと連携が前提で、モバイルバックエンドサービスで提供されている機能はこれだけではありませんが、よく利用される機能ということで、このMobile Center内でコントロールできるようになっているのではないかと思われます。

使う前の準備

 ここからは、実際にAndroidアプリとiOSアプリでのMobile Centerの使い方を紹介します。

 その前に、アカウントを作成する必要があるので、Mobile Centerのサイトにアクセスしてください。アカウントは誰も無料で作成できますが、すでにGitHubかMicrosoftのアカウントを持っていれば、そちらを使っても構いません。

 また、ビルド対象のソースコードを取得するために、GitHubなどのリポジトリサービス上にあることが前提になっています(注1)。各種リポジトリはPrivateであってもPublicであってもどちらでも構いません。

注1

 執筆時(2017/03月)にはGitHubのみのサービスでしたが、現在ではGitHubに加え、「Visual Studio TeamServices」と「BitBucket」もリポジトリサービスとして利用できるようになりました。

 今回は実際にGitで管理されているiOSやAndroidのソースコードを自動的にビルドし、ビルドが終了すると、メールで通知し端末にインストールして実行するまでの流れ(図2)を通じて、それぞれの機能を紹介します。

図2 ソースの変更からアプリのビルド・配布までの流れ
図2 ソースの変更からアプリのビルド・配布までの流れ

Mobile Centerにアプリを追加する

 実際にiOSとAndroid用のアプリを追加してみます。Mobile Centerには表1で示すアプリが登録可能です。また、現時点で、ユニバーサルWindowsプラットフォーム(UWP)のサポートも予定されています。

表1 Mobile Centerで利用可能なプラットフォーム
利用できるプロジェクト(もしくは言語)タイプ ターゲットOS 説明
Objective-C iOS Objective-Cで構築されているiOS用のプロジェクト
Swift iOS Swiftで構築されているiOS用のプロジェクト
Java Android Javaで構築されているAndroid用のプロジェクト
React Native iOS/Android react.jsを使ったiOS/Android用のマルチプラットフォーム向けのプロジェクト
Xamarin iOS/Android Xamarin(C#)を使ったiOS/Android用のマルチプラットフォーム向けのプロジェクト

 本稿では、Visual Studio 2017で開発がサポートされているXamarinを使って、iOSとAndroidの場合を紹介します。

 なお、サンプルアプリには、Xamarinが提供しているTodoアプリを利用します。サイトを表示すると図3のように表示されるので、「ダウンロード」ボタンを押して該当のファイルをダウンロードしたら、それらのファイルをもとに自分のリポジトリを作成します。

図3 TODOサンプルアプリのダウンロードサイト
図3 TODOサンプルアプリのダウンロードサイト

 それでは、Mobile Centerにログインし、新しい「App」を作成していきましょう。Mobile CenterにおけるAppとは、ビルド、テスト、配信など行う最小単位であり、このAppからは1つのプラットフォームに対するアプリケーションのみを扱えます。

 そのため、XamarinやReact NativeなどのマルチOS開発を行えるプラットフォームを使用する場合は、iOS用とAndroid用のAppをそれぞれ作成する必要があります。今回は、iOS向けに手順を紹介しますが、Androidでもほぼ同様の手順で対応が可能です。

 Appを新規作成するには、Mobile Centerのトップ画面から「Add new app」ボタンを押します。作成フォームが表示されるので、以下の図のように必要な情報を入力してください。「Name」と「Description」には任意に記述して問題ありません。

図4 App新規作成画面
図4 App新規作成画面

 入力が終了したら「Add new app」ボタンを押せば、Appの作成は完了です。

アプリをビルドする

 続いて、サンプルソースのアプリをビルドしてみましょう。その前に、左のメニューから「Getting Started」を見てみます。ここでは、自身のアプリケーションをMobile Centerと連携するために変更するコードが記されています。

図5 「Getting Started」画面のキャプチャ
図5 「Getting Started」画面のキャプチャ

 内容は選択したプラットフォームや利用する言語により異なりますが、今回は「XAMARIN.FORMS」という説明を元にソースを修正します。修正したソースの抜粋は、リスト1のとおりです。

補足

 これらの設定を行わなくてもクラウド側との連携が必要ない「Build」や「Distribute」などの機能は利用できます。「Crashes」や「Analytics」など、クラウド連携を前提としたサービスを利用しない場合には、後で設定しても問題ありません。

リスト1 アプリコードへのMobileCenterの設定(App.csの抜粋)
// (1) パッケージを追加
using Microsoft.Azure.Mobile;
using Microsoft.Azure.Mobile.Analytics;
using Microsoft.Azure.Mobile.Crashes;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace Todo
{
    public class App : Application
    {
        // (2) MobileCenterの設定を追加
        protected override void OnStart()
        {
            MobileCenter.Start("ios=49472de4-f3fb-46c0-9929-xxxxxxxxxxxx;" +
                "android=e98395ea-d285-48e3-a524-xxxxxxxxxxxx;",
               typeof(Analytics), typeof(Crashes));
        }
        // : 省略
    }
}

 (1)では、「Mobile Center」、「Mobile Center Analytics」、「Mobile Center Crashes」のパッケージを指定します。

 これらのパッケージを追加するには、同時にNuGetパッケージの追加作業も必要です。Visual Studio 2017では、「ツール」-「NuGetパッケージマネージャ」-「パッケージマネージャコンソール」からリスト2のように実行してください。

リスト2 NuGetパッケージの追加
PM> Install-Package Microsoft.Azure.Mobile
PM> Install-Package Microsoft.Azure.Mobile.Analytics
PM> Install-Package Microsoft.Azure.Mobile.Crashes

 続いて、(2)ではMobileCenterの設定を追加します。実際には「Getting Started」ページで表示されたコードを追加してください(注2)。

注2

 「Manage App」を選択した画面の「App secret」でも確認できます。

 「App secret」とは、アプリがMobile Centerと接続するためのシークレットキーなので、この値を間違えるとAnalyticsやCrashesの機能と連携できません。間違えずに記載してください。

 また、ここで注意しなければならないのが、XamarinやReact Nativeを使用してiOSとAndroidの両OS向けアプリを開発している場合です。

 「App secret」は、Mobile Centerの「App」単位で発行されるため、両OSで値が異なります。そのため両OS用のAppをMobile Centerに作成し、それぞれの「App secret」をコードに反映させる必要があります。ここまで終了したら、これまでの修正を利用するリポジトリへとプッシュします。今回のサンプルでは執筆当時、利用できるリポジトリサービスがGitHubのみでしたのでGitHubを利用する事を前提としていますが、その他のサービスを使っていても同様です。

 続いて、GitHub上に登録したソースとMobile Centerを接続し、ビルドを行えるように設定します。まず、画面のサイドメニューから「Build」を選択すると、図6のようにGitHubとの連携をするための画面が表示されます。

図6 GitHubとの連携画面
図6 GitHubとの連携画面

 画面上にある「Connect to GitHub」を選択すると、GitHubの認証画面にリダイレクトするので、お手持ちのアカウントでログインします。

 GitHubにログインすると再度Mobile Centerにリダイレクトします。連携に成功すると、自身のGitHub上のリポジトリの一覧が表示されます。この中から、このAppで利用するリポジトリを選択します。リポジトリはプライベート(有料)であってもパブリックであっても利用可能です。

図7 リポジトリ選択画面

図7 リポジトリ選択画面

 リポジトリを選択すると、リポジトリ内のブランチ一覧が表示されるので、ここでビルド対象のブランチを選択します。サンプルでは、masterブランチしかないので、一覧の中身も1つだけですが、一般的にはブランチの数だけ表示されます。

 指定したブランチにコードをプッシュすると、自動でビルドされるような運用が可能です。実際にはテストブランチなどを作成し、そこで管理するとよいでしょう。対象のブランチを選択すると、ブランチのセットアップ画面になります。Mobile Centerでビルドしたいブランチを選択し(ここではmasterブランチ)、「Set up branch」を選択すると、図8のような設定画面が表示されます。

図8 ブランチ詳細設定画面
図8 ブランチ詳細設定画面

 また、各項目からは、表2のような内容を設定できます。

表2 ビルド時の設定項目
項目名 説明
Project ビルドするプロジェクトを選択。各プラットフォーム・言語タイプのプロジェクトに応じたプロジェクトが自動的に選択される。
Configuration ビルドする際の設定を選択する。Projectで選択したプロジェクトから構成を検出するので、その中から選択が可能。
Xcode Version iOS用プロジェクトの場合のみ選択可能。ビルド時に使用するXcodeのバージョンを選択可能。
Build on push コードがプッシュされたタイミングで自動でビルドするかを設定。オフにした場合には画面上から手動でビルドを実行する。
Build for simulator only iOS用プロジェクトの場合のみ選択可能。オンの場合にはシミュレータでのビルドのみで実機用のビルドは行わない。オフにした場合には「Sign Builds」の設定が必要。
Sign builds 実機用のビルドを有効にする。ビルドに成功すると配信用のパッケージであるipaファイル(iOSの場合)、もしくはapkファイル(Androidの場合)が作成される。また、iOSの場合にはプロビジョニングプロファイルと証明書のアップロード、Andoridの場合にはキーストアファイルのアップロードとそのファイルのパスワードの設定が必要。
Distribute builds 配信用パッケージを配信用グループに設定。ビルド時に自動的にメールで対象者に通知される。

 「Finish setup」ボタンをクリックすると、自動的にビルドが開始されます。ビルドに成功すると、それぞれのビルドファイルがダウンロード可能です(図9)。もし、ビルドに失敗したら、ビルド時の設定項目を再度、確認してください。

図9 ビルド成功時
図9 ビルド成功時

 ビルドファイルをダウンロードしたら、実機もしくはシミュレータにインストールして実行してください。iOSシミュレータならば、ios-simなどを使って実行するとよいでしょう。例えば、iPhone6のシミュレータ上で実行する場合にはリスト3のようにします。

リスト3 iOSシミュレータ上での実行例
$ios-sim launch ./TodoiOS.app --devicetypeid iPhone-6

アプリを端末に配信する

 Mobile Centerでは、アプリの配信用パッケージを、登録したユーザに対して配信することもできます。アプリを配信するとメールが送信されるので、アプリをインストールしたい端末でメールを受信して、メール内のリンクからアプリを端末にインストールしてください。

 アプリを配信するための「Distribute」サイドメニューには、「Groups」と「Releases」の2つのサブメニューがあります。

 「Groups」ではアプリの配信先メンバーの追加や、新しい配信グループを作成することができ、「Releases」では配信用のパッケージのアップロード、グループに対するアプリの配信を行うことが可能です。

 Groupsにはデフォルトで「Collaborators」というグループが作成済みで、自分のアカウント(Appを作成したユーザ)は追加されています。

 アップロードするファイルは、iOSの場合は.ipaファイルを、Androidの場合は.apkファイルです。アプリを配信すると、対象者に図10のようなメールが送信されるので、本文中の「See details」というボタンから手順に沿って実機にインストールが可能です。

図10 受信するメールサンプル
図10 受信するメールサンプル

 ただし、iOSアプリをインストールする場合は、ブラウザがSafariである必要があります。デフォルトブラウザがSafari以外の場合は、URLをコピーしてSafariで開き直すようにしてください。また、このメールはビルド時に自動的に配信することも可能なので、ビルドとは関係なく個別にアプリの配布が必要な場合に利用することになると思います。

アプリの利用状況を確認する

 アプリの配信が完了し、実行できたら、次は「Analytics」を確認してみましょう。Analyticsには表3に示すサブメニューがあります。

表3 Analyticsでのサブメニュー一覧
項目名 説明
Audience アプリの利用頻度や利用者数などの情報。
Events ログインやログアウトなどアプリ内で独自に定義したイベントのトラッキング。別途、ソースコード上に指定が必要。
Log flow 接続したアプリのセッションのログが記録される。

 また、Audienceサブメニューでは、以下の表4のような統計情報が取得できます。

表4 Audienceで取得可能な統計情報
項目名 説明
Active users 月・週・日ごとのアクティブユーザ数。
Daily sessions per user ユーザあたりの平均セッション数。
Session duration セッションの期間の分布。
Top devices アプリを利用している端末のバージョン。
Countries アプリを利用している地域。
Languages アプリを利用している端末の言語。
Active devices per version バージョン別のアクティブな端末数。

 アプリを端末にインストール・起動した後にAudienceを表示すると、各グラフが変動していると思います。しばらく立ってもグラフにデータが反映されない場合には、SDKのコード部分を再度確認してください。

図11 Audience画面
図11 Audience画面

 これらの詳しい説明はMobile Centerのドキュメントにあります。また、イベントを取得するためには、個別でトラッキング用のコードを記述する必要があります。例えば、Xamarinの場合には先ほどのドキュメント内のこちらを見ると方法が分かるので、ぜひ、お試しください。

 このAnalyticsを使えば、Webサイトと同じようにアプリの統計も扱えるので、今後のアプリの販促戦略やサポートなどをするための情報を得ることができます。

アプリのクラッシュ状況を確認する

 アプリマーケットのユーザのコメントを見ると「アプリが落ちてしまいます」などのコメントを見ることがあります。アプリの異常終了の原因はさまざまで、なかなかアプリの利用者からその原因や利用状況をヒアリングすることも難しいのが現実です。

 この「Crashes」では、アプリが何らかの理由によって異常終了した場合に、その時のログを確認できます。

 図12と図13は、ボタンのハンドラの中に意図的にゼロ除算のコードを仕込み、アプリをクラッシュさせた場合に取得できた情報です。エラーのスタックトレース、クラッシュした回数・デバイス・OSバージョンを確認することができるので、利用者から状況を把握するよりも多くの場合、詳細な情報が分かると思います。

図12 Crashes画面
図12 Crashes画面
図13 クラッシュ時のスタックトレース
図13 クラッシュ時のスタックトレース

テスト機能を確認する

 アプリのテスト機能はXamarin Test Cloudを利用しています。

 Xamarin Test Cloudでは実機でテストしている状況を記録できるXamarin Test Recorderなどもあり、アプリテストの機能が充実しています。ただし、Mobile Centerでは同じ機能が利用できるわけではないようです。例えば、Xamarin Test Cloudでは1000機種以上のデバイスが利用可能ですが、Mobile Centerでは約400機種になっています。

 また、テストの実行では以下の表5に示すテストフレームワークを利用して実行が可能です。

表5 利用できるテストフレームワーク
フレームワーク名 フレームワークのURL
Appium http://appium.io/
Calabash http://calaba.sh/
Espresso https://google.github.io/android-testing-support-library/docs/espresso/
Xamarine.UITest https://developer.xamarin.com/guides/testcloud/uitest/

 本稿では各テストの利用方法までは紹介しませんが、まだまだ、スマホアプリの自動テストは一般的ではないと思います。しかし、これらの環境が無料で利用でき、また、数多くの実機を用意しなくても確認できることもあり、Mobile Centerの利用を機にアプリの自動テストにチャレンジしてみるのもよいことでしょう。

 また、利用する際にはMobile Center上だけでは少々、情報が足りない部分があるので、併せてドキュメントを同時に参照する必要があります。

最後に

 今回、詳しく紹介しきれなかった機能にモバイルバックエンドとの連携機能があります。現在はクラウド連携機能として、「Tables」というAzure上にデータ保存する機能や、「Identitiy」というさまざまなソーシャルサービスとの連携を簡単にするための機能もあります。そして、アプリ開発に欠かせないプッシュ通知機能についても、今後連携が予定されているようです。

 ここまで紹介した機能だけでもiOSやAndroidのアプリ開発や管理に関するMicrosoftの本気度が伝わってくるのではないでしょうか。また、これらの機能がWindows向けの環境よりも先行し利用できることに非常に驚きを感じます。

 さらに、今回説明に使用したXamarinのようなマルチOS向けのアプリ開発プラットフォームとMobile Centerと組み合わせることで、ますますアプリ開発が便利になり、そして、Microsoftのツールやサービスは目が離せないものになってくるでしょう。

参考資料

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • WINGSプロジェクト 秋葉 龍一(アキバ リュウイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5