全部入り！WGPで高速JavaScript+HML5体験

Advanced Tech Night No.6

全部入り！ WGPで高速JavaScript+HTML5体験

2013/03/15

Acroquest Technology 株式会社

中川翔太（しょこたん）

自己紹介

中川翔太

社内では「しょこたん」と名乗っています。

趣味、開発歴など

趣味は競技ダンス。

大学時代からやってます。

新人の頃からJavascript

にどっぷり。

WGP/ENdoSnipe

/Halookの開発者です。

Copyright © Acroquest Technology Co., Ltd. All rights reserved.

1

発表内容！

1. システム開発のためのフレームワーク「WGP」

2. 豊富なサンプルとチュートリアル、しかも日本語

3. 事始め１～成績管理アプリを作ってみよう

4. 事始め２～リバーシを作ってみよう

5. 他にもあるよ！豊富な機能

6. ENdoSnipe/HalookもWGPで出来てます

7. まとめ


2

１．システム開発のためのフレームワーク「WGP」

1. クライアント/サーバともに実績のあるフレームワークをビルトイン、すぐに開発が始められます。


3

jeegoContext

dygraphs

１．システム開発のためのフレームワーク「WGP」


4

• jQuery、jQuery-UI、Backbone.js、Underscore.js

• Spring Framework

フレームワーク

• jsTree

ツリー

• jqGrid

グリッド

• jeegoContext

コンテキストメニュー

• Raphael

• three.js（次バージョンで予定）

グラフィック

• JSONIC

• MessagePack（次バージョンで予定）

シリアライズ

各種用途に最適なフレームワーク、ライブラリを集約。ライブラリごとに選定を行う必要はありません。

２．豊富なサンプルとチュートリアル

1. WGPサイト（http://wgp.sourceforge.net/）にて、サンプルを公開中。

① Hadoop可視化デモ

② ネットワーク管理デモ

③ リバーシデモ

2. チュートリアルも公開

① 成績管理システムとリバーシの開発を段階を追って学習できます。

② お手本プログラムも公開しているので、詰まっても継続可能です。

Copyright © Acroquest Technology Co., Ltd. All rights reserved. 5

http://wgp.sourceforge.net/

http://wgp.sourceforge.net/download/Ver0.1/WGP_Demo_Hadoop/HadoopMonitoringDemo.html



http://wgp.sourceforge.net/download/Ver0.1/NetworkDemo/index.html

http://wgp.sourceforge.net/download/Ver0.1/NetworkDemo/index.html

http://wgp.sourceforge.net/download/Ver0.1/WGP_Reversi/index.html

３．事始め１～成績管理アプリを作ってみよう

1. 成績管理アプリ作成の流れ

① WGPを使って、画面構成を表示

② jstreeを利用したツリー表示

③ Jeegoocontextを利用したコンテキストメニュー追加

④ jQueryを利用したタブ表示

⑤ jqGridを利用したグリッド表示

⑥ Dygraphを利用したグラフ表示

⑦ ツリーとタブの連携処理追加


6

４．事始め２～リバーシを作ってみよう

1. リバーシ作成の流れ

① WGPを使って、画面構成を表示

② Raphaelによる盤面描画


7

５．他にもあるよ！豊富な機能

• JavaとBackbone.jsのオブジェクトを同期します。サーバサイドで変更した値が自動的にクライアントにも反映されます。（ENdoSnipeでもグラフデータの転送に利用。）

オブジェクト同期

• WebSocketを使ったバイナリ通信をサポート。

• 次バージョンにて、オブジェクトのシリアライズ用にMessagePackをサポート予定。

WebSocket/バイナリ通信


8

６．ENdoSnipe/HalookもWGPで出来てます


9

ツリー形式で監視対象の情報を表示

Webアクセス数を表示

HTTPエラーの発生数を表示

７．まとめ

１．HTML5＋javascript開発を始めるならWGPでスピードスタート

２．サンプル、チュートリアル、お手本を活用してスピード学習

３．ENdoSnipeやHalookも良いお手本です。


10

全部入り！WGPで高速JavaScript+HML5体験

Technology

Transcript of 全部入り！WGPで高速JavaScript+HML5体験