# はじめに
とりあえず、前々から噂になっていたWindowsではおなじみの「Visual Studio」のMac版が発表されたので、インストールして試してみようと思います。

# ダウンロード -> インストール

## 環境
Visual Studio for Mac Preview版 -> [こちらからダウンロード](https://www.visualstudio.com/vs/visual-studio-mac/)
MBP 13-inch 2012 mid ( 2.3GHz Core i5, 16GB RAM )
Samsung SSD 850 Pro ( 256GB )

## ダウンロード
![スクリーンショット 2016-12-05 20.18.39.png](https://qiita-image-store.s3.amazonaws.com/0/110131/1a6a72b7-e6bc-43a4-8fe4-ec0c1d9f9e83.png "スクリーンショット 2016-12-05 20.18.39.png")
上記のサイトにアクセスすると、この画面が出てくるので、「Download Visual Studio for Mac Preview」をクリックしてダウンロードしてください。

## インストール
ダウンロードしたファイルを解凍すると、以下の写真のように紫色の丸に囲まれた下矢印のアイコンが出てくると思います。
![スクリーンショット 2016-12-05 20.21.31.png](https://qiita-image-store.s3.amazonaws.com/0/110131/3a6b5946-58fb-e9f7-ad4f-a00039c25e57.png "スクリーンショット 2016-12-05 20.21.31.png")
「InStall Visual Studio for Mac Preview.app」と書いてあるのでそれをクリックしてインストールを開始してください。
インストール中に管理者パスワードを尋ねられますが、入力して大丈夫です。主にクロスプラットフォームでの開発なので、Xamarin, Android Studioなどのライブラリをインストール中にダウンロードしてくるので、回線が弱い方は寝る前などに実行して、気長に待ちましょう。（僕の場合XamarinもAndroid Studioも入ってるんですけど、4GBぐらいダウンロードしてました。）

# 動かしてみる

## 起動画面
![スクリーンショット 2016-12-05 20.09.57.png](https://qiita-image-store.s3.amazonaws.com/0/110131/571788e3-a74b-2d31-c383-04a2b20e7da4.png "スクリーンショット 2016-12-05 20.09.57.png")
起動するとこんな感じで、Windowsとは違ってスタリッシュな起動画面となってます。画面の左カラム右上に「Sign in」と書いてあるので、Microsoftアカウントを持っていたり、WindowsでのVisual StudioでログインしているアカウントがあればSign inしてしまいましょう。

## New Projectを作ってみる
この辺はWindowsとあまり大差はないように思えます。
現在（2016/12/05時点）では「Multiplatform, iOS, tvOS, Android, Mac, .NET」を新規プロジェクトとして選択・作成することができるようになっていました。

* Multiplatform
![スクリーンショット 2016-12-05 20.10.57.png](https://qiita-image-store.s3.amazonaws.com/0/110131/1641e96c-538d-24fe-78e2-942bec67a859.png "スクリーンショット 2016-12-05 20.10.57.png")
 
* iOS
![スクリーンショット 2016-12-05 20.11.00.png](https://qiita-image-store.s3.amazonaws.com/0/110131/fa3291bc-2871-695b-ff94-9029be78d2e7.png "スクリーンショット 2016-12-05 20.11.00.png")
 
* Android
![スクリーンショット 2016-12-05 20.11.02.png](https://qiita-image-store.s3.amazonaws.com/0/110131/1ed89440-05d2-93d7-e8f7-5d43c19091cd.png "スクリーンショット 2016-12-05 20.11.02.png")

* Mac
![スクリーンショット 2016-12-05 20.11.05.png](https://qiita-image-store.s3.amazonaws.com/0/110131/f5fade49-8bea-9b54-42bf-9fd40d4a2774.png "スクリーンショット 2016-12-05 20.11.05.png")

今回はMultiplatformのNative App内にあるSingle View Appで作成してみましょう。選択し次へをクリックすると
![スクリーンショット 2016-12-05 20.11.32.png](https://qiita-image-store.s3.amazonaws.com/0/110131/58b1d2e5-fb5c-f5c0-d583-7f272bf0edbd.png "スクリーンショット 2016-12-05 20.11.32.png")
どのIDEでもおなじみのApp NameやOrganization Identifierなどの設定を行います

* AppName 
 
 Android：Application Name
 iOS：Product Name
 
* Organization Identifier

 Android：Company Domain
 iOS：Organization Identifier
 
* Target Platforms
 
 作成対象のOS（クロスでやるなら両方にチェック）
 Shared Code（共通コードの種類）

 Portable Class LibraryとShared Libraryの違いは公式を参照して下さい。
([http://www.xlsoft.com/jp/products/xamarin/portable_class_libraries.html](http://www.xlsoft.com/jp/products/xamarin/portable_class_libraries.html))

* Use Portable Class Library
![スクリーンショット 2016-12-05 20.11.50.png](https://qiita-image-store.s3.amazonaws.com/0/110131/9f0bb95a-e532-c00f-1413-b090b5dc9fbe.png "スクリーンショット 2016-12-05 20.11.50.png")

* Use Shared Library
![スクリーンショット 2016-12-05 20.11.51.png](https://qiita-image-store.s3.amazonaws.com/0/110131/1405f300-3e4a-af23-461a-c034fc7bd900.png "スクリーンショット 2016-12-05 20.11.51.png")

とりあえず、今回はUse Portable Class Libraryにチェックを入れて、次に進みます。

![スクリーンショット 2016-12-05 20.12.08.png](https://qiita-image-store.s3.amazonaws.com/0/110131/5d526120-18bf-f930-6529-b0065bda26f2.png "スクリーンショット 2016-12-05 20.12.08.png")
ここは特に説明するところはありません。ただし、Gitを使用する場合はバージョンコントロールの「バージョンコントロールに Git を使用します。」にチェックを入れて起きましょう。後からってなると無駄なファイルもアップロードしてしまうので、今は使わなくても後々使うかもって人は、最初からチェックを入れておく方がいいですね！！
さて、これでプロジェクトの作成は終わりです。

## コード書いてみる
全ての入力が終わると、なんとも不思議な世界が目見えます（まさかVisual Studioがmacで動くとは...）。
![スクリーンショット 2016-12-05 20.12.37.png](https://qiita-image-store.s3.amazonaws.com/0/110131/d0b9091e-5db8-73e1-054d-976e0f66ab1f.png "スクリーンショット 2016-12-05 20.12.37.png")

ソリューションの中身を見てみましょう。
![スクリーンショット 2016-12-05 20.55.55.png](https://qiita-image-store.s3.amazonaws.com/0/110131/5c3d11ce-939f-de57-88b5-edf53788cf50.png "スクリーンショット 2016-12-05 20.55.55.png")
Xamarinを使ったことがある人は、見覚えのある構造だと思います。基本的にMultiPlatformでのアプリ開発の場合は「AppName.Droid」と「AppName.iOS」というフォルダが作成され、その中にAndroidとiOSそれぞれの開発に必要なリソースが含まれています。AndroidやiOSアプリを開発したことがある人はわかると思いますが、外部のライブラリを使用したい時は

* Android
![スクリーンショット 2016-12-05 20.59.58.png](https://qiita-image-store.s3.amazonaws.com/0/110131/a73b1e18-359d-dce4-9509-08ae4cbc08f7.png "スクリーンショット 2016-12-05 20.59.58.png")
上記画面のAdd Google Play Service...をクリック
![スクリーンショット 2016-12-05 21.00.01.png](https://qiita-image-store.s3.amazonaws.com/0/110131/06c726c3-2768-bf4d-b5dd-7e7e027a7105.png "スクリーンショット 2016-12-05 21.00.01.png")
この画像ではAndroidはGoogle Play Serviceを追加しようとしています。

* iOS
![スクリーンショット 2016-12-05 21.00.21.png](https://qiita-image-store.s3.amazonaws.com/0/110131/11930dba-14d5-2cba-b6e2-4c17274a82a0.png "スクリーンショット 2016-12-05 21.00.21.png")
上記画面のパッケージの追加をクリック
![スクリーンショット 2016-12-05 21.00.28.png](https://qiita-image-store.s3.amazonaws.com/0/110131/68fbf54f-59f5-b044-dcb5-111bdb66d777.png "スクリーンショット 2016-12-05 21.00.28.png")

## とりあえず実行してみる
AndroidとiOSのコードをサンプルのまま実行してみようと思います。このサンプルコードはボタンをタップすると１ずつ表示がカウントされていくといういたってシンプルなコードになっています。C#の文法を理解するのにももってこいなのでは。と思います。

* Android

左上の再生ボタンの右側にある選択フォームでtestApp.Droidを選択し、Debugから起動したいエミュレータを選択し起動します。Androidは実行してからアプリが起動するまでがむちゃくちゃ長いです。とてつもなく長い...

![スクリーンショット 2016-12-05 21.33.47.png](https://qiita-image-store.s3.amazonaws.com/0/110131/b80b8524-5391-e8a1-f323-59cde4cbf9d3.png "スクリーンショット 2016-12-05 21.33.47.png")

![スクリーンショット 2016-12-05 21.38.37.png](https://qiita-image-store.s3.amazonaws.com/0/110131/36b6cb52-8785-4053-f142-46d7a3d79029.png "スクリーンショット 2016-12-05 21.38.37.png")
実行するとAndroidのシミュレータが動きアプリが起動します。「Hello World, Click Me!」というボタンをクリックすると表示が増えていきます。
![スクリーンショット 2016-12-05 21.38.48.png](https://qiita-image-store.s3.amazonaws.com/0/110131/68c8667c-9548-0105-6cb3-530f4e6f8fce.png "スクリーンショット 2016-12-05 21.38.48.png")

* iOS

左上の再生ボタンの右側にある選択フォームでtestApp.iOSを選択し、Debugから起動したいシミュレータを選択し起動します

![スクリーンショット 2016-12-05 21.12.10.png](https://qiita-image-store.s3.amazonaws.com/0/110131/bcf9a883-88d2-b253-7265-e9202eb24b8d.png "スクリーンショット 2016-12-05 21.12.10.png")
実行するとiOS Simulatorが動きアプリが起動します。「Hello World, Click Me!」というボタンをクリックすると表示が増えていきます。
![スクリーンショット 2016-12-05 21.12.20.png](https://qiita-image-store.s3.amazonaws.com/0/110131/a5390b5f-36a9-540d-8528-71beacdffd8d.png "スクリーンショット 2016-12-05 21.12.20.png")

[cv:issue_marketplace_engineer]

# はじめに
とりあえず、前々から噂になっていたWindowsではおなじみの「Visual Studio」のMac版が発表されたので、インストールして試してみようと思います。

# ダウンロード -> インストール

## 環境
Visual Studio for Mac Preview版 -> [こちらからダウンロード](https://www.visualstudio.com/vs/visual-studio-mac/)
MBP 13-inch 2012 mid ( 2.3GHz Core i5, 16GB RAM )
Samsung SSD 850 Pro ( 256GB )

## ダウンロード
![スクリーンショット 2016-12-05 20.18.39.png](https://qiita-image-store.s3.amazonaws.com/0/110131/1a6a72b7-e6bc-43a4-8fe4-ec0c1d9f9e83.png "スクリーンショット 2016-12-05 20.18.39.png")
上記のサイトにアクセスすると、この画面が出てくるので、「Download Visual Studio for Mac Preview」をクリックしてダウンロードしてください。

## インストール
ダウンロードしたファイルを解凍すると、以下の写真のように紫色の丸に囲まれた下矢印のアイコンが出てくると思います。
![スクリーンショット 2016-12-05 20.21.31.png](https://qiita-image-store.s3.amazonaws.com/0/110131/3a6b5946-58fb-e9f7-ad4f-a00039c25e57.png "スクリーンショット 2016-12-05 20.21.31.png")
「InStall Visual Studio for Mac Preview.app」と書いてあるのでそれをクリックしてインストールを開始してください。
インストール中に管理者パスワードを尋ねられますが、入力して大丈夫です。主にクロスプラットフォームでの開発なので、Xamarin, Android Studioなどのライブラリをインストール中にダウンロードしてくるので、回線が弱い方は寝る前などに実行して、気長に待ちましょう。（僕の場合XamarinもAndroid Studioも入ってるんですけど、4GBぐらいダウンロードしてました。）

# 動かしてみる

## 起動画面
![スクリーンショット 2016-12-05 20.09.57.png](https://qiita-image-store.s3.amazonaws.com/0/110131/571788e3-a74b-2d31-c383-04a2b20e7da4.png "スクリーンショット 2016-12-05 20.09.57.png")
起動するとこんな感じで、Windowsとは違ってスタリッシュな起動画面となってます。画面の左カラム右上に「Sign in」と書いてあるので、Microsoftアカウントを持っていたり、WindowsでのVisual StudioでログインしているアカウントがあればSign inしてしまいましょう。

## New Projectを作ってみる
この辺はWindowsとあまり大差はないように思えます。
現在（2016/12/05時点）では「Multiplatform, iOS, tvOS, Android, Mac, .NET」を新規プロジェクトとして選択・作成することができるようになっていました。

* Multiplatform
![スクリーンショット 2016-12-05 20.10.57.png](https://qiita-image-store.s3.amazonaws.com/0/110131/1641e96c-538d-24fe-78e2-942bec67a859.png "スクリーンショット 2016-12-05 20.10.57.png")
 
* iOS
![スクリーンショット 2016-12-05 20.11.00.png](https://qiita-image-store.s3.amazonaws.com/0/110131/fa3291bc-2871-695b-ff94-9029be78d2e7.png "スクリーンショット 2016-12-05 20.11.00.png")
 
* Android
![スクリーンショット 2016-12-05 20.11.02.png](https://qiita-image-store.s3.amazonaws.com/0/110131/1ed89440-05d2-93d7-e8f7-5d43c19091cd.png "スクリーンショット 2016-12-05 20.11.02.png")

* Mac
![スクリーンショット 2016-12-05 20.11.05.png](https://qiita-image-store.s3.amazonaws.com/0/110131/f5fade49-8bea-9b54-42bf-9fd40d4a2774.png "スクリーンショット 2016-12-05 20.11.05.png")

今回はMultiplatformのNative App内にあるSingle View Appで作成してみましょう。選択し次へをクリックすると
![スクリーンショット 2016-12-05 20.11.32.png](https://qiita-image-store.s3.amazonaws.com/0/110131/58b1d2e5-fb5c-f5c0-d583-7f272bf0edbd.png "スクリーンショット 2016-12-05 20.11.32.png")
どのIDEでもおなじみのApp NameやOrganization Identifierなどの設定を行います

* AppName 
 
 Android：Application Name
 iOS：Product Name
 
* Organization Identifier

 Android：Company Domain
 iOS：Organization Identifier
 
* Target Platforms
 
 作成対象のOS（クロスでやるなら両方にチェック）
 Shared Code（共通コードの種類）

 Portable Class LibraryとShared Libraryの違いは公式を参照して下さい。
([http://www.xlsoft.com/jp/products/xamarin/portable_class_libraries.html](http://www.xlsoft.com/jp/products/xamarin/portable_class_libraries.html))

* Use Portable Class Library
![スクリーンショット 2016-12-05 20.11.50.png](https://qiita-image-store.s3.amazonaws.com/0/110131/9f0bb95a-e532-c00f-1413-b090b5dc9fbe.png "スクリーンショット 2016-12-05 20.11.50.png")

* Use Shared Library
![スクリーンショット 2016-12-05 20.11.51.png](https://qiita-image-store.s3.amazonaws.com/0/110131/1405f300-3e4a-af23-461a-c034fc7bd900.png "スクリーンショット 2016-12-05 20.11.51.png")

とりあえず、今回はUse Portable Class Libraryにチェックを入れて、次に進みます。

![スクリーンショット 2016-12-05 20.12.08.png](https://qiita-image-store.s3.amazonaws.com/0/110131/5d526120-18bf-f930-6529-b0065bda26f2.png "スクリーンショット 2016-12-05 20.12.08.png")
ここは特に説明するところはありません。ただし、Gitを使用する場合はバージョンコントロールの「バージョンコントロールに Git を使用します。」にチェックを入れて起きましょう。後からってなると無駄なファイルもアップロードしてしまうので、今は使わなくても後々使うかもって人は、最初からチェックを入れておく方がいいですね！！
さて、これでプロジェクトの作成は終わりです。

## コード書いてみる
全ての入力が終わると、なんとも不思議な世界が目見えます（まさかVisual Studioがmacで動くとは...）。
![スクリーンショット 2016-12-05 20.12.37.png](https://qiita-image-store.s3.amazonaws.com/0/110131/d0b9091e-5db8-73e1-054d-976e0f66ab1f.png "スクリーンショット 2016-12-05 20.12.37.png")

ソリューションの中身を見てみましょう。
![スクリーンショット 2016-12-05 20.55.55.png](https://qiita-image-store.s3.amazonaws.com/0/110131/5c3d11ce-939f-de57-88b5-edf53788cf50.png "スクリーンショット 2016-12-05 20.55.55.png")
Xamarinを使ったことがある人は、見覚えのある構造だと思います。基本的にMultiPlatformでのアプリ開発の場合は「AppName.Droid」と「AppName.iOS」というフォルダが作成され、その中にAndroidとiOSそれぞれの開発に必要なリソースが含まれています。AndroidやiOSアプリを開発したことがある人はわかると思いますが、外部のライブラリを使用したい時は

* Android
![スクリーンショット 2016-12-05 20.59.58.png](https://qiita-image-store.s3.amazonaws.com/0/110131/a73b1e18-359d-dce4-9509-08ae4cbc08f7.png "スクリーンショット 2016-12-05 20.59.58.png")
上記画面のAdd Google Play Service...をクリック
![スクリーンショット 2016-12-05 21.00.01.png](https://qiita-image-store.s3.amazonaws.com/0/110131/06c726c3-2768-bf4d-b5dd-7e7e027a7105.png "スクリーンショット 2016-12-05 21.00.01.png")
この画像ではAndroidはGoogle Play Serviceを追加しようとしています。

* iOS
![スクリーンショット 2016-12-05 21.00.21.png](https://qiita-image-store.s3.amazonaws.com/0/110131/11930dba-14d5-2cba-b6e2-4c17274a82a0.png "スクリーンショット 2016-12-05 21.00.21.png")
上記画面のパッケージの追加をクリック
![スクリーンショット 2016-12-05 21.00.28.png](https://qiita-image-store.s3.amazonaws.com/0/110131/68fbf54f-59f5-b044-dcb5-111bdb66d777.png "スクリーンショット 2016-12-05 21.00.28.png")

## とりあえず実行してみる
AndroidとiOSのコードをサンプルのまま実行してみようと思います。このサンプルコードはボタンをタップすると１ずつ表示がカウントされていくといういたってシンプルなコードになっています。C#の文法を理解するのにももってこいなのでは。と思います。

* Android

左上の再生ボタンの右側にある選択フォームでtestApp.Droidを選択し、Debugから起動したいエミュレータを選択し起動します。Androidは実行してからアプリが起動するまでがむちゃくちゃ長いです。とてつもなく長い...

![スクリーンショット 2016-12-05 21.33.47.png](https://qiita-image-store.s3.amazonaws.com/0/110131/b80b8524-5391-e8a1-f323-59cde4cbf9d3.png "スクリーンショット 2016-12-05 21.33.47.png")

![スクリーンショット 2016-12-05 21.38.37.png](https://qiita-image-store.s3.amazonaws.com/0/110131/36b6cb52-8785-4053-f142-46d7a3d79029.png "スクリーンショット 2016-12-05 21.38.37.png")
実行するとAndroidのシミュレータが動きアプリが起動します。「Hello World, Click Me!」というボタンをクリックすると表示が増えていきます。
![スクリーンショット 2016-12-05 21.38.48.png](https://qiita-image-store.s3.amazonaws.com/0/110131/68c8667c-9548-0105-6cb3-530f4e6f8fce.png "スクリーンショット 2016-12-05 21.38.48.png")

* iOS

左上の再生ボタンの右側にある選択フォームでtestApp.iOSを選択し、Debugから起動したいシミュレータを選択し起動します

![スクリーンショット 2016-12-05 21.12.10.png](https://qiita-image-store.s3.amazonaws.com/0/110131/bcf9a883-88d2-b253-7265-e9202eb24b8d.png "スクリーンショット 2016-12-05 21.12.10.png")
実行するとiOS Simulatorが動きアプリが起動します。「Hello World, Click Me!」というボタンをクリックすると表示が増えていきます。
![スクリーンショット 2016-12-05 21.12.20.png](https://qiita-image-store.s3.amazonaws.com/0/110131/a5390b5f-36a9-540d-8528-71beacdffd8d.png "スクリーンショット 2016-12-05 21.12.20.png")

[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

ダウンロード -> インストール

環境

続きを読むには単価診断を受けてください（30秒）