HTML5 Enterprise Seminar 2017レポート（1）「hifiveで実現するエンタープライズHTML5 Webアプリケーション開発」

先日行われましたHTML5 Enterprise Seminar 2017のセッション内容について紹介します。幾つかのセッションは非公開となっています。今回はまずhifiveチームの下田による「hifiveで実現するエンタープライズHTML5 Webアプリケーション開発」の内容を紹介します。

2008年、今から10年前にiPhone 3Gが日本で発売されました。この年にW3CからHTML5の初期草案が発表されました。そして、そこから6年経過した2014年にHTML5が正式に勧告となりました。これによって互換性、表現力、さらにパフォーマンスの向上が期待されました。そして現在でもWeb Paymentsのような仕様を含めてWebの世界はどんどん拡大しています。とは言え、業務システムという視点で考えると、必要となる機能は備わってきたのではないかと感じています。

そして現在のWeb業務システム開発がどうなのかという視点で考えた時に「モジュール化技術」が一つ注目に値します。アプリケーションが複雑化してきた中で、フレームワークやライブラリが揃ってきてはいるものの、Webブラウザ自体の仕様として大規模なシステム開発に対応できるようになったり、JavaScriptという言語自体も変わりつつあります。Web ComponentsのようなWebブラウザネイティブの機能として部品化を推し進めていくための仕組みができつつあります。

次にブラウザのバージョンアップについて紹介します。2000〜2005年くらいまではかなり長いスパンでバージョンアップが行われてきました。しかし最近では短いものでは6週間に一回バージョンアップを繰り返すようになっています。バージョンはもはや意味がなく、継続的に開発が続けられるような時代になってきています。HTML5、Webブラウザともに継続的に少しずつ変わっていくのが当たり前になってきました。そうなった時、私たちのような利用する側としては継続的な変化に対応し続けられる仕組みが必要になってきます。

業務システム開発とクライアントのリッチ化

業務システム開発をなぜ行うのかと言うと、IT投資における維持費用の抑制を目的とし、攻めの投資を行っていくためです。分散、多人数での開発が増えており、オフショアなども当たり前になっています。さらに最近ではスマートフォン向けなどはスモールスタートやアジャイル開発を実践するケースも増えています。さらに運用、保守という観点で見ると、業務の変更に伴って数年から10年以上も改造され続けていくのが業務システムです。

クライアントがリッチ化するのに合わせてJavaScriptの役割が増えてきています。これまではバリデーションくらいだったのが、一部の業務ロジックもJavaScriptで実装するようになってきています。その際には何らかのフレームワークやライブラリは使っていきますが、結果としてJavaScriptのコード量も増えていかざるを得ません。つまり量も質も増加しています。そこで必要になるのがどこに何を書くのかといった分割、整理するための仕組みです。それによってメンテナンス性を向上させたり、多人数での開発を可能にしていきます。

これを開発のフェーズ毎に見ていきたいと思います。これはクライアントサイドだから起きる問題という訳ではありませんが、元々サーバサイドで考えてきた問題が、クライアントサイドでも考えなければならなくなってきました。

そういった背景もあり、当社ではhifiveの開発を行っています。

hifiveとは？

hifiveは次世代Web標準を開発した企業Webシステム開発のためのプラットフォームになります。2012年04月にバージョン1.0を公開しています。そして実際の案件の中で使いながら成長を続けています。そして当社にとってははじめての自社開発オープンソース・ソフトウェアとなっています。コンセプトは使い始めるための敷居を低く、Webの標準的な仕組みから逸脱しない、開発サイクルをトータルにサポートするといった点を掲げています。他にも業務システムということもあって、着実な進化と旧バージョンのサポートなども考えた上で開発に取り組んでいます。

hifiveはフレームワークではなくプラットフォームという風に説明しています。フレームワークだけでなく、チャートやグリッドなど業務向けライブラリも多数提供しています。その他開発支援ツールや書籍、オンラインドキュメントなども提供しています。

コアフレームワークはWebブラウザ上で動作するJavaScriptコードの構造化をサポートしています。なるべく薄い実装にしていて、ネイティブの言語で解決できることはなるべく任せるようにしています。そしてバージョンアップのスピードや互換性維持については十分に配慮しています。

次にライブラリですが、例えばデータグリッド、グラフ構造、チャート、ドローイングなど業務システムでよく使われる大量データの可視化部品など実装頻度の高いUI部品を提供しています。古いブラウザでも使えるよう、チューニングされた部品群で提供しています。

後は開発支援するツールとして、テンプレートエディタ、AP構造視覚化ツール、マルチデバイス対応テスト支援ツール（Pitalium）などを開発しています。

実際に作られたアプリケーションについて

ここから実際の機能について細かく紹介していきます。まず一つ目はフォーム入力、帳票についてです。フォーム入力においてはタブ遷移の順番を適切に制御したり、エンターキーでの移動も行えます。もちろん入力値のバリデーションやエラー表示も行えます。さらにオートコンプリートや入力に応じた選択可能項目の変更、ファンクションキーによるショートカットなどもサポートしています。

次に帳票を表示する部分ですが、非常に要望が多いです。究極的にはExcelのような画面を求められます。ヘッダー固定、ソート、集計行などの機能です。さらにhifiveでは行数が増えた場合にもパフォーマンスが維持できる仕組みも取り入れています。

さらにモバイル活用があります。タブレットやスマートフォンの機能を活かした入力を提供します。例えばタッチ操作、GPS、カメラなどです。

これは一例ですが、タブレット向けに作ったWebアプリケーションになります。店舗巡回指示アプリとしていまして、現場を回ってその報告を行うものになります。地図が表示されていますが、これはHTML5のGeo Locationを用いています。さらに要望で多いのが写真・動画撮影であったり、さらにそこに手書きで情報を書き加えられる機能です。

ここで取得したデータはサーバに送られ、デスクトップでも同じデータが確認できるようになっています。なお、今回のWebブラウザはIE11となっており、ちゃんと動作するのが分かってもらえるかと思います。IE11だから、と諦めてしまう声も多いのですが、ちゃんと実現できます。

次にデータ視覚化です。チャート、グラフ構造、データグリッドなどになります。3Dについても取組中です。業務システムでは大量のデータを描画すること、さらに一つの画面の領域の中に多くの情報を詰め込む必要があります。柔軟なレイアウト構造を可能にする部品も提供しています。

hifiveではパフォーマンスに注力しているのですが、その概念を紹介します。グラフやチャートについてはSVGを使っています。さらに大量のデータを表示する場合は見えている部分だけを描画しており、それ以外の部分は消すようにしています。スクロールを行った場合には表示範囲外のオブジェクトについては非表示となっています。さらにイベントハンドラを最適化しています。

こういったことを実現するためにパフォーマンスのベンチマークを取っています。幾つかの方法があるのですが、一番ベストなものを選択するようにしています。同様に、3Dでも大量データの可視化には取り組んでいて、10,000個の表示時でも15fps程度で表示可能です。hifiveではこのようにパフォーマンスに特に注意して取り組んでいます。

hifiveの講演については、logmiでも記事にしていますので、ぜひご覧ください。