2016年度oss open技術分科会】活動報告...分科会活動方針 ibm i...
TRANSCRIPT
２０１６年度OSS【Open技術分科会】活動報告
2016年9月16日
ソリューション・ラボ・横浜 川島 光雄
目次
分科会活動方針
メンバー
分科会 活動体制
活動目標
活動状況
分科会活動方針
IBM i OSを活用できる技術について
検証及び稼動確認を行うことで、技術習得を行う。
・技術習得
・他社との交流
・分科会発表
・OSS協賛勉強会（今後計画）
活動日時毎月 第三金曜日 17時～19時 で活動※場所は東京近郊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連携アプリケーションの開発
【使用スキル】・ANGLARJS・Node.js・json【習得内容】クラウド（BlueMix SoftLayer)とIBM i連携モバイル画面開発スキル
使用スキル説明（ANGULARJS）
技術革新により、Flash等のアドオンソフト無しにリッチクライアントと呼ばれる操作性とパフォーマンスの良いアプリケーションを構築する事ができるようになってきた
Restjson
HTML5
IBM i
RPG DB2400
今期活動計画
6 7 8 9 10 11 12 1 2 3 4 5
計画作成
開発環境構築
画面開発①
画面開発②
Node.JS開発
クラウド構築
GIT構築
まとめ・追加
総会発表
現在
クラウド（BlueMix）
環境説明(ゴールイメージ)
スマホ
操作画面
開発環境
IBM i（OSS協議会）
GIT
Node.JS RPGANGULARJS
ANGULARJS
Node.JS
jsonhttp
DB2400
開発環境GIT経由でのソースを配布クラウド環境とIBM i連携
アプリケーション
開始ログイン画面
ユーザーパスワード
終了
顧客照会
作業入力
メニュー
開始
終了
顧客照会
作業入力
モバイル画面
•画面の縦横回転を自動的に調整する•極力入力操作を減らす•直観的な操作感を出す•タブレットを意識したフリック等入力
アプリケーション説明
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を読み込む
Node.JS開発
【作業手順】テーブル作成Node.JS開発IFS配置サーバー起動動作確認
Node.JS開発
【テーブル情報】
Node.JS開発
【テーブルデータ】
Node.JS開発
osssample.js：実際の処理を記述（SQL等）osssample.sh：SBMJOB実行用
【 Node.JS 配置】
Node.JS開発
osssample.sh：#!/bin/shexport QIBM_MULTI_THREADED=Y export PATH=/QOpenSys/QIBM/ProdData/Node/bin:$PATH export LIBPATH=/QOpenSys/QIBM/ProdData/Node/bin:$LIBPATH export LDR_CNTRL=MAXDATA=0x80000000 node /home/node/osssample/osssample.js unset LDR_CNTRL
パスの設定と起動するアプリケーションを記述します
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, { 'Content-Type':'application/json; charset=utf-8', 'Access-Control-Allow-Origin':'*', 'Pragma': 'no-cache', 'Pragma': 'no-cache', 'Cache-Control' : 'no-cache'
}); res.end(JSON.stringify(rs));
}); db.close(); break;
default : res.end('wrong request!!');
} }); server.
SQLの結果をJSON形式で返します
SQLでデータを取得※2015年分科会で実施したRPG呼び出しでも可
Node.JS開発
【サーバー起動】
SBMJOB CMD(CALL PGM(QP2SHELL) PARM('/QOpenSys/usr/bin/sh' '/home/node/osssample/osssample.sh')) JOB(NODE) JOBQ(QUSRNOMAX)
Node.JS開発
【サーバー起動確認】
画面開発
【作業手順】クライアント環境にNode.jsをインストールANGRAJSディレクトリ作成画面開発サーバー起動URLより動作確認
画面開発
Node.js導入 Windowsにおける便利なnode.jsバージョン管理ツール1.nodistをダウンロードしてインストールhttps://github.com/marcelklehr/nodist
Compass導入 cssを生成するToolnpmを利用してcompassを導入gem install compass
bundler導入 Ruby用Gemパッケージの管理
npmを利用してcompassを導入gem install bundler
Git導入 ソースバージョン管理https://git-for-windows.github.io/
Yoeman導入 Yeomanを使用してアプリケーションのひな形を作成する、scaffoldingを提供するツールです。
http://qiita.com/Syn/items/f700b325e07222b64960Yoemanを導入する過程で下記Toolが自動で導入されます
・Grunt Node.js パッケージマネージャー・bower jqueryやunderscoreなど、クライアントサイドのライブラリを手軽に管理
【クライアント開発環境（導入手順）】
画面開発
Yoeman導入 Yeomanを使用してアプリケーションのひな形を作成する、scaffoldingを提供するツールです。
npm install -g yonpm install -g grunt-clinpm install -g bower
プロジェクトフォルダ作成C:¥OSS¥nodecd C:¥OSS¥node
Angular導入npm install -g generator-angularyo angular
サーバーの起動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の構成が記述されている。ページのルーティングについても記載されている。
開発画面
【開発画面】
開発画面
【シーケンス図】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>
開発画面
【開発画面】
開発画面
【シーケンス図】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からの結果セット
開発画面
【シーケンス図】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からの結果セット
デモ実演
実際のデモをご覧ください
今期活動計画
6 7 8 9 10 11 12 1 2 3 4 5
計画作成
開発環境構築
画面開発①
画面開発②
Node.JS開発
クラウド構築
GIT構築
まとめ・追加
総会発表
現在
次回の活動
次回分科会10月２７日（木）18時～
JBAT 川崎 ソリッドスクエア 西側20F 大会議室
興味を持たれた方は是非分科会に参加ください！連絡は幹事会までお願い致します。