Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

目次

アプリをビルドする

 続いて、サンプルソースのアプリをビルドしてみましょう。その前に、左のメニューから「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

  • 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...

バックナンバー

連載:最新バージョン「Visual Studio 2017(Visual Studio "15")」特集
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5