Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJSで業務システムUI部品化

3,533 views

Published on

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

Published in: Internet
  • Be the first to comment

AngularJSで業務システムUI部品化

  1. 1. AngularJSで業務システムUI部品化 Photo by Web制作向け無料写真素材/ぱくたそ http://www.pakutaso.com JavaQne(じゃばきゅん) 2015 Fukuoka (2015/01/24)
  2. 2. -自己紹介- 株式会社キャムの江原と申します。 Excelとかプログラムとか何かイロイロしてます。 twitter : @itokami1123 企業の経営戦略に役立つサービス「CAM MACS」を AWSにて提供してます。
  3. 3. 弊社のAngularJSで作る 画面部品の事例をご紹介します
  4. 4. 今日話すこと ①導入の狙い ②AngularJSについて ③Directiveについて ④弊社のDirectiveの使い方 ⑤まとめと今後について
  5. 5. ①導入の狙い
  6. 6. 目的 - HTMLタグの記述で個人差を出さない - デザインを含むタグにしたい - JS(ブラウザ)でDOMを描画したい
  7. 7. 弊社は新システムで この目的を達成するために AngularJSのDirectiveを使っています
  8. 8. ②AngularJSについて
  9. 9. Google製の JavaScriptフレームワーク! ↑ 安心と信頼のGoogle製! (だと思いたい…無くならないでね)
  10. 10. MV*フレームワーク ModelView var data = { cd: 101, nm: "test" }; <div> {{data.cd}} {{data.nm}} </div> データバインディング 101 test JSのObjectが 自動表示されるよ
  11. 11. MV*フレームワーク ModelView <div> {{data.cd}} {{data.nm}} </div> データバインディング Modelが変わると Viewに反映するよ var data = { cd: 102, nm: "test" }; 102 test
  12. 12. ③Directiveについて
  13. 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. 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. 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. 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. 17. そこでデザインを含めたカスタムタグ!
  18. 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. 19. 出力結果 <ore-table data="list">
 <column title="番号" name="no"></column>
 <column title="名前" name="name"></column>
 </ore-table> ore-tableという名前で Dirctiveにカスタムタグを登録
  20. 20. ④弊社のDirectiveの使い方
  21. 21. 画面項目は、お客様ごとに カスタマイズできるようにマスタで定義したい! 複数のお客様の要件に柔軟に応えたい
  22. 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. 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. 24. 出力結果 <ore-grid data="vm" layout="gLayout"></ore-grid>
 <script th:inline="javascript">
 var globalLayout = /*[[${layout}]]*/ null;
 </script>
 Modelデータを指定 レイアウト定義を指定 Thymeleafで定義を埋め込み
  25. 25. ⑤まとめと今後について
  26. 26. - 品質を一定にする為
 JavaScriptでDOMを描画する際に
 カスタムタグを使用しています
 - お客様毎の要望に応える為
 レイアウト情報でテンプレートを生成してます
 - 弊社でAngularJSで大きく依存しているのは
 カスタムタグ(Directive)のみ
 - AngularJSに依存しない構成も検討しています
 (→バージョンアップでなく乗り換え) ⑤まとめと今後について
  27. 27. サンプルソースは↓にあります https://github.com/itokami1123dev/ng-example-2015-01-24 ご指摘などありましたら教えてください m(_ _)m ご清聴ありがとうございました

×