2016年度oss open技術分科会】 第 回 oss勉強会 )と (サーバ...
TRANSCRIPT
![Page 1: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/1.jpg)
2016年度OSS【Open技術分科会】第3回 OSS勉強会
AngularJS(WEB)とNode.js(サーバサイド、RPG)との連携
2016年12月9日
ソリューション・ラボ・横浜 川島 光雄
![Page 2: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/2.jpg)
目次
分科会活紹介– メンバー
– 分科会 活動体制
– 活動目標
– 活動状況
AngularJS(WEB)とNode.js(サーバサイド、RPG)
との連携
![Page 3: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/3.jpg)
分科会活動方針
IBM i OSを活用できる技術について
検証及び稼動確認を行うことで、技術習得を行う。
・技術習得
・他社との交流
・分科会発表
・OSS協賛勉強会(今後計画)
活動日時毎月 第二金曜日 17時~19時 で活動※場所は東京近郊skypeでの参加も現在実施中
![Page 4: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/4.jpg)
次回分科会1月13日(金)18時~
JBAT 川崎 ソリッドスクエア 西側20F 大会議室※Skypeからの参加も受け付けてます
興味を持たれた方は是非分科会に参加ください!連絡は幹事会までお願い致します。
![Page 5: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/5.jpg)
メンバー紹介
SLY 川島(リーダー)
JBCC 富田(副リーダー)
JBCC 植野
JBAT 土井
JBAT 依田
JBAT 杉本
NDIソリューションズ 平野
NDIソリューションズ 齊藤
ベルコム 梶野
オム二サイエンス 田中
※敬称略
KIS 藤野
SOLPAC 後藤
ティアンドトラスト 北原
シンカーミクセル 青木
シンカーミクセル 宍戸
アイビス 濱田
SLY 高柳
SLY 金子
SLY 浅倉
登録:12社 19名 平均10名程度の参加
![Page 6: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/6.jpg)
分科会 活動体制
OSS幹事会
Open技術分科会
モバイルHTML5
環境構築GIT、BlueMix
ASモダナイズ(Node.JS)
JBAT 土井依田
JBCC 富田ベルコム 梶野
オムニサイエンス田中
分科会 リーダー:SLY 川島副リーダー:JBCC 富田
![Page 7: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/7.jpg)
今期活動目標
【目標】モバイルとIBM i連携アプリケーションの開発
【使用スキル】・ AngularJS・Node.js・json【習得内容】Blue Mix(クラウド)とIBM i連携モバイル画面開発スキル
![Page 8: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/8.jpg)
BlueMix(クラウド)
環境説明(ゴールイメージ)
スマホ
操作画面
開発環境
IBM i(OSS協議会)
Node.JS RPGAngularJS
AngularJS
Node.JS
jsonhttp
DB2400
開発環境クラウド環境とIBM i連携
![Page 9: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/9.jpg)
AngularJSで
技術革新により、Flash等のアドオンソフト無しにリッチクライアントと呼ばれる操作性とパフォーマンスの良いアプリケーションを構築する事ができるようになってきた
json
HTML5
IBM i
RPG DB2400
![Page 10: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/10.jpg)
AngularJS 特徴
AngularJS はJavaScript フレームワークのひとつです。
【特徴】・Google社とコミュニティが開発するJavaScriptフレームワーク・ライセンスはMIT License。オープンソース。商用利用可能。・今現在(2015年8月15日)の最新版は 1.4.4。・JavaScriptでクライアントサイドのMVC(Model-View-Controller)モデルを
実現します。
![Page 11: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/11.jpg)
AngularJS 今までの開発との違い
これまでのWeb開発(Java・PHP)・サーバー側でMVCを実現
※画面一部(プルダウン情報、コード名称)をAjax等でサーバー間のやりとりを行い、書き換える事はしていた。
AngularJSは、・クライアントサイドのMVC(Model-View-Controller)モデルを実現
‐サ ーバ側はDB操作のみを処理‐クライアント側 JavaScript のコントローラでデータモデルを管理‐クライアント-サーバ間をAjaxでJSON交換‐画面(HTML/DOM)はクライアント側で生成
メリット:クライアント側で画面を生成するので、クライアント、サーバー間の通信データ量を抑えられる。
![Page 12: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/12.jpg)
AngularJS が使用しているフレームワーク
BootstrapBootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。
レスポンシブデザインとはスマートフォン、タブレット、デスクトップなどの画面の広さに応じて、横並びを縦並びにしたり、狭い画面ではサイドバーを表示しないなどを自動的に調整し、同じデザインで異なる大きさの画面に対応するためのデザイン技術です。
![Page 13: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/13.jpg)
AngularJS
今回作成したアプリケーションの説明
![Page 14: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/14.jpg)
開発画面
【開発手順】クライアントにソフトウェア導入AngularJSディレクトリ作成画面開発ソース説明【デモ実演】サーバー起動URLより動作確認
![Page 15: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/15.jpg)
開発手順 ソフトウェア導入
1.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 を実行し、インストールされたバージョンを管理
![Page 16: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/16.jpg)
開発手順 ソフトウェア導入
2.npm バージョンアップNode向けパッケージ管理ツールnpmNode.jsをインストールすると自動で導入されます
① npm install -g npm② npm --version
![Page 17: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/17.jpg)
開発手順 ソフトウェア導入
3.Ruby インストールひな形に含まれる SCSS をコンパイルするのに Compass が必要。Compass は Ruby で書かれたアプリなので、 Ruby をインストール
① http://rubyinstaller.org/downloads/からダウンロード② C:¥tool¥Ruby¥rubyinstaller-2.3.1-x64.exeを実行③ruby -v
![Page 18: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/18.jpg)
開発手順 ソフトウェア導入
4.Bundler, Compass インストールBundler,:Gemパッケージの種類やバージョンの管理Compass:Sassという言語で記述したファイルをコンパイルして、
CSSファイルを生成する
①gem -v②gem install compass③compass -v④gem install bundler⑤bundler -v
![Page 19: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/19.jpg)
開発手順 ソフトウェア導入
5.Git インストールBower を使用するのに Git が必要なので、 Git for Windows をインストール
① https://git-for-windows.github.io/からダウンロード② C:¥tool¥Git¥Git-2.9.2-64-bit.exe を実行③git --version
![Page 20: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/20.jpg)
開発手順 クライアント開発ミドルウェア
YeomanGoogle社が作成した総合開発ツール群Yeomanを使うことでコマンドラインからの対話形式で雛形(テンプレート)を作成する事ができるため、プロジェクトに適した雛形を作ることができます。
① npm install -g yo
![Page 21: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/21.jpg)
開発手順 クライアント開発ミドルウェア
Grunt
自動化のためのビルドツール(タスクランナー)です。Node.jsを使用し、ビルド用のスクリプト(Gruntfile.js)をJavaScriptで記述してタスクを定義します。
① npm install -g grunt-cli
![Page 22: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/22.jpg)
開発手順 クライアント開発ミドルウェア
bowerTwitter社が作ったフロントエンド用のパッケージマネージャです。
bower.json は 作成しようとしているパッケージが他のパッケージとどのような依存関係にあるかを設定するものです。これは Node.js の package.json、 Ruby の Gemfileと似ています。
① npm install -g bower
![Page 23: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/23.jpg)
開発手順 クライアント開発ミドルウェア
サンプルアプリケーション起動
①プロジェクトフォルダ作成C:¥project¥YeomanTest
②npmを使ってプロジェクトフォルダにangularをインストールnpm install -g generator-angular
③yo angular
④サーバー起動grunt serve
![Page 24: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/24.jpg)
開発手順 サンプルアプリケーション導入
Angularをプロジェクトフォルダにインストール
npm install -g generator-angular
![Page 25: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/25.jpg)
開発手順 サンプルアプリケーション導入
Angularをプロジェクトフォルダにインストール
yo angular
![Page 26: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/26.jpg)
開発手順 サンプルアプリケーション導入
Angularをプロジェクトフォルダにインストール
yo angular
SPACEで* すべて選択に変更
![Page 27: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/27.jpg)
開発手順 サンプルアプリケーション導入
Angularをプロジェクトフォルダにインストール
yo angular
その後上書きして良いか?と何回か聞いてきますが、すべてYで回答
![Page 28: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/28.jpg)
開発手順 クライアント開発ミドルウェア
サンプルアプリケーション起動
grunt serve
![Page 29: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/29.jpg)
開発手順 クライアント開発ミドルウェア
サンプルアプリケーション起動
![Page 30: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/30.jpg)
開発手順 クライアント開発ミドルウェア
サンプルアプリケーション停止
Ctl cを実行
![Page 31: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/31.jpg)
クライアント
開発手順 デモ環境説明
操作画面
IBM i(OSS協議会)
Node.JS( osssample.js )
ANGULARJS(顧客一覧)
jsonhttp
顧客照会DB2400
![Page 32: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/32.jpg)
開発手順 サンプルアプリケーション導入
アプリケーション実行
①プロジェクトフォルダ作成C:¥project¥OSS_IBMi
②配布コンテンツを上記フォルダにセット③npm install④bower install ⑤grunt serveでWebアプリ起動
![Page 33: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/33.jpg)
Gruntfile.jsアプリケーションに導入するパッケージを指定
開発手順 サンプルアプリケーション導入
提供アプリケーション
![Page 34: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/34.jpg)
開発手順 サンプルアプリケーション導入
Angularをプロジェクトフォルダにインストール
npm install
![Page 35: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/35.jpg)
開発手順 サンプルアプリケーション導入
Angularをプロジェクトフォルダにインストール
bower install
![Page 36: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/36.jpg)
開発手順 サンプルアプリケーション導入
プロジェクトフォルダにパッケージを展開
bower_componentsnode_modules
ディレクトリが作成される
![Page 37: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/37.jpg)
開発手順 サンプルアプリケーション導入
アプリケーション起動
grunt serve
![Page 38: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/38.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 39: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/39.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 40: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/40.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 41: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/41.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 42: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/42.jpg)
画面開発ソース説明
【開発画面】
![Page 43: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/43.jpg)
画面開発ソース説明
【開発画面】
![Page 44: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/44.jpg)
画面開発ソース説明
【シーケンス図】login.jsangular.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という記述の為
![Page 45: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/45.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 46: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/46.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からの結果セット
スコープ指定が無いので画面読込時にfunction が実
行されます。
![Page 47: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/47.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 48: 2016年度OSS Open技術分科会】 第 回 OSS勉強会 )と (サーバ …i5php.jp/wp-content/uploads/2016/12/161209_seminar_a.pdf · 目次 分科会活紹介 –メンバー](https://reader030.vdocuments.pub/reader030/viewer/2022041209/5d672cc088c99340518b5c63/html5/thumbnails/48.jpg)
画面開発ソース説明
【開発画面】