1. chomado

    Posted

    chomado
Changes in title
+Uno Platform 入門 2 : 環境構築をしよう
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,377 @@
+いよいよ **Uno Platform** の開発環境を整えてみましょう。 **Uno Platform** はクロスプラットフォーム開発環境なので、それぞれの環境で動くように、多少揃える必要のある環境があります。
+この記事では、ちゃんとそれぞれが動くか一歩一歩動作確認しながら進めていきます。
+
+この記事のゴール:
+
+1. **Xamarin.Forms** ハローワールド (環境構築 && 実行)
+2. **Uno Platform** ハローワールド (環境構築 && 実行)
+3. **ASP.NET Core** ハローワールド (環境構築 && 実行)
+
+参考記事:
+
+* 前回の記事:『[Uno Platform 入門 1 : Uno Platform とは? ~ C# で iOS, Android, Web, Windows 10 アプリを一気にクロスプラットフォーム開発~](https://qiita.com/chomado/items/9a36d5e1bb41c4f6cef3)』
+* (英語) 『[Using Uno - getting started / Setting up the environment](https://platform.uno/docs/articles/get-started.html)』 - Uno Platform 公式ドキュメント
+
+## 前回のあらすじ
+
+[前回の記事](https://qiita.com/chomado/items/9a36d5e1bb41c4f6cef3) では、**Uno Platform** についてをお話ししました。
+
+**Uno Platform** を使えば、UWP 向けにコードを書く (C# + XAML) だけで
+
+0. Windows 10 アプリ (UWP)
+1. iOS アプリ
+2. Android アプリ
+3. Web アプリ(WebAssembly)
+
+が クロスプラットフォーム開発 (= 複数プラットフォーム間でソースコードを共通化しながら開発)!
+できるということでしたね。
+
+そして、iOS, Android 向けアプリビルドのためには、下で Xamarin が使われている、というところまでお話ししました。
+
+
+![Uno Platform](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/1d37e040-c7ed-f14a-3635-2f0a07060e1b.png)
+
+(上のアーキテクト図は[ 公式サイト ](https://platform.uno/how-it-works/)より)
+
+## 必要な環境(機材編)
+
+* Windows 10 マシン
+* iOS アプリも作る場合は、ビルド用に Mac も必要です。(iOS アプリを作るには Xcode が必要で、Xcode は macOS 上でしか動かないので)(Mac マシンを用意するのが難しい場合は、クラウド上でビルド用に Mac を動かすサービスもあるので探してみてください)
+
+## 必要な環境(開発環境編)
+
+上の「Uno Platform の仕組み」の図を見て察せられるとおり、
+Uno Platform を使い 4 プラットフォームでアプリを実行させるには、
+以下の環境が最低必要なことが分かります:
+
+* **Xamarin** :.NET でのモバイルアプリ開発環境
+* **ASP.NET** :.NET での .Web アプリ開発環境
+* 当然 **UWP** アプリ開発環境: .NET での Windows 10 アプリ開発
+
+これらの環境を整えましょう。(Visual Studio インストーラーでチェック入れるだけで入るのでとても簡単です)
+
+参考:
+
+* [Xamarin ドキュメント](https://docs.microsoft.com/ja-jp/xamarin/?WT.mc_id=docs-blog-machiy) - Microsoft 公式ドキュメント
+* [ASP.NET のドキュメント](https://docs.microsoft.com/ja-jp/aspnet/?WT.mc_id=docs-blog-machiy) - Microsoft 公式ドキュメント
+* UWP: [Windows 10 アプリの概要](https://docs.microsoft.com/ja-jp/windows/uwp/get-started/index?WT.mc_id=docs-blog-machiy) - Microsoft 公式ドキュメント
+
+### Windows 10 + Visual Studio 2019
+
+**Windows 10** で、**Visual Studio 2019** を使いましょう。
+
+(一応公式ドキュメントでは VS 2017 15.5 以降となっていますが、2019 の方が良いです)
+
+VS2019 入れてない人は[入れてください](https://visualstudio.microsoft.com/ja/vs/?WT.mc_id=site-blog-machiy)。個人開発者の方は Community 版は無料です。
+
+VS2019 既に入れている人は **Visual Studio Installer** を開いてください。
+Windows ボタンを押して Windows のスタートメニューでタイプしたら出てきます。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/818bad1b-5b13-6521-83f6-852e7383df1b.png)
+
+開いたら「編集 (Modify)」をクリックしてください。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/ab06b102-1330-062e-e504-53cfde729d35.png)
+
+(スクショについて:私は英語の勉強のために英語表記にしていますが、インストール時に日本語を指定していたら日本語で表示されていると思います)
+
+そこから、以下の3つにチェックを入れてください。
+
+
+ 1. 『ユニバーサル Windows プラットフォーム開発』<br />![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/687c4dda-94d5-eab4-4fa6-1a1a6f7b62c8.png)
+ 2. 『.NET によるモバイル開発』(Xamarin)<br />![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b0c249f2-c5a0-d98b-8b6c-3a8ca706124a.png)
+ 3. 『ASP.NET と Web 開発』<br />![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/61b31a23-1319-9aec-5550-cbac7d49d1f6.png)
+
+# 環境チェック
+
+Uno Platform やる前に、
+まずちゃんとそれぞれの環境が正しく入っているかのチェックをするのをお勧めします。
+
+## 環境チェック01:ASP.NET アプリを動かしてみる (まだ Uno 始まってないよ)
+
+最初に、ASP.NET の環境がちゃんと入っているかどうかのチェックがてら
+ハローワールド Web アプリの実行をローカルでしてみましょう。
+
+参考: [チュートリアル: ASP.NET Core の Razor ページの概要](https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-2.2&tabs=visual-studio&WT.mc_id=docs-blog-machiy) - Microsoft 公式ドキュメント
+
+Visual Studio 2019 を起動して「新しいプロジェクトの作成」をクリックします。
+
+検索欄に「asp」
+言語絞り込みで「C#」と入れてください。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/024a3738-103d-862c-3e77-11128ea0a0ae.png)
+
+(* ゜▽゜ * っ)З「あれ?なんか ASP.NET のテンプレート 2 つ出てきたの何なの?」
+
+上が .NET Core ベース(新しい)、
+下が .NET Framework ベース(古い)のものです。
+
+今回は上を選びます。
+
+そして「Web アプリケーション」を選択して進めてください。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/7b32236b-bd4b-3b5f-ba76-d63bfcd25516.png)
+
+しばらく待つとプロジェクトが展開されます。(私 (Core i7, RAM 16 GB) は 5秒くらいだった)
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/3ef0534c-7bb3-f81f-07d5-00a7cfd73c04.png)
+
+コードをいじらないまま、
+上のメニューバーの
+「デバッグ (Debug)」→「デバッグ無しで開始 (Start Without Debugging)」
+で実行してみましょう。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/46898db8-0bcf-48a0-96df-4e9a3ec254f5.png)
+
+すると 2 つほど SSL 証明書関係のポップアップが出てくるので、
+全部 Yes で。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/56626eb7-e657-0ada-6435-1a47d97b58c7.png)
+
+するとめでたく ASP.NET Core 製のアプリが立ち上がります。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/3d4f76bd-7d26-0489-c9cc-ae0eebc4ab29.png)
+
+これを見届けたら OK !
+
+(* ゜▽゜ * っ)З「これで ASP.NET の開発環境は整っているという理解でいいわね」
+
+安心したところで、このプロジェクトは閉じます
+
+## 環境チェック02:Xamarin.Forms アプリを動かしてみる (まだ Uno 始まってないよ)
+
+これやります: [Build your first Xamarin.Forms App](https://docs.microsoft.com/ja-jp/xamarin/get-started/first-app/index?pivots=windows&WT.mc_id=docs-blog-machiy) - Microsoft 公式ドキュメント
+
+さっきの ASP.NET プロジェクトを閉じた後、
+また VS2019 で「新しいプロジェクトの作成」をクリックします。
+
+検索欄で「Xamarin.Forms」と入れて進みます。
+
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/1c6b4457-aef2-9599-65ef-7eee215ff5aa.png)
+
+次の画面で、
+テンプレートは Blank (空白/空っぽ)、
+ターゲットプラットフォームは、ビルドマシンの Mac に繋げていない場合は iOS をチェック外します。
+私は Android と Windows に入れました。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/54983956-4e47-c2d4-bc0c-0924db41804a.png)
+
+OK を押してしばらく待ちます。(私は 10 秒くらいだった)
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/f8cdbdd4-e2e0-289e-3bf4-a66840f3fd2a.png)
+
+下記 3 つのプロジェクトが生成されます。
+
+1. App1 (共通コード。一番多くコードが入る)
+2. App1.Android (Android 特有記述コードが入る)
+3. App1.UWP (Universal Windows) (Windows 10 用の特有コードが入る)
+
+
+最初は UWP プロジェクトがスタートアップ プロジェクトに設定されているので、
+UWP アプリを実行してみようとします。
+
+### Windows 10 を開発者モードに
+
+でもその前に、
+今あなたが使っているマシンの Windows 10 を「開発者モード」にする必要があります。
+
+(参考: [デバイスを開発用に有効にする](https://docs.microsoft.com/ja-jp/windows/uwp/get-started/enable-your-device-for-development?WT.mc_id=docs-blog-machiy) - Microsoft 公式ドキュメント)
+
+
+Windows の設定を開いて、
+「更新とセキュリティ」→「開発者向け」を選択し
+「開発者モード」を選択してください。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/164ba2a5-331b-022e-f302-b5db921eff77.png)
+
+するとポップアップが出てきますが OK でお願いします。
+
+### UWP 実行
+
+Visual Studio 2019 に戻り、
+またデバッグ無しで実行します
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/8bff1b7e-cfa1-4caf-088c-ffb55785611d.png)
+
+(* ゜▽゜ * っ)З「これで **Xamarin.Forms** の UWP 環境が正しく入ったことが確認できたね! 次は Android で動くか確認してみよう!」
+
+### Android プロジェクト実行
+
+Android プロジェクトをスタートアッププロジェクトに設定します。
+(右クリックから選ぶ)
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/628a5288-738b-4c83-3372-2cc3e807161d.png)
+
+実機ではなく Android エミュレータで実行する場合、
+まずエミュレータの設定をする必要があります。
+
+実行ボタンの右のドロップダウンから「Create Android Emulator」(Android エミュレータの作成) をクリックします
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/c9fc2f11-4a6e-c774-efd9-df5b58448573.png)
+
+作成 Android 機エミュレータのスペック, OS, API バージョンの設定画面になります。何 GB メモリを割り当てるかとか。
+デフォルトのまま作成します
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/73b2f36b-b684-dc58-ae50-cefb958bc16b.png)
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/a4eca599-700c-4061-124a-eeb6f2a3fe09.png)
+
+そして VS2019 に戻り、
+実行ボタンが先ほど作成した Android エミュレータになっているのを確認します。
+(もしエミュレータではなく実機を繋いでいる人は、実機の名前が表示されているはず)
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/9f6b5c15-7430-6b05-d1e9-aed70d095759.png)
+
+これを押して実行します
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/de7519f9-9d19-1080-98b3-db1c85e8b4c1.png)
+
+実行できましたね!
+
+(* ゜▽゜ * っ)З「これで **Xamarin** の環境が (UWP, Android ともに) 正しく入ったことが確認できたね!さて、次はいよいよ **Uno Platform** だ!長かったなあ」
+
+
+# ついに Uno Platform 導入
+
+Visual Studio 2019 をいったん閉じて、また起動します。
+
+「Continue without code (コード無しで開く)」で VS2019 を開いて
+上のメニューの「拡張機能」→「拡張機能の管理」を開きます
+
+![Uno Platform 導入](https://platform.uno/docs/articles/Assets/tutorial01/manage-extensions.png)
+
+左のサイドメニューで「オンライン」を選択し
+右上の検索ボックスで「`uno platform`」を入力します。
+
+そして出てきた「`Uno Platform Solution Templates`」をダウンロードします。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/60fb50c9-b60b-e15f-2f93-bd35d5fad97c.png)
+
+
+ダウンロードが終わったら VS2019 を閉じます。するとインストールが始まるので、終わったらまた開きます
+
+# Uno Platform ハローワールド
+
+VS2019 を起動して「新しいプロジェクトの作成」をクリックします。
+
+するとプロジェクト選択画面になるので
+検索ボックスに「`uno platform`」と入れて絞り込み、
+ `Cross-Platform App (Uno Platform)` を選択して開きます。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/2dc15a36-c8d6-9dca-bd5d-5c4f2ebe7774.png)
+
+アプリの名前は「MyFirstUnoApp」とか適当に入力して
+「Create (作成)」をクリックします
+
+そして出てきたプロジェクトが立ち上がります。
+
+## 生えた 5 つのプロジェクト
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/61c30614-74fd-7ac3-073c-7a9a98686fc4.png)
+
+上から
+
+1. MyFirstUnoApp.**Droid**
+1. MyFirstUnoApp.**iOS**
+1. MyFirstUnoApp.**Shared**
+1. MyFirstUnoApp.**UWP** (Universal Windows)
+1. MyFirstUnoApp.**Wasm**
+
+の 5 つのプロジェクトが出来上がっています。
+それぞれ、
+
+1. .**Droid** → Android 用のビルドを行うプロジェクト。Android 固有の API を叩くコードを書く。デフォルトではこれがスタートアッププロジェクトに設定されているので、このまま「実行」すると、Android アプリが実行される<br />![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/ef9a9e22-aae0-bedf-3a50-bb5a39ab719d.png)
+1. .**iOS** → iOS 用のビルドを行うプロジェクト。<br />![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e07f93b0-341d-8e3c-b08d-f60338fc7889.png)
+
+1. .**Shared** → メインプロジェクト。4 プラットフォーム共通のコードが全て入る。プラットフォーム間で美しく設計して共通化できていたら、ここに 9 割以上のコードが入ることになる<br />![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/eab9633a-29ff-3387-ad91-e8a8b3adb765.png)
+
+1. .**UWP** (Universal Windows) → UWP 用のビルドを行うプロジェクト。UWP 固有の API を叩くコード入れ<br />![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/3c41b943-b9ca-3730-373e-26ce049e608a.png)
+
+1. .**Wasm** → WebAssembly 用のビルドを行うプロジェクト。WebAssembly (Web アプリ) 固有の API を叩くコード入れ<br />![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/3a80c287-b570-4a05-3991-a371df7d07d8.png)
+
+## 実行してみる
+
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/75e7bcbe-db1c-6451-40ed-434cc9ebb71c.png)
+
+
+コードは一切編集しないで、
+まず実行してみましょう。
+
+デフォルトでは Android プロジェクトがスタートアッププロジェクトに設定されています。
+そのまま実行ボタンを押してみましょう。(F5 を押す)
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/81607137-0d7b-3882-c174-fe21a8b230d3.png)
+
+Android エミュレータ (または繋いでいる実機) に
+"Hello, World!"
+と実行されたら成功です
+
+(* ゜▽゜ * っ)З「おお! **Uno Platform** ハローワールド完了!」
+
+
+## もし足りないバージョンの Windows SDK がある場合は入れる
+
+私の場合、実行が成功する前、ここでアラートウィンドウが出ていました。
+このサンプルアプリのターゲットバージョンが私の環境より古いらしく、どうやら必要な SDK が入っていないようです。
+
+(というか Android アプリのビルドしてるのに足りない Windows SDK 聞かれるあたり Uno Platform いじってる感あって良い)
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/75426c8a-cec2-c9a0-3e6d-0add5b20e5dd.png)
+
+なので、ターゲットバージョンを上げるか、その指定されているバージョンの Windows SDK を入れるかとなります。私は SDK 入れることにしました。
+
+このアラートの中の「install」リンクをクリックすると、Visual Studio Installer が立ち上がります。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/ec1ec621-f1f8-8bb4-eaf7-82435a82bc16.png)
+
+2.8 GB かあ、結構食うなあ。まあそんなものだよね。
+「インストール」を押します。
+
+
+## 編集してみる
+
+せっかくなので表示されている文字列を変更してみましょう。
+
+Shared プロジェクトの `MainPage.xaml` を開きます。
+これはアプリ実行時に最初に起動される画面の UI を記述しているファイルです。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/72d35f80-2ac7-a518-94f5-58c898a56a74.png)
+
+これの 11 行目を少し編集してみましょう。
+
+今これ
+
+````xml
+<TextBlock Text="Hello, world!" Margin="20" FontSize="30" />
+````
+
+↓ こうする
+
+
+````xml
+<TextBlock Text="ハロー Uno Platform!" Margin="20" FontSize="30" />
+````
+
+そして実行してみると
+狙った通りに動きましたね!
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/a56e5268-bee2-3688-04a8-39e3aad0da31.png)
+
+
+## 参考資料
+
+2020年3月1日(日) の 技術書典で
+3人で書いた技術本『[牛めし警察で学ぶ Uno Platform](https://techbookfest.org/event/tbf08/circle/5714512426565632)』を頒布します!
+
+Microsoft MVP の ひらりんさん ([@himarin269](https://twitter.com/himarin269))、
+Microsoft 社のエンジニアの かずきさん ([@okazuki](https://twitter.com/okazuki))
+との 3 人で書きました!
+
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e0a22f12-8900-abf6-d932-6a82ea272d9f.png)
+
+参考記事: [#技術書典 8 にて「牛めし警察で学ぶ Uno Platform」を頒布します!](https://himanago.hatenablog.com/entry/2019/12/20/194050)
+
+こちらの本でも詳しく解説していきます。