みさなんこんにちは、書くことがなくて困っている山本です。

あまりにもネタが無いため、最近仕事でやったことを記事にして茶を濁そうかと思っています。

最近やったことですが、JSONデータで一覧ページを作ってみました。
技術的には全く難しくもないのですが、そういうこともあるということで。

仕様

  • JSONで一覧表示を管理する。
  • 詳細はJSONでは行わない。
  • タグ付けを行い、それにより絞り込みを行う。

取得

まずはじめに、JSONをhtmlより読み込みます。

読み込み用の簡単なJSONファイルを作成します。

sample.json
[
  {
    "name"  : "あいうえお",
    "tag"   : "tag001",
    "image" : "http://placehold.jp/ff0000/ffffff/150x150.png"
  },
  {
    "name":"かきくけこ",
    "tag": ["tag001","tag002"],
    "image" : "http://placehold.jp/00ff00/ffffff/150x150.png"
  },
  {
    "name":"さしすせそ",
    "tag": ["tag001","tag003"],
    "image" : "http://placehold.jp/0000ff/ffffff/150x150.png"
  }
]

そして、読み込むhtmlを作成ます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
  $.getJSON('sample.json' , function(data) {
    console.log(data);
  });
});
</script>
</head>
<body>
</body>
</html>

まずはコンソール出力しただけですが取得は出来ました。

一覧表示

次に一覧表示を行います。

表示方法ですが、勿論JSONデータを元に一覧を生成するのですが生成方法は色々あります。

強引な方法でも出来るのですが、出来るだけ見通しの良い方法が望ましいのでテンプレートエンジンを使用します。

以前は、jqueryでのテンプレートはjquery templateだったのですが、もうサポートが終わっているらしいので、今回はjsRenderを使用します。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.90/jsrender.js"></script>
<script id="list_tpl" type="text/x-jsrender">
<div class="test">
  <p>Name: {{:name}}</p>
  <p><img src="{{:image}}"></p>
  <p>{{:tag}}</p>
</div>
</script>
<script>
$(function(){
  $.getJSON('sample.json' , function(data) {
    $('body').append($('#list_tpl').render(data));
  });
});
</script>

手早く読み込んで、出力します。

並べ替え

サンプルでは件数が少ないので問題ないですが、多くなってきた場合手動でソートを行うのが大変でしょうから、ソート機能を設けます。

ソートが分かりやすいようにjsonのデータも増やしておきます。

[
  {
    "name"  : "あいうえお",
    "tag"   : "tag001",
    "image" : "http://placehold.jp/ff0000/ffffff/150x150.png"
  },
  {
    "name":"なにぬねの",
    "tag": ["tag003","tag002"],
    "image" : "http://placehold.jp/00ffff/ffffff/150x150.png"
  },
  {
    "name":"たちつてと",
    "tag": "tag002",
    "image" : "http://placehold.jp/ffff00/ffffff/150x150.png"
  },
  {
    "name":"かきくけこ",
    "tag": ["tag001","tag002"],
    "image" : "http://placehold.jp/00ff00/ffffff/150x150.png"
  },
  {
    "name":"さしすせそ",
    "tag": ["tag001","tag003"],
    "image" : "http://placehold.jp/0000ff/ffffff/150x150.png"
  }
]

ソート機能を新たに実装することも出来ますが、ここはunderscoreを使用します。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script>
$(function(){
  $.getJSON('sample.json' , function(data) {
    data = _.sortBy(data, 'name');
    $('body').append($('#list_tpl').render(data));
  });
});
</script>

underscoreのおかげで、簡単に作ることが出来ました。

絞り込み

最後にタグで絞り込みを行います。

これもまた、underscoreのwhereを用いて行おうかと思っていたのですが
よくよく考えるとtagは単数であったり、複数であったりしますのでデータそれぞれで混在しているような
正規化されていないデータではそれが出来ません。

ですので、少々残念ですが強引にごまかしましょう。

「tag002」のみで抽出してみます。

本来であればパラメータとしてタグ名を受け取れるようするのが当然ではありますが、今回は端折って固定で指定します。

<script>
$(function(){
  $.getJSON('sample.json' , function(data) {
    data = _.sortBy(data, 'name');
    data = _.filter(data, function(row){
      return _.contains(row.tag, 'tag002');
    });
    $('body').append($('#list_tpl').render(data));
  });
});
</script>

少々不格好ですが無事絞り込みが出来ました。

数千件ともなれば重いとは思いますが、100件未満ぐらいでしたらこれでも十分機能するのではと思います。

まとめ

特に難しいこともなく、実際1時間もかからずに作成出来るようなとても簡単な内容でした。

とはいえ、利点が無いわけでもありません。

予算感的に、あるいは規模的にCMSを導入するほどでもない場合、でも情報はそれなりに一元管理をしたい場合。

DBを立てると、それを管理するシステムが必要となりますが、今回のこれはJSONファイルがそれを代用しますので管理システム等が不要となります。

JSONも可読性が高いものでもありませんが、パーサー、エディタ等、閲覧編集するツールは多々ありますのでそれらを利用することで不便さも解消出来るかと思います。

かなり、限定的な条件下ではありますが困った時の選択肢の一つぐらいにはなるのではと思います。