ダウンロードしてインストール
Visual Studio 2022 をダウンロードしてインストールします。
Visual Studio 2022 のダウンロード
インストール中に、.NET によるモバイル開発 ワークロードを選択します (上記のインストール リンクでは、そのオプションが既に事前に選択されています)。
Visual Studio を既にお使いですか?
Visual Studio 2022 を既にお持ちの場合は、Xamarin コンポーネントが選択された .NET マルチプラットフォーム アプリの UI 開発ワークロードを追加できます。
- Windows キーを選択し、Visual Studio インストーラー と入力して、Enter キーを押します。
- プロンプトが表示された場合は、インストーラーが自分自身を更新することを許可します。
- Visual Studio 2022 の更新プログラムが利用可能な場合は、Update ボタンが表示されます。それを選択して、インストールを変更する前に更新します。
- Visual Studio 2022 のインストールを見つけて、[変更] を選択します。
- .NET マルチプラットフォーム アプリの UI 開発を選択し、省略可能 (インストーラーの右側) にある Xamarin にチェックを入れ、[変更] をクリックしてください。
Visual Studio の更新プログラムを確認する
このチュートリアルは、最新バージョンの Visual Studio 向けに最適化されています。既に Visual Studio 2022 をお持ちの場合は、更新プログラムを確認してください:
- Windows キーを選択し、Visual Studio インストーラー と入力して、Enter キーを押します。
- プロンプトが表示された場合は、インストーラーが自分自身を更新することを許可します。
- 更新プログラムが利用可能な場合、Visual Studio 2022 のインストールに [更新] ボタンが表示されます。これを選択して更新します。
Visual Studio 2022 for Mac をダウンロードしてインストールします。
Visual Studio 2022 for Mac のダウンロード
インストール中に、Android + Xamarin.Forms と iOS + Xamarin.Forms プラットフォームが選択されていることを確認します。
Visual Studio の更新プログラムを確認する
このチュートリアルは、最新バージョンの Visual Studio 向けに最適化されています。既に Visual Studio 2022 をお持ちの場合は、更新プログラムを確認してください:
- Visual Studio for Mac を開きます。
- メニューバーで、[Visual Studio] > [更新の確認...] を選択します。
- 利用可能な更新プログラムが表示され、ダウンロードが完了したら、[再起動して更新プログラムをインストールする] を選択します。
オプション: Xcode のインストール
iOS 用または macOS 用 Xamarin アプリをビルドするには、次のものも必要です:
Xcode をインストールした後、Xcode を開き、サービス使用条件に同意し、ダイアログが表示された場合は、オプションのコンポーネントをインストールする必要があります。
デバイスの構成
Android デバイスを使用してデバッグするには、Android デバイスを構成して Visual Studio に接続するか、エミュレーターを使用します。最も適したシナリオを選択します。
Android デバイスの設定
Android デバイスを使用して開発するには、USB デバッグを有効にする必要があります。
開発者モードを有効にする
- Android デバイスで、[設定] 画面に移動します。
- 設定画面の上部にある検索を使用してビルド番号を検索するか、[携帯電話情報] で検索します。
- "開発者になりました!" と表示されるまで、ビルド番号 を 7 回から 10 回タップします。
- [作成] 選択します。
USB デバッグ状態の確認
- Android デバイスで、[設定] 画面に移動します。
- 設定画面の上部にある検索を使用して [USB デバッグ] を検索するか、[開発者向け] オプションで検索します。
- USB デバッグ が有効になっていない場合は、有効にします。
デバイスを信頼する
- USB ケーブルを使用して、スマートフォンとコンピューターを接続します。
- 以前にデバッグに使用したことがない場合は、デバイス上のコンピューターを信頼することを要求するプロンプトが表示されます。
- [このコンピューターで常に許可] をチェックして、デバイスを接続するたびにこのプロンプトが表示されないようにすることもできます。
- [OK] を選択します。
デバイスが構成され、配置ターゲットとして Visual Studio に表示されるようになりました。
問題がありますか?ドキュメントを確認します。
Android Emulator の設定
展開先のデバイスがない場合は、Android Emulator を設定するか、デバイスを使用する必要があります。既に完了している場合は、この手順をスキップできます。
これが初めて Xamarin アプリケーションを構築する場合は、新しい Android エミュレーターを作成する必要があります。 デバッグ メニューに "Android エミュレーター" が表示されます。 クリックして作成プロセスを開始します。
これにより、エミュレーターの作成プロセスを開始するための User Account Control プロンプトが表示されます。Yes を選択します。
これにより、[新しいデバイス] ダイアログが表示されます。このダイアログ ボックスには、ベース エミュレーター用に構成済みの既定の Android デバイスが既に存在します。[作成] を選択します。
この時点で、Android Emulator の使用許諾契約書に同意するよう促すメッセージが表示される場合があります。読み通して頂き、同意 を選択してプロセスを続行します。これでAndroid Emulator イメージがダウンロードされ、Visual Studio で使用するエミュレーターの構築が完了します。
エミュレーターが作成されると、スタート というボタンが表示されます。それをクリックします。
Windows ハイパーバイザー プラットフォームを有効にするように求めるメッセージが表示されることがあります。ドキュメントにしたがって、このフィーチャーを有効化して最適なパフォーマンスを得ます。
Android エミュレーターが起動します。 起動が完全に完了するまで待つと、Visual Studio のデバッグメニューに表示されます。 ハードウェア アクセラレーションを使用していない場合、これには時間がかかることがあります。
Android emulator が作成され、使用できるようになりました。次回 Visual Studio を実行するときに、エミュレーターはデバッグ ターゲット ウィンドウに直接表示され、選択すると開始します。エミュレーターの使用中に問題が発生した場合やパフォーマンスの問題が発生した場合は、完全なセットアップ ドキュメント をお読みください。
iOS デバイスのセットアップ
このチュートリアルでは、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 に展開されて実行されます。
オプション: iOS で実行
AwesomeApp.iOS プロジェクトを右クリックし、スタートアップ プロジェクトとして設定 を選択します。
アプリの起動
メニューから、[デバッグ] > [デバッグの開始] を選択します。 このオプションが無効になっている場合は、シミュレーターが選択されていることを確認してください。
アプリケーションがビルドされ、iOS シミュレーターにデプロイされて実行されます。
おめでとうございます。最初の .NET モバイル アプリを作成して実行しました。
コードを編集する
Xamarin を使用してアプリケーションを開発している場合、アプリケーションをデバッグするときに XAML ホット リロードを使用できます。これは、アプリケーションの実行中に XAML ユーザー インターフェイス (UI) を変更できることを意味し、UI は自動的に更新されます。
Solution Explorer で、AwesomeApp プロジェクトの下にある MainPage.xaml ファイルをダブルクリックします。
現在、Frame の BackgroundColor は、次の 7 行目のコードに示すように、Xamarin blue に設定されています。
MainPage.xaml
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0" >
背景色を DeepPink や お気に入りの色 を自由に選んで更新しましょう。
MainPage.xaml
<Frame BackgroundColor="DeepPink" Padding="24" CornerRadius="0" >
MainPage.xaml に Frame 要素が表示されない場合は、古いバージョンの Visual Studio を使用している可能性があります。その場合は、StackLayout 内に次のコードを貼り付けます:
MainPage.xaml
<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> 終了タグの下に次のコードを追加します:
MainPage.xaml
<Button Text="Click Me" />
MainPage.xaml の ContentPage 内のコードは次のようになります:
MainPage.xaml
<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 がボタンで更新されます。
MainPage.xaml
<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 を更新します。
MainPage.xaml
<Button Text="Click Me" Clicked="Handle_Clicked" />
MainPage.xaml.cs を開きます (このファイルは MainPage.xaml の下に入れ子になっています。右クリックしてメニューから コードの表示 を選択することもできます)。
コンストラクターのクラス内部で以下のコードを追加します:
MainPage.xaml.cs
int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
count++;
((Button)sender).Text = $"You clicked {count} times.";
}
MainPage.xaml.cs の名前空間内のコードは、前のコードを追加した後、次のようになります:
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.";
}
}
アプリケーションを実行する
メニューで、デバッグ > デバッグの開始 を選択します。
メニューで、実行 > デバッグの開始 を選択します。
アプリが起動したら、ボタンをクリックします。 クリック数はメイン ラベルに表示されます。
