戯言

つらつらと気づいたことを書いていきます。人狼とか。

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

るる鯖 JSONデータの使い方


配信しているJSON形式の村一覧の使用例です。
今、自分の中で流行っている AngularJSというGoogleが提供しているライブラリを使用しています。

とりあえず、次のような感じで、単純に村番号と村一覧を表示させるソースです。

<< 表示例 >>
・No.200000 「初心者歓迎17A」村
・No.200001 「どなたでもどうぞ、やるぞ12B」村

<< HTML >>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.angularjs.org/1.2.15/angular.min.js"></script>
<script type="text/javascript">
function WerewolfCtrl($scope, $http){
	$http.get('http://werewolf.ddo.jp/resource/vinfo/en.json').success(function(data){
		$scope.villages = data;
	});
}
</script>
</head>

<body ng-controller="WerewolfCtrl">
<ul>
<li ng-repeat="v in villages">No.{{v.no}} 「{{v.name}}」村 </li>
</ul>
</body>
</html>
ソースはこれだけです。このソースだけで村の一覧が表示されます。
body句はたったの3行しかありません。
便利です、AngularJS。


データを表示しているのは15~17行目です。HTMLのulタグ、liタグで箇条書きを表示しているだけです。これだけです。
{{}}で囲まれた見慣れない表記がありますが、この部分で動的な値を表示しています。
v.noが村番号で、v.nameが村名ですね。また、liタグに、ng-repeatという属性を設定していますが、repeatって名前が付くくらいなので、繰り返しをしているのでしょう。liタグを繰り返して、表示しているんですね。

これだけ見て、なんとなく簡単に使えそうだと感じませんか? angularJSって。



次に、村情報を取得してくる部分を見てみましょう。6~10行目です。
村情報のJSONデータ(en.json)をhttpで取得してきて、$scope.villagesという変数に入れています。
さっきの表示部分で、ng-repeat属性の中でvillagesという変数を使っていましたよね。そうです、ここで取得したデータを、先ほどの表示のところで使っていたのです。
ここの取得部分も、ソースを見てもらえれば、なんとなく感じをつかんでもらえると思います。



この他にも、ng-app や ng-controller など、今回はあえて触れていないキーワードもソース内には出てきますが、とりあえず最初は、おまじないと思ってもらって、このまま書いてみてください。



ここで紹介したのと同じソースを、http://werewolf.ddo.jp/angular.htmlに、設置してます。



ちょっと改良すれば、こうなります。

<< 表示例 >>
・No.200002 【GM制】【17A】「今日も頑張る17A」村 ~~初めての方もどうぞ!!~~

<< HTML >>
<li ng-repeat="v in villages | filter:{scene:'0'}">No.{{v.no}} 【{{v.rule_gm?'GM制':'仮GM'}}】【{{v.capacity}}{{v.cast}}】「{{v.name}}」村 ~~{{v.pr}}~~ </li>
事件前日の村のみを表示し、GM制であるか、配役と人数などを加えています。
ちょっとプログラムをかじったことがある人であれば、なんとなくわかると思います。

「| filter:{scene:'0'}」の部分が、事件前日の村のみに絞り込んでいる部分です。AngularJSでは、絞り込みもこのように簡単にできます。これを使って身内村以外を表示することも簡単にできます。{{でなく{となっていたり、v.sceneでなくsceneになってたりと、ちょっと今までとは表記が違いますが、これで合っています。この辺りはangularJSを知ってる人でも、普段の書き方とは違うかもしれません。気になる方は、AngularJSを解説しているサイトなどで調べてみてください。

IE8以上でないときちんと表示されなかったり(さらに次バージョンのAngularJSではIE9以上が必須になります)、日本ではjquery等に比べればまだまだ利用者は少ないので日本語ドキュメントが少なかったりと、デメリットもありますが、ちょこっとソースを作るには非常に便利ですよ。

この村情報のJSONデータを使ってページを作られた方は、教えてくださいね。ニヤニヤしながら見に行きますし、ブログで紹介等させてもらえればと思います。





関連記事
10:

なるほど。わからん。
アップデートしてくれてありがとうございます。

2014.04.01 19:02 kari #9GWVC0v. URL[EDIT]

管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。