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.   事始め1~成績管理アプリを作ってみよう
4.   事始め2~リバーシを作ってみよう
5.   他にもあるよ!豊富な機能
6.   ENdoSnipe/HalookもWGPで出来てます
7.   まとめ


                                                                            2
          Copyright © Acroquest Technology Co., Ltd. All rights reserved.
1.システム開発のためのフレームワーク「WGP」

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




 jeegoContext

    dygraphs

                                                                             3
           Copyright © Acroquest Technology Co., Ltd. All rights reserved.
1.システム開発のためのフレームワーク「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.
2.豊富なサンプルとチュートリアル

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

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


                                                                          6
        Copyright © Acroquest Technology Co., Ltd. All rights reserved.
4.事始め2~リバーシを作ってみよう

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




                                                                         7
       Copyright © Acroquest Technology Co., Ltd. All rights reserved.
5.他にもあるよ!豊富な機能

  オブジェクト同期

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

  WebSocket/バイナリ通信

  • WebSocketを使ったバイナリ通信をサポート。
  • 次バージョンにて、オブジェクトのシリアライズ用
    にMessagePackをサポート予定。
                                                                           8
         Copyright © Acroquest Technology Co., Ltd. All rights reserved.
6.ENdoSnipe/HalookもWGPで出来てます



                                      Webアクセス数を表示




      HTTPエラーの発生数を表示

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

                                                                           9
         Copyright © Acroquest Technology Co., Ltd. All rights reserved.
7.まとめ


 1.HTML5+javascript開発を始める
 ならWGPでスピードスタート

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

 3.ENdoSnipeやHalookも良いお手
 本です。
                                                                          10
        Copyright © Acroquest Technology Co., Ltd. All rights reserved.

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

  • 1.
    Advanced Tech NightNo.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. 事始め1~成績管理アプリを作ってみよう 4. 事始め2~リバーシを作ってみよう 5. 他にもあるよ!豊富な機能 6. ENdoSnipe/HalookもWGPで出来てます 7. まとめ 2 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  • 4.
    1.システム開発のためのフレームワーク「WGP」 1. クライアント/サーバともに実績のあるフレー ムワークをビルトイン、すぐに開発が始めら れます。 jeegoContext dygraphs 3 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  • 5.
    1.システム開発のためのフレームワーク「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.
    2.豊富なサンプルとチュートリアル 1. WGPサイト(http://wgp.sourceforge.net/)にて、 サンプルを公開中。 ① Hadoop可視化デモ ② ネットワーク管理デモ ③ リバーシデモ 2. チュートリアルも公開 ① 成績管理システムとリバーシの開発を段階を追っ て学習できます。 ② お手本プログラムも公開しているので、詰まっても 継続可能です。 5 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  • 7.
    3.事始め1~成績管理アプリを作ってみよう 1. 成績管理アプリ作成の流れ ①WGPを使って、画面構成を表示 ② jstreeを利用したツリー表示 ③ Jeegoocontextを利用したコンテキストメニュー追 加 ④ jQueryを利用したタブ表示 ⑤ jqGridを利用したグリッド表示 ⑥ Dygraphを利用したグラフ表示 ⑦ ツリーとタブの連携処理追加 6 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  • 8.
    4.事始め2~リバーシを作ってみよう 1. リバーシ作成の流れ ①WGPを使って、画面構成を表示 ② Raphaelによる盤面描画 7 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  • 9.
    5.他にもあるよ!豊富な機能 オブジェクト同期 • JavaとBackbone.jsのオブジェクトを同期します。 サーバサイドで変更した値が自動的にクライアン トにも反映されます。 (ENdoSnipeでもグラフデータの転送に利用。) WebSocket/バイナリ通信 • WebSocketを使ったバイナリ通信をサポート。 • 次バージョンにて、オブジェクトのシリアライズ用 にMessagePackをサポート予定。 8 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  • 10.
    6.ENdoSnipe/HalookもWGPで出来てます Webアクセス数を表示 HTTPエラーの発生数を表示 ツリー形式で監視対象の 情報を表示 9 Copyright © Acroquest Technology Co., Ltd. All rights reserved.
  • 11.
    7.まとめ 1.HTML5+javascript開発を始める ならWGPでスピードスタート 2.サンプル、チュートリアル、お手本 を活用してスピード学習 3.ENdoSnipeやHalookも良いお手 本です。 10 Copyright © Acroquest Technology Co., Ltd. All rights reserved.