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

Advanced Tech Night No.6

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

2013/03/15
Acroquest Technology 株式会社
中川翔太（しょこたん）

自己紹介

 中川翔太
 社内では「しょこたん」と名乗っています。
 趣味、開発歴など
 趣味は競技ダンス。
大学時代からやってます。
 新人の頃からJavascript
にどっぷり。
 WGP/ENdoSnipe
/Halookの開発者です。

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

発表内容！

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

2

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

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

jeegoContext

dygraphs

3

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

フレームワーク

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

ツリー

• jsTree

グリッド各種用途に最適なフ
• jqGrid レームワーク、ライブ
コンテキストメニュー
ラリを集約。
ライブラリごとに選定を行う必
• jeegoContext
要はありません。
グラフィック

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

シリアライズ

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

4

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

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

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

1. 成績管理アプリ作成の流れ
① WGPを使って、画面構成を表示
② jstreeを利用したツリー表示
③ Jeegoocontextを利用したコンテキストメニュー追
加
④ jQueryを利用したタブ表示
⑤ jqGridを利用したグリッド表示
⑥ Dygraphを利用したグラフ表示
⑦ ツリーとタブの連携処理追加

6

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

1. リバーシ作成の流れ
① WGPを使って、画面構成を表示
② Raphaelによる盤面描画

7

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

オブジェクト同期

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

WebSocket/バイナリ通信

• WebSocketを使ったバイナリ通信をサポート。
• 次バージョンにて、オブジェクトのシリアライズ用
にMessagePackをサポート予定。
8

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

Webアクセス数を表示

HTTPエラーの発生数を表示

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

9

７．まとめ

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

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

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

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

More Related Content

What's hot

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

More from AdvancedTechNight

Recently uploaded

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