これは管理画面 Advent Calendar 2014の23日目の記事です。
昨日はIMAIMIAMIさんの本当は怖い管理画面のUXというお話でした。
このAdvent Calendarでは、なかなか社外には出しづらい管理画面系のネタをみなさん惜しまず投下してくれてるので、私以外の記事もざっと見てみると面白いと思います。
さて、私は表題の通り「 管理画面を作るのにAngularJSはえらく相性が良いよ 」ということを簡単に紹介できればと。
□■□ 重要 □■□
という話を語ろうと思っていましたが、先日のこの記事のように来年半ば以降の新規プロジェクトでAngularJSを採用するのはちょっとオススメできないかも知れません。。
2015年末〜2016年頭にAngularJS2.0がリリース予定で、それのリリース後1年半〜2年にAngularJS1.3のサポートが無くなることを鑑みると、 せっかく開発した管理画面がほんの2年ちょいしか使えない ことに。。
気を取り直して、、
まぁ2年もサポートがあれば充分だよという方もいるかも知れませんので、以下、私がなぜ管理画面とAngularJSが相性が良いと考えているのかを解説していきます。
ngRepeat
私は仕事で何件かAngularJSで管理画面を作成しておりますが、一番最初に使おうと思ったきっかけは、このngRepeatでした。
これは、テンプレート内でループ処理を行ってくれる機能で、管理画面にありがちな「 複数のレコードを一覧表示する 」ことを簡単に実装できます。
例えばこのようなJSONデータあったとして。
[
{
"pub":"集英社",
"date":"2014/8/20",
"ser":"ヤングジャンプコミックス",
"ttl":"嘘喰い(34)",
"auth":"迫 稔雄",
"isbn":"9784088798868"
},
...
]
このJSONに対して
<table>
<tr ng-repeat="item in list">
<td>{{item.title}}</td>
<td>{{item.date|date}}</td>
<td>{{item.ser}}</td>
<td>{{item.ttl}}</td>
<td>{{item.auth}}</td>
<td><a ng-href="http://hoge.com/{{item.isbn}}">リンク</a></td>
</tr>
</table>
のようにHTMLを記述することで、配列のlength分だけDOMを生成してくれます。
さらに、この表示したレコードに対して、 フィルタリング や ソート を行う機能も標準で備わっており、必要なレコードを読み込んでいさえすれば サーバとの通信なしでストレスレスにユーザが必要な情報を探し出す ことが可能です。
こちらのサンプルをどうぞ。
試しにタイトルや著者にテキストを打ち込むと、マッチするレコードだけが表示されるようになることがわかると思います。
また、こういったフィルターは自作することもでき、ここでは発売日の範囲によってフィルタリングするフィルターを自作しております。
ちょっと工夫すればページングを行うことも可能です。
ここではtableタグに対してループを行っていますが、リスト要素やその他ほとんどの要素でこのngRepeatは利用することができ、かなり汎用性が高い機能となっております。
通信とルーティング
さて、ではこのデータの基となるJSONはどこから引っ張ってくるのかというと、XMLHttpRequestを利用するための$http関数が用意されており、こちらは下記のような形で実装が可能です。
$http({
method: 'GET',
url: 'http://hoge.com/api'
}).success(function(res){
console.log(res)
// 返ってきたデータをこねこねする
}).error(function(res){
console.log(res)
});
どっかに置いている静的なJSONデータを引っ張ってくるなり、このようにAPIを叩いて返ってきたデータを使える形に整形してあげれば良いって寸法です。
また、この通信の機能も含め、AngularJSにはSPA(Single Page Application)を簡単に実現するための機能が備わっています。
ルーティングも、
var routeConfig = [
'$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
controller: 'hogeCtrl',
templateUrl: 'modules/hoge/hogePanel.html'
})
.when('/fuga/:id', {
controller: 'fugaCtrl',
templateUrl: 'modules/fuga/fugaPanel.html'
})
.otherwise {
redirectTo: '/'
}
}
];
angular
.module('app', ['ngRoute'])
.config(routeConfig)
このように与えられたURLのハッシュによって、どのコントローラーでどのテンプレートを使うのかを簡単に設定可能です。
まとめ
ということで、AngularJSでフロントエンドを作ってしまえば、バックエンドはDBからデータをこねこねしてJSONで返す、というAPIだけに注力できます。(もちろんDBに保存するためのAPIも必要ですが)
しかしそれ以上に、ngRepeatのところで説明したフィルターを用いた検索やページの読み込み無しでのページ遷移など、 ユーザができるだけストレス無く、より効率的に作業することができる管理画面 をAngularJSを用いると簡単(※)に提供できるの一番の強みだと考えています。
私は、クライアントに「 現在、管理画面での作業に費やしている時間がUIの改善によって半分になるなら、それは人件費が半分になることと同じだし、なによりその余剰時間をエンドユーザのために何ができるかを考える時間に費やすことができるようになる」というお話をよくしています。
プロダクトやサービスの開発過程で軽視されがちな管理画面ですが、AngularJSの採用に限らずとも「技術的にいかに作業を効率化できる管理画面を開発できるか」をみなさんと一緒に考えていければ幸いです。
※簡単に、というほど学習コストが低くないのはまた別の問題がありますがね……
おまけ
こうやって祝日に律儀にAdvent Calendarに投稿していますが、本日は地味に私の誕生日だったりします。
ということで → Amazonウィッシュリスト
AngularJS Advent Calendarに私が本日投稿した記事、スコープの継承で地味にハマりがちなことも良かったら読んであげてくださいー。
おまけのおまけ。うちの猫 Advent Calendar 2014にも投稿してます。