業務アプリにおけるHTML5の効果的導入

概要

html5_logo 一般消費者向けWebサイトの構築では、HTML5の活用がすすんでおり、見栄えや使い勝手の良い画面を、効率良く開発できるようになりました。
一方、企業向け業務Webアプリについては技術的課題が多く、これまでHTML5の導入は困難とされてきました。しかし、技術的課題は解消しつつあります(次項で説明)。これからは、他の技術と同様に導入コストに見合う効果が問われる段階になってきます。

本記事では、業務アプリにおいてHTML5の効果的な導入ステッブについて解説します。

1.技術的障壁の解消

まず、業務アプリ開発におけるHTML5の現状把握をします。下記のような技術的障壁は解消しつつあります。

1)WebブラウザがHTML5に未対応
業務アプリの安定稼動のため、HTML5未対応の古いバージョンのブラウザを利用している企業が多くあります。しかし、来年4月以降、Internet Explorer 11未満はサポート切れになるため、HTML5に対応したブラウザが前提になります。

2)JavaScript特有の実装スキル
HTML5の開発言語はJavaScript限定でした。JavaScriptのオブジェクト指向開発はJava等とは全く異なるため、新たなスキル取得が必要でした。しかし、TypeScriptの利用で、Javaと同じクラス定義による開発が可能になりました。型定義、名前空間、実行前のコードチェックなど大規模開発に必要な機能も提供され、Java等の経験者も抵抗なく利用できます

3)開発効率が悪い
JavaScriptには標準のクラスライブラリが付属しません。自社でライブラリを開発したり、オープンソースのライブラリを組み合わせたり、追加の作業が発生していました。しかし、Angular2等の開発フレームワークにより、アプリ開発に必要な機能(クラスライブラリ、MVC構造、自動テスト等)が提供され、開発効率が大幅に改善しました。

2.サーバー集中から分散処理へ

技術的な課題は解消しつつありますが、HTML5はブラウザで利用する技術です。HTML5の本格的導入は、サーバー集中処理から、ブラウザで分散処理するアーキテクチャの変更を意味します。アプリの移行作業や設計方針、運用の変更も必要になります。

実際は、現状のサーバー集中型のままHTML5を一部活用するレベルから始め、徐々に分散型に移行してHTML5のフル活用を目指すのが現実的です。

HTML5の効果的導入

弊社では、以下のような段階的導入を推奨しています。

STEP-1.画面単位の導入

HTML5導入トライアルの位置づけです。現在のシステムの一部の画面にHTML5による機能追加を加えたプロトタイプを作成します。ユーザや管理者への導入効果アピールと、開発環境・開発ノウハウの基礎スキルを獲得します。追加機能のお勧めが無限スクロールです。手軽に導入できて、誰でも効果が実感できます。
・対象範囲
一部の画面にHTML5による機能を追加します。
・導入効果
操作性の大幅改善が確認できます。例えば無限スクロールの場合、大量データを短時間で目視検索できます。
・補足
無限スクロールは、業種・業務を問わず業務アプリに含まれるリスト表示画面に適用でき、サーバー集中型のままで実装できるので開発工数は最小限で済みます。
[参考]
無限スクロールの実装
/201608081810e/

STEP-2.アプリ単位の導入

アプリ単位の導入であれば、HTML5の導入効果を顕著に示すモバイルアプリから始めるのがお勧めです。モバイルに要求される、迅速な画面切り替え、ネットワーク圏外での利用を実現した上で、Webアプリのメリットであるクロスプラットフォームでの動作、アプリバージョンの集中管理が可能です。モバイルOS用のアプリ開発とくらべ、コストを大幅に削減できます。
・対象範囲
モバイル向けアプリ開発
・導入効果
ひとつのソースコードで、スマートフォン・タブレット・PCすべてに対応できるため、プラットフォームごとの開発と比べ、大幅なコスト削減ができます。
・補足
サーバー集中型のままでも運用可能ですが、軽快な操作感やネットワーク圏外対応ができないため、分散型で開発します。すでにモバイルOS用アプリを導入済であっても、保守・運用コスト削減のためにWebアプリへ移行することもあります。

STEP-3.全面導入

Webアプリ全体の分散型への移行で、コスト削減、システム全体の機能と性能向上を実現して、大きな導入効果が期待できます。
・対象範囲
全システム
・導入効果
Webの根本的制約から解放され、コスト削減が期待できます。
・モバイルで重要なネットワーク圏外のアプリ利用
・通信完了を待つことなく瞬時に行われる画面遷移
・サーバーとネットワークの負荷軽減によるインフラコストの削減
・補足
システム基盤再構築を検討中の場合は、このステップから始めることもあります。

弊社では、「Angular2とTypeScriptによるモダンWeb開発セミナー」を開催します。
Angular2の実践的な知識とノウハウを習得できます。
/hp/semi/modern/

カテゴリー: モダンWeb