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

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)のインストール

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

https://www.visualstudio.com/vs/visual-studio-mac/

2016 11 20 22 14 38

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

2016 11 20 22 15 51

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

2016 11 20 22 15 59

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

2016 11 20 22 16 26

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

2016 11 20 22 16 32

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

2016 11 20 22 16 38

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

2016 11 20 22 16 43

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

2016 11 20 22 16 48

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

2016 11 20 22 16 55

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

2016 11 20 23 38 05

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

2016 11 20 23 39 03

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

2016 11 20 23 39 46

プロジェクト作成

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

2016 11 20 23 42 09

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

2016 11 20 23 42 48

任意にApp NameOganization Identifierを入力します。 また、Target PlatformsAndroidiOSを両方選んでみます。

2016 11 20 23 44 50

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

2016 11 20 23 46 07

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

2016 11 20 23 48 12

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

2016 11 20 23 48 37

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

2016 11 20 23 49 41

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

iOSのレイアウト画面

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

2016 11 20 23 52 21

Androidのレイアウト画面

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

2016 11 20 23 55 59

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

2016 11 20 23 58 33

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ボタンを押すだけです。

2016 11 21 10 52 47

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

2016 11 21 10 52 58

AndroidプロジェクトのRun

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

2016 11 21 10 54 52

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

2016 11 21 11 11 05

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

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