放浪軍師のXamarin.Formsアプリ開発局

Xamarin.Forms+Prism+ReactivePropertyで素人がAndroidやUWPのアプリを右往左往しながら開発している様を発信していきます。性質上間違いも多いのでご注意ください。

Visual Studio 2017 をインストールして環境構築しよう

放浪軍師のXamarin.Formsによるアプリ開発

今回は環境構築をやっていきます。

まず、初めて訪問された方は以下をお読みください。

www.gunshi.info

  Visual Studio 2017をインストール

…と言っても、完全に他のページに頼っちゃいます。自力でやってもわけわからなくなるし、なにより容量でけぇ!ってなります。今はXamarinしか扱わない予定なので、@amay077さんの以下記事を参考にしました。

qiita.com

 

特にエミュレーターは実機があるなら外すべきです。やたら重いしデカいしで使えません。

(※一年前ぐらいに軽く触ったときの話。今は改善されているのかもしれません)

 

…また、Xamarinだけじゃなくもっと色々やりたい!って場合は以下記事を参考にすると良いと思います。田淵さんの記事です。

ytabuchi.hatenablog.com

 

Prismの適用

いきなり謎のワードが飛び出してしまいました。実はPrismの事はよくわかっていないのですが、Xamarin.Formsでアプリを作成する場合は、MVVMというルールに沿ったコーディングがお勧めらしく、それをサポートしてくれる拡張機能がPrismらしいです。

…『~らしい』ばっかりで申し訳ないが今のところその程度の認識です。…で、そんな事ならもう先に入れちまっとこう!と言うことで適用しました。こちらはryuichi111stdさんの以下記事を参考にさせてもらいました。Visual Studioは中盤から解説があります。

ryuichi111std.hatenablog.com

 

 

動かす準備

Android用のエミュレーターをインストールしなかった以上、実機でのテスト環境を構築する必要があります。Androidとの接続はUSBケーブルを用いて、かりまたさんの以下記事を参考に設定できます。

oxamarin.com

 

 …が、この記事にある画面は既に過去の物みたいです。今現在のAndroid SDK画面ではこうなっていました。

f:id:roamschemer:20180131013128j:plain

『ツール』→『追加』内に『Google USB Driver』がありますのでこちらをインストールします。気が付かなかったらこの時点で詰みかねないので怖いですね。Androidの開発者向けオプションもAndroidのOSのバージョン次第では記事と違うのかもしれません。

 

動作テスト

ドキドキの動作テストです。VisualStudioを起動し、『ファイル』→『新規作成』→『新しいプロジェクト』を選択。『Visual C#』→『Prism』→『Xamarin.Forms』を選択すると以下のような画面が現れました。

f:id:roamschemer:20180131013608j:plain

『Prism Blank App(Xamarin.Forms)』と『Prism Module(Xamarin.Forms)』が選べますがどう違うのかは今のところ不明。前述のyuichi111stdさん記事では4つ並んでいたのだが…何故2つしか並んでいないのかも不明です。多分バージョンの違いです。

 

とりあえず『Prism Blank App』を選んで保存先や名前をそれっぽくしてOKを押すと、以下の画面が開きました。

 

f:id:roamschemer:20180131013756j:plain

絵の部分は多分どのプラットフォーム用のアプリを作成しますか?という画面なので、AndroidとUWPを選択。その下にあるContainerというのは謎。とりあえずそのまま『Dryloc』で行きます。

 

f:id:roamschemer:20180131014211j:plain

こんな画面が開きました。右側にあるのが作成されたファイル群ですね。

とりあえず細かいことは置いといて実行してみます。

 

f:id:roamschemer:20180131014307j:plain

画面上部のこの部分を変更して、横の再生ボタンっぽいのを押すと実行できました。

f:id:roamschemer:20180131014418p:plain f:id:roamschemer:20180131014458j:plain

左がAndroid、右がUWPです。

…おお、確かに同じような画面が起動できている!これってちょっと感動もんだ!

尚、UWPに関しては実行時に開発者モードへの変更が促されます。親切にも変更する為の画面に自動的に飛ばされるので、開発者モードへ変更して再実行したらいけました。

 

環境構築完了

って事で、結構簡単に環境が構築できました。やったぜ!

…ってぇヲイ!おまえ他人の記事ばかりじゃねーか!!!

…と思うかもしれませんが、ごもっともです。日本語の資料も少ない中、Xamarinについて記事を書いてくださっている前述の方々には、ただただ感謝するばかりです。

 

ただ、このブログは素人がXamarin.Formsをやってみようという趣旨でやっている為、むしろ他人の記事を参考にするのは当然だと思っています。自力じゃ絶対にわからないからね。多分環境構築まですらたどり着けないでしょう。

今後もバシバシ他力本願でやっていきます。もちろん段々とそうはいっていられなくなるはずですけれど、頼れる限りは全力で頼っていきたいです。

 

なーに、大丈夫。

そのうち某農家系アイドルの番組みたく、これは既に学んでいた!って自分の記事へのリンクだらけになるはずですよ!?