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

[アーティクル]
Developer (初級)
完了まで 14 分

このチュートリアルを試行する前に、以下を正常に完了しておく必要があります。

初めての Xamarin.Forms アプリのビルドに関するクイックスタート。
StackLayout のチュートリアル。
Label のチュートリアル。
Button のチュートリアル。
CollectionView のチュートリアル。

このチュートリアルでは、以下の内容を学習します。

NuGet パッケージマネージャーを使用して、Newtonsoft.Json を Xamarin.Forms プロジェクトに追加する。
Web サービスクラスを作成する。
Web サービスクラスを使用する。

GitHub Web API から .NET リポジトリデータを取得する方法を示す簡単なアプリケーションを作成するには、Visual Studio 2019 または Visual Studio for Mac を使用します。取得したデータは、CollectionView に表示されます。次のスクリーンショットは、最終的なアプリケーションです。

Newtonsoft.Json を追加する

残り 13 分

Visual Studio
Visual Studio for Mac

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

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

重要

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

作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイックスタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。
ソリューションエクスプローラーで、[WebServiceTutorial] プロジェクトを選択し、右クリックして [NuGet パッケージの管理...] を選びます。
NuGet パッケージマネージャーで、[参照] タブを選択し、Newtonsoft.Json NuGet パッケージを検索して選択し、[インストール] ボタンをクリックしてプロジェクトに追加します。

このパッケージは、JSON のシリアル化解除をアプリケーションに組み込むために使用されます。
エラーがないようにソリューションを構築してください。

Web サービスクラスを作成する

残り 11 分

REST 要求は、Web ブラウザーがページの取得やサーバーへのデータ送信に使用するのと同じ HTTP 動詞を使用して HTTP 経由で行われます。この演習では、GET 動詞を使用して GitHub Web API から .NET リポジトリデータを取得するクラスを作成します。

Visual Studio
Visual Studio for Mac

ソリューションエクスプローラーの [WebServiceTutorial] プロジェクトで、Constants という名前の新しいクラスをプロジェクトに追加します。次に、Constants.cs のテンプレートコードをすべて削除し、次のコードに置き換えます。
```
namespace WebServiceTutorial
{
    public static class Constants
    {
        public const string GitHubReposEndpoint = "https://api.github.com/orgs/dotnet/repos";
    }
}
```
このコードによって、1 つの定数 (Web 要求の対象となるエンドポイント) が定義されます。
ソリューションエクスプローラーの [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 データを完全にはモデル化していません。
ソリューションエクスプローラーの [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 応答を受け入れる必要があります。
エラーがないようにソリューションを構築してください。

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 要求の対象となるエンドポイント) が定義されます。
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 データを完全にはモデル化していません。
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 プロパティとの間のマッピングを使用します。
エラーがないようにソリューションを構築してください。

Web サービスクラスを使用する

残り 5 分

この演習では、RestService クラスを使用し、GitHub Web API から .NET リポジトリデータを取得するためのユーザーインターフェイスを作成します。取得したデータは、CollectionView によって表示されます。

Visual Studio
Visual Studio for Mac

ソリューションエクスプローラーの [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 属性で指定された名前があります。これにより、分離コードファイルは、割り当てられた名前を使用してオブジェクトにアクセスできます。
ソリューションエクスプローラーの [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 プロパティが、取得したデータに設定されます。
Visual Studio ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 GitHub から .NET リポジトリデータを取得するには、Button をタップします。

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

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

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 属性で指定された名前があります。これにより、分離コードファイルは、割り当てられた名前を使用してオブジェクトにアクセスできます。
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 プロパティが、取得したデータに設定されます。
Visual Studio for Mac ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 GitHub から .NET リポジトリデータを取得するには、Button をタップします。

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

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

おめでとうございます。

100% 完了しました

これでこのチュートリアルは完了です。ここでは以下の方法を学習しました。

NuGet パッケージマネージャーを使用して、Newtonsoft.Json を Xamarin.Forms プロジェクトに追加する。
Web サービスクラスを作成する。
Web サービスクラスを使用する。

次の手順

このチュートリアルシリーズでは、Xamarin.Forms でのモバイルアプリケーションの作成の基本について説明しました。 Xamarin.Forms 開発についてさらに学習する場合は、以下の機能を確認してください。

Xamarin.Forms アプリケーションのユーザーインターフェイスを作成するために、主に 4 つのコントロールグループが使用されます。詳細については、「Controls Reference」 (コントロールのリファレンス) を参照してください。
データバインディングは、2 つのオブジェクトのプロパティをリンクして、片方のプロパティでの変更が自動的にもう片方のプロパティに反映されるようにする手法です。詳細については、データバインディングに関するページを参照してください。
Xamarin.Forms には、使用されるページの種類に応じて、複数のページナビゲーションエクスペリエンスが用意されています。詳細については、「ナビゲーション」を参照してください。
スタイルは、繰り返されるマークアップを減らすのに役立ち、アプリケーションの外観をより簡単に変更できるようにします。詳細については、「Xamarin.Forms アプリのスタイル設定」を参照してください。
XAML マークアップ拡張では、要素属性をリテラルテキスト文字列ではなく、ソースから設定できるようにすることで、XAML をより強力かつ柔軟なものにします。詳細については、「XAML Markup Extensions」 (XAML マークアップ拡張) を参照してください。
データテンプレートでは、サポートされているビューでのデータの表現方法を定義する機能が提供されます。詳細については、「Data Templates」 (データテンプレート) を参照してください。
各ページ、レイアウト、およびビューは Renderer クラスを使用して、プラットフォームごとに異なる方法でレンダリングされます。その後、ネイティブコントロールが作成され、画面に配置され、共有コードで指定された動作が追加されます。開発者は独自の Renderer クラスを実装して、コントロールの外観や動作をカスタマイズできます。詳細については、「Custom Renderers」 (カスタムレンダラー) を参照してください。
エフェクトでは、各プラットフォームのネイティブコントロールのカスタマイズを可能にします。エフェクトは、プラットフォーム固有のプロジェクトで PlatformEffect クラスをサブクラス化することによって作成され、適切な Xamarin.Forms コントロールに添付することによって使用されます。詳細については、「Effects」 (エフェクト) を参照してください。
共有コードはネイティブ機能に DependencyService クラスを介してアクセスできます。詳細については、「Accessing Native Features with DependencyService」 (DependencyService を使用したネイティブ機能へのアクセス) を参照してください。

または、「Xamarin.Forms でモバイルアプリを作成する」 (Charles Petzold 著) でも Xamarin.Forms の詳細を学習できます。この書籍は、PDF またはさまざまな形式の電子ブックとして入手可能です。

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

Newtonsoft.Json を追加する

Web サービス クラスを作成する

Web サービス クラスを使用する

おめでとうございます。

次の手順

関連リンク

Web サービスクラスを作成する

Web サービスクラスを使用する