【無料】Mac用のIDE "Visual Studio for Mac" で iOS/Android アプリを作ってみた [Xamarin][新規作成から実行まで]
先週 (2016/11/16) の「Microsoft Connect();」イベントでアナウンスのあった通り、
Mac 用の Visual Studio がついに（Preview版で）リリースされましたね！ Visual Studio for Mac！！
インストールはこちらから(無料)： visualstudio.com/vs/visual-studio-mac/ 
それを実際に触ってみましょう！
(このツールの目玉はバックエンド(サーバサイド)のプロジェクトまで一緒に作ってくれることだけど、
取り敢えず入門記事として、最初はクライアントだけのものを作ります！)
VS for Mac でスマホアプリのテンプレートを「新規作成」
まずVisual Studio for Macを開きます。
VS for Mac が起動し、スタートページが開きます。
「New Project(プロジェクトの新規作成)」を選択します。
左のタブの「Multiplatform (マルチプラットフォーム)」の中の「App」の中の、
「Xamarin.Forms」→「Forms App」を選択します。
ちなみに、上の「Forms App」はクライアントだけのテンプレートが作成されるもので、
下の「Connected App」は、「ASP.NET Core で作られた Mobile Services に接続されたアプリ」という意味で、クライアントだけでなくバックエンドまで作成するテンプレートです。
そして右下の「次へ」を押します
上から、
- App Name：アプリ名
- Organization ID：組織名。個人の場合は「com.自分の名前(英語)」を入れる。各ストア(App Store や Google Play Store) で ID として管理するものなので、他の組織と被らない名前にする必要がある
- Target Platform：ターゲットプラットフォーム。Android/iOS 両方にチェックを付けておく。
- Shared Code：コード共有化について。Xamarin を使えばコード共有化をすることができるのですが、そういう形式で共有化するかは 2択で選べます。PCLかSharedです。今回はPCLで。（ふたつがどう違うか気になる方はこちら）
- Use XAML for user interface files：UI記述に XAML言語を使う。今回はチェックを入れておく
それぞれを入れ終わったら、画面右下の「次へ」を押します。
私は Git を使用し、
あと一番下の「自動UIテストのプロジェクトを追加する」にチェックを入れました。
それで画面右下の「作成」を押します。
少し時間がかかります。
この画面になります。
最初は上に「パッケージを追加しています」と暫く出るかもしれませんが、少し待てば完了します。
作られたプロジェクトを「実行」
iOS版を動かす
コードを何もいじらずに、取り敢えず「実行」をしてみましょう。
画面左上の再生ボタンをクリックします。
この画面になったらOKです！
iOS シミュレータが起動し、デプロイされ、アプリが実行されていますね。
Android版を動かす
それで、Android 版も動かすことができます。（Xamarinはクロスプラットフォーム開発ツールですから！）
(ただ iOS版と同じものが Android で動くのを確認、というだけなので、ここは飛ばしても大丈夫です。エミュレータ起動が少し時間がかかるので・・・)
ソリューションエクスプローラーの Androidプロジェクト(私の場合は「PopoClick.Droid」)を
右クリック→「スタートアッププロジェクトとして設定」
そして「実行」
Android エミュレータが起動し、アプリが実行されればOKです！
少し画面をいじってみる
せっかくなので、少し画面をいじってみましょう。
右のソリューションエクスプローラーから「PopoClickPage.xaml」（あなたのつけたアプリ名.xaml）を選び、クリックします。
最初のページのUIの記述された XAMLファイルが開きます。
(もし右側に Previewer が出ていたら「プレビュー」ボタンを押せば非表示にできます)
この辺の文字列を変更してみましょう。
３行目の「Welcome to Xamarin Forms! 」を、任意の文字列に変更します。(私は「 ( *ﾟ▽ﾟ* っ)З ざまりん！ 」にしました。)
そしてまた「実行」します。
できました！
次の一歩
次は実際に手を動かして簡単なリストアプリを作ってみましょう！
