2016年度OSS【Open技術分科会】活動報告

Size: px

Start display at page:

Download "2016年度OSS【Open技術分科会】活動報告"

ひでかやまがた
5 years ago
Views:

1 2016 年度 OSS Open 技術分科会活動報告 2016 年 9 月 16 日ソリューションラボ横浜川島光雄

2 目次分科会活動方針メンバー分科会活動体制活動目標活動状況

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

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

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

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

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

8 今期活動計画計画作成開発環境構築画面開発 1 画面開発 2 Node.JS 開発クラウド構築 GIT 構築まとめ追加総会発表現在

9 環境説明 ( ゴールイメージ ) スマホ操作画面 http クラウド (BlueMix) ANGULARJS json Node.JS IBM i (OSS 協議会 ) RPG GIT DB2400 開発環境 ANGUL ARJS Node.JS 開発環境 GIT 経由でのソースを配布クラウド環境と IBM i 連携

10 アプリケーションログイン画面ユーザーパスワード開始終了メニュー顧客照会作業入力開始顧客照会作業入力モバイル画面画面の縦横回転を自動的に調整する極力入力操作を減らす直観的な操作感を出すタブレットを意識したフリック等入力終了

アプリケーション説明ブラウザから http://xxxx をリクエスト必要となる CSS,Javascript などをロード index.

js ログイン処理を行う (ID とパスワードの判定 ) 顧客情報照会画面に遷移 login.

11 アプリケーション説明ブラウザからをリクエスト必要となる 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 スマートフォン表示の微調整 refer.scss refer.html 顧客情報一覧 (JSON)

12 Node.JS 開発作業手順テーブル作成 Node.JS 開発 IFS 配置サーバー起動動作確認

13 Node.JS 開発テーブル情報

14 Node.JS 開発テーブルデータ

15 Node.JS 開発 Node.JS 配置 osssample.js: 実際の処理を記述 (SQL 等 ) osssample.sh:sbmjob 実行用

16 Node.JS 開発 osssample.sh: #!/bin/sh export QIBM_MULTI_THREADED=Y export PATH=/QOpenSys/QIBM/ProdData/Node/bin:$PATH export LIBPATH=/QOpenSys/QIBM/ProdData/Node/bin:$LIBPATH export LDR_CNTRL=MAXDATA=0x node /home/node/osssample/osssample.js unset LDR_CNTRL パスの設定と起動するアプリケーションを記述します

17 Node.JS 開発 osssample.js: var http = require('http'); var db = require('/qopensys/qibm/proddata/node/os400/db2i/lib/db2'); var server = http.createserver(); server.on('request', function (req, res) { switch(req.url){ case '/getdata': case '/getdata/': db.init(); db.conn("*local"); db.exec("select CM01,CM02,CM03,CM04,CM05 FROM OSSSAMPLE.CUSINF", function(rs) { res.writehead(200, { res.end(json.stringify(rs)); }); db.close(); break; default : res.end('wrong request!!'); } }); server. }); SQL の結果を JSON 形式で返します SQL でデータを取得 2015 年分科会で実施した RPG 呼び出しでも可 'Content-Type':'application/json; charset=utf-8', 'Access-Control-Allow-Origin':'*', 'Pragma': 'no-cache', 'Pragma': 'no-cache', 'Cache-Control' : 'no-cache'

18 Node.JS 開発サーバー起動 SBMJOB CMD(CALL PGM(QP2SHELL) PARM('/QOpenSys/usr/bin/sh' '/ home/node/osssample/osssample.sh')) JOB(NODE) JOBQ(QUSRNOMAX)

19 Node.JS 開発サーバー起動確認

20 画面開発作業手順クライアント環境に Node.js をインストール ANGRAJS ディレクトリ作成画面開発サーバー起動 URL より動作確認

21 画面開発クライアント開発環境( 導入手順 ) Windowsにおける便利なnode.jsバージョン管理ツール Node.js 導入 1.nodistをダウンロードしてインストール Compass 導入 cssを生成するtool npmを利用してcompassを導入 gem install compass Ruby 用 Gemパッケージの管理 bundler 導入 npmを利用してcompassを導入 gem install bundler ソースバージョン管理 Git 導入 Yoeman 導入 Yeomanを使用してアプリケーションのひな形を作成する scaffoldingを提供するツールです Yoemanを導入する過程で下記 Toolが自動で導入されます Grunt Node.js パッケージマネージャー bower jqueryやunderscoreなどクライアントサイドのライブラリを手軽に管理

22 画面開発クライアント開発環境 ( 導入手順 ) Yoeman 導入 Yeoman を使用してアプリケーションのひな形を作成する scaffolding を提供するツールです npm install -g yo npm install -g grunt-cli npm install -g bower プロジェクトフォルダ作成 C: OSS node cd C: OSS node Angular 導入 npm install -g generator-angular yo angular サーバーの起動 grunt serve 上記コマンドを実行するとサーバーが立ち上がりブラウザに画面が表示されます

23 画面開発開発ディレクトリ

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

25 開発画面開発画面

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

27 開発画面シーケンス図 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>

28 開発画面開発画面

29 開発画面シーケンス図 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 からの結果セット

30 開発画面シーケンス図 refer.js <'use strict'; angular.module('ossibmapp').controller('referctrl', [ '$scope', AS400への接続 '$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 からの結果セット

31 デモ実演実際のデモをご覧ください

32 今期活動計画計画作成開発環境構築画面開発 1 画面開発 2 Node.JS 開発クラウド構築 GIT 構築まとめ追加総会発表現在

33 次回の活動興味を持たれた方は是非分科会に参加ください! 連絡は幹事会までお願い致します次回分科会 10 月 27 日 ( 木 ) 18 時 ~ JBAT 川崎ソリッドスクエア西側 20F 大会議室

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

2016年度OSS【Open技術分科会】第3回OSS勉強会 2016 年度 OSS Open 技術分科会第 3 回 OSS 勉強会 AngularJS(WEB) と Node.js( サーバサイド RPG) との連携 2016 年 12 月 9 日ソリューションラボ横浜川島光雄目次分科会活紹介メンバー分科会活動体制活動目標活動状況 AngularJS(WEB) とNode.js( サーバサイド RPG) との連携分科会活動方針 IBM