2016年度oss open技術分科会】活動報告...分科会活動方針 ibm i...
TRANSCRIPT
![Page 1: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/1.jpg)
2016年度OSS【Open技術分科会】活動報告
2016年9月16日
ソリューション・ラボ・横浜 川島 光雄
![Page 2: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/2.jpg)
目次
分科会活動方針
メンバー
分科会 活動体制
活動目標
活動状況
![Page 3: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/3.jpg)
分科会活動方針
IBM i OSを活用できる技術について
検証及び稼動確認を行うことで、技術習得を行う。
・技術習得
・他社との交流
・分科会発表
・OSS協賛勉強会(今後計画)
活動日時毎月 第三金曜日 17時~19時 で活動※場所は東京近郊skypeでの参加も現在実施中
![Page 4: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/4.jpg)
メンバー紹介
SLY 川島(リーダー)
JBCC 富田(副リーダー)
JBCC 植野
JBAT 土井
JBAT 依田
JBAT 杉本
NDIソリューションズ 平野
NDIソリューションズ 齊藤
ベルコム 梶野
オム二サイエンス 田中
※敬称略
KIS 藤野
SOLPAC 後藤
ティアンドトラスト 北原
シンカーミクセル 青木
シンカーミクセル 宍戸
アイビス 濱田
SLY 高柳
SLY 金子
SLY 浅倉
登録:12社 19名 平均10名程度の参加
![Page 5: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/5.jpg)
分科会 活動体制
OSS幹事会
Open技術分科会
モバイルHTML5
環境構築GIT、BlueMix
ASモダナイズ(Node.JS)
JBAT 土井依田
JBCC 富田ベルコム 梶野
オムニサイエンス田中
分科会 リーダー:SLY 川島副リーダー:JBCC 富田
![Page 6: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/6.jpg)
今期活動目標
【目標】モバイルとIBM i連携アプリケーションの開発
【使用スキル】・ANGLARJS・Node.js・json【習得内容】クラウド(BlueMix SoftLayer)とIBM i連携モバイル画面開発スキル
![Page 7: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/7.jpg)
使用スキル説明(ANGULARJS)
技術革新により、Flash等のアドオンソフト無しにリッチクライアントと呼ばれる操作性とパフォーマンスの良いアプリケーションを構築する事ができるようになってきた
Restjson
HTML5
IBM i
RPG DB2400
![Page 8: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/8.jpg)
今期活動計画
6 7 8 9 10 11 12 1 2 3 4 5
計画作成
開発環境構築
画面開発①
画面開発②
Node.JS開発
クラウド構築
GIT構築
まとめ・追加
総会発表
現在
![Page 9: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/9.jpg)
クラウド(BlueMix)
環境説明(ゴールイメージ)
スマホ
操作画面
開発環境
IBM i(OSS協議会)
GIT
Node.JS RPGANGULARJS
ANGULARJS
Node.JS
jsonhttp
DB2400
開発環境GIT経由でのソースを配布クラウド環境とIBM i連携
![Page 10: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/10.jpg)
アプリケーション
開始ログイン画面
ユーザーパスワード
終了
顧客照会
作業入力
メニュー
開始
終了
顧客照会
作業入力
モバイル画面
•画面の縦横回転を自動的に調整する•極力入力操作を減らす•直観的な操作感を出す•タブレットを意識したフリック等入力
![Page 11: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/11.jpg)
アプリケーション説明
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を読み込む
![Page 12: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/12.jpg)
Node.JS開発
【作業手順】テーブル作成Node.JS開発IFS配置サーバー起動動作確認
![Page 13: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/13.jpg)
Node.JS開発
【テーブル情報】
![Page 14: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/14.jpg)
Node.JS開発
【テーブルデータ】
![Page 15: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/15.jpg)
Node.JS開発
osssample.js:実際の処理を記述(SQL等)osssample.sh:SBMJOB実行用
【 Node.JS 配置】
![Page 16: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/16.jpg)
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
パスの設定と起動するアプリケーションを記述します
![Page 17: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/17.jpg)
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呼び出しでも可
![Page 18: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/18.jpg)
Node.JS開発
【サーバー起動】
SBMJOB CMD(CALL PGM(QP2SHELL) PARM('/QOpenSys/usr/bin/sh' '/home/node/osssample/osssample.sh')) JOB(NODE) JOBQ(QUSRNOMAX)
![Page 19: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/19.jpg)
Node.JS開発
【サーバー起動確認】
![Page 20: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/20.jpg)
画面開発
【作業手順】クライアント環境にNode.jsをインストールANGRAJSディレクトリ作成画面開発サーバー起動URLより動作確認
![Page 21: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/21.jpg)
画面開発
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など、クライアントサイドのライブラリを手軽に管理
【クライアント開発環境(導入手順)】
![Page 22: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/22.jpg)
画面開発
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
上記コマンドを実行するとサーバーが立ち上がり、ブラウザに画面が表示されます
【クライアント開発環境(導入手順)】
![Page 23: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/23.jpg)
画面開発
【開発ディレクトリ】
![Page 24: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/24.jpg)
開発画面
JavaScriptファイル格納ディレクトリ。
CSSファイル格納ディレクトリ。
HTMLファイル格納ディレクトリ。
フロントのHTMLファイル。一番最初に読み込まれる。HTMLのheadタグとbodyタグ、JavaScriptやCSSの読み込みが記述されている。リリースファイル格納ディレクトリ。コマンド「grunt build」を実行すると、ミニマイズ化されたリリースファイルを格納する。Gruntのタスクが記述されている。コマンド「grunt serve」でテスト実行、「grunt build」でリリースビルド。
Bowerの依存パッケージが記述されている。コマンド「bower install」で記述されているパッケージがインストールされる。Node.jsの依存パッケージが記述されている。コマンド「npm install」で記述されているパッケージがインストールされる。
Angularの構成が記述されている。ページのルーティングについても記載されている。
![Page 25: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/25.jpg)
開発画面
【開発画面】
![Page 26: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/26.jpg)
開発画面
【シーケンス図】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'
});});
呼び出す画面とコントローラを記述
![Page 27: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/27.jpg)
開発画面
【シーケンス図】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>
![Page 28: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/28.jpg)
開発画面
【開発画面】
![Page 29: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/29.jpg)
開発画面
【シーケンス図】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からの結果セット
![Page 30: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/30.jpg)
開発画面
【シーケンス図】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からの結果セット
![Page 31: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/31.jpg)
デモ実演
実際のデモをご覧ください
![Page 32: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/32.jpg)
今期活動計画
6 7 8 9 10 11 12 1 2 3 4 5
計画作成
開発環境構築
画面開発①
画面開発②
Node.JS開発
クラウド構築
GIT構築
まとめ・追加
総会発表
現在
![Page 33: 2016年度OSS Open技術分科会】活動報告...分科会活動方針 IBM i OSを活用できる技術について 検証及び稼動確認を行うことで、技術習得を行う。・技術習得](https://reader034.vdocuments.net/reader034/viewer/2022042401/5f0fe2b27e708231d4465f0c/html5/thumbnails/33.jpg)
次回の活動
次回分科会10月27日(木)18時~
JBAT 川崎 ソリッドスクエア 西側20F 大会議室
興味を持たれた方は是非分科会に参加ください!連絡は幹事会までお願い致します。