2016年度OSS【Open技術分科会】第3回OSS勉強会

Transcription

1 2016 年度 OSS Open 技術分科会 第 3 回 OSS 勉強会 AngularJS(WEB) と Node.js( サーバサイド RPG) との連携 2016 年 12 月 9 日 ソリューション ラボ 横浜川島光雄

2 目次 分科会活紹介 メンバー 分科会活動体制 活動目標 活動状況 AngularJS(WEB) とNode.js( サーバサイド RPG) との連携

3 分科会活動方針 IBM i OS を活用できる技術について 検証及び稼動確認を行うことで 技術習得を行う 技術習得 他社との交流 分科会発表 OSS 協賛勉強会 ( 今後計画 ) 活動日時毎月第二金曜日 17 時 ~19 時で活動 場所は東京近郊 skype での参加も現在実施中

4 興味を持たれた方は是非分科会に参加ください! 連絡は幹事会までお願い致します 次回分科会 1 月 13 日 ( 金 ) 18 時 ~ JBAT 川崎ソリッドスクエア西側 20F 大会議室 Skype からの参加も受け付けてます

5 メンバー紹介 敬称略 SLY 川島 ( リーダー ) JBCC 富田 ( 副リーダー ) JBCC 植野 JBAT 土井 JBAT 依田 JBAT 杉本 NDI ソリューションズ平野 NDI ソリューションズ齊藤ベルコム梶野オム二サイエンス田中 KIS 藤野 SOLPAC 後藤ティアンドトラスト北原シンカーミクセル青木シンカーミクセル宍戸アイビス濱田 SLY 高柳 SLY 金子 SLY 浅倉 登録 :12 社 19 名平均 10 名程度の参加

6 分科会活動体制 OSS 幹事会 Open 技術分科会 分科会リーダー :SLY 川島副リーダー :JBCC 富田 モバイル HTML5 JBAT 土井依田 環境構築 GIT BlueMix JBCC 富田ベルコム梶野 AS モダナイズ (Node.JS) オムニサイエンス田中

7 今期活動目標 目標 モバイルと IBM i 連携アプリケーションの開発 使用スキル AngularJS Node.js json 習得内容 Blue Mix( クラウド ) と IBM i 連携モバイル画面開発スキル

8 環境説明 ( ゴールイメージ ) スマホ 操作画面 http BlueMix ( クラウド ) AngularJS json Node.JS IBM i (OSS 協議会 ) RPG DB2400 開発環境 Angular JS Node.JS 開発環境 クラウド環境と IBM i 連携

9 AngularJS で 技術革新により Flash 等のアドオンソフト無しにリッチクライアントと呼ばれる操作性とパフォーマンスの良いアプリケーションを構築する事ができるようになってきた IBM i json RPG DB2 400 HTML5

10 AngularJS 特徴 AngularJS は JavaScript フレームワークのひとつです 特徴 Google 社とコミュニティが開発する JavaScript フレームワーク ライセンスは MIT License オープンソース 商用利用可能 今現在 (2015 年 8 月 15 日 ) の最新版は JavaScript でクライアントサイドの MVC(Model-View-Controller) モデルを実現します

11 AngularJS 今までの開発との違い これまでの Web 開発 (Java PHP) サーバー側で MVC を実現 画面一部 ( プルダウン情報 コード名称 ) を Ajax 等でサーバー間のやりとりを行い 書き換える事はしていた AngularJS は クライアントサイドの MVC(Model-View-Controller) モデルを実現 サーバ側は DB 操作のみを処理 クライアント側 JavaScript のコントローラでデータモデルを管理 クライアント - サーバ間を Ajax で JSON 交換 画面 (HTML/DOM) はクライアント側で生成 メリット : クライアント側で画面を生成するので クライアント サーバー間の通信データ量を抑えられる

12 AngularJS が使用しているフレームワーク Bootstrap Bootstrap は スマートフォンなどのモバイル端末にも対応し レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです Twitter 社で開発され 最初は Twitter Bootstrap と呼ばれていましたが 現在は Bootstrap となりました レスポンシブデザインとはスマートフォン タブレット デスクトップなどの画面の広さに応じて 横並びを縦並びにしたり 狭い画面ではサイドバーを表示しないなどを自動的に調整し 同じデザインで異なる大きさの画面に対応するためのデザイン技術です

13 AngularJS 今回作成したアプリケーションの説明

14 開発画面 開発手順 クライアントにソフトウェア導入 AngularJS ディレクトリ作成 画面開発ソース説明 デモ実演 サーバー起動 URL より動作確認

15 開発手順 ソフトウェア導入 1.Node.js インストール Yeoman は Node.js 上で動くので Node.js をインストール 1https://github.com/marcelklehr/nodist からダウンロード 2C: tool nodejs_v630_win64 node-v6.3.0-x64.msi を実行 3node v を実行し インストールされたバージョンを管理

16 開発手順 ソフトウェア導入 2.npm バージョンアップ Node 向けパッケージ管理ツール npm Node.js をインストールすると自動で導入されます 1 npm install -g npm 2 npm --version

17 開発手順 ソフトウェア導入 3.Ruby インストールひな形に含まれる SCSS をコンパイルするのに Compass が必要 Compass は Ruby で書かれたアプリなので Ruby をインストール 1 からダウンロード 2 C: tool Ruby rubyinstaller x64.exe を実行 3ruby -v

18 開発手順 ソフトウェア導入 4.Bundler, Compass インストール Bundler,:Gem パッケージの種類やバージョンの管理 Compass:Sass という言語で記述したファイルをコンパイルして CSS ファイルを生成する 1gem -v 2gem install compass 3compass -v 4gem install bundler 5bundler -v

19 開発手順 ソフトウェア導入 5.Git インストール Bower を使用するのに Git が必要なので Git for Windows をインストール 1 からダウンロード 2 C: tool Git Git bit.exe を実行 3git --version

20 開発手順 クライアント開発ミドルウェア Yeoman Google 社が作成した総合開発ツール群 Yeoman を使うことでコマンドラインからの対話形式で雛形 ( テンプレート ) を作成する事ができるため プロジェクトに適した雛形を作ることができます 1 npm install -g yo

21 開発手順 クライアント開発ミドルウェア Grunt 自動化のためのビルドツール ( タスクランナー ) です Node.js を使用し ビルド用のスクリプト (Gruntfile.js) を JavaScript で記述してタスクを定義します 1 npm install -g grunt-cli

22 開発手順 クライアント開発ミドルウェア bower Twitter 社が作ったフロントエンド用のパッケージマネージャです bower.json は作成しようとしているパッケージが他のパッケージとどのような依存関係にあるかを設定するものです これは Node.js の package.json Ruby の Gemfile と似ています 1 npm install -g bower

23 開発手順 クライアント開発ミドルウェア サンプルアプリケーション起動 1 プロジェクトフォルダ作成 C: project YeomanTest 2npm を使ってプロジェクトフォルダに angular をインストール npm install -g generator-angular 3yo angular 4 サーバー起動 grunt serve

24 開発手順 サンプルアプリケーション導入 Angular をプロジェクトフォルダにインストール npm install -g generator-angular

25 開発手順 サンプルアプリケーション導入 Angular をプロジェクトフォルダにインストール yo angular

26 開発手順 サンプルアプリケーション導入 Angular をプロジェクトフォルダにインストール yo angular SPACE で * すべて選択に変更

27 開発手順 サンプルアプリケーション導入 Angular をプロジェクトフォルダにインストール yo angular その後上書きして良いか? と何回か聞いてきますが すべて Y で回答

28 開発手順 クライアント開発ミドルウェア サンプルアプリケーション起動 grunt serve

29 開発手順 クライアント開発ミドルウェア サンプルアプリケーション起動

30 開発手順 クライアント開発ミドルウェア サンプルアプリケーション停止 Ctl c を実行

31 開発手順デモ環境説明 クライアント IBM i (OSS 協議会 ) 操作画面 http ANGULARJS ( 顧客一覧 ) json Node.JS ( osssample.js ) 顧客照会 DB2400

32 開発手順 サンプルアプリケーション導入 アプリケーション実行 1 プロジェクトフォルダ作成 C: project OSS_IBMi 2 配布コンテンツを上記フォルダにセット 3npm install 4bower install 5grunt serve で Web アプリ起動

33 開発手順 サンプルアプリケーション導入 提供アプリケーション Gruntfile.js アプリケーションに導入するパッケージを指定

34 開発手順 サンプルアプリケーション導入 Angular をプロジェクトフォルダにインストール npm install

35 開発手順 サンプルアプリケーション導入 Angular をプロジェクトフォルダにインストール bower install

36 開発手順 サンプルアプリケーション導入 プロジェクトフォルダにパッケージを展開 bower_components node_modules ディレクトリが作成される

37 開発手順 サンプルアプリケーション導入 アプリケーション起動 grunt serve

38 画面開発ソース説明 ディレクトリ説明 JavaScript ファイル格納ディレクトリ Angular の構成が記述されている ページのルーティングについても記載されている CSS ファイル格納ディレクトリ HTML ファイル格納ディレクトリ フロントの HTML ファイル 一番最初に読み込まれる HTML の head タグと body タグ JavaScript や CSS の読み込みが記述されている リリースファイル格納ディレクトリ コマンド grunt build を実行すると ミニマイズ化されたリリースファイルを格納する Grunt のタスクが記述されている コマンド grunt serve でテスト実行 grunt build でリリースビルド Bower の依存パッケージが記述されている コマンド bower install で記述されているパッケージがインストールされる Node.js の依存パッケージが記述されている コマンド npm install で記述されているパッケージがインストールされる

39 画面開発ソース説明 ブラウザから をリクエスト 必要となる CSS,Javascript などをロード index.html 初期表示 ルーティングを行う Index.html の ng-view に該当の HTML を読み込む app.js ログイン処理を行う (ID とパスワードの判定 ) 顧客情報照会画面に遷移 login.js IBM iにデータ取得要求を送信 取得したJSONデータをテーブルに展開 refer.js HTTP リクエスト (REST) IBM i スマートフォン表示の微調整 login.scss login.html スマートフォン表示の微調整 refer.scss refer.html 顧客情報一覧 (JSON)

40 画面開発ソース説明 シーケンス図 呼び出す画面と 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' }); });

41 画面開発ソース説明 シーケンス図 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>

42 画面開発ソース説明 開発画面

43 画面開発ソース説明 開発画面

44 画面開発ソース説明 シーケンス図 login.js 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 という記述の為

45 画面開発ソース説明 シーケンス図 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' }); });

46 画面開発ソース説明 シーケンス図 スコープ指定が無いので画面読込時に function が実行されます refer.js <'use strict'; angular.module('ossibmapp').controller('referctrl', [ '$scope', '$http', function ($scope, $http) { $http({ method: 'GET,url: ' }]); 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 からの結果セット

47 画面開発ソース説明 シーケンス図 refer.html <div class= page-title > 顧客情報照会 </div> <div> <table class="table table-striped table-bordered"> <thead> <tr> </table> </div> <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> {{}} を使用し データバインディングを行っています AS400 からの結果セット

48 画面開発ソース説明 開発画面