2015/01/24 13:00 JavaQne(じゃばきゅん) 2015 Fukuoka

1. AngularJSで業務システムUI部品化
Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com
JavaQne(じゃばきゅん) 2015 Fukuoka (2015/01/24)

2. -自己紹介-
株式会社キャムの江原と申します。
Excelとかプログラムとか何かイロイロしてます。
twitter : @itokami1123
企業の経営戦略に役立つサービス「CAM MACS」を
AWSにて提供してます。

3. 弊社のAngularJSで作る
画面部品の事例をご紹介します

4. 今日話すこと
①導入の狙い
②AngularJSについて
③Directiveについて
④弊社のDirectiveの使い方
⑤まとめと今後について

5. ①導入の狙い

6. 目的
- HTMLタグの記述で個人差を出さない
- デザインを含むタグにしたい
- JS(ブラウザ)でDOMを描画したい

7. 弊社は新システムで
この目的を達成するために
AngularJSのDirectiveを使っています

8. ②AngularJSについて

9. Google製の
JavaScriptフレームワーク！
↑
安心と信頼のGoogle製！
(だと思いたい…無くならないでね)

10. MV*フレームワーク
ModelView
var data = {
cd: 101,
nm: "test"
};
<div>
{{data.cd}}
{{data.nm}}
</div>
データバインディング
101 test
JSのObjectが
自動表示されるよ

11. MV*フレームワーク
ModelView
<div>
{{data.cd}}
{{data.nm}}
</div>
データバインディング
Modelが変わると
Viewに反映するよ
var data = {
cd: 102,
nm: "test"
};
102 test

12. ③Directiveについて

13. DirectiveはHTMLを拡張する機能です
<table class="table table-striped">
<thead>
<tr>
<th>番号</th>
<th>名前</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in list">
<td>{{item.no}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
ng-repeatは配列を繰り返す標準Directive

14. HTMLの要素や属性に機能を追加できます
<table class="table table-striped">
<thead>
<tr>
<th>番号</th>
<th>名前</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in list">
<td>{{item.no}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
ng-repeatは配列を繰り返す標準Directive
var list = [
{no: 1, name: "nobi"},
{no: 2, name: "zyai"},
{no: 3, name: "sune"}
];
<tr ng-repeat="item in list">

15. <table class="table table-striped">
<thead>
<tr>
<th class="ore-no-style" >番号</th>
<th>名前</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in list">
<td>{{item.no}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
でも標準のDirectiveだけでは
デザインを統一するのが難しいです
(
ふふふ、こっそりと
個別ﾃﾞｻﾞｲﾝにしちゃおう

16. <table class="table table-striped">
<thead>
<tr>
<th class="ore-no-style" >番号</th>
<th>名前</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in list">
<td>{{item.no}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
でも標準のDirective
デザインを統一するのが難しいです
(
ふふふ、こっそりと
個別ﾃﾞｻﾞｲﾝにしちゃおう

17. そこでデザインを含めたカスタムタグ！

18. 例えばこんな感じで作成できます。
<ore-table data="list">
<column title="番号" name="no"></column>
<column title="名前" name="name"></column>
</ore-table>
ore-tableという名前で Dirctiveにカスタムタグを登録
var list = [
{no: 1, name: "nobi"},
{no: 2, name: "zyai"},
{no: 3, name: "sune"}
];
var m = angular.module("directives");
m.directive("oreTable",
["$compile", function ($compile) {
return {
restrict: "E",

19. 出力結果
<ore-table data="list">
<column title="番号" name="no"></column>
<column title="名前" name="name"></column>
</ore-table>
ore-tableという名前で Dirctiveにカスタムタグを登録

20. ④弊社のDirectiveの使い方

21. 画面項目は、お客様ごとに
カスタマイズできるようにマスタで定義したい！
複数のお客様の要件に柔軟に応えたい

22. 現在の形
<ore-grid data="vm" layout="gLayout"></ore-grid>
<script th:inline="javascript">
var globalLayout = /*[[${layout}]]*/ null;
</script>
Modelデータを指定 レイアウト定義を指定
Thymeleafで定義を埋め込み
var model = {
list: [
{no: 1, name: "nobi"},
{no: 2, name: "zyai"},
{no: 3, name: "sune"}
]
};

23. <ore-grid data="vm" layout="gLayout"></ore-grid>
<script th:inline="javascript">
var globalLayout = /*[[${layout}]]*/ null;
</script>
var globalLayout = {
'gLayout':{
'modelId':'list',
'row':{
'columns':[
{'align':'right','name':'no','title':'u756Au53F7'},
{'align':'left','name':'name','title':'u540Du524D'}
]
}
}
};
Thymeleafで定義を埋め込み
サーバ側でレイアウト情報を生成します

24. 出力結果
<ore-grid data="vm" layout="gLayout"></ore-grid>
<script th:inline="javascript">
var globalLayout = /*[[${layout}]]*/ null;
</script>
Modelデータを指定 レイアウト定義を指定
Thymeleafで定義を埋め込み

25. ⑤まとめと今後について

26. - 品質を一定にする為
JavaScriptでDOMを描画する際に
カスタムタグを使用しています
- お客様毎の要望に応える為
レイアウト情報でテンプレートを生成してます
- 弊社でAngularJSで大きく依存しているのは
カスタムタグ(Directive)のみ
- AngularJSに依存しない構成も検討しています
(→ﾊﾞｰｼﾞｮﾝｱｯﾌﾟでなく乗り換え)
⑤まとめと今後について

27. サンプルソースは↓にあります
https://github.com/itokami1123dev/ng-example-2015-01-24
ご指摘などありましたら教えてください m(_ _)m
ご清聴ありがとうございました