ewd 3トレーニングコース#5 ewd-xpressアプリ開発第1ステップ
TRANSCRIPT
EWD 3トレーニング・コース #5
ewd-xpress アプリケーション構築 第1ステッ
プ(Linux と GT.M を利用 )
M/Gateway Developments Ltd.Rob Tweed
訳 : 日本ダイナシステム株式会社 嶋 芳成GT.M 版編集 : 澤田 潔
※ 本稿オリジナルは Cache’ 向けとして編纂
05/02/2023 2
必要条件
• Node.js がインストールされていること• GT.M がインストールされ稼働していること• NodeM がインストールされていること• ewd-xpress がインストールされ稼働してい
ること• 少なくとも基本的なテキスト・エディタが利
用可能
• このコースのパート 4 にてカバーしている
EWD 3 トレーニング・コース #5
05/02/2023 3
この教程の前提
• Linux と GT.M• ewd-xpress が ~/ewd3 にインストールさ
れている• Express に対するデフォルトの HTTP 構成• すなわち SSL / HTTPS ではない
• ewd-xpress ポート = 8080• ewd-xpress マシンの IP アドレス• 192.168.1.100
• あなたのセットアップに従って path 等を変更する
EWD 3 トレーニング・コース #5
05/02/2023 4
はじめましょう ...
EWD 3 トレーニング・コース #5
05/02/2023 5
新しいアプリケーションを作る
• 新しいディレクトリを作る• ~/ewd3/www/demo1
• index.html ファイルを作る• ~/ewd3/www/demo1/index.html
EWD 3 トレーニング・コース #5
<html> <head> <title>Demo ewd-xpress application</title> </head> <body> This is a demo! </body></html>
05/02/2023 6
ブラウザに読み込む• http://192.168.1.100:8080/demo1/index.html
• 次のように表示されるはずです。
This is a demo!
• もしこれが表示されれば、 ~/ewd3/demo1/index.html から index.html ファイルの読み込みが成功しました。
EWD 3 トレーニング・コース #5
05/02/2023 7
Web サーバーのルート・パス
• 次を見て下さい• ~/ewd3/node_modules/ewd-xpress/lib/master.js• 81 行目あたり
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 を起動したディレクトリ
05/02/2023 8
Web サーバーのルート・パス
• 次を見て下さい• ~/ewd3/node_modules/ewd-xpress/lib/master.js• 81 行目あたり
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 は、~/ewd3/www/ に対応する
05/02/2023 9
ewd-xpress の URL 対応http://192.168.1.100:8080/{ アプリ名 }/{ ページ名 } は、~/ewd3/www/{ アプリ名 }/{ ページ名 } に対応するので、 従ってhttp://192.168.1.100:8080/demo1/index.html は、~/ewd3/www/demo1/index.html に対応する
EWD 3 トレーニング・コース #5
05/02/2023 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>
EWD 3 トレーニング・コース #5
05/02/2023 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>
EWD 3 トレーニング・コース #5
CDN サイトから jQuery を読み込むローカルのファイルを用いることも可能
05/02/2023 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>
EWD 3 トレーニング・コース #5
このページの DOM が準備完了したことを jQuery の関数が検出するすなわち全ての JavaScript 、 CSS がロードされたことを検出する
05/02/2023 13
実行してみよう
• ブラウザで、 URL を再読込します• Reload ボタンをクリックする
• Console.log への出力を見るには• Chrome の場合、メニューを開き• デベロッパー・ツールを選択
EWD 3 トレーニング・コース #5
05/02/2023 14
実行してみよう
• ブラウザで、 URL を再読込します• Reload ボタンをクリックする
• JavaScript コンソールに次のように表示されます
EWD 3 トレーニング・コース #5
05/02/2023 15
ページを動的にする
• ewd-epress のバックエンドと通信します• このためには、 EWD 3 の別のモジュールを
使う必要があります• ewd-client• クライアント側の JavaScript ファイル/モ
ジュールです• ブラウザまたは ReactNative のモバイル・デ
バイスと ewd-xpress のバックエンドの間で、セキュアな通信をするための API を提供します
EWD 3 トレーニング・コース #5
05/02/2023 16
ページを動的にする
• ewd-client をインストールします• コマンド・プロンプトのウィンドウで、次のコマ
ンドを実行します cd ~/ewd3 npm install ewd-client
• 次のファイルを、~/ewd3/node_modules/ewd-client/lib/proto/ewd-client.js
次の場所へ~/ewd3/www/ewd-client.js
コピーします
EWD 3 トレーニング・コース #5
05/02/2023 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>
EWD 3 トレーニング・コース #5
~/ewd3/www/ewd-client.js からewd-client.js を読み込む
05/02/2023 18
読み込めたかどうかをチェックする
• ブラウザで index.html をリロードします• デベロッパー・ツールのウィンドウで
「 Sources( ソース ) 」タブをクリックする
EWD 3 トレーニング・コース #5
うまく読み込めている
05/02/2023 19
WebSocket を用いる
• このデモでは、ブラウザと ewd-xpress のバックエンドとの間の通信手段として WebSocket を使います• 代わりに Ajax を用いることもできます• WebSocket の方が、より速く、より柔軟です• Ajax は、ハイエンドのシステムではより規模を
大きくできるかもしれません
• ewd-client は、この2種類の通信を標準化するので、この2種類の方式を切り替えるのは簡単です
EWD 3 トレーニング・コース #5
05/02/2023 20
WebSocket を用いる
• ewd-xpress は、 socket.io という標準モジュールに依存して WebSocket 機能をサポートします• 従ってクライアント側で socket.io という
JavaScript ライブラリをブラウザに読み込む必要があります
EWD 3 トレーニング・コース #5
05/02/2023 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>
EWD 3 トレーニング・コース #5
バックエンドで、 socket.io によって生成される仮想ディレクトリから、 socket.io.js を読み込みます
05/02/2023 22
読み込めたかどうかをチェックする
• ブラウザで index.html をリロードします• デベロッパー・ツールのウィンドウで
「 Sources( ソース ) 」タブをクリックする
EWD 3 トレーニング・コース #5
うまく読み込めている
05/02/2023 23
ewd-xpress との通信準備完了
• これで、 ewd-xpress と ewd-client で用いるものがすべて整いました
EWD 3 トレーニング・コース #5
05/02/2023 24
ewd-client を起動する
• EWD.start() 関数• クライアント環境を生成します• すべてのものが囲いの中で保護されます
• ewd-xpress のバックエンドへの Web ソケット接続を確立します• ewd-xpress で、クライアント・アプリを登録し
ます• このステップについての詳細は、後ほど解説し
ます
• ブラウザの DOM に全てのものがロードされるまで、呼び出してはいけません
EWD 3 トレーニング・コース #5
05/02/2023 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>
EWD 3 トレーニング・コース #5
$(document).read() 関数の中で起動するのが安全です‘demo1’ が、我々のアプリケーションの名前$ は jQuery オブジェクトIo は socket.io オブジェクト
05/02/2023 26
試してみましょう
• ブラウザで index.html をリロードします
EWD 3 トレーニング・コース #5
EWD の起動が完了し、アプリケーションが ewd-xpress 上に登録されました
05/02/2023 27
EWD の安全利用を保証する
• EWD.start() は完了までに時間がかかりますが、クライアントとバックエンドの間で何度かやりとりをします• この関数が完了し、クライアントとバックエ
ンドの間の通信が安全に使えるようになったことをどのように知ることができるでしょうか?
EWD 3 トレーニング・コース #5
05/02/2023 28
ewd-registered イベント
• EWD.start() が完了すると、イベントを発行します
ewd-registered
• このイベントを用いることで、アプリケーションのユーザー機能を安全に開始することができます
EWD 3 トレーニング・コース #5
05/02/2023 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>
EWD 3 トレーニング・コース #5
05/02/2023 30
試してみましょう
• ブラウザで index.html をリロードします
EWD 3 トレーニング・コース #5
05/02/2023 31
ページを整理する
• HTML ページ内にインラインの JavaScript を入れるのは良い方法ではありません• 別の JavaScript ファイルに移動します
• ~/ewd3/www/demo1/app.js
EWD 3 トレーニング・コース #5
05/02/2023 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>
EWD 3 トレーニング・コース #5
$(document).ready(function() { EWD.on(‘ewd-registered’, function() { // EWD アプリケーション・コードはここに入れる }); EWD.start(‘demo1’, $, io);});
index.html
app.js
05/02/2023 33
さあこれで始めることができます
• これらの index.html と app.js ファイルは、他のアプリケーションのテンプレートとして用いてください• あなたが作るすべての EWD 3 / ewd-xpress ア
プリケーションに必要な基本的な環境を作っています
EWD 3 トレーニング・コース #5