戯言

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

スポンサーサイト


上記の広告は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データを使ってページを作られた方は、教えてくださいね。ニヤニヤしながら見に行きますし、ブログで紹介等させてもらえればと思います。





スポンサーサイト

AngularJSの複雑なfilterを、関数で実現する


AngularJSを使い始めて、まず誰もが便利だなと感じるのは、ng-repeat での繰り返しと、filter を使った検索ではないでしょうか。いろいろな紹介サイトでも、記述例が見受けられます。
<input type="text" ng-model="query.$" placeholder="全項目で検索">

<table><tbody>
<tr ng-repeat="row in rows | filter:query">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.address}}</td>
<td>{{row.note}}</td>
</tr>
</tbody></table>
これだけで、rowの全ての要素(id、name、address、note)のどこかに、input text で入力された内容を含んでいるものだけが、表示されます。

row.idに含んでてもいいし、row.nameに含んでいいし、row.addressに含んでいてもよい。「長野」と入力すれば、nameの長野さんも、addressの長野県も引っかかります。



では、row.nameのみに対して絞り込みをしたい場合。こうなります。
<input type="text" ng-model="query.name" placeholder="名前で検索">
filter の対象を name のみにするために、ng-model="query.$" の部分を ng-model="query.name" に変えればよいのです。
この場合は、nameの長野さんは検索対象となるが、addressに長野県とあってもひっかかりません。



では、nameとnoteの2項目のみを検索の対象にしたいという場合は、どのようにすればよいのでしょうか?

「複雑な検索を行う場合は、directiveを使いましょう。」ってのも間違いじゃないんだけど、directiveを使わずとも、単純な検索フィルタ用の関数を利用することもできます。
<input type="text" ng-model="query" placeholder="nameとnoteを対象に検索">

<table><tbody>
<tr ng-repeat="row in rows | filter:search">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.address}}</td>
<td>{{row.note}}</td>
</tr>
</tbody></table>
// JS
$scope.search = function(line){
    // 各行をlineオブジェクトで受け、trueを返した行だけがマッチ
    if (line.name.indexOf($scope.query) != -1 ||
        line.note.indexOf($scope.query) != -1){
	    return true;
    }
    return false;
};
これで、nameとnoteのみに対して、検索をすることができます。



AngularJSを扱いはじめた当初は、今まで数十行も書いて実現していたロジックを、とてもシンプルに書くことができて、非常に便利で生産性が高いと感じますよね。でも、ちょっと複雑なことをしようとすると、躓いてしまうことがよくあります。これは、日本語の解説サイトがまだまだ充実していないことも原因でしょうね。

もっと、AngularJSが広まってほしい。
便利だよ!



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