「プロに求められる最新Webスキルとは？」セミナー レポート（後編）
業務システムにHTML5を上手に取り入れるためには？
セミナーの後半は、「業務システムにHTML5を上手に取り入れるためには？」と題してhifive開発班からお話させていただきました。カヤックさんの発表ではキャンペーンやBtoC向けの取り組みなど華やかなHTML5の利用例を紹介いただきました。hifive側のデモとしては、例えば棚割（自販機の中身の配置を決めること）業務の例をお見せしました。パッと見の見た目が地味なものが多く（「使い勝手」といった面では、業務的な観点でいろいろやっていますよ！）、すごくコントラストがありました…。
初めにお見せしたのは、タブレット上での利用を想定した「棚割」のアプリです。従来、この手の業務では紙ベースでオーナーさんと話し合ってきましたが、こちらのデモではタブレットベースでドラッグ&ドロップで配置を変更したり、商品の傾向をグラフで確認することもできるようになっています。グラフはCanvasを使って描いており、HTML5を使ったシステムとなっています。
2つ目にお見せしたのはcanvasを使ったお絵かきの例です。
たとえば、タブレットなどで製品の写真を撮影し、その画像の上に手書きで問題箇所のマークをつける、という業務をイメージした機能デモです。
また、別なデモとして大量のデータをグリッドに描画するものもあります。（※注：データグリッドは現在開発中です。）こちらは、10万件のデータを描画しています。業務システムの要件で大量のデータ表示はよくありますが、単純にデータをすべてクライアントにロード・表示してしまうとメモリーを逼迫してしまったり動作が重たくなってしまいます。そこで画面の表示領域外のデータは表示しない（DOM要素を削除）ようにして大量データをスムーズにスクロール・表示できるようにしています。
また、SVGを利用してノードとエッジからなる「グラフ」を描画する例もお見せしました。こちらは、機器の構成（NW機器、サーバー筐体、VM、OS、などなどの組み合わせ）の依存関係をグラフ構造として可視化したものです。
https://www.youtube.com/watch?v=ijYX4ul4B98
元々Webサーバ上でコードを動かし、HTMLを描画するだけだったWebシステムですが、最近ではJavaScriptによってクライアントサイドで動作するシステムが増えています。それは単純にコードの量が増えるというだけでなく、JavaScriptがすべき役割の増大でもあります。その結果として、業務システムなどの場合、多人数での開発時において効率化する仕組みや各人員の開発部分による影響範囲の最小化が必要になってきます。
ことJavaScriptにおける問題点としては、スコープを意識しない記述が可能であるために関数や変数のコンフリクトや上書きを招いてしまったり、コードの複雑化によって通信処理と画面描画処理など異なる種類のロジックが同じコード内に入り込んでしまって再利用性の低下を招くことが多々あります。
そうした背景があり、hifiveというフレームワーク（プラットフォーム）を開発しています。hifiveはHTML5を活用した企業Webシステム開発のためのプラットフォームになります。ライセンスはApache License 2.0であり、商用システムにも適用できます。コンセプトとしては「使い始めるための敷居を低く」「Webの標準的な仕組みから逸脱しない」「開発サイクルをトータルサポート」といった点が挙げられます。
いわゆる業務システムの一般的な特徴としては以下が挙げられます。
企業のIT戦略と課題
一般的に保守管理、運用にお金がかかるという問題があります。本来戦略に投資すべきであるのに、なかなかそれがうまくいっていない現実があります。
開発は多人数
業務システムはオフショアも含めて多人数で分散して開発を行います。さらに既にある既存システムを含め、外部システムとの連携も多くなっています。そして一般的に業務システムはウォーターフォール型開発が多いと思われがちですが、最近ではスモールスタートでアジャイル型な開発も多くなっています。
運用・保守
業務システムは数年から場合によっては10年以上も使われます。これはOSのライフサイクルを超えて運用されます。開発メンバーも運用を続けていく中で変わっていくのも当たり前です。
こういった前提がある中、HTML5のような新しい技術を取り入れていくメリット（期待）は何でしょうか。大きいのはHTML5の高い表現力を使いたいというニーズがあります。また、ブラウザ間の動作誤差がなくなり、HTML5に対応したブラウザであればどれも同じ結果が得られるのを期待されます。さらにスマートデバイスを使った営業、販売業務の強化という視点も期待されているポイントです。
期待とは逆に懸念という点も挙がってきています。まずスケジュールされた技術ロードマップがなく、将来の見通し、方向性を予測しづらいという問題があります。また、現時点ではまだ大規模システムの実例が少なく、開発ノウハウが多くありません。そしてHTML5を実装しているブラウザ間においても実装具合の誤差があり、未成熟な部分が残っています。
ブラウザの進化は加速しています。例えばMicrosoftは来年（2016年）1月からIEの最新版だけをサポートするという方針を決めました。また、Windows 10からはIEとSpartanの2つのブラウザを搭載予定となっています。スマートフォンにおいてもAndroid 5.0ではWebViewをOSから切り離すようになりました。これによりAndroidの進化より早く、WebView単体でバージョンアップできるようになります。
IEはバージョン6の時代から5年以上も使われており、2007年にようやくIE7がリリースされています。その後Google Chromeが登場した後、FirefoxやOperaなどは開発スピードを速めており、6週間ごとのバージョンアップというポリシーになっています。これはWindows 10のSpartanにおいては継続的なバージョンアップを行えるようにしていく方針となっています。
この流れが一般化していく中で考えなければならないのは、業務システムにおいてこれまで一般的だった動作保証ブラウザを固定するといった考えや、10年以上も運用されるシステムに対してバージョンアップしていくブラウザをどう対応させていくかという考えです。
これを可能にする方法としては、テストの自動化があげられます。ブラウザがバージョンアップした時に動作に不具合がでないかテストしたり、もし不具合が出た時にも気づける仕組みを用意しなければなりません。QUnitやJasmine、Selenium、Appiumといったテストをサポートする仕組みも揃ってきています。
もう一つ、業務システムにおいて大事なキーワードがセキュリティです。HTML5で追加された機能を使った攻撃が既に知られています。例えばvideoタグのonerrorハンドラを使った攻撃です。また、通信は常時SSL化の流れになっています。そしてオリジンを理解する必要があります。元々Webブラウザは同じサイト内のファイルに対して自由に読み書きできるという概念があります。しかし最近では別なサーバとの通信も当たり前になっています。そうした中、外部サーバにアクセスするとデータが取り出せなかったり、同サイト内の動作と異なってくる場合があります。そのためオリジンを正しく理解し、開発する必要が出てきています。
最後に以下のような質問が挙がっていました。
Q. 業務システムは一般的に社内LANの中に構築されるのでセキュリティにおいて常時SSL化というのが違和感がある？
A. 最近ではスマートデバイスを使って外出先から業務システムへアクセスする要件も増えています。また、プロキシサーバを使ってアクセス制限を行うなど複数の技術を組み合わせてセキュリティを担保する動きは既にあります。
Q. 今後クライアントでの処理が増えていく中でエラーのハンドリングが難しくなっていかないだろうか？
A. 開発者ツールが高品質になってきたこともあり、エラーの監視がしやすくなっています。そのためエラーをきちんと監視し、サーバに飛ばすなどの仕組みが作りやすくなっています。
資料は下記にて公開しています。エンタープライズにおけるHTML5開発の注意点などをぜひチェックしてください。
hifive開発者ブログ 
コメントは受け付けていません。