業務システムエンジニアのためのHTML5勉強会#02

2013/5/10に行われた業務システムエンジニアのためのHTML5勉強会#02に参加してきました。
いわゆる"HTML5の最先端を学ぼうぜ！"ではなく、実際の業務に活用できることを学びましょうという会です。

ATENDのページから抜粋

イベントコンセプト

近年、Web技術の急激な発達により、業務システム分野にもHTML5への需要が増しています。しかし、HTML5は組込み系からゲーム系まで様々な分野を巻き込み仕様化が進み、またポテンシャルへ疑問を感じるような仕様も数多く存在します。このイベントは、そんな状況に置かれたHTML5などのモダンなWeb技術を、先進性より安定性を重視する「業務システム」へ活用する方法について、議論・情報共有を行うための勉強会です。

第1回も申し込みましたが諸事情で参加できなかったため、とても楽しみにしていました。

Webアプリ開発プラットフォームを使ってみる ~Wakandaの巻~

原田光一さん (4D Japan 技術部)

Webアプリ開発プラットフォーム Wakandaの紹介

DBだが開発プラットフォームとしても使える
ビジネスにフォーカスしたWebアプリを作るためのプラットフォーム
オープンソースでGITで公開されている。

Wakandaサーバー

含まれるもの

• HTTPサーバー
• JS実行エンジン
• JSフレームワーク
• NO SQL DBMS

DBアクセス

• Server JS API
• REST API
• Client JS API

検索結果をJSONで取得することができる。 JavaScriptAPIもある。

Wakanda Studio

アプリの開発をサポートしてくれる。
必須ではないが効率が上がる。

標準技術のみで作成される。

• HTML
• CSS
• JavaScript
• JSON

裏で変なファイルを作ったりはしない。

比較的新しいブラウザしか対応していない。
CSS3をフル活用しているので、IEは9から。

Windows7以降に対応

参加者受付システムの開発デモ

かなりVBライクにアプリ開発が可能。
画面項目とDBの紐付けも簡単に。
JavaScriptの処理書いたらすぐにテスト実行。
プログラミング無しで、リストで選んだら横の詳細欄にその値が出たりも。

websocketでバックエンドプログラムのコンソールメッセージをブラウザに出してみた

竹内佑介さん (株式会社ビーエスピー)

なぜ作ろうと思ったのか

セッション0の分離でコンソールメッセージが見えずらくなる。

Windows2003まではサービスとファーストログオンユーザのユーザセッションが同じだった。
⇒セキュリティ上問題がある。

Windows2008から、サービスとファーストログオンユーザのセッションが分離されたため、Tomcatなんかのログが見ずらくなった。
プロセス間通信とかメッセージ表示アプリとか作ればできるけど大変。

JavaScriptでソケット通信できるって聞いたから、ブラウザ上で見れて便利じゃねと思ったので手を出してみた。
これができれば、いろんなOSやスマホなんかでも見れていいんじゃないか。

サーバーサイドはとりあえず最近よく聞くnode.jsで作ってみた。
シンプルで細かいところまで作れていい。
2,30行程度で、Apacheのような簡易Webサーバーが作れる。
プロセス間通信以外でHTTPリクエストより低い階層でプログラムができる。

構築

バックエンドアプリからnode.jsに値を渡してブラウザへ送る。
バックエンドアプリ⇒node.js間が大変だった。(パイプ通信を使用)
パイプのバッファリング処理で、一定サイズまで値を保存してから出力するため、node.jsで値が拾えなかった。 Websocket通信はたくさんサンプルがあるので、そんなに苦労しなかった。

その他

Websocketは双方向通信なので、逆にバックエンドアプリへコマンドが遅れるんじゃないか。

WebsocketはIE10以上じゃないと使えないので、業務アプリとしては微妙。

ブラウザ開けばすぐにログのtailが見れたら確かに便利かもと思いました。
セキュリティ的な問題もありますが、社内のテスト環境とかで作ったら面白いかもしれません。

グラフ描画JSライブラリ ~サーバ負荷を最小に抑えてグラフを出力する方法~

川田寛さん (html5jえんぷら部 部長と雑用)

なぜグラフ描画？

古典的グラフ描画はサーバーで作成してクライアントへ送信。
これからはデータだけ送信してクライアントで描画にシフト。

フロントエンドのグラフ描画はFlashでもできたけど、AdobeもHTML5へシフトしてる感が否めない。

ライブラリが世の中にわんさかある。
俺が最高のライブラリを選んでやるぜ！
⇒20個くらい試したけど、多すぎて無理ゲー

でも20個試したので紹介します。

jQuery-visualie plugin

IE6も対応
入力がtableタグ

グラフ描画した後もテーブルタグがそのまま残るｗ

実装はCanval+ulタグ
bootstrapと併用するとulタグが競合してデザインが崩れる。
修正あきらめて次へいった。

Sencha Touch Charts

GPL v3(完全に無料じゃない)
入力はJSON
レスポンシブデザインも対応

グラフ描画のパラメータが多い。300行くらい書いたｗ
まぁ慣れれば。。。

値がすべてCanvasに含まれるので分析できない。

グラフはゲームとかと違い構成要素がシンプルなので、Canvasにしなくてもいいんじゃないか・・・

HighchartsJS

描画はSVG
jQueryプラグイン型
プロパティのしては100行程度
SVGなので、Chromeでも要素の解析が簡単

JSONで値が指定できるが、CSSに書く必要がある。。。
保守性とかどうよ

選定

• グラフの機能
  • どんなグラフが使えるか
  • 何次元対応か(見落としがち)
• 項目が長い時のデザイン補正方法
• データの入力方法
  • JQueryライク？JSON？
  • データ生成の生産性
• 描画方法
  • ユーザCSSの影響は？デザイン制限は？
  • プロパティの可視性？デバッグ可能？
• 環境と性能
  • IExx対応と言っていても実際は？

入門 HTML5

HTML5ガイドブック 増補改訂版 (Google Expert Series)