読者です 読者をやめる 読者になる 読者になる

業務システムエンジニアのための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タグ

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

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

Sencha Touch Charts

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

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

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

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

HighchartsJS

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

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

選定

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

入門 HTML5

入門 HTML5

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

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

  • 作者: 羽田野太巳,古籏一浩,太田昌吾,小松健作,伊藤千光,吉川徹
  • 出版社/メーカー: インプレスジャパン
  • 発売日: 2012/10/19
  • メディア: 単行本(ソフトカバー)
  • 購入: 3人 クリック: 6回
  • この商品を含むブログを見る