アニメイトラボ開発者ブログ

株式会社アニメイトラボの開発者ブログです


アニメイトラボ開発者ブログ

developer.animatelab.com


jsonを使うと社内向けの業務アプリ開発が捗る

この記事はanimateLAB Advent Calendar 2015 10日目の記事です。

こんにちは、sugicyanです。
今回は、Windows Presentation Foundation (WPF)を使って社内向け業務用アプリを作っていたときの話をしようと思います。

業務用アプリを作っているとパラメータを動的に変えたいと思うことはありませんか?
そんなとき、私は好んでJavaScript Object Notation(json)を使いっています。
ですが、プログラムで入力部分を書くのは意外と大変です。
そこで、jsonを簡単に使ってみます。

始める前に、簡単にWPFの説明を。
WPF.NET FrameworkGUI(グラフィカル・ユーザ・インタフェース)開発ライブラリと言われています。
その名の通り、Windowsアプリを作る際に用いられます。
ちなみにWindowsアプリを作る方法としては、主に

  • WindowsFormアプリ
  • WPF

ですね。
どちらでもWindowsアプリを作ることは可能なのですが、高解像度なディスプレイが増えてきているので個人的にはWPFで作る方が無難だと思っています。

サンプルを作る

まずは、簡単なjsonを用意します。
次に作成したjsonを手間を書けずに読み込んで表示したいと思います。

{
    "books" : [
        {"title" : "やはり俺の青春ラブコメはまちがっている。", "author" : "渡航"},
        {"title" : "俺の妹がこんなに可愛いわけがない", "author" : "伏見つかさ"},
        {"title" : "ロウきゅーぶ!", "author" : "蒼山サグ"}
    ]
}

6つのステップで作ってみた

Visual Studio』を使ってjsonを読み込む部分を作っていきます。

  1. jsonの読み込む為に、NuGet*1を使ってパッケージのインストール プロジェクトの参照を右クリックしてNuGetパッケージの管理を開く f:id:sugicyan:20151207205553p:plain

  2. パッケージのインストール 検索用テキストボックス(赤枠)に json と入力してNewtonsoft.Json をインストール f:id:sugicyan:20151207210046p:plain

  3. クラス BookInfo を作りそこにjsonを読み込むためのクラスを作る。 下の画像の様に形式を指定して貼り付けのJSONを選択すると数回のクリックでクラスを作ること可能 f:id:sugicyan:20151207211122p:plain これで、jsonを読み込むためのクラスが自動で生成されました。 f:id:sugicyan:20151208003854p:plain 今回の例ですと、それほど大きなjsonではない為便利な感じがしませんが、複雑な構造のjsonでも同様の操作で作成できるためとても便利になります。

  4. ファイル読み込み部分の作成 あとはjsonファイル読み込み部分を作る

読み込み部分

ObservableCollection<Book> BookInfos;
var filename = @"Books.json";
using (var stream = new FileStream(filename, FileMode.Open))
using (var file = new StreamReader(stream))
{
    var root = JsonConvert.DeserializeObject<Rootobject>(file.ReadToEnd());
    BookInfos = new ObservableCollection<Book>(root.books);
}

ビュー

<ListView ItemsSource="{Binding BookInfos}"
      VirtualizingPanel.VirtualizationMode="Recycling">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="タイトル" DisplayMemberBinding="{Binding title}" />
            <GridViewColumn Header="作者" DisplayMemberBinding="{Binding author}" />
        </GridView>
    </ListView.View>
</ListView>

実行した結果がこちら。
きちんと読み込めています。 f:id:sugicyan:20151208003703p:plain

今回は、json読み込み部分を簡単に作れることをご紹介しました。
ビュー部分の説明などは省いています。 『Visual Studio』をは素晴らしいなと思います。

社内向けの業務系アプリケーションを開発する際に、『json』を使ってみるのはいかがでしょうか。

*1:オープンソースのパッケージマネージャ