開発環境を設定し、Android および iOS 向けの最初のモバイル アプリケーションをビルドします。
ありません。
10分 + ダウンロード/インストール時間
"Hello World" メッセージを表示する Android および iOS 用のモバイルアプリ。
Visual Studio 2022 をダウンロードしてインストールします。
インストール中に、.NET によるモバイル開発 ワークロードを選択します (上記のインストール リンクでは、そのオプションが既に事前に選択されています)。
Visual Studio 2022 を既にお持ちの場合は、.NET Mobile development with .NET ワークロードを追加できます:
このチュートリアルは、最新バージョンの Visual Studio 向けに最適化されています。既に Visual Studio 2022 をお持ちの場合は、更新プログラムを確認してください:
Visual Studio 2019 for Mac をダウンロードしてインストールします。
Visual Studio 2019 for Mac のダウンロード
インストール中に、Android + Xamarin.Forms と iOS + Xamarin.Forms プラットフォームが選択されていることを確認します。
このチュートリアルは、最新バージョンの Visual Studio 向けに最適化されています。既に Visual Studio 2019 をお持ちの場合は、更新プログラムを確認してみてください。
iOS 用または macOS 用 Xamarin アプリをビルドするには、次のものも必要です:
使用している Mac が最新バージョンと互換性がない場合は、Xcode の古いバージョンを使用している可能性があります。
Apple ID:
Apple ID をまだお持ちでない場合は、https://appleid.apple.com で新しい ID を作成できます。Xcode をインストールしてサインインするには、Apple ID が必要です。
Xcode をインストールした後、Xcode を開き、サービス使用条件に同意し、ダイアログが表示された場合は、オプションのコンポーネントをインストールする必要があります。
新しい Xamarin アプリの作成:
プロジェクトをビルドするには、Android SDK の特定のバージョンが必要です。必要な SDK がコンピューターにない場合は、新しいプロジェクトの読み込み中に、次のプロンプトが表示されます。[承諾] を選択して、自動インストールを開始します。
NuGet は、新しいアプリの依存関係を取り込んだパッケージ マネージャーです。
パッケージの復元処理が自動的に開始されます。復元済み または 準備完了 のメッセージが画面左下のステータス バーに表示されるまでお待ちください。
新しい Xamarin アプリの作成:
NuGet は、新しいアプリの依存関係を取り込んだパッケージ マネージャーです。
アプリケーションがロードされたら、AwesomeApp ソリューションを右クリックし、NuGet パッケージの復元 を選択します。
Android デバイスを使用してデバッグするには、Android デバイスを構成して Visual Studio に接続するか、エミュレーターを使用します。最も適したシナリオを選択します。
Android デバイスを使用して開発するには、USB デバッグを有効にする必要があります。
開発者モードを有効にする
USB デバッグ状態の確認
デバイスを信頼する
デバイスが構成され、配置ターゲットとして Visual Studio に表示されるようになりました。
問題がありますか?ドキュメントを確認します。
展開先のデバイスがない場合は、Android Emulator を設定するか、デバイスを使用する必要があります。既に完了している場合は、この手順をスキップできます。
これが初めて Xamarin アプリケーションを構築する場合は、新しい Android エミュレーターを作成する必要があります。 デバッグ メニューに "Android エミュレーター" が表示されます。 クリックして作成プロセスを開始します。
これにより、エミュレーターの作成プロセスを開始するための User Account Control プロンプトが表示されます。Yes を選択します。
これにより、[新しいデバイス] ダイアログが表示されます。このダイアログ ボックスには、ベース エミュレーター用に構成済みの既定の Android デバイスが既に存在します。[作成] を選択します。
この時点で、Android Emulator の使用許諾契約書に同意するよう促すメッセージが表示される場合があります。読み通して頂き、同意 を選択してプロセスを続行します。これでAndroid Emulator イメージがダウンロードされ、Visual Studio で使用するエミュレーターの構築が完了します。
エミュレーターが作成されると、スタート というボタンが表示されます。それをクリックします。
Windows ハイパーバイザー プラットフォームを有効にするように求めるメッセージが表示されることがあります。ドキュメントにしたがって、このフィーチャーを有効化して最適なパフォーマンスを得ます。
Android エミュレーターが起動します。 起動が完全に完了するまで待つと、Visual Studio のデバッグメニューに表示されます。 ハードウェア アクセラレーションを使用していない場合、これには時間がかかることがあります。
Android emulator が作成され、使用できるようになりました。次回 Visual Studio を実行するときに、エミュレーターはデバッグ ターゲット ウィンドウに直接表示され、選択すると開始します。エミュレーターの使用中に問題が発生した場合やパフォーマンスの問題が発生した場合は、完全なセットアップ ドキュメント をお読みください。
このチュートリアルでは、Android への設定と展開にフォーカスします。iOS に展開するには、Remoted iOS Simulator for Windows を構成するか、Hot Restart を使用して展開用デバイスを構成する必要があります。
展開先のデバイスがない場合は、Android Emulator またはデバイスを設定する必要があります。この手順を既に完了しているか、iOS への展開のみの場合は、この手順をスキップできます。
今回が初めて Xamarin アプリケーションを構築する場合は、新しい Android エミュレーターを作成する必要があります。 デバッグ メニューに "デバイスの選択" が表示されます。実行ボタンをクリックして作成プロセスを開始します。
エミュレーターを作成することを確認するメッセージが表示されます。[仮想デバイスの追加] を選択します。
これにより、Android デバイス マネージャーが開きます。+ 新しいデバイスを選択して、作成プロセスを開始します。
オプションは、ベース エミュレーターに対して自動的に設定されます。必要に応じて、オプションを変更し [作成] を選択します。
この時点で、Android Emulator の使用許諾契約書に同意するよう促すメッセージが表示される場合があります。ご覧頂き、、同意 を選択してプロセスを続行します。これでエミュレーター画像がダウンロードされ、Visual Studio で使用するエミュレーターの作成が完了します。
エミュレーターが作成されると、プレイ というボタンが表示されます。これをクリックすると、Android Emulator が起動します。完全に起動するまで待つと、Visual Studio デバグ メニューに表示されます。ハードウェア アクセラレータを使用していない場合は、しばらく時間がかかることがあります。
Android emulator が作成され、使用できるようになりました。次回 Visual Studio を実行するときに、エミュレーターはデバッグ ターゲット ウィンドウに直接表示され、選択すると開始します。エミュレーターの使用中に問題が発生した場合やパフォーマンスの問題が発生した場合は、完全なセットアップ ドキュメント をお読みください。
これで、エミュレーターやデバイスが展開用に構成されているはずです。
メニューから、[デバッグ] > [デバッグの開始] を選択します。 このオプションが無効になっている場合は、エミュレーターが選択されていることを確認してください。
アプリケーションがビルドされ、Android デバイスまたは Android Emulator に展開されて実行されます。
メニューから、[実行] > [デバッグの開始] を選択します。 このオプションが無効になっている場合は、エミュレーターが選択されていることを確認してください。
アプリケーションがビルドされ、Android デバイスまたは Android Emulator に展開されて実行されます。
AwesomeApp.iOS プロジェクトを右クリックし、スタートアップ プロジェクトとして設定 を選択します。
メニューから、[デバッグ] > [デバッグの開始] を選択します。 このオプションが無効になっている場合は、シミュレーターが選択されていることを確認してください。
アプリケーションがビルドされ、iOS シミュレーターにデプロイされて実行されます。
おめでとうございます。最初の .NET モバイル アプリを作成して実行しました。
Xamarin を使用してアプリケーションを開発している場合、アプリケーションをデバッグするときに XAML ホット リロードを使用できます。これは、アプリケーションの実行中に XAML ユーザー インターフェイス (UI) を変更できることを意味し、UI は自動的に更新されます。
Solution Explorer で、AwesomeApp
プロジェクトの下にある MainPage.xaml
ファイルをダブルクリックします。
現在、Frame
の BackgroundColor
は、次の 7 行目のコードに示すように、Xamarin blue に設定されています。
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0" >
背景色を DeepPink
や お気に入りの色 を自由に選んで更新しましょう。
<Frame BackgroundColor="DeepPink" Padding="24" CornerRadius="0" >
MainPage.xaml
に Frame
要素が表示されない場合は、古いバージョンの Visual Studio を使用している可能性があります。その場合は、StackLayout
内に次のコードを貼り付けます:
<Frame BackgroundColor="DeepPink" Padding="24" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
</Frame>
[ファイル] > [保存] または CTRL+S を選択して変更を保存すると、UI が更新されます。
[ファイル] > [保存] または CMD+S を選択して変更を保存すると、UI が更新されます。
次に、ユーザー インターフェイスにボタンを追加し、クリック イベントを追加して、カウントを増やして表示します。
MainPage.xaml
の </Frame>
終了タグの下に次のコードを追加します:
<Button Text="Click Me" />
MainPage.xaml
の ContentPage
内のコードは次のようになります:
<StackLayout>
<Frame BackgroundColor="DeepPink" Padding="24" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
</Frame>
<!--Add Button Here -->
<Button Text="Click Me" />
<Label Text="Start developing now" FontSize="Title" Padding="30,10,30,10" />
<!--More Labels here -->
</StackLayout>
[ファイル] > [保存] または CTRL+S を選択して変更を保存すると、UI がボタンで更新されます。
<StackLayout>
<Frame BackgroundColor="DeepPink" Padding="24" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
</Frame>
<!--Add Button Here -->
<Button Text="Click Me" />
<Label Text="Start developing now" FontSize="Large" Padding="30,10,30,10" />
<!--More Labels here -->
</StackLayout>
[ファイル] > [保存] または CMD+S を選択して変更を保存すると、UI がボタンで更新されます。
UI 以外のロジックを変更するには、デバッグを停止する必要があります。メニューで デバッグ > デバッグを停止する を選択します。
UI 以外のロジックを変更するには、デバッグを停止する必要があります。メニューで 実行 > デバッグを停止する を選択します。
Handle_Clicked
という名前の Clicked
イベントでMainPage.xaml
の Button
を更新します。
<Button Text="Click Me" Clicked="Handle_Clicked" />
MainPage.xaml.cs
を開きます (このファイルは MainPage.xaml の下に入れ子になっています。右クリックしてメニューから コードの表示 を選択することもできます)。
コンストラクターのクラス内部で以下のコードを追加します:
int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
count++;
((Button)sender).Text = $"You clicked {count} times.";
}
MainPage.xaml.cs
の名前空間内のコードは、前のコードを追加した後、次のようになります:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
count++;
((Button)sender).Text = $"You clicked {count} times.";
}
}
メニューで、デバッグ > デバッグの開始 を選択します。
メニューで、実行 > デバッグの開始 を選択します。
アプリが起動したら、ボタンをクリックします。 クリック数はメイン ラベルに表示されます。
おめでとうございます。.NET を使用した最初の Xamarin アプリを作成して実行しました。
基本を理解したので、Microsoft Learn で Xamarin..Forms セルフガイド学習パスを使用して、最初の Xamarin アプリの構築を続けます。
Brandon と Matthew が Xamarin アプリの構築について最初から最後まで説明します。
あなたは下記にもご興味がおありかもしれません...