AdvancedTechNight No.6 Session #3

1. Advanced Tech Night No.6
全部入り！
WGPで高速JavaScript+HTML5体験
2013/03/15
Acroquest Technology 株式会社
中川 翔太（しょこたん）

2. 自己紹介
 中川翔太
 社内では「しょこたん」と名乗っています。
 趣味、開発歴など
 趣味は競技ダンス。
大学時代からやってます。
 新人の頃からJavascript
にどっぷり。
 WGP/ENdoSnipe
/Halookの開発者です。
1
Copyright © Acroquest Technology Co., Ltd. All rights reserved.

3. 発表内容！
1. システム開発のためのフレームワーク「WGP」
2. 豊富なサンプルとチュートリアル、しかも日本語
3. 事始め１～成績管理アプリを作ってみよう
4. 事始め２～リバーシを作ってみよう
5. 他にもあるよ！豊富な機能
6. ENdoSnipe/HalookもWGPで出来てます
7. まとめ
2
Copyright © Acroquest Technology Co., Ltd. All rights reserved.

4. １．システム開発のためのフレームワーク「WGP」
1. クライアント/サーバともに実績のあるフレー
ムワークをビルトイン、すぐに開発が始めら
れます。
jeegoContext
dygraphs
3
Copyright © Acroquest Technology Co., Ltd. All rights reserved.

5. １．システム開発のためのフレームワーク「WGP」
フレームワーク
• jQuery、jQuery-UI、Backbone.js、Underscore.js
• Spring Framework
ツリー
• jsTree
グリッド 各種用途に最適なフ
• jqGrid レームワーク、ライブ
コンテキストメニュー
ラリを集約。
ライブラリごとに選定を行う必
• jeegoContext
要はありません。
グラフィック
• Raphael
• three.js（次バージョンで予定）
シリアライズ
• JSONIC
• MessagePack（次バージョンで予定）
4
Copyright © Acroquest Technology Co., Ltd. All rights reserved.

6. ２．豊富なサンプルとチュートリアル
1. WGPサイト（http://wgp.sourceforge.net/）にて、
サンプルを公開中。
① Hadoop可視化デモ
② ネットワーク管理デモ
③ リバーシデモ
2. チュートリアルも公開
① 成績管理システムとリバーシの開発を段階を追っ
て学習できます。
② お手本プログラムも公開しているので、詰まっても
継続可能です。
5
Copyright © Acroquest Technology Co., Ltd. All rights reserved.

7. ３．事始め１～成績管理アプリを作ってみよう
1. 成績管理アプリ作成の流れ
① WGPを使って、画面構成を表示
② jstreeを利用したツリー表示
③ Jeegoocontextを利用したコンテキストメニュー追
加
④ jQueryを利用したタブ表示
⑤ jqGridを利用したグリッド表示
⑥ Dygraphを利用したグラフ表示
⑦ ツリーとタブの連携処理追加
6
Copyright © Acroquest Technology Co., Ltd. All rights reserved.

8. ４．事始め２～リバーシを作ってみよう
1. リバーシ作成の流れ
① WGPを使って、画面構成を表示
② Raphaelによる盤面描画
7
Copyright © Acroquest Technology Co., Ltd. All rights reserved.

9. ５．他にもあるよ！豊富な機能
オブジェクト同期
• JavaとBackbone.jsのオブジェクトを同期します。
サーバサイドで変更した値が自動的にクライアン
トにも反映されます。
（ENdoSnipeでもグラフデータの転送に利用。）
WebSocket/バイナリ通信
• WebSocketを使ったバイナリ通信をサポート。
• 次バージョンにて、オブジェクトのシリアライズ用
にMessagePackをサポート予定。
8
Copyright © Acroquest Technology Co., Ltd. All rights reserved.

10. ６．ENdoSnipe/HalookもWGPで出来てます
Webアクセス数を表示
HTTPエラーの発生数を表示
ツリー形式で監視対象の
情報を表示
9
Copyright © Acroquest Technology Co., Ltd. All rights reserved.

11. ７．まとめ
１．HTML5＋javascript開発を始める
ならWGPでスピードスタート
２．サンプル、チュートリアル、お手本
を活用してスピード学習
３．ENdoSnipeやHalookも良いお手
本です。
10
Copyright © Acroquest Technology Co., Ltd. All rights reserved.