Xamarin.Forms Web Service チュートリアル

このチュートリアルを完了するには、 .NET によるモバイル開発ワークロードがインストールされた、Visual Studio 2019 (最新リリース) が必要です。 さらに、iOS でチュートリアル アプリケーションを構築するには、ペアリング済みの Mac が必要になります。 Xamarin プラットフォームのインストールについては、「Xamarin のインストール」を参照してください。 Mac ビルド ホストへの Visual Studio 2019 の接続については、「Xamarin.iOS 開発のために Mac とペアリングする」を参照してください。

1. Visual Studio を起動し、WebServiceTutorial という名前の新しい空の Xamarin.Forms アプリを作成します。

   重要

   このチュートリアルの C# スニペットと XAML スニペットでは、WebServiceTutorial という名前のソリューションが必要です。 別の名前を使用すると、コードをこのチュートリアルからソリューションにコピーするときに、ビルド エラーが発生します。

   作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイック スタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。

2. ソリューション エクスプローラーで、[WebServiceTutorial] プロジェクトを選択し、右クリックして [NuGet パッケージの管理...] を選びます。

   

3. NuGet パッケージ マネージャーで、[参照] タブを選択し、Newtonsoft.Json NuGet パッケージを検索して選択し、[インストール] ボタンをクリックしてプロジェクトに追加します。

   

   このパッケージは、JSON のシリアル化解除をアプリケーションに組み込むために使用されます。

4. エラーがないようにソリューションを構築してください。

このチュートリアルを完了するには、iOS と Android のプラットフォームのサポートがインストールされた Visual Studio for Mac (最新リリース) が必要です。 さらに、Xcode (最新リリース) も必要になります。 Xamarin プラットフォームのインストールについて詳しくは、「Xamarin のインストール」を参照してください。

1. Visual Studio for Mac を起動し、WebServiceTutorial という名前の新しい空の Xamarin.Forms アプリを作成します。

   重要

   このチュートリアルの C# スニペットと XAML スニペットでは、WebServiceTutorial という名前のソリューションが必要です。 別の名前を使用すると、コードをこのチュートリアルからソリューションにコピーするときに、ビルド エラーが発生します。

   作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイック スタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。

2. Solution Pad で、 [WebServiceTutorial] プロジェクトを選び、右クリックして [NuGet パッケージの管理...] を選択します。

   

3. [NuGet パッケージの管理] ウィンドウで、Newtonsoft.Json NuGet パッケージを検索して選択し、 [パッケージを追加] ボタンをクリックしてプロジェクトに追加します。

   

   このパッケージは、JSON のシリアル化解除をアプリケーションに組み込むために使用されます。

4. エラーがないようにソリューションを構築してください。

1. ソリューション エクスプローラーの [WebServiceTutorial] プロジェクトで、Constants という名前の新しいクラスをプロジェクトに追加します。 次に、Constants.cs のテンプレート コードをすべて削除し、次のコードに置き換えます。

   namespace WebServiceTutorial
   {
       public static class Constants
       {
           public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
       }
   }
   

   このコードによって、1 つの定数 (Web 要求の対象となるエンドポイント) が定義されます。

2. ソリューション エクスプローラーの [WebServicesTutorial] プロジェクトで、Repository という名前の新しいクラスをプロジェクトに追加します。 次に、Repository.cs のテンプレート コードをすべて削除し、次のコードに置き換えます。

   using System;
   using Newtonsoft.Json;
   
   namespace WebServiceTutorial
   {
       public class Repository
       {
           [JsonProperty("name")]
           public string Name { get; set; }
   
           [JsonProperty("description")]
           public string Description { get; set; }
   
           [JsonProperty("html_url")]
           public Uri GitHubHomeUrl { get; set; }
   
           [JsonProperty("homepage")]
           public Uri Homepage { get; set; }
   
           [JsonProperty("watchers")]
           public int Watchers { get; set; }
       }
   }
   

   このコードによって、Web サービスから取得した JSON データをモデル化するために使用される Repository クラスが定義されます。 各プロパティは、JSON フィールド名を含む JsonProperty 属性で装飾されます。 Newtonsoft.Json は、JSON データをモデル オブジェクトに逆シリアル化するときに、この JSON フィールド名と CLR プロパティとのマッピングを使用します。

   Note

   上記のクラス定義は単純化されており、Web サービスから取得した JSON データを完全にはモデル化していません。

3. ソリューション エクスプローラーの [WebServiceTutorial] プロジェクトで、RestService という名前の新しいクラスをプロジェクトに追加します。 次に、RestService.cs のテンプレート コードをすべて削除し、次のコードに置き換えます。

   using Newtonsoft.Json;
   using System;
   using System.Collections.Generic;
   using System.Diagnostics;
   using System.Net.Http;
   using System.Net.Http.Headers;
   using System.Threading.Tasks;
   using Xamarin.Forms;
   
   namespace WebServiceTutorial
   {
       public class RestService
       {
           HttpClient _client;
   
           public RestService()
           {
               _client = new HttpClient();
   
               if (Device.RuntimePlatform == Device.UWP)
               {
                   _client.DefaultRequestHeaders.Add("User-Agent", ".NET Foundation Repository Reporter");
                   _client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/vnd.github.v3+json"));
               }
           }
   
           public async Task<List<Repository>> GetRepositoriesAsync(string uri)
           {
               List<Repository> repositories = null;
               try
               {
                   HttpResponseMessage response = await _client.GetAsync(uri);
                   if (response.IsSuccessStatusCode)
                   {
                       string content = await response.Content.ReadAsStringAsync();
                       repositories = JsonConvert.DeserializeObject<List<Repository>>(content);
                   }
               }
               catch (Exception ex)
               {
                   Debug.WriteLine("\tERROR {0}", ex.Message);
               }
   
               return repositories;
           }
       }
   }
   

   このコードによって、GitHub Web API から .NET リポジトリ データを取得する 1 つのメソッド GetRepositoriesAsync が定義されます。 このメソッドは HttpClient.GetAsync メソッドを使用して、uri 引数で指定された Web API に GET 要求を送信します。 その Web API は、HttpResponseMessage オブジェクトに保管されている応答を送信します。 応答には、HTTP 要求が成功したか失敗したかを示す HTTP 状態コードが含まれます。 要求が成功した場合、Web API は、HTTP 状態コード 200 (OK)、および HttpResponseMessage.Content プロパティ内の JSON 応答で応答します。 この JSON データは、JsonConvert.DeserializeObject メソッドを使用して List<Repository> オブジェクトに逆シリアル化される前に、HttpContent.ReadAsStringAsync メソッドを使用して string に読み取られます。 このメソッドは、逆シリアル化を実行するために、Repository クラスで定義されている JSON フィールド名と CLR プロパティとの間のマッピングを使用します。

   Note

   UWP では、コンストラクター内の HttpClient オブジェクトを構成して、すべての要求にユーザー エージェント ヘッダーを追加し、GitHub JSON 応答を受け入れる必要があります。

4. エラーがないようにソリューションを構築してください。

1. Solution Pad の [WebServiceTutorial] プロジェクトで、Constants という名前の新しいクラスをプロジェクトに追加します。 次に、Constants.cs のテンプレート コードをすべて削除し、次のコードに置き換えます。

   namespace WebServiceTutorial
   {
       public static class Constants
       {
           public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
       }
   }
   

   このコードによって、1 つの定数 (Web 要求の対象となるエンドポイント) が定義されます。

2. Solution Pad の [WebServicesTutorial] プロジェクトで、Repository という名前の新しいクラスをプロジェクトに追加します。 次に、Repository.cs のテンプレート コードをすべて削除し、次のコードに置き換えます。

   using System;
   using Newtonsoft.Json;
   
   namespace WebServiceTutorial
   {
       public class Repository
       {
           [JsonProperty("name")]
           public string Name { get; set; }
   
           [JsonProperty("description")]
           public string Description { get; set; }
   
           [JsonProperty("html_url")]
           public Uri GitHubHomeUrl { get; set; }
   
           [JsonProperty("homepage")]
           public Uri Homepage { get; set; }
   
           [JsonProperty("watchers")]
           public int Watchers { get; set; }
       }
   }
   

   このコードによって、Web サービスから取得した JSON データをモデル化するために使用される Repository クラスが定義されます。 各プロパティは、JSON フィールド名を含む JsonProperty 属性で装飾されます。 Newtonsoft.Json は、JSON データをモデル オブジェクトに逆シリアル化するときに、この JSON フィールド名と CLR プロパティとのマッピングを使用します。

   Note

   上記のクラス定義は単純化されており、Web サービスから取得した JSON データを完全にはモデル化していません。

3. Solution Pad の [WebServiceTutorial] プロジェクトで、RestService という名前の新しいクラスをプロジェクトに追加します。 次に、RestService.cs のテンプレート コードをすべて削除し、次のコードに置き換えます。

   using System;
   using System.Collections.Generic;
   using System.Diagnostics;
   using System.Net.Http;
   using System.Threading.Tasks;
   using Newtonsoft.Json;
   
   namespace WebServiceTutorial
   {
       public class RestService
       {
           HttpClient _client;
   
           public RestService()
           {
               _client = new HttpClient();
           }
   
           public async Task<List<Repository>> GetRepositoriesAsync(string uri)
           {
               List<Repository> repositories = null;
               try
               {
                   HttpResponseMessage response = await _client.GetAsync(uri);
                   if (response.IsSuccessStatusCode)
                   {
                       string content = await response.Content.ReadAsStringAsync();
                       repositories = JsonConvert.DeserializeObject<List<Repository>>(content);
                   }
               }
               catch (Exception ex)
               {
                   Debug.WriteLine("\tERROR {0}", ex.Message);
               }
   
               return repositories;
           }
       }
   }
   

   このコードによって、GitHub Web API から .NET リポジトリ データを取得する 1 つのメソッド GetRepositoriesAsync が定義されます。 このメソッドは HttpClient.GetAsync メソッドを使用して、uri 引数で指定された Web API に GET 要求を送信します。 その Web API は、HttpResponseMessage オブジェクトに保管されている応答を送信します。 応答には、HTTP 要求が成功したか失敗したかを示す HTTP 状態コードが含まれます。 要求が成功した場合、Web API は、HTTP 状態コード 200 (OK)、および HttpResponseMessage.Content プロパティ内の JSON 応答で応答します。 この JSON データは、JsonConvert.DeserializeObject メソッドを使用して List<Repository> オブジェクトに逆シリアル化される前に、HttpContent.ReadAsStringAsync メソッドを使用して string に読み取られます。 このメソッドは、逆シリアル化を実行するために、Repository クラスで定義されている JSON フィールド名と CLR プロパティとの間のマッピングを使用します。

4. エラーがないようにソリューションを構築してください。

1. ソリューション エクスプローラーの [WebServiceTutorial] プロジェクトで、[MainPage.xaml] をダブルクリックして開きます。 次に、 [MainPage.xaml] のテンプレート コードをすべて削除し、次のコードに置き換えます。

   <?xml version="1.0" encoding="utf-8"?>
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="WebServiceTutorial.MainPage">
       <StackLayout Margin="20,35,20,20">
           <Button Text="Get Repository Data"
                   Clicked="OnButtonClicked" />
           <CollectionView x:Name="collectionView">
               <CollectionView.ItemTemplate>
                   <DataTemplate>
                       <StackLayout>
                           <Label Text="{Binding Name}"
                                  FontSize="Medium" />
                           <Label Text="{Binding Description}"
                                  TextColor="Silver"
                                  FontSize="Small" />
                           <Label Text="{Binding GitHubHomeUrl}"
                                  TextColor="Gray"
                                  FontSize="Caption" />
                       </StackLayout>
                   </DataTemplate>
               </CollectionView.ItemTemplate>
           </CollectionView>
       </StackLayout>
   </ContentPage>
   

   このコードにより、Button と CollectionView から構成されるページのユーザー インターフェイスが宣言によって定義されます。 Button ではその Clicked イベントを、次の手順で作成される OnButtonClicked という名前のイベント ハンドラーに設定します。 CollectionView は CollectionView.ItemTemplate プロパティを DataTemplate に設定します。これにより、CollectionView の各項目の外観が定義されます。 DataTemplate の子は StackLayout です。これには、Label オブジェクトが含まれています。 Label オブジェクトではその Text プロパティが、各 Repository オブジェクトの Name、Description、GitHubHomeUrl の各プロパティにバインドされます。 データ バインディングの詳細については、「Xamarin.Forms のデータ バインディング」を参照してください。

   また、CollectionView には x:Name 属性で指定された名前があります。 これにより、分離コード ファイルは、割り当てられた名前を使用してオブジェクトにアクセスできます。

2. ソリューション エクスプローラーの [WebServiceTutorial] プロジェクトで [MainPage.xaml] を展開し、[MainPage.xaml.cs] をダブルクリックして開きます。 次に、MainPage.xaml.cs のテンプレート コードをすべて削除し、次のコードに置き換えます。

   using System;
   using System.Collections.Generic;
   using Xamarin.Forms;
   
   namespace WebServiceTutorial
   {
       public partial class MainPage : ContentPage
       {
           RestService _restService;
   
           public MainPage()
           {
               InitializeComponent();
               _restService = new RestService();
           }
   
           async void OnButtonClicked(object sender, EventArgs e)
           {
               List<Repository> repositories = await _restService.GetRepositoriesAsync(Constants.GitHubReposEndpoint);
               collectionView.ItemsSource = repositories;
           }
       }
   }
   

   OnButtonClicked メソッドは、Button がタップされたときに実行され、GitHub Web API から .NET リポジトリ データを取得するための RestService.GetRepositoriesAsync メソッドを呼び出します。 GetRepositoriesAsync メソッドでは、呼び出される Web API の URI を表す string 引数が必要です。これは、Constants.GitHubReposEndpoint フィールドによって返されます。

   要求されたデータを取得した後、CollectionView.ItemsSource プロパティが、取得したデータに設定されます。

3. Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 GitHub から .NET リポジトリ データを取得するには、Button をタップします。

   

   Visual Studio で、アプリケーションを停止します。

   Xamarin.Forms での REST ベース Web サービスの使用について詳しくは、RESTful Web サービスの使用 (ガイド) に関するページを参照してください。

1. Solution Pad の [WebServiceTutorial] プロジェクトで、[MainPage.xaml] をダブルクリックして開きます。 次に、 [MainPage.xaml] のテンプレート コードをすべて削除し、次のコードに置き換えます。

   <?xml version="1.0" encoding="utf-8"?>
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="WebServiceTutorial.MainPage">
       <StackLayout Margin="20,35,20,20">
           <Button Text="Get Repository Data"
                   Clicked="OnButtonClicked" />
           <CollectionView x:Name="collectionView">
               <CollectionView.ItemTemplate>
                   <DataTemplate>
                       <StackLayout>
                           <Label Text="{Binding Name}"
                                  FontSize="Medium" />
                           <Label Text="{Binding Description}"
                                  TextColor="Silver"
                                  FontSize="Small" />
                           <Label Text="{Binding GitHubHomeUrl}"
                                  TextColor="Gray"
                                  FontSize="Caption" />
                       </StackLayout>
                   </DataTemplate>
               </CollectionView.ItemTemplate>
           </CollectionView>
       </StackLayout>
   </ContentPage>
   

   このコードにより、Button と CollectionView から構成されるページのユーザー インターフェイスが宣言によって定義されます。 Button ではその Clicked イベントを、次の手順で作成される OnButtonClicked という名前のイベント ハンドラーに設定します。 CollectionView は CollectionView.ItemTemplate プロパティを DataTemplate に設定します。これにより、CollectionView の各項目の外観が定義されます。 DataTemplate の子は StackLayout です。これには、Label オブジェクトが含まれています。 Label オブジェクトではその Text プロパティが、各 Repository オブジェクトの Name、Description、GitHubHomeUrl の各プロパティにバインドされます。 データ バインディングの詳細については、「Xamarin.Forms のデータ バインディング」を参照してください。

   また、CollectionView には x:Name 属性で指定された名前があります。 これにより、分離コード ファイルは、割り当てられた名前を使用してオブジェクトにアクセスできます。

2. Solution Pad の [WebServiceTutorial] プロジェクトで [MainPage.xaml] を展開し、[MainPage.xaml.cs] をダブルクリックして開きます。 次に、MainPage.xaml.cs のテンプレート コードをすべて削除し、次のコードに置き換えます。

   using System;
   using System.Collections.Generic;
   using Xamarin.Forms;
   
   namespace WebServiceTutorial
   {
       public partial class MainPage : ContentPage
       {
           RestService _restService;
   
           public MainPage()
           {
               InitializeComponent();
               _restService = new RestService();
           }
   
           async void OnButtonClicked(object sender, EventArgs e)
           {
               List<Repository> repositories = await _restService.GetRepositoriesAsync(Constants.GitHubReposEndpoint);
               collectionView.ItemsSource = repositories;
           }
       }
   }
   

   OnButtonClicked メソッドは、Button がタップされたときに実行され、GitHub Web API から .NET リポジトリ データを取得するための RestService.GetRepositoriesAsync メソッドを呼び出します。 GetRepositoriesAsync メソッドでは、呼び出される Web API の URI を表す string 引数が必要です。これは、Constants.GitHubReposEndpoint フィールドによって返されます。

   要求されたデータを取得した後、CollectionView.ItemsSource プロパティが、取得したデータに設定されます。

3. Visual Studio for Mac ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 GitHub から .NET リポジトリ データを取得するには、Button をタップします。

   

   Visual Studio for Mac で、アプリケーションを停止します。

   Xamarin.Forms での REST ベース Web サービスの使用について詳しくは、RESTful Web サービスの使用 (ガイド) に関するページを参照してください。