iOS、Adnroidのネイティブアプリが一緒に作れる！Visual Studio for Macを早速インストールしてみた

最近なにかと話題が尽きないMicrosoftが先日Mac版のVisual StudioのPreview版を公開したという事で早速インストールしてiOSとAndroidアプリプロジェクトを作ってみました。

Visual Studio for Macとは

Visual Studio for Macは下記の機能を盛り込んだ開発環境ツールです。

Visual Studio for MacはMac用の.NET統合開発環境で、macOSネイティブのユーザーインターフェイスに加え、RoslynベースのコンパイラーやIntelliSense、MSBuildツールなど、Windows版のVisual Studioと共通の機能が提供される。

Xamarin Studioについて

実は、このVisual Studio for MacのiOSやAndroidのアプリ開発の環境を提供している部分はXamarin Studioというものがベースに使われています。 Xamarin Studioは以前から開発環境ツールを提供している企業でしたが、2016年2月にMicrosoftに買収され、Visual Studioに統合されました。 先日、11月16日より開催されたイベント「Connect(); // 2016」にて、「Visual Studio for Mac」を正式に発表しました。

Visual Studio for Macの特徴

新しくリリースされたVisual Studioの特徴としては下記のとおりです。アプリエンジニアとしてはとっても魅力的な内容ですね。

• プログラム言語は標準でC#とF#に対応
• Android/iOS/macOS/watchOS/クラウドアプリの開発が可能
• プロジェクトファイルはVisual Studio形式なので、WindowsとMacでプロジェクトを共有可能

プロジェクトファイルとWindowsとMacで共有できるのはいいですね。これからのモバイルアプリ開発に新たな動きが出てきそうです。

なので早速Preview版が無料でダウンロードできますのでインストールしてみます。

Visual Studio for Mac（Preview）のインストール

下記の公式ページからダウンロードできます。矢印の箇所をクリックすればダウンロードが開始されます。

ダウンロードされたらダウンロードフォルダにdmgファイルがありますのでダブルクリックしてインストールしましょう。

下記の下矢印のアイコンをダブルクリックします。

I accept the Terms...の箇所にチェックいれてContinueボタンをクリックします。

コンポーネント選択画面です、デフォルトですべてチェックされています。Mac、iOS、Androidなど色々なアプリを作ってみたいのなら、そのまま何も変更せずContinueボタンをクリックしましょう。

AndroidSDKをインストールする場所を決めます。ここもデフォルトのままでいいと思いますのでそのままContinueをクリックします。

インストール開始前の最終確認画面が表示されます。Installボタンをクリックしてインストールを開始しましょう。

ライセンスの承認が必要なのでAccept licensesの箇所をチェックしてContinueをクリックします。

コンポーネントのダウンロードが開始されます総ダウンロードサイズが4.1GBさすがに大容量です。。 完了までは結構かかります。ネット回線速度にもよるかもしれませんがだいたい20〜30分くらいかかりました。 気長に待ちましょう。

途中Macユーザとしての許可を求められます。Macのパスワードを入力してOKボタンをクリックすれば次に進めます。

インストールが完了すると下記の画面が表示されます。Start Visual Studioボタンをクリックして起動してみましょう。

下図のようにVisual Studio for Macがインストールされました。

プロジェクト作成

では早速プロジェクトを作ってみたいと思います。 前提としてMacの中には最新バージョンのXcodeをインストールしていないといけないのでインストールしておきましょう。 下図のとおりNew Project...をクリックします。

おぉ！確かにiOS、tvOS、Android、Macのプロジェクトを選ぶ事ができます。 とりあえず今回はiOSとAndroidのネイティブアプリを作るプロジェクトを選んでみます。

任意にApp NameとOganization Identifierを入力します。 また、Target PlatformsはAndroidとiOSを両方選んでみます。

次の画面ではプロジェクト名やソリューション名（様々なプラットフォームアプリのプロジェクトをまとめた単位のことらしいです）、バージョンコントロールを設定する画面です。とりあえずGitを使用にチェックをいれて作成ボタンをクリックします。

無事プロジェクト（ソリューション）が作成できました。

画面左上の部分を選択するとiOSとDroid（Android）のプロジェクトを切り替えれるようになっています。

またソリューションのエリアの箇所にはiOSとDroid（Android）のプロジェクトの各プログラムファイルが選択できます。

iOSとAndroidプロジェクトのレイアウトフィアルを見てみる

iOSのレイアウト画面

iOSプロジェクトのレイアウトファイルであるMain.storyboardを開いてみます。 おぉ、Xcodeが起動するかと思いきや、Visual Studio専用のレイアウトエディターが起動します。 ちゃんとiOSの各種コンポーネントやレイアウト調整、イベントの紐付け設定などできるようです。

Androidのレイアウト画面

AndroidプロジェクトのレイアウトファイルはAndroid Studio同様activity_main.xmlかな、、と思いましたが違いました。下図のようにResources -> layout -> Main.axmlが該当します。

Androidのレイアウトファイルはソースコードでも編集できるようになっています。 内容はAndroid Studioのレイアウトの記述と全く一緒ですね。新しく覚える必要がなくていいです。

iOSとAndroidプロジェクトのロジックフィアルを見てみる

iOSのViewController.cs

iOSプロジェクトのViewController.csを見てみます。もちろんVisual StudioなのでSwiftではなく、C#で書かれています。まぁでも、今までiOSアプリ開発していた人ならこのソースコードで何をしているかはわかると思います。（初期化時にボタンのタッチイベントを実装してタッチされたらカウントを+1していますね。）

ViewController.cs

using System;

using UIKit;

namespace HelloVSApp.iOS
{
    public partial class ViewController : UIViewController
    {
        int count = 1;

        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            // Perform any additional setup after loading the view, typically from a nib.
            Button.AccessibilityIdentifier = "myButton";
            Button.TouchUpInside += delegate
            {
                var title = string.Format("{0} clicks!", count++);
            };
        }

        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
            // Release any cached data, images, etc that aren't in use.     
        }
    }
}

AndroidのViewController.cs

AndroidのMainActivity.csも見てみます。こちらも同じiOSと同じロジックをAndroid用に記述しています。

using Android.App;
using Android.Widget;
using Android.OS;

namespace HelloVSApp.Droid
{
    [Activity(Label = "HelloVSApp", MainLauncher = true, Icon = "@mipmap/icon")]
    public class MainActivity : Activity
    {
        int count = 1;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            Button button = FindViewById<Button>(Resource.Id.myButton);

            button.Click += delegate { button.Text = $"{count++} clicks!"; };
        }
    }
}

iOSプロジェクトのRun

それではiOSプロジェクトをRunしてみます。対象のシュミレーターを選んでRunボタンを押すだけです。

Xcodeと同様にiOSシュミレーターが起動します。

AndroidプロジェクトのRun

続いてAndroidプロジェクトをRunしてみます。プロジェクトをDroidプロジェクトに切り替えると今度はAndroidのエミュレーターが選択できます。

下記のようにエミュレータでAndroidアプリが動きます。（でもやっぱりエミュレーターの起動は遅いですね。。Androidの起動からアプリが開くまで10分以上かかりました。。）

このように最新のVisual Studioを使うとWindows用のアプリはもちろんのこと、iOS、Android、Macのアプリケーションも作れます。今後様々なプラットフォームのアプリケーションを作るような場合でまとめて開発したい場合で、既にC#の開発に慣れている方でしたら非常に有効な開発環境だと思いました。

今後Visula Studioで色々なアプリを作ってみたいと思います。