Xamarin for Visual Studio概説（前編）
Visual StudioでiOS／Androidアプリが書けるXamarinを試してみた（iOS編）
新登場のXamarin for Visual Studioとは？ 「iOSのネイティブアプリをWindows上で作るって、どういうこと？」という疑問に答え、実際にiOSアプリ開発を試してみる。
筆者はVisual Studioの利用経験が10年以上と長く、その使い勝手の良さや、開発生産性をとても気に入っている。もちろん、EclipseやXcodeのようなIDE（統合開発環境）もたまに利用するが、「この開発でもVisual Studioが使えるといいな」と思うことは少なくない。これと同じことを考えたことがある方であれば、本稿の内容はきっと興味深いに違いない。また、Visual Studioを触ったことがなくても、「Windows上で」iOSやAndroid向けのアプリを開発したい方であれば、本稿を一読してその開発方法を知っておくことには価値があるだろう。
正直いって、Xamarin（ザマリン）製品についてはこれまで、何となく「興味本位では扱うが、本格利用では敬遠したい」という気持ちがあった（……本当にごめんなさい）。筆者はこれまでにも「特集：Macアプリ開発を体験しよう！：初めてのMac向けC#開発環境「Xamarin.Mac」 - ＠IT」という記事を執筆したり、＠ITの編集者として「特集：.NETでもAndroid開発はできるのか？：初めてのMono for Android開発 － ＠IT」という記事を企画・編集したりしてきており、好奇心でXamarin製品を追いかけてきた。しかし、＠ITの業務アプリInsider主催のイベントで「純正以外の開発技術を使うと、突然の規約変更などで『リジェクト（＝アプリの受付拒否）』される可能性があったり、最新の環境にライブラリが対応していなかったりという問題がある」との意見もあったので、「やはり本格的なプロジェクトでは使いたくないもの」という考えに傾いていた。
その考えが最近変わったのである。2013年11月21～22日に開催された「The Microsoft Conference 2013」（以下、MSC 2013）で期待せずに受講したセッション「iOS / Android / Windows すべてに対応したアプリを作るには」（講師： マイクロソフト エバンジェリスト 渡辺 友太 氏、デモ： 同エバンジェリスト 大西 彰 氏）で、Windows上のVisual Studioを使って、そのままiOSアプリやAndroidアプリを開発できるのを見て衝撃を受けたからだ（次の画面は、実際にVisual Studio上でiOSアプリを開発しているところである）。
これまでのXamarin製品では、基本的に「Xamarin Studio」というMac OS XとWindowsのクロスプラットフォームで動作する独自のIDEが採用されていた。もちろんその使い勝手は悪くないのだが、やはり「Windows上でVisual Studioを使って開発できるなら、その方がいい」という気持ちは依然として強かった。その願いが、新しく登場した「Visual Studio向けのXamarin」（Xamarin for Visual Studio）で実現してしまったのだ。もちろん開発できる内容は、以前と比べてそれほど大差がないかもしれないが、特に「iOSのネイティブアプリをC#を使ってWindows上で作れる」ところに筆者は感動している。
本稿では、このXamarin for Visual Studioについて、筆者が実際に試し、その基本的な開発の内容を簡単に紹介する。なお、iOSとAndroidの両方のアプリ開発方法について説明すると、かなり長くなってしまうので、今回、実際に開発する内容については、iOSアプリに絞って説明する。Androidアプリの開発内容については、後編で説明する。
それでは、Xamarin for Visual Studioの機能内容や開発手順を見ていこう、としたいところだが、その前に、「iOSアプリをWindows上で作ると言っても、UI（ユーザーインターフェイス）の作成とかどうするの？」など、根本的な疑問の方が気になると思うので、先にいくつかの主要な疑問点について筆者なりに回答しておこう。
Xamarin for Visual Studioの“謎”に対する、筆者なりの簡単な回答
「iOSアプリをWindows上で作るって、UI作成はどうするの？」
通常、Mac上のXcodeでiOSアプリのUIを作成する場合には、
1「Interface Builder」というGUIデザイナーを使う
2コードでUIを記述する
という2種類の手段がある。簡単なUI作成では1の場合が多いが、細かく表示位置などを制御したい場合などでは2の方が好まれる傾向にある。実際に、弊社のiOSアプリの「ロケスマ」などでは2の方法でUIが作成されている。
Xamarin for Visual Studioでも、この2の方法で作成することになる（逆にいうと、Interface Builderはサポートされていないので、コードでしか作成できない）。なお、使うUI部品はiOSネイティブのものになる（Xamarin独自のものではないので、iOSのバージョンアップにより外観が変わる場合も安心だ）。
「iOSアプリをWindows上で作るって、デバッグ実行はどうするの？」
iOSアプリのデバッグ実行は、（Mac向けの）Xcodeに付属の「iOSシミュレータ」などを使う。従って、開発自体はWindows上で行えるものの、デバッグ実行をするために、やはりMac OS Xの実機は必要になる。実際にデバッグを行うには、Windows上のVisual Studioから、リモートにあるMacを指定することになる（詳細後述）。
もちろん、Mac上でWindows OSを動かせる仮想環境の「VMware Fusion」を使えば、1台のMacマシンだけで、Mac OS上の「iOSシミュレータ」でiOSアプリを実行して、Windows OS上のVisual Studioでそのアプリをデバッグすることもできる。実際に、上に掲載した「Visual Studio上でiOSアプリを開発しているところ」という画像は、Mac1台で開発からデバッグまでを行っている例だ。
「AndroidアプリのUI作成はどうするの？」
Androidアプリ開発用には、（iOSアプリの場合と異なり）Visual Studioに統合されたUIデザイナーが提供されており、これを使ってビジュアルにUIデザインを行える（次回、詳細を説明）。
MicrosoftとXamarinの関係
.NETを推進するマイクロソフト社と、その互換環境（Mono）を活用した製品を提供するザマリン社の仲は悪くなかったと想像されるが、これまで強力なパートナーシップを結んでいる印象もなかった。それが今回、Visual Studioの中にXamarinを統合するための製品「Xamarin for Visual Studio」がリリースされ、しかもその製品を、「MSC 2013」というマイクロソフト社のカンファレンスで、マイクロソフトのエバンジェリストが自社製品を差しおいて1セッション丸々説明しているのである。この両社の急接近の背景には、2013年11月13日（米国時間）にXamarin for Visual Studioのリリースとともに発表された「マイクロソフト社とザマリン社のパートナー提携」があるのだ。
この提携に基づき、以下のような新施策が発表されている。
- ポータブル・クラス・ライブラリ（PCL）におけるXamarin.Android／Xamarin.iOS対応
- Visual Studio 2013へのXamarin開発環境の統合
- MSDNサブスクライバー向けの特別特典
それぞれの内容を、もう少し説明しておこう。
ポータブル・クラス・ライブラリ（PCL）におけるXamarin.Android／Xamarin.iOS対応
最新の.NETでは、マルチプラットフォーム対応のライブラリをC#などで記述できる「ポータブル・クラス・ライブラリ」（PCL）という機能が提供されている。このPCLはこれまで、マルチプラットフォームとは言っても、.NET／Windowsストアアプリ／Windows Phoneなどと、Windowsプラットフォームに限定された機能だった。それが今回、Xamarin.AndroidとXamarin.iOSのサポートが追加され（次の画面を参照）、AndroidやiOSといったプラットフォームでもライブラリがそのまま使い回せることになった。
Visual Studio 2013へのXamarin開発環境の統合
これが本稿で説明する内容である。Xamarin for Visual Studioをインストールすることにより、Visual Studio 2013内でXamarin開発が行えるようになった。
MSDNサブスクライバー向けの特別特典
マイクロソフトの開発者向けサービスの会員向けに、1年間の開発者ラインセンスの割引（1998→1399米ドル。ちなみに90日間の無料試用も可能）や、Xamarin Universityというトレーニングコースへの無料参加という2つの特別特典が提供されている。
Xamarin for Visual Studioの環境構築
まずは、Xamarin製品全体をダウンロードしよう。WindowsマシンのWebブラウザーで次のリンク先を開き、［Download Xamarin for Windows］ボタンをクリックしてインストーラー（XamarinInstaller.exeファイル）をダウンロードしよう。
インストーラーを実行して、そのウィザードの指示に従い、インストールを進める。インストール手順自体は難しくないので説明を割愛するが、製品選択（Product selection）では、次の画面のように全てのオプションにチェックを入れるようにしてほしい。
ウィザードの最後でXamarinアカウントのログインが求められる。筆者の場合、Xamarin.iOSとXamarin.Android向けの2つの「Business」ライセンスを保有しているので、ログインすると両者のライセンスがそのまま有効になった。ライセンスを持っていない場合は、Businessライセンスを30日間試用できるはずだ。
Visual Studio 2013日本語版での文字化け／表示崩れについて
インストールが完了したので、Visual Studio 2013を起動してみよう、といきたいところだが、実際に起動してiOSアプリなどを作ろうとすると、次の画面のように一部の画面の表示がおかしい状態になってしまう（※筆者が試したのは、2013年11月22日ごろなので、すでに改善されている可能性もある。その点はご了承いただきたい）。
この問題に対して筆者は、Visual Studio 2013日本語版に英語の言語パックをインストールして、Visual Studioの言語を「English」にしてみたところ、表示崩れの問題は解消した。
具体的には、下記のリンク先から「English」の言語パックをダウンロードして、インストールする。
次に、Visual Studioを起動して、メニューバーの［ツール］－［オプション］からダイアログを起動して、左側のツリーから［環境］－［国際対応の設定］を選択し、右側の［言語］欄で「English」を選択し、［OK］ボタンをクリックしてダイアログを閉じ、最後にIDEを再起動すればよい。
初めてのiOSアプリ開発
それでは準備が整ったので、まずはiOSアプリの開発手順から見ていこう。
iOS関連のプロジェクトテンプレート
Visual Studioの［新規プロジェクト］ダイアログを開くと、左側ツリーの［Visual C#］の配下に［iOS］というカテゴリが追加されているのが分かる（次の画面）。
［iOS］の配下に、［iPad］［iPhone］［Universal］というカテゴリが見える。この4つのカテゴリフォルダーに含まれるプロジェクトテンプレートは以下のとおりだ。
［iOS］
- Xamarin.iOS Binding Project： ネイティブライブラリへのXamarin.iOSバインディング（＝サードパーティ製のiOSネイティブライブラリを使うときに必要）のプロジェクト
- Xamarin.iOS Library Project： iOS向けのXamarin.iOSライブラリプロジェクト
- Xamarin.iOS Unit Tests Project： iOS向けのXamarin.iOSユニットテスト（＝単体テスト）プロジェクト
［iOS］－［iPad］／［iPhone］／［Universal］（※Universalとは、iPadとiPhoneの両方に対応したアプリの種類のこと）
- Empty Project： iPad／iPhone／iPad＆iPhone向けの空のプロジェクト
- HelloWorld Application： iPad／iPhone／iPad＆iPhone向けのHelloWorldアプリケーションロジェクト
- Master-Detail Application： iPad向けの基本－詳細アプリケーションプロジェクト（※iPadのみ）
- OpenGL Application： iPad／iPhone／iPad＆iPhone向けのOpenGLアプリケーションのプロジェクト
ここでは、［iPhone］向けの「HelloWorld Application」テンプレートでプロジェクトを新規作成してみることにしよう（プロジェクト名は「HelloiOSWorld」とした）。
［iPhone］向け「HelloWorld Application」のひな型ファイル群
プロジェクト作成時に自動生成されるファイル群を見てみよう。［ソリューション エクスプローラー］の中は、次の画像のような内容になった。
それぞれのファイル内容について簡単に説明しよう（C#で開発する方が本稿の読者の大半だと思われるが、.NET開発者以外にも分かるように、.NET関連の基本的なファイルについても簡単に説明しておく）。
［Properties］フォルダー
- AssemblyInfo.cs： .NETではビルド後のファイルを「アセンブリ（Assembly）」と呼ぶが、そのアセンブリに付加する情報を記載するためのファイル
［Propeties］フォルダーをダブルクリックすると、プロジェクトプロパティが開かれ、GUI操作でiOS関連のビルドや実行などの各種プロジェクト設定が行える（次の画面）。
［References］フォルダー
- monotouch： Xamarin.iOS用のアセンブリへの参照（＝そのアセンブリに含まれるクラスやメソッドを使うための指定）
- System／System.Core／System.Xml： .NETの基本機能を含むアセンブリ。厳密には.NETではなく、Xamarin独自の.NET互換のMonoのアセンブリになっている
［Components］フォルダー
ひな型では空になっている。Xamarinコンポーネントストアから必要なコンポーネント（無料／有料）を導入できる。次の画面は、Visual Studio上でコンポーネントを追加するダイアログを表示したところだ。
［Resources］フォルダー
iOSアプリ用の画像などのリソースファイルが配置されている。
Info.plist
iOSアプリに関する設定情報（アプリケーション名やアイコンなど）を記述するファイル（iOS開発では必須のファイルで、Xamarin独自のものではない）。このファイル項目をダブルクリックすると、次の画面のようにGUIで各設定情報を入力できる。
Main.cs／AppDelegate.cs／MyViewController.cs
この3つが、アプリのソースファイルである。
- Main.cs： アプリのエントリーポイント
- AppDelegate.cs： OSからのイベントを処理するクラス
- MyViewController.cs： メインビューを管理・制御するクラス
各ソースファイルのコード内容を簡単に見ていこう。
Main.csファイル： アプリのエントリーポイント
まずはMain.csファイルのコード内容を示す。
|
using MonoTouch.UIKit;
namespace HelloiOSWorld
{
public class Application
{
// これがアプリのメイン・エントリ・ポイント。
static void Main(string[] args)
{
// もし「AppDelegate」以外のアプリケーションデリゲートを使いたい場合は、
// ここで指定できます。
UIApplication.Main(args, null, "AppDelegate");
}
}
}
|
あえて説明するまでもないと思うが、簡単にコード内容を説明すると、Applicationクラス（HelloiOSWorld名前空間）の中に、静的なMainメソッドが定義されている。
アプリが起動されてMainメソッドが呼び出されると、その中のUIApplicationクラス（MonoTouch.UIKit名前空間）の静的なMainメソッドが実行される。このメソッドの第3引数として「AppDelegate」が渡されているが、これによりAppDelegateクラスが、OSから出されるイベントを処理できるようになる。
AppDelegate.csファイル： OSからのイベントを処理するクラス
そのAppDelegateクラスの内容は次のとおり。
|
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace HelloiOSWorld
{
[Register("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
UIWindow window;
MyViewController viewController;
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
window = new UIWindow(UIScreen.MainScreen.Bounds);
viewController = new MyViewController();
window.RootViewController = viewController;
window.MakeKeyAndVisible();
return true;
}
}
}
|
AppDelegateクラスは、UIApplicationDelegateクラス（MonoTouch.UIKit名前空間）を継承することで、OSからのイベント通知を受け取る機能を獲得している。
なお、AppDelegateクラスにはRegister属性（MonoTouch.Foundation名前空間）が付与されているが、これは「iOSの世界に、このAppDelegateクラスを公開していること」を意味する。
クラス内にFinishedLaunchingメソッドがオーバーライドされているが、これは「OSから通知されたFinishedLaunching（＝起動完了）イベントを処理するためのメソッド」である。そのメソッドの中身を見ると、UIWindowクラス（MonoTouch.UIKit名前空間）をメイン画面領域（＝UIScreen.MainScreen.Bounds）として作成し（つまりメインウィンドウの作成）、そのウィンドウのRootViewControllerプロパティ（＝ルートとなるビューコントローラー）に、MyViewControllerクラスのインスタンスを指定している。最後に、メインウィンドウのMakeKeyAndVisibleメソッドを呼び出すことで、実際に画面を作成して表示している。
要するにこのコードは、アプリの起動完了後に、メイン画面を表示しているだけである。
MyViewController.csファイル： メインビューを管理・制御するクラス
では、そのメイン画面のビュー（UI）は、どのように実装されているのか？ その実装先が、先ほど出てきたMyViewControllerクラスである。このクラスは次のようなコードになっている。
|
using MonoTouch.UIKit;
using System;
using System.Drawing;
namespace HelloiOSWorld
{
public class MyViewController : UIViewController
{
UIButton button;
int numClicks = 0;
float buttonWidth = 200;
float buttonHeight = 50;
public MyViewController()
{
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
View.Frame = UIScreen.MainScreen.Bounds;
View.BackgroundColor = UIColor.White;
View.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
button = UIButton.FromType(UIButtonType.RoundedRect);
button.Frame = new RectangleF(
View.Frame.Width / 2 - buttonWidth / 2,
View.Frame.Height / 2 - buttonHeight / 2,
buttonWidth,
buttonHeight);
button.SetTitle("Click me", UIControlState.Normal);
button.TouchUpInside += (object sender, EventArgs e) =>
{
button.SetTitle(String.Format("clicked {0} times", numClicks++), UIControlState.Normal);
};
button.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleTopMargin |
UIViewAutoresizing.FlexibleBottomMargin;
View.AddSubview(button);
}
}
}
|
MyViewControllerクラスは、UIViewControllerクラス（MonoTouch.UIKit名前空間）を継承することでビューコントローラーとしての機能を獲得している。
「MyViewController()」というコードで示されているコンストラクターの中には、通常、初期処理などを記述するが、このひな型コードでは何も処理が実装されていない。
次にViewDidLoadメソッドがオーバーライドされている。このメソッドは、ビューがロードされたときに1回だけ呼び出される。そのメソッドの中身を見ると、詳しい説明は割愛するが、フレーム（Frame）を定義したり、背景色（BackgroundColor）を設定したり、ボタンを作成してビューに追加したり（＝「View.AddSubview(button)」というコード箇所）している。
つまり、このViewDidLoadメソッドの中身部分が、「コードでUIを記述する」と前に説明した箇所になる。
ちなみに、「button.TouchUpInside」というコード部分は、TouchUpInsideイベントが発生したときに（＝ボタン領域内へのタッチが離れた瞬間に）、ボタンのタイトルを「"clicked ＜タッチ回数＞ times」という表示に変える処理が記述されている。そのため、このアプリを実行すると、ボタンをタップするたびに、そのタッチ回数が表示されることになる。
以上、このiOSアプリのプロジェクト内容や、アプリの挙動を一通り説明した。
Visual Studioから、初めてのiOSアプリのデバッグ
それでは最後に、今回の開発内容の中で最も気になる「Visual StudioからのiOSアプリのデバッグ」を試してみよう。
Info.plistファイルの設定
ビルドを行うには、Info.plistファイルに［Application name］［Identifier］［Version］を指定する必要がある。今回は次の画像のように指定した。
この状態でプロジェクトをビルドしておこう。
ビルドホストとなるMacマシンとの連携設定
次に［オプション］ダイアログを開き、左側のツリーから［Xamarin］－［iOS Settings］を選択し、右側の［Mac Build Host］グループ内の［Find Mac Build Host］ボタンをクリックする。すると、次のようなダイアログが表示される。
このダイアログに示されているとおり、Mac側にもXamarinのインストールが必要になる（インストール手順はWindowsの場合とほぼ同じなので、説明は割愛）。インストールが完了したら、以下の画面のように、MacのSpotlightに「Xamarin.」と入力すると「Xamarin.iOS Build Host」がヒットするので、これを起動する。起動したら、［Pair］ボタンをクリックする。これにより、PIN番号を取得できる。
「Xamarin.iOS Build Host」を起動
［Pair］ボタンをクリック
次に、Windows側に戻り、先ほどの［Connect to a Xamarin.iOS Build Host］ダイアログの［Continue］ボタンをクリックする。次のような画面が表示されるので、リストから適切なMacマシンを選択した状態で［Connect］ボタンをクリックする。これにより接続処理が実行され、PIN番号の入力ダイアログが表示されるので、先ほど取得したPIN番号を入力して［Pair］ボタンをクリックする。
以上で、Macとの連携設定が完了し、Windows上のVisual StudioでiOSアプリがデバッグできるようになる。
Visual StudioでのiOSアプリのデバッグ
それでは実際にデバッグを開始してみよう。
今回は、Mac上の「iOSシミュレータ」でデバッグする。そのため、Visual Studioの［iOS］ツールバーの［Solution Platforms］欄から「iPhoneSimulator」を選択した状態で（次の画面を参照）、デバッグを開始しよう。
すると、Mac側で「iOSシミュレータ」が自動起動して、その中でデバッグ対象のiOSアプリが自動的に立ち上がる。
もちろん、Visual Studio上でブレークポイントを設定してデバッグを中断し、ステップ実行したり、変数の値を調べたりできる。
■
以上、今回はXamarin for Visual Studioで特に気になるポイントを説明し、実際にiOSアプリ開発を試してみた。興味を持った方は本稿を参考に試してみていただけると幸いだ。
せっかくなので、本稿では説明できなかったAndroid開発について、次回「Android編」で説明しています。
（※【関連記事】：
「.NET互換環境」
・ディープなXamarin技術情報の連載記事「インサイドXamarin」 ）
1. 【現在、表示中】≫ Visual StudioでiOS／Androidアプリが書けるXamarinを試してみた（iOS編）
新登場のXamarin for Visual Studioとは？ 「iOSのネイティブアプリをWindows上で作るって、どういうこと？」という疑問に答え、実際にiOSアプリ開発を試してみる。
2. Visual StudioでiOS／Androidアプリが書けるXamarinを試してみた（Android編）
iOS編の続編。Visual Studioで基礎的なAndroidアプリのプロジェクトを作成し、生成されるファイル群を説明。エミュレーターでアプリを実行して、Visual Studioでデバッグしてみる。
