rksoftware

Visual Studio とか C# とかが好きです

Json は怖くない! Json と仲良くなろう

皆さんは .json という拡張子をご存知でしょうか?
現代の IT ではデータや設定ファイル等とにかくあらゆる場面で利用される非常にメジャーなファイル形式です。
そんな json 形式のデータですが、エンタープライズ分野で活躍しているシステムエンジニアの方などは意外と触れる機会がなかったりするのではないかと思います。
そこで今回、簡単に json 形式でクライアント-サーバー間の通信を行うサンプルを書いてみました。
これを機に是非 json と仲良くなってください。 json は友達! 怖くない!

環境

Windows で ASP.NET MVC Web Api プロジェクトをサーバーに WPF プロジェクトをクライアントにします。言語は C# です。

プロジェクトの作成

ソリューションを一つ新規作成し、

  • ASP.NET MVC Web Api プロジェクト
  • WPF プロジェクト
  • 共有モデル プロジェクト

の 3 プロジェクトを作成してください。プロジェクト構成の完成イメージは次のようになります。

共有モデル

共有モデルのプロジェクトに通信するデータとなるモデルクラスを作成します。
このモデルクラスのオブジェクトをシリアライズし json 形式の string にしたデータでクライアント-サーバー間でデータをやりとりします。

namespace JsonModel
{
    public class JsonModel
    {
        public string Keyword { get; set; }
        public string Message { get; set; }
    }
}

サーバー API

ASP.NET MVC Web Api プロジェクトに Api コントローラーを一つ作成します。
これが json 形式のデータを受け取り加工して返却するサーバー API です。

using System.Web.Http;

namespace JsonServer.Controllers
{
    public class JsonController : ApiController
    {
        public object Post(JsonModel.JsonModel model)
        {
            if (model?.Keyword?.StartsWith("風が語り掛けます") == true)
                return new JsonModel.JsonModel { Keyword=model.Keyword, Message ="うまい うますぎる" };
            return new JsonModel.JsonModel { Keyword = model.Keyword, Message = "は?" };
        }
    }
}

今回は、「風が語り掛けます」というキーワードが送られてきたら「うまい うますぎる」というメッセージを返却する API にしてみました。

クライアント UI

クライアントの UI はプロジェクト新規作成時にテンプレートで生まれる画面を変更して使います。
画面にテキストボックスとボタンを一つづつ置きます。

<Window x:Class="JsonClient.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:JsonClient"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="300">
    <Grid>
        <StackPanel VerticalAlignment="Center">
            <TextBox x:Name="textBox" TextWrapping="Wrap" Text="Keyword"/>
            <Button Content="Button" Width="75" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Window>

コードビハインドでボタン押下時の処理をします。ここが今回のメインとなる部分です。

using Newtonsoft.Json;
using System.Net.Http;
using System.Text;
using System.Windows;

namespace JsonClient
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private async void Button_Click(object sender, RoutedEventArgs e)
        {
            var param = new JsonModel.JsonModel { Keyword = textBox.Text };
            var paramJson = JsonConvert.SerializeObject(param);
            var content = new StringContent(paramJson, Encoding.UTF8, "application/json");
            var client = new HttpClient();
            var response = await client.PostAsync("http://localhost:XXXXX/api/Json/", content);
            var resultJson = await response.Content.ReadAsStringAsync();
            var result = JsonConvert.DeserializeObject<JsonModel.JsonModel>(resultJson);
            MessageBox.Show(result?.Message);
        }
    }
}

※ XXXXX の部分は各自の環境に合わせてください。
※クライアントプロジェクトでは NuGet から Newtonsoft.Json パッケージをインストールしておいてください。

  1. 画面のテキストボックスに入力されたキーワードをモデルに詰めて json 形式にシリアライズしています。
  2. サーバーに 1. の json を送信しています。
  3. サーバーから json を受信しています。
  4. json をデシリアライズしモデルに復元しています。
  5. サーバーから返却されたメッセージを表示しています。

実行結果

風が語り掛けます」というキーワードの場合に「うまい うますぎる」というメッセージが表示されます。

・デバッグして変数の値をチェックすると、送信しているパラメータと受信している結果が確かに json となっています。
f:id:rksoftware:20180608020614j:plain
f:id:rksoftware:20180608020627j:plain

まとめ

json は全く怖くない非常に簡単に扱える有益な形式です。 これを機に是非 json と仲良くなってくださる方が少しでも現れていただければ幸いです。