EWD 3トレーニングコース#5 ewd-xpressアプリ開発第１ステップ

EWD 3トレーニング・コース　 #5

ewd-xpress アプリケーション構築第１ステッ

プ(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 等を変更する


4

はじめましょう ...


5

新しいアプリケーションを作る

• 新しいディレクトリを作る• C:\ewd3\www\demo1

• index.html ファイルを作る• C:\ewd3\www\demo1\index.html


<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 ファイルの読み込みが成功しました。


http://192.168.1.100:8080/demo1/index.html

7

Web サーバーのルート・パス

• 次を見て下さい• C:\ewd3\node_modules\ewd-xpress\lib\master.js• 81 行目あたり


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 行目あたり


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　　　　に対応する


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>


11



CDN サイトから jQuery を読み込むローカルのファイルを用いることも可能

12



このページの DOM が準備完了したことを jQuery の関数が検出するすなわち全ての JavaScript 、 CSS がロードされたことを検出する

13

実行してみよう

• ブラウザで、 URL を再読込します• Reload ボタンをクリックする

• Console.log への出力を見るには• Chrome の場合、メニューを開き• デベロッパー・ツールを選択


14

実行してみよう

• ブラウザで、 URL を再読込します• Reload ボタンをクリックする

• JavaScript コンソールに次のように表示されます


15

ページを動的にする

• ewd-epress のバックエンドと通信します• このためには、 EWD 3 の別のモジュールを

使う必要があります• ewd-client• クライアント側の JavaScript ファイル／モ

ジュールです• ブラウザまたは ReactNative のモバイル・デ

バイスと ewd-xpress のバックエンドの間で、セキュアな通信をするための API を提供します


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

　コピーします


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>


C:\ewd3\www\ewd-client.js からewd-client.js を読み込む

18

読み込めたかどうかをチェックする

• ブラウザで index.html をリロードします• デベロッパー・ツールのウィンドウで

「 Sources( ソース ) 」タブをクリックする


うまく読み込めている

19

WebSocket を用いる

• このデモでは、ブラウザと ewd-xpress のバックエンドとの間の通信手段として WebSocket を使います• 代わりに Ajax を用いることもできます• WebSocket の方が、より速く、より柔軟です• Ajax は、ハイエンドのシステムではより規模を

大きくできるかもしれません

• ewd-client は、この２種類の通信を標準化するので、この２種類の方式を切り替えるのは簡単です


20

WebSocket を用いる

• ewd-xpress は、 socket.io という標準モジュールに依存して WebSocket 機能をサポートします• 従ってクライアント側で socket.io という

JavaScript ライブラリをブラウザに読み込む必要があります


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>


バックエンドで、 socket.io によって生成される仮想ディレクトリから、 socket.io.js を読み込みます

22

読み込めたかどうかをチェックする

• ブラウザで index.html をリロードします• デベロッパー・ツールのウィンドウで

「 Sources( ソース ) 」タブをクリックする


うまく読み込めている

23

ewd-xpress との通信準備完了

• これで、 ewd-xpress と ewd-client で用いるものがすべて整いました


24

ewd-client を起動する

• EWD.start() 関数• クライアント環境を生成します• すべてのものが囲いの中で保護されます

• ewd-xpress のバックエンドへの Web ソケット接続を確立します• ewd-xpress で、クライアント・アプリを登録し

ます• このステップについての詳細は、後ほど解説し

ます

• ブラウザの DOM に全てのものがロードされるまで、呼び出してはいけません


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>


$(document).read() 関数の中で起動するのが安全です‘demo1’ が、我々のアプリケーションの名前$ は jQuery オブジェクトIo は socket.io オブジェクト

26

試してみましょう

• ブラウザで index.html をリロードします


EWD の起動が完了し、アプリケーションが ewd-xpress 上に登録されました

27

EWD の安全利用を保証する

• EWD.start() は完了までに時間がかかりますが、クライアントとバックエンドの間で何度かやりとりをします• この関数が完了し、クライアントとバックエ

ンドの間の通信が安全に使えるようになったことをどのように知ることができるでしょうか？


28

ewd-registered イベント

• EWD.start() が完了すると、イベントを発行します

ewd-registered

• このイベントを用いることで、アプリケーションのユーザー機能を安全に開始することができます


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>


30

試してみましょう

• ブラウザで index.html をリロードします


31

ページを整理する

• HTML ページ内にインラインの JavaScript を入れるのは良い方法ではありません• 別の JavaScript ファイルに移動します

• C:\ewd3\www\demo1\app.js


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>


$(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 ア

プリケーションに必要な基本的な環境を作っています


Software

EWD 3トレーニングコース#5 ewd-xpressアプリ開発第１ステップ