Download - EWD 3トレーニングコース#5 ewd-xpressアプリ開発第1ステップ
EWD 3トレーニング・コース #5
ewd-xpress アプリケーション構築 第1ステッ
プ(windows と Caché を利用 )
M/Gateway Developments Ltd.Rob Tweed
訳 : 日本ダイナシステム株式会社 嶋 芳成
2
必要条件
• Node.js がインストールされていること• Caché がインストールされ稼働していること• cache.node または NodeM がインストー
ルされていること• ewd-xpress がインストールされ稼働してい
ること• 少なくとも基本的なテキスト・エディタが利
用可能
• このコースのパート 4 にてカバーしている
2016/9/5 EWD 3 トレーニング・コース #5
3
この教程の前提
• Windows と Caché• ewd-xpress が c:\ewd3 にインストールさ
れている• Express に対するデフォルトの HTTP 構成• すなわち SSL / HTTPS ではない
• ewd-xpress ポート = 8080• ewd-xpress マシンの IP アドレス• 192.168.1.100
• あなたのセットアップに従って path 等を変更する
2016/9/5 EWD 3 トレーニング・コース #5
4
はじめましょう ...
2016/9/5 EWD 3 トレーニング・コース #5
5
新しいアプリケーションを作る
• 新しいディレクトリを作る• C:\ewd3\www\demo1
• index.html ファイルを作る• C:\ewd3\www\demo1\index.html
2016/9/5 EWD 3 トレーニング・コース #5
<html> <head> <title>Demo ewd-xpress application</title> </head> <body> This is a demo! </body></html>
6
ブラウザに読み込む• http://192.168.1.100:8080/demo1/index.html
• 次のように表示されるはずです。
This is a demo!
• もしこれが表示されれば、 c:\ewd3\demo1\index.html から index.html ファイルの読み込みが成功しました。
2016/9/5 EWD 3 トレーニング・コース #5
7
Web サーバーのルート・パス
• 次を見て下さい• C:\ewd3\node_modules\ewd-xpress\lib\master.js• 81 行目あたり
2016/9/5 EWD 3 トレーニング・コース #5
var config = { manaementPassword: params.managementPassword || ‘keepThisSecret!, serverName: params.serverName || ‘ewd-xpress’, port: params.port || 8080, poolSize: params.poolSize || 1, webServerRootPath: params.webServerRootPath || process.cwd() + ‘/www/’, no_sockets: params.no_sockets || false, qxBuild: qx.build, masterProcessPid: process.pid, database: params.database, errorLogFile: params.errorLogFile || false, mode: params.mode || ‘production’, bodyParser: params.bodyParser || false};
cwd = Current Working Directory現在作業中のディレクトリ、すなわち、 ewd-xpress を起動したディレクトリ
8
Web サーバーのルート・パス
• 次を見て下さい• C:\ewd3\node_modules\ewd-xpress\lib\master.js• 81 行目あたり
2016/9/5 EWD 3 トレーニング・コース #5
var config = { manaementPassword: params.managementPassword || ‘keepThisSecret!, serverName: params.serverName || ‘ewd-xpress’, port: params.port || 8080, poolSize: params.poolSize || 1, webServerRootPath: params.webServerRootPath || process.cwd() + ‘/www/’, no_sockets: params.no_sockets || false, qxBuild: qx.build, masterProcessPid: process.pid, database: params.database, errorLogFile: params.errorLogFile || false, mode: params.mode || ‘production’, bodyParser: params.bodyParser || false};
http://192.168.1.100:8080 は、C:\ewd3/www/ に対応する
9
ewd-xpress の URL 対応http://192.168.1.100:8080/{ アプリ名 }/{ ページ名 } は、C:\ewd3/www/{ アプリ名 }/{ ページ名 } に対応するので、 従ってhttp://192.168.1.100:8080/demo1/index.html は、C:\ewd3/www/demo1/index.html に対応する
2016/9/5 EWD 3 トレーニング・コース #5
10
ページの準備完了を検出する<html> <head> <title>Demo ewd-xpress application</title> </head> <body> <script src=“//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script> <script> $(document).ready(function() { console.log(‘everything loaded!’); }); </script> This is a demo! </body></html>
2016/9/5 EWD 3 トレーニング・コース #5
11
ページの準備完了を検出する<html> <head> <title>Demo ewd-xpress application</title> </head> <body> <script src=“//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script> <script> $(document).ready(function() { console.log(‘everything loaded!’); }); </script> This is a demo! </body></html>
2016/9/5 EWD 3 トレーニング・コース #5
CDN サイトから jQuery を読み込むローカルのファイルを用いることも可能
12
ページの準備完了を検出する<html> <head> <title>Demo ewd-xpress application</title> </head> <body> <script src=“//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script> <script> $(document).ready(function() { console.log(‘everything loaded!’); }); </script> This is a demo! </body></html>
2016/9/5 EWD 3 トレーニング・コース #5
このページの DOM が準備完了したことを jQuery の関数が検出するすなわち全ての JavaScript 、 CSS がロードされたことを検出する
13
実行してみよう
• ブラウザで、 URL を再読込します• Reload ボタンをクリックする
• Console.log への出力を見るには• Chrome の場合、メニューを開き• デベロッパー・ツールを選択
2016/9/5 EWD 3 トレーニング・コース #5
14
実行してみよう
• ブラウザで、 URL を再読込します• Reload ボタンをクリックする
• JavaScript コンソールに次のように表示されます
2016/9/5 EWD 3 トレーニング・コース #5
15
ページを動的にする
• ewd-epress のバックエンドと通信します• このためには、 EWD 3 の別のモジュールを
使う必要があります• ewd-client• クライアント側の JavaScript ファイル/モ
ジュールです• ブラウザまたは ReactNative のモバイル・デ
バイスと ewd-xpress のバックエンドの間で、セキュアな通信をするための API を提供します
2016/9/5 EWD 3 トレーニング・コース #5
16
ページを動的にする
• ewd-client をインストールします• コマンド・プロンプトのウィンドウで、次のコマ
ンドを実行します cd \ewd3 npm install ewd-client
• 次のファイルを、c:\ewd3\node_modules\ewd-client\lib\proto\ewd-client.js
次の場所へc:\ewd3\www\ewd-client.js
コピーします
2016/9/5 EWD 3 トレーニング・コース #5
17
ページの準備完了を検出する<html> <head> <title>Demo ewd-xpress application</title> </head> <body> <script src=“//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script>
<script src=“/ewd-client.js”></script>
<script> $(document).ready(function() { console.log(‘everything loaded!’); }); </script> This is a demo! </body></html>
2016/9/5 EWD 3 トレーニング・コース #5
C:\ewd3\www\ewd-client.js からewd-client.js を読み込む
18
読み込めたかどうかをチェックする
• ブラウザで index.html をリロードします• デベロッパー・ツールのウィンドウで
「 Sources( ソース ) 」タブをクリックする
2016/9/5 EWD 3 トレーニング・コース #5
うまく読み込めている
19
WebSocket を用いる
• このデモでは、ブラウザと ewd-xpress のバックエンドとの間の通信手段として WebSocket を使います• 代わりに Ajax を用いることもできます• WebSocket の方が、より速く、より柔軟です• Ajax は、ハイエンドのシステムではより規模を
大きくできるかもしれません
• ewd-client は、この2種類の通信を標準化するので、この2種類の方式を切り替えるのは簡単です
2016/9/5 EWD 3 トレーニング・コース #5
20
WebSocket を用いる
• ewd-xpress は、 socket.io という標準モジュールに依存して WebSocket 機能をサポートします• 従ってクライアント側で socket.io という
JavaScript ライブラリをブラウザに読み込む必要があります
2016/9/5 EWD 3 トレーニング・コース #5
21
socket.io を読み込む<html> <head> <title>Demo ewd-xpress application</title> </head> <body> <script src=“//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script>
<script src=“/socket.io/socket.io.js”></script> <script src=“/ewd-client.js”></script> <script> $(document).ready(function() { console.log(‘everything loaded!’); }); </script> This is a demo! </body></html>
2016/9/5 EWD 3 トレーニング・コース #5
バックエンドで、 socket.io によって生成される仮想ディレクトリから、 socket.io.js を読み込みます
22
読み込めたかどうかをチェックする
• ブラウザで index.html をリロードします• デベロッパー・ツールのウィンドウで
「 Sources( ソース ) 」タブをクリックする
2016/9/5 EWD 3 トレーニング・コース #5
うまく読み込めている
23
ewd-xpress との通信準備完了
• これで、 ewd-xpress と ewd-client で用いるものがすべて整いました
2016/9/5 EWD 3 トレーニング・コース #5
24
ewd-client を起動する
• EWD.start() 関数• クライアント環境を生成します• すべてのものが囲いの中で保護されます
• ewd-xpress のバックエンドへの Web ソケット接続を確立します• ewd-xpress で、クライアント・アプリを登録し
ます• このステップについての詳細は、後ほど解説し
ます
• ブラウザの DOM に全てのものがロードされるまで、呼び出してはいけません
2016/9/5 EWD 3 トレーニング・コース #5
25
ewd-client を起動する<html> <head> <title>Demo ewd-xpress application</title> </head> <body> <script src=“//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script> <script src=“/socket.io/socket.io.js”></script> <script src=“/ewd-client.js”></script> <script> $(document).ready(function() { console.log(‘everything loaded!’);
EWD.start(‘demo1’, $, io);
}); </script> This is a demo! </body></html>
2016/9/5 EWD 3 トレーニング・コース #5
$(document).read() 関数の中で起動するのが安全です‘demo1’ が、我々のアプリケーションの名前$ は jQuery オブジェクトIo は socket.io オブジェクト
26
試してみましょう
• ブラウザで index.html をリロードします
2016/9/5 EWD 3 トレーニング・コース #5
EWD の起動が完了し、アプリケーションが ewd-xpress 上に登録されました
27
EWD の安全利用を保証する
• EWD.start() は完了までに時間がかかりますが、クライアントとバックエンドの間で何度かやりとりをします• この関数が完了し、クライアントとバックエ
ンドの間の通信が安全に使えるようになったことをどのように知ることができるでしょうか?
2016/9/5 EWD 3 トレーニング・コース #5
28
ewd-registered イベント
• EWD.start() が完了すると、イベントを発行します
ewd-registered
• このイベントを用いることで、アプリケーションのユーザー機能を安全に開始することができます
2016/9/5 EWD 3 トレーニング・コース #5
29
ewd-client を起動する<html> <head> <title>Demo ewd-xpress application</title> </head> <body> <script src=“//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script> <script src=“/socket.io/socket.io.js”></script> <script src=“/ewd-client.js”></script> <script> $(document).ready(function() {
EWD.on(‘ewd-registered’, function() { // OK 、アプリケーションを使う準備ができました console.log(‘*** application registered and ready for use to start!!’); });
console.log(‘everything loaded!’); EWD.start(‘demo1’, $, io); }); </script> This is a demo! </body></html>
2016/9/5 EWD 3 トレーニング・コース #5
30
試してみましょう
• ブラウザで index.html をリロードします
2016/9/5 EWD 3 トレーニング・コース #5
31
ページを整理する
• HTML ページ内にインラインの JavaScript を入れるのは良い方法ではありません• 別の JavaScript ファイルに移動します
• C:\ewd3\www\demo1\app.js
2016/9/5 EWD 3 トレーニング・コース #5
32
改訂したアプリケーション・ファイル
<html> <head> <title>Demo ewd-xpress application</title> </head> <body> <script src=“//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script> <script src=“/socket.io/socket.io.js”></script> <script src=“/ewd-client.js”></script> <script src=“app.js”></script>
<div id=“content”> Content goes here </div> </body></html>
2016/9/5 EWD 3 トレーニング・コース #5
$(document).ready(function() { EWD.on(‘ewd-registered’, function() { // EWD アプリケーション・コードはここに入れる }); EWD.start(‘demo1’, $, io);});
index.html
app.js
33
さあこれで始めることができます
• これらの index.html と app.js ファイルは、他のアプリケーションのテンプレートとして用いてください• あなたが作るすべての EWD 3 / ewd-xpress ア
プリケーションに必要な基本的な環境を作っています
2016/9/5 EWD 3 トレーニング・コース #5