2016年度OSS Open技術分科会】 第 回 OSS勉強会 …...bower.json...
48
２０１６年度OSS【Open技術分科会】 第3回 OSS勉強会 AngularJS（WEB）とNode.js（サーバサイド、RPG）との連携 2016年12月9日 ソリューション・ラボ・横浜 川島 光雄
Transcript of 2016年度OSS Open技術分科会】 第 回 OSS勉強会 …...bower.json...
２０１６年度OSS【Open技術分科会】第3回 OSS勉強会
AngularJS（WEB）とNode.js（サーバサイド、RPG）との連携
2016年12月9日
ソリューション・ラボ・横浜 川島 光雄
目次
分科会活紹介– メンバー
– 分科会 活動体制
– 活動目標
– 活動状況
AngularJS（WEB）とNode.js（サーバサイド、RPG）
との連携
分科会活動方針
IBM i OSを活用できる技術について
検証及び稼動確認を行うことで、技術習得を行う。
・技術習得
・他社との交流
・分科会発表
・OSS協賛勉強会（今後計画）
活動日時毎月 第二金曜日 17時～19時 で活動※場所は東京近郊skypeでの参加も現在実施中
次回分科会1月１３日（金）18時～
JBAT 川崎 ソリッドスクエア 西側20F 大会議室※Skypeからの参加も受け付けてます
興味を持たれた方は是非分科会に参加ください！連絡は幹事会までお願い致します。
メンバー紹介
SLY 川島（リーダー）
JBCC 富田（副リーダー）
JBCC 植野
JBAT 土井
JBAT 依田
JBAT 杉本
NDIソリューションズ 平野
NDIソリューションズ 齊藤
ベルコム 梶野
オム二サイエンス 田中
※敬称略
KIS 藤野
SOLPAC 後藤
ティアンドトラスト 北原
シンカーミクセル 青木
シンカーミクセル 宍戸
アイビス 濱田
SLY 高柳
SLY 金子
SLY 浅倉
登録：12社 １９名 平均10名程度の参加
分科会 活動体制
OSS幹事会
Open技術分科会
モバイルＨＴＭＬ5
環境構築GIT、BlueMix
ASモダナイズ（Node.JS）
JBAT 土井依田
JBCC 富田ベルコム 梶野
オムニサイエンス田中
分科会 リーダー：SLY 川島副リーダー：JBCC 富田
今期活動目標
【目標】モバイルとIBM i連携アプリケーションの開発
【使用スキル】・ AngularJS・Node.js・json【習得内容】Blue Mix(クラウド)とIBM i連携モバイル画面開発スキル
BlueMix（クラウド）
環境説明(ゴールイメージ)
スマホ
操作画面
開発環境
IBM i（OSS協議会）
Node.JS RPGAngularJS
AngularJS
Node.JS
jsonhttp
DB2400
開発環境クラウド環境とIBM i連携
AngularJSで
技術革新により、Flash等のアドオンソフト無しにリッチクライアントと呼ばれる操作性とパフォーマンスの良いアプリケーションを構築する事ができるようになってきた
json
HTML5
IBM i
RPG DB2400
AngularJS 特徴
AngularJS はJavaScript フレームワークのひとつです。
【特徴】・Google社とコミュニティが開発するJavaScriptフレームワーク・ライセンスはMIT License。オープンソース。商用利用可能。・今現在(2015年8月15日)の最新版は 1.4.4。・JavaScriptでクライアントサイドのMVC(Model-View-Controller)モデルを
実現します。
AngularJS 今までの開発との違い
これまでのWeb開発（Java・PHP）・サーバー側でMVCを実現
※画面一部（プルダウン情報、コード名称）をAjax等でサーバー間のやりとりを行い、書き換える事はしていた。
AngularJSは、・クライアントサイドのMVC(Model-View-Controller)モデルを実現
‐サ ーバ側はDB操作のみを処理‐クライアント側 JavaScript のコントローラでデータモデルを管理‐クライアント－サーバ間をAjaxでJSON交換‐画面(HTML/DOM)はクライアント側で生成
メリット：クライアント側で画面を生成するので、クライアント、サーバー間の通信データ量を抑えられる。
AngularJS が使用しているフレームワーク
BootstrapBootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。
レスポンシブデザインとはスマートフォン、タブレット、デスクトップなどの画面の広さに応じて、横並びを縦並びにしたり、狭い画面ではサイドバーを表示しないなどを自動的に調整し、同じデザインで異なる大きさの画面に対応するためのデザイン技術です。
AngularJS
今回作成したアプリケーションの説明
開発画面
【開発手順】クライアントにソフトウェア導入AngularJSディレクトリ作成画面開発ソース説明【デモ実演】サーバー起動URLより動作確認
開発手順 ソフトウェア導入
１．Node.js インストール
Yeoman は Node.js 上で動くので、 Node.js をインストール
①https://github.com/marcelklehr/nodist からダウンロード②C:¥tool¥nodeJS_v630_Win64¥node-v6.3.0-x64.msi を実行③node –v を実行し、インストールされたバージョンを管理
開発手順 ソフトウェア導入
２．npm バージョンアップNode向けパッケージ管理ツールnpmNode.jsをインストールすると自動で導入されます
① npm install -g npm② npm --version
開発手順 ソフトウェア導入
３．Ruby インストールひな形に含まれる SCSS をコンパイルするのに Compass が必要。Compass は Ruby で書かれたアプリなので、 Ruby をインストール
① http://rubyinstaller.org/downloads/からダウンロード② C:¥tool¥Ruby¥rubyinstaller-2.3.1-x64.exeを実行③ruby -v
開発手順 ソフトウェア導入
４．Bundler, Compass インストールBundler,：Gemパッケージの種類やバージョンの管理Compass：Sassという言語で記述したファイルをコンパイルして、
CSSファイルを生成する
①gem -v②gem install compass③compass -v④gem install bundler⑤bundler -v
開発手順 ソフトウェア導入
５．Git インストールBower を使用するのに Git が必要なので、 Git for Windows をインストール
① https://git-for-windows.github.io/からダウンロード② C:¥tool¥Git¥Git-2.9.2-64-bit.exe を実行③git --version
開発手順 クライアント開発ミドルウェア
YeomanGoogle社が作成した総合開発ツール群Yeomanを使うことでコマンドラインからの対話形式で雛形（テンプレート）を作成する事ができるため、プロジェクトに適した雛形を作ることができます。
① npm install -g yo
開発手順 クライアント開発ミドルウェア
Grunt
自動化のためのビルドツール（タスクランナー）です。Node.jsを使用し、ビルド用のスクリプト（Gruntfile.js）をJavaScriptで記述してタスクを定義します。
① npm install -g grunt-cli
開発手順 クライアント開発ミドルウェア
bowerTwitter社が作ったフロントエンド用のパッケージマネージャです。
bower.json は 作成しようとしているパッケージが他のパッケージとどのような依存関係にあるかを設定するものです。これは Node.js の package.json、 Ruby の Gemfileと似ています。
① npm install -g bower
開発手順 クライアント開発ミドルウェア
サンプルアプリケーション起動
①プロジェクトフォルダ作成C:¥project¥YeomanTest
②npmを使ってプロジェクトフォルダにangularをインストールnpm install -g generator-angular
③yo angular
④サーバー起動grunt serve
開発手順 サンプルアプリケーション導入
Angularをプロジェクトフォルダにインストール
npm install -g generator-angular
開発手順 サンプルアプリケーション導入
Angularをプロジェクトフォルダにインストール
yo angular
開発手順 サンプルアプリケーション導入
Angularをプロジェクトフォルダにインストール
yo angular
SPACEで* すべて選択に変更
開発手順 サンプルアプリケーション導入
Angularをプロジェクトフォルダにインストール
yo angular
その後上書きして良いか？と何回か聞いてきますが、すべてYで回答
開発手順 クライアント開発ミドルウェア
サンプルアプリケーション起動
grunt serve
開発手順 クライアント開発ミドルウェア
サンプルアプリケーション起動
開発手順 クライアント開発ミドルウェア
サンプルアプリケーション停止
Ctl cを実行
クライアント
開発手順 デモ環境説明
操作画面
IBM i（OSS協議会）
Node.JS（ osssample.js ）
ANGULARJS（顧客一覧）
jsonhttp
顧客照会DB2400
開発手順 サンプルアプリケーション導入
アプリケーション実行
①プロジェクトフォルダ作成C:¥project¥OSS_IBMi
②配布コンテンツを上記フォルダにセット③npm install④bower install ⑤grunt serveでWebアプリ起動
Gruntfile.jsアプリケーションに導入するパッケージを指定
開発手順 サンプルアプリケーション導入
提供アプリケーション
開発手順 サンプルアプリケーション導入
Angularをプロジェクトフォルダにインストール
npm install
開発手順 サンプルアプリケーション導入
Angularをプロジェクトフォルダにインストール
bower install
開発手順 サンプルアプリケーション導入
プロジェクトフォルダにパッケージを展開
bower_componentsnode_modules
ディレクトリが作成される
開発手順 サンプルアプリケーション導入
アプリケーション起動
grunt serve
画面開発ソース説明 ディレクトリ説明
JavaScriptファイル格納ディレクトリ。
CSSファイル格納ディレクトリ。
HTMLファイル格納ディレクトリ。
フロントのHTMLファイル。一番最初に読み込まれる。HTMLのheadタグとbodyタグ、JavaScriptやCSSの読み込みが記述されている。リリースファイル格納ディレクトリ。コマンド「grunt build」を実行すると、ミニマイズ化されたリリースファイルを格納する。Gruntのタスクが記述されている。コマンド「grunt serve」でテスト実行、「grunt build」でリリースビルド。
Bowerの依存パッケージが記述されている。コマンド「bower install」で記述されているパッケージがインストールされる。Node.jsの依存パッケージが記述されている。コマンド「npm install」で記述されているパッケージがインストールされる。
Angularの構成が記述されている。ページのルーティングについても記載されている。
画面開発ソース説明
login.js refer.js
・ログイン処理を行う（IDとパスワードの判定）
・顧客情報照会画面に遷移
・IBM iにデータ取得要求を送信
・取得したJSONデータをテーブルに展開
index.html
IBM i
login.html refer.html
ブラウザから http://xxxx をリクエスト
必要となるCSS,Javascriptなどをロード
顧客情報一覧（JSON）
HTTPリクエスト（REST）
login.scss refer.scssｽﾏｰﾄﾌｫﾝ表示の微調整 ｽﾏｰﾄﾌｫﾝ表示の微調整
初期表示 app.js
ルーティングを行う
Index.htmlのng-viewに該当のHTMLを読み込む
画面開発ソース説明
【シーケンス図】Apps.js'use strict';.config(function ($routeProvider) {
$routeProvider
.when('/login', {templateUrl: 'views/login.html',controller: 'LoginCtrl',controllerAs: 'login'
})
.when('/refer', {templateUrl: 'views/refer.html',controller: 'ReferCtrl',controllerAs: 'refer'
}).otherwise({redirectTo: '/login'
});});
呼び出す画面とコントローラを記述
デザインを指定
画面開発ソース説明
【シーケンス図】login.html <div class="page-title">顧客情報照会</div><div class="jumbotron">
<h2>ログイン</h1><div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa-2x"></i>
</span><input type="text" class="form-control"
ng-model="username" placeholder="Username“name="username" required></div><div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-2x"></i></span>
<input type="password" class="form-control" ng-model="password" placeholder="Password“name="password" autocomplete="off">
</div><button class="btn btn-default btn-primar" name="signin"
ng-click="signin()">SIGN IN</button></div>
画面開発ソース説明
【開発画面】
画面開発ソース説明
【開発画面】
画面開発ソース説明
【シーケンス図】login.ｊｓangular.module('ossibmApp').controller('LoginCtrl', ['$scope‘,'$routeParams', '$location',function ($scope, $routeParams, $location) {
$scope.signin = function(){if(angular.equals($scope.username,"admin") && angular.equals($scope.password,"admin")){
$location.path('/refer');}}; }]);
画面でボタンクリックすると呼ばれる
※scope. Signinという記述の為
画面開発ソース説明
【シーケンス図】Apps.js'use strict';.config(function ($routeProvider) {
$routeProvider
.when('/login', {templateUrl: 'views/login.html',controller: 'LoginCtrl',controllerAs: 'login'
})
.when('/refer', {templateUrl: 'views/refer.html',controller: 'ReferCtrl',controllerAs: 'refer'
}).otherwise({redirectTo: '/login'
});});
画面開発ソース説明
【シーケンス図】refer.js<'use strict';angular.module('ossibmApp').controller('ReferCtrl', [
'$scope','$http',
function ($scope, $http) {$http({method: 'GET‘,url: 'http://60.32.xxx.xxx/getdata',headers:{'Content-type': undefined},responseType: 'json'}).success(function(data, status, headers, config) {
$scope.titleArray = ["顧客名称“,"進捗状況“,"担当責任者","連絡先“, "編集"
];
$scope.rowArray = data;}).error(function(data, status, headers, config) {
alert('eror');});
}]);
AS400への接続
AS400からの結果セット
スコープ指定が無いので画面読込時にfunction が実
行されます。
画面開発ソース説明
【シーケンス図】refer.html<div class=“page-title”>顧客情報照会</div><div>
<table class="table table-striped table-bordered"><thead>
<tr>
<th ng-repeat="title in titleArray">{{title}}</th></tr>
</thead><tbody>
<tr ng-repeat="row in rowArray"><td ng-repeat="data in row track by $index">{{data}}</td>
</tr></tbody>
</table></div>
、「{{}}」を使用し、データバインディングを行っています。
AS400からの結果セット
画面開発ソース説明
【開発画面】
