Posts tagged ‘Avatar’
はじめての Project Avatar
JavaOne 2013 San Francisco で Project Avatar のオープン・ソース化が発表されました。そこで、本エントリでは Avatar にご興味を持って頂いた方が、どこから Avatar に触ればよいのかを分かりやすくするために、Avatar プログラムの実行方法、Avatar プログラムの作成方法をご紹介します。
※ 昨年、Project Avatar について、下記のプレゼンでアーキテクチャ等をご紹介していますが基本的なコンセプトは変わっていません。しかしこの１年で実装方法が大きく修正されています。昨年の時点では、View の実装部分で Avatar 専用のタグライブラリを使用しなければなりませんでしたが、今回 OSS 化された Avatar の実装を確認すると、標準の HTML 5 + JavaScript + EL 構文で実装できるようになっています。昨年の JavaOne 2012 の BoF で開発者から頂いたフィードバックを受けて、今回の実装方法に修正された事と想定します。
それでは、実際に OSS 化された Avatar の実行方法、プログラムの作成方法を下記にご紹介します。
1. まずはじめに、JDK 8 をダウンロードしてインストールしてください。
（※Avatar の動作のためには、JDK 8 の build 103 以降が必要です。）
Open JDK 8 Early Access のダウンロード
2. 次に Avatar の実行環境をバンドルした GlassFish v4 を入手してインストールしてください。
入手はこちらから
3. 次に AVATAR_HOME (GlassFish のインストールした場所) の環境変数と GlassFish の bin へのパスを設定してください。
csh 系の場合：
setenv AVATAR_HOME /Applications/NetBeans/avatar-gf-1.0-ea
set path=($path;/Applications/NetBeans/avatar-gf-1.0-ea/glassfish4/bin)
4. Avatar プロジェクトの作成
3. でパスを通しておくと、avatar コマンドが実行できるようになってます。
avatar コマンドで Avatar プロジェクトを作成してください。
Avatar プロジェクトを作成するとデフォルトで下記のディレクトリが作成
されます。
# avatar new [project-name]
# ls -F project-name/
WEB-INF ディレクトリ配下には readme.txt が作成されています。
view ディレクトリ配下に src ディレクトリが存在し、hello.html ファイルが
作成されます。
hello.html ファイルの内容
<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello</title>
</head>
<body>
Hello
</body>
</html>
5. GlassFish v4 の起動
GlassFish を起動します。
# asadmin start-domain
6. Avatar プロジェクトのデプロイ
GlassFish に Avatar プロジェクトをデプロイします。
# asadmin deploy project-name
7. デプロイした Avatar プロジェクトの動作確認
ブラウザで http://localhost:8080/project-name へアクセスしてください。
Hello のみがブラウザ上に表示されます。
8. Avatar アプリケーションの作成の準備
まず、Avatar の基本概念を簡単にご紹介すると、Avatar は View
(クライアント側の実装) と Service(サーバ側の実装)をそれぞれ実装します。
また、Avatar はクライアントとサーバの通信に、RESTful, Server-Sent
Event, WebSocket を利用可能です。
今回は、まず最も簡単なアプリケーションを作成するために、
RESTful 対応のアプリケーションを作成します。
4. で Avatar プロジェクトを下記のコマンドを実行し作成しましたが、
# avatar new project-name
上記コマンドを実行した際には、下記のように view のディレクトリしか
作成されていません。
# ls -F project-name/
サーバ側の実装も行うためには、service ディレクトリとそのディレクトリ
配下にsrc ディレクトリを作成する必要があります。下記のコマンドを
実行して service ディレクトリを作成してください。
# mkdir service
# mkdir service/src
# ls -F
# ls -F service
src/
今回作成する RESTful 対応のサンプル・アプリケーションは、ブラウザ
からボタンを押下すると GET リクエストを送信し、サーバ側の時間を
取得してクライアントに表示させるアプリケーションを作成します。
9. Avatar RESTful 対応のサーバ側 (Service) の実装
まず、サーバ側の実装を行うために、service ディレクトリの下の
src ディレクトリに移動し、main.js ファイルを作成します。
ここでは、下記のコードを実装してください。
# cd service/src
# vi main.js
var avatar = require("org/glassfish/avatar");
var getTime = function(){
var current = new Date();
return{
h: current.getHours(),
m: current.getMinutes(),
s: current.getSeconds()
};
};
avatar.registerRestService({ url:"data/message"},
function(){
this.$onGet = function(request, response){
response.$send(getTime());
};
}
);
備考：
Service 側の API は下記 URL に記載されておりますが、REST, Server-Sent
Event(SSE), WebScoket それぞれの実装ができるようになっています。
https://avatar.java.net/jsdoc/service/avatar.html
例：
RESTful : registerRestService(metadata, restService)
SSE : registerPushService(metadata, pushService)
WebSocket : registerSocketService(metadata, socketService)
10. Avatar RESTful 対応のクライアント側(View)の実装
View は下記の内容を実装してください。
<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello</title>
</head>
<body>
<script data-model="rest">
var Message = function(){
this.msg = this.h = this.m = this.s ='';
};
</script>
<script data-type="Message" data-instance="message" data-url="data/message"></script>
<output class="time">#{message.h}:#{message.m}:#{message.s}</output>
<button onclick="#{message.$get()}">Update</button>
</body>
</html>
今回、REST のモデルを使用しますので、<script data-model=”rest”>を
定義しています。
REST モデルで利用可能な API は下記の通りです。
https://avatar.java.net/jsdoc/view/module-RestModelBase.html
今回はボタンを押下した際に GET リクエストでサーバにリクエストを
送信し、サーバ側の時間を表示しますが、Avatar ではモデル・データの
バインディングに Java EE に含まれる Expression Language(EL) 構文
を使用します。
具体的には、#{message.h} , #{message.m} , #{message.s} と記載している
部分が EL 式になります。
11. Avatar プロジェクトのコンパイル
View と Service をそれぞれ実装完了した後、プロジェクトをコンパイル
してください。
# avatar compile project-name
コンパイル後、このアプリケーションを動作させるために必要なファイルが
自動的に追加されます。
12. Avatar プロジェクトを GlassFish にデプロイ
コンパイルが完了すると、アプリケーション・サーバにデプロイします。
# asadmin deploy project-name
13. RESTful アプリケーションの動作確認
ブラウザより http://localhost:8080/project-name にアクセスしてください。
ボタンを押下するとサーバ側の時刻が表示され、ボタンを押す事に
サーバの時刻が更新されるようになります。
14. RESTful アプリケーションから SSE アプリケーションへ移行
RESTful の場合、ボタンを押下しなければサーバ側のデータが取得
できません。
そこで、RESTful から SSE にアプリケーションを変更し、サーバ側から
自動的に時刻を通知するように変更します。
それぞれ、View と Service の実装を下記のように修正してください。
View 側の修正
<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello</title>
</head>
<body>
<script data-model="push">
var Time = function(){
this.msg = this.h = this.m = this.s ='';
};
</script>
<script data-type="Time" data-instance="time" data-url="data/time"></script>
<output class="time">#{time.msg}#{time.h}:#{time.m}:#{time.s}</output>
</body>
</html>
Service 側の修正
var avatar = require("org/glassfish/avatar");
var message = 'The Server Time is ';
var getTime = function(){
var current = new Date();
return{
msg: message,
h: current.getHours(),
m: current.getMinutes(),
s: current.getSeconds()
};
};
avatar.registerPushService({ url:"data/time"},
function(){
this.$onOpen = this.$onTimeout = function(context){
context.$setTimeout(1000);
return context.$sendMessage(getTime());
};
}
);
15. SSE アプリケーションのコンパイル
ソースコードを修正したら、再度コンパイルします。
# avatar compile project-name
16. SSE アプリケーションの動作確認
ブラウザより、http://localhost:8080/project-name にアクセスしてください。
ブラウザでアクセスすると自動的にサーバの時刻が表示されるように
なります。
最後に
今回は、Avatar で簡単な RESTful, SSE のアプリケーションを作成
しましたが、WebSocket なども扱う事ができます。
色々と試してみたい場合、バンドルされている、exapmples をご参考頂く
ことがとても有用です。
example をデプロイして色々なサンプルコードをご覧いただき試して
頂ければ幸いです。また試していただいた後、Avatar プロジェクトでは
フィードバックを求めています。是非、色々なフィードバックを頂ければ
誠に幸いです。
Avatar サンプル・アプリケーションのデプロイ方法
インストールした GlassFish v4 のインストール・ディレクトリ
直下にサンプル・アプリケーションが用意されています。
サンプル・アプリケーションをデプロイして確認してください。
# asadmin deploy avatar-gf-1.0-ea/examples/examples.ear
サンプル・アプリケーションの動作確認
ブラウザより http://localhost:8080/examples にアクセスしてください。
豊富なサンプルが用意されていますので、こちらをご参照頂き
Avatar でどのような事ができるかをご覧ください。
寺田 佳央 - Yoshio Terada 