Xamarin と Visual Studio で最初の iOS/Android アプリケーションを構築する

.NET と Xamarin、および Visual Studio で美しいクロスプラットフォームのネイティブアプリケーションを構築する旅を始めましょう！

Xamarin と Visual Studio で最初の iOS/Android アプリケーションを構築する。このブログでは、プロセス全体を案内し、ファイル -> New for Xamarin に含まれるすべての内容を説明します。

まず、よくある質問に答えて、基礎を固めましょう。

.NETとは？
.NETはクロスプラットフォーム、ハイパフォーマンス、およびオープンソースのランタイムで、複数の言語、エディタ、ライブラリで使用でき、Web、モバイル、デスクトップ、ゲームなどのアプリケーションを構築することが可能です。 iOS、Android、Windowsなど、さまざまなプラットフォームでコードを実行できるようにするための基盤です。 Web 開発者であれば、JavaScript を実行する V8 ランタイム、Java 開発者であれば、Java を実行する JVM のようなものです。

Xamarin とは
.NET には、特定のプラットフォーム向けに開発者が独自のシナリオを実現するために構築された、一連のフレームワークがあります。たとえば、ASP.NET Core と Blazor は、Web 開発のために .NET 用に構築されたフレームワークです。 WPFとUWPは、デスクトップ開発用に.NETで構築されたフレームワークです。 Xamarinは、iOS、Android、macOS向けのアプリを構築するためのフレームワークとツールです。また、クロスプラットフォームユーザーインターフェイス用の Xamarin.Forms や、ネイティブプラットフォーム機能にクロスプラットフォームでアクセスするための Xamarin.Essentials など、iOS、Android、macOS、Windows にまたがるクロスプラットフォーム開発を可能にする複数のライブラリが含まれています。

使用できるプログラミング言語
.NET では C#、F#、および Visual Basic など複数の言語が使用できます。 Xamarin でアプリを構築するには、これらのプログラミング言語のいずれかを使用できますが、私は C# 開発者であり、アプリ開発の主要言語となっています。しかし、F# には、関数型開発用の Fabulous などの素晴らしいフレームワークがあります。

XAML は、Xamarin でユーザーインターフェイスを構築するために使用される別の「言語」です。 XAML は、WPF や UWP で Windows アプリケーションを構築するために長い間使用されており、読みやすいマークアップ、ホットリロードテクノロジー、UI 開発を容易にする高度なデータバインディングなどの素晴らしい機能があります。

What tools can I use?
.NET では、開発者はコマンドライン、Visual Studio Code などのコードエディター、および Visual Studio 2019 と Visual Studio 2019 for Mac によるフル IDE（統合開発環境）などのさまざまなツールを使用することができます。 Xamarin でモバイルアプリを開発するには、アプリを構築するためのフル機能を備えた Visual Studio 2019 または Visual Studio 2019 for Mac のいずれかを使用する必要があります。

では、Xamarin で最初のモバイルアプリの構築を始めましょう!

モバイル開発用 Visual Studio のインストール
Creating your project
フライアウト、タブ、&ブランク
プロジェクトの中身は何ですか。
Xamarin.Forms Cross-Platform UI
User Interaction and ViewModels
XAML ホットリロードによるすばやい変更
Understanding App and Shell

モバイル開発用 Visual Studio のインストール

クロスプラットフォームの旅の最初のステップは、Windows 用 Visual Studio 2019 または Mac 用 Visual Studio 2019 のインストールです。

Windows に Visual Studio 2019 をインストールする場合、必要なのは、Mobile development with .NET を選択することのみです。.NET ワークロード:

Visual Studio 2019 for Mac では、Android と iOS のインストールを選択できます。

iOS 開発を行う場合、Xcode も macOS マシンにインストールする必要があります。

この後で、すべての設定が完了してモバイル開発の準備が整います！Visual Studio 2019 for Mac では、Visual Studio 2019 for Mac のインストールが完了します。

Android プロジェクトを作成して実行すると、追加の Android SDK のインストールと Android エミュレーターの作成を求められることがあります。

Creating your project

これで Visual Studio 2019 と Xamarin がインストールできたので、作業を開始しましょう！

Xcode をインストールします。 Visual Studio 2019 を起動すると、新しいプロジェクトを作成するオプションが表示されます。 WindowsではXamarin.Formsを検索するか、プロジェクトの種類のフィルターを使用して、Mobileを選択します。私たちは Mobile App (Xamarin.Forms) を選択したいと思います。

この新しいプロジェクトを選択すると、使用したいアプリのテンプレートの種類を尋ねる新しいダイアログが表示されます。

構築したいアプリケーションの種類に基づいて選択するいくつかのオプションが用意されています。

フライアウト、タブ、&ブランク

Flyout & Tabbed アプリテンプレートは、Shell という最新の Xamarin.Forms テクノロジーに基づきます。これは、アプリの迅速なスキャフォールディングを可能にし、URL ベースのナビゲーションなどのユニークな機能を提供します。これらのテンプレートは類似していますが、アプリのベースにフライアウトメニューまたは下部タブを使用するかどうかが主な違いです。

Blank app はまさにそれで、1 つのページと他の何もない非常にシンプルなテンプレートを提供します。ほとんどのチュートリアルではシェルについて説明されていないため、ここから始めたいのですが、私にとってこれは Xamarin アプリ開発の未来です。このテンプレートには多くの機能があるので、今後の記事で各セクションを説明しますが、今日はプロジェクトを作成し、シェルとは何かを説明します。

Visual Studio 2019 for Mac を使用している場合、Multiplatform > App > Flyout Forms App

プロジェクトの中身は何ですか。

App プロジェクトが作成されたので、1 つのソリューションの中にいくつかのプロジェクトがあることがわかります。このプロジェクトは .NET 標準プロジェクトで、異なるオペレーティングシステム間で共有可能な単一のプロジェクトを持つことができます。

iOS & Android プロジェクトは「ヘッド」または「親」プロジェクトであり、プラットフォーム固有のコード、設定、アセットなどを格納するために使用されます。ここでは、表示名、アプリアイコン、バージョン番号などのさまざまな設定や、クロスプラットフォームでは利用できないiOSまたはAndroid特有のコードなどを構成することになります。ある時点で、これらのプロジェクトに入り、いろいろと調整する必要がありますが、今のところクロスプラットフォームプロジェクトのままにします。

Xamarin.Forms Cross-Platform UI

クロスプラットフォーム .NET Standard プロジェクトの内部には、アプリ用のコードが少しあります。このテンプレートでは、アイテムのリストと概要ページを持つサンプルアプリを紹介しています。項目は、

Models というフォルダーに整理されています。 Person、Car、Dog、Cat など、アプリ内のデータを表現するクラスです。このアプリでは、Item という 1 つのモデルを持っています。
Services: このフォルダの内部には、Web サービスの呼び出しやデータベースなど、UI に関係ないものにアクセスするコードを配置します。このプロジェクトでは、メモリにアイテムを格納するために使用される単純な MockDataStore にあります。これは、XAML ユーザーインターフェイスファイルが存在する場所です！
ViewModels。このフォルダーには、Views フォルダーとほぼ 1 対 1 で対応するファイルがあります。これは、各 View が ViewModel にバインドされ、Xamarin.Forms が 2 つをブリッジして、View が情報を表示したり、各 ViewModel のメソッドを呼び出したりできるためです。

App を起動すると最初に目にする AboutPage.xaml を見てみましょう。まず、トップレベル要素 ContentPage:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyAwesomeApp.Views.AboutPage" xmlns:vm="clr-namespace:MyAwesomeApp.ViewModels" Title="{Binding Title}">

ここには、特定のコードが存在する場所を示すいくつかの xmlns タグがあります。 default と x はすべてのファイルに含まれており、基本的な機能を提供します。 xmlns:vm タグは、XAML から独自のコードにアクセスするためのもので、これについては後で説明します。 x:Class は、ページの名前空間と名前への参照で、これは後ろのコードと一致します。最後に、Title プロパティがあり、これは ViewModel の Title というプロパティにデータバインドされています。

BindingContext や Resources などの追加のプロパティを XAML コンテンツで設定できます。ここでは、xmlns:vm タグを使用して、BindingContext を AboutViewModel の新しいインスタンスに設定します。

<ContentPage.BindingContext> <vm:AboutViewModel /></ContentPage.BindingContext>

次は、ページで使用できる Color リソースです。リソースにより、重複するコードを削除し、再利用可能なキー/値のペアを作成することができます。

<ContentPage.Resources> <ResourceDictionary> <Color x:Key="Accent">#96d1ff</Color> </ResourceDictionary></ContentPage.Resources>

最後に、各ページは 1 つのルート要素コントロールを持つことができます。これは通常、StackLayout、ScrollView などのレイアウト、またはここで使用しているようなグリッドです。グリッドは、行と列を持つ素晴らしいコントロールです。

<Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />

{StaticResource Primary} に注意してください。これは、先ほど Accent で定義したリソースへの参照ですが、Primary は App.xaml にあり、アプリ全体で利用可能なリソースです。

さらに多くのレイアウトやコントロールを見つけるには、ツールボックスを開いて、何が利用可能かを確認できます。

最後に、コントロールまたはレイアウトを選択すると、プロパティウィンドウにそのコントロールで使用できるすべての異なるプロパティが表示されます。

非常に重要なことの 1 つは、これらの XAML ページのそれぞれには、XAML ビューにとって重要なコードが背後にあり、ページの表示や非表示などのイベントやコンストラクター用の特定のメソッドを持っていることです。

それを開くと、このビューには今必要な特別なイベントがないので、非常にシンプルであることがわかります。

public partial class AboutPage : ContentPage{ public AboutPage() { InitializeComponent(); }}

User Interaction and ViewModels

さて、XAML で作成したこのページ用の ViewModel について説明しましょう。 ViewModels ->AboutViewModel.cs ファイルをダブルクリックして開きます。

public class AboutViewModel : BaseViewModel{ public AboutViewModel() { Title = "About"; OpenWebCommand = new Command(async () => await Browser.OpenAsync("https://aka.ms/xamarin-quickstart")); } public ICommand OpenWebCommand { get; }}

これは驚くほどシンプルな ViewModel ですが、データバインディングがどのように機能するかを示す注目すべき例です。ここでは、ViewModel はタイトルを About に設定し、新しいコマンドを作成して Browser.OpenAsync を呼び出し、ページ上で Web ブラウザを開きます。

その Command は何か特別なものです。表示される単純な string である Title とは異なり、Command は特別なクラスで、ユーザーが操作したときにユーザーインターフェイスに何かを指示するために使用できます。たとえば、Button には次のコードがあります。

Command="{Binding OpenWebCommand}"

このコードは、ユーザーがボタンをクリックしたときに実行するコードを持つ public コマンドが ViewModel 内にあることを Xamarin.Forms に伝えています。この場合、Xamarin.Essentialsから利用可能な多くのネイティブ機能の1つであるブラウザを開きたいのです。 Browser.OpenAsync を呼び出すと、1 行のコードで iOS と Android に固有のブラウザが起動します。

XAML ホットリロードによるすばやい変更

では、いよいよアプリケーションを起動します。 Windows と macOS の両方でローカルにエミュレーターが利用できるので、私は Android で開始するのが好きです。 Visual Studio のメニューでは、Android がデフォルトのプロジェクトになっており、デバッグボタンが利用可能で、利用可能な Android Emulators が表示されていることがわかります。 7908>

アプリを起動すると、デバッグモードになり、コードにブレークポイントを設定して値を確認することができますが、XAML ホットリロードも可能で、デバッグを停止せずに UI を変更できます。

AboutPage.xaml を開き、Accent カラーを別の色に変更します。ここでは、オレンジ色に更新し、保存をクリックして変更を確認します。

この時点で、新しいコントロールを追加し、ユーザーインターフェイスを更新し、Android 上のアプリで作業を継続することができます。 iOS プロジェクトを右クリックして、[スタートアッププロジェクトとして設定] を選択します:

iOS では、開発者にとって少し異なる点があります。 macOS で Xcode をインストールすると、iOS Simulators が利用可能になります。これがあなたであれば、シミュレーターを選択し、アプリをデバッグできます。 Windowsでは、iOSシミュレータはありません 🙁 そのため、

iOS Remoted Simulatorを取得する方法は2つあります。 macOS マシンがあれば、Visual Studio 2019 for Mac と Xcode をインストールし、Windows マシンから接続してリモートビルドマシンとして使用することができます。そして、iOSシミュレーターをWindowsマシンに表示した状態から起動することができ、とてもクールです！
iOS Hot Restart: これは新しいプレビューテクノロジーで、Windows マシンに接続された iOS デバイスにアプリのデバッグビルドを直接デプロイすることができます。 Mac を持っておらず、アプリケーションをデバッグし、XAML ホットリロードなどの素晴らしい機能を使用したい場合に最適です。

Windows から iOS アプリケーションのデバッグを開始するには、セットアップと使用できる機器に基づいて、素晴らしいオプションが用意されています。 7908>

Understanding App and Shell

最後に、*App と Shell に何があるのかについてお話したいと思います。xaml の内部には、先ほどボタンで使用した Primary のようなグローバルリソースや、有効および無効時の状態で使用しているグローバル Button スタイルなどがあります。 App.xaml.cs のコードを開くと、MainPage を AppShell に設定する App が作成され、ページと同様に追加のイベントがありますが、アプリの場合は、起動時、スリープ時（別名バックグラウンド）、再開時などのイベントもあります。これには、アプリケーションシェルのスタイルと色が含まれ、さらに、タブ、フライアウト、および表示されるページ用の追加項目があります。ここでは、AboutPage と BrowsePage を表す 2 つの FlyoutItem 要素を見つけます。さらに、ログイン/ログアウトボタンを表示するためのMenuItemを持つ。 ShellContent には作成したページへのバインドがあり、自動的にページが表示され、選択するとそれぞれのページに移動します。

Xamarin.Forms Shell と Xamarin でアプリを作成するにはまだまだたくさんありますが、これであなたのアプリを開始するパスができるとよいでしょう。このシリーズの他のエントリについては、.NET dev.to アカウントをフォローするようにしてください。

Free Press