放浪軍師のアプリ開発局

VTuberみたいなアプリケーション夏狂乱など、自由気ままにアプリを開発したりしています。他にもいろいろやってます。尚、このブログはわからないところを頑張って解決するブログであるため、正しい保証がありません。ご注意ください。

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をやってみようという趣旨でやっている為、むしろ他人の記事を参考にするのは当然だと思っています。自力じゃ絶対にわからないからね。多分環境構築まですらたどり着けないでしょう。

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

 

なーに、大丈夫。

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