Enterprise HTML5 Seminar 2017レポート（2）「えっ！ここまで出来るHTML5のフロントエンド。」

先日行われましたEnterprise HTML5 Seminar 2017のセッション内容について紹介します。幾つかのセッションは非公開となっています。今回はオークネット社、オークネット・アイビーエス社による「えっ！ここまで出来るHTML5のフロントエンド。」の内容を紹介します。

我々はこれまでにHTML5を使って業務システムを提供してきています。そこで今回はその試行錯誤であったり、その歴史について紹介したいと思います。

まず最初に事例を紹介します。こちらはリアルタイムオークションになります。車両の売買に関するオークションシステムになります。

百烈商談というのは一気に100台の車両情報をまとめて表示して商談を進めるというもので、これはHTML5とWebSocketを使って構築されています。そして車両を選択すると、より細かい情報がリアルタイムで確認できるようになっています。

次は従来型のオークションシステムをクラウド、HTML5に載せ替えたバージョンで、こちらもWebSocketを使っています。また、フレームワークとしてhifiveを採用しています。

さらに車輌検索システムもHTML5とWebSocketを使った実装となっています。同様に自家用車だけでなくトラック向けの車両検索システムも構築しています。

次は商談の事例です。チャット形式での商談システムをオンラインで提供しており、これまでの電話ではなくチャットによって商談が進められるようになっています。

その他、デバイス検査工程システム、花の受発注・販売管理システム、ディープラーニングによる車輌画像自動判定システム（KONPEKI）も開発しています。

続いてHTML5への取り組みの歴史を紹介します。

そもそもHTML5への取り組みをはじめた切っ掛けはWeb版のリアルタイムオークションを作ろうと思ったからです。2011年当時はJava版のフロントエンドでサービスを提供していましたが、起動時間が遅い、Javaのアップデートが煩雑、スマートフォンへの対応ができないといった課題がありました。こうした問題をHTML5であれば解決できるのではないかと考え、取り組み始めました。

なぜHTML5を使ったのか、についてはHTML5が提供する機能の一つにWebSocketがありました。この新しい通信プロトコルを使えば、Web上でリアルタイムな情報表示が可能であると考えたからです。WebSocketの前提条件としてHTML5が必要でした。

取り組みを開始したのは良いのですが、2011年当時開発者を探すことすら難しい状況でした。100社近い開発会社にコンタクトを取り、面談を行いましたがHTML5とJavaScriptを理解している技術者を見つけることはできませんでした。その後、半年掛けて国外に人材を求めることにしました。私たちが選んだ国はフィリピンでした。フィリピンはFacebook利用率も高く、ハッカーも多いと言われています。フィリピンで人材を集め、教育してHTML5に関するナレッジを培っていきました。

ただ、デザイナーに関して運良く、高いスキルを持った方に出会うことができました（Useful Design 白銀さん）。出会うきっかけとなったのが、2012年当時に作ったリアルタイムオークションのプロトタイプが次の画像になります。

この中央部の円部分はくるくると回るのですが、これをCSS3だけで実装できたのが前述の白銀さんだけでした。そこで彼を中心にWebサイトのデザインを行い、システムの開発はフィリピンで行うという体制ができあがりました。

そこから5、6年経ち現状の技術的課題とその解決法について紹介します。

まず、なぜWebアプリケーションという選択をしたのかについてです。ネイティブアプリ化という選択肢もありますが、Webの場合は「クロスプラットフォーム対応」「バージョンアップが容易」「アプリケーション起動までの時間が短い」といったメリットがあります。

そしてHTML5化によるメリットですが、まずHTMLだけで表現できる幅がとても広がりました。さらにWebSocketという新しいプロトコルが採用できたというメリットがあります。そしてタグが整理され、全体を統一することができました。

HTML5による表現力ですが、Canvasタグによるグラフィックス表現があります。さらにvideo/audioタグを使えば動画、音声出力も可能です。そしてWebStorageやGeo Location、Fileといった新しいAPIが活用できるようになったのは大きなメリットです。HTML5では新しいタグも数多く登場しており、それらを使うことで文書構造が簡潔になり、CSS3によって可読性やメンテナンス性が向上しています。

逆に苦労した部分もあります。例えば使用するHTML5の機能によって対応ブラウザが異なることです。一番辛いのはIEです。また、表現力が増したことでフロントエンド側の負荷が増加し、イベント処理や画像処理速度などに影響が出ます。そして前述の通り、HTML5を熟知しているエンジニアを集めるのに苦労しました。

これらの問題の解決手段として、まず対応ブラウザの違いについては要件定義の時点で対応ブラウザを明確にしなければなりません。HTML5だけで解決できない場合はJavaScriptで実装し、細かく検証作業を行う必要があります。そのためにモックアップを作成し、その上で検証を続けました。

クライアント側の負荷については、画面上に表示されない描画処理をなるべく削ることや、SPA（シングルページアプリケーション）化、そしてクライアントとサーバ間の通信量を減らすことによって負荷を軽減しています。

これはテストの画面なのですが、右側に並んでいるリスト部をお客様によっては1000件ほど登録することがあります。それを単純に描画してしまうと速度が著しく低下してしまいました。そこでスクロールを設けて、表示していない部分は描画しないようにすることで負荷を下げています。

SPAにするとレンダリング処理が画面上の更新される部分のみになりますので、更新されない部分はそのまま描画し続けることができます。これによってページがちらついたり、遷移が軽くなるといったメリットがあります。

クライアントとサーバ間の通信量対策については3つ解決手段があります。1つはWebSocketの利用によってメッセージサイズを縮小しています。さらにJavaScriptの圧縮や画像最適化によって通信量を軽減しています。さらに通信回数についても画像の結合などによって最適化しています。

人材に関する問題は解決することができず、自社で教育体制を築くことになりました。ただし高速なWebアプリケーションを開発するためのガイドラインを自社で作成し、技術の標準化を行っています。

まとめとしてですが、HTML5を業務システムで使うメリットはWebフロントエンド側で様々な処理が可能になったということです。サーバとの通信がなくとも処理できることが増えたため、ネットワーク負荷が軽減されます。画像加工でさえWebフロントエンドで行うことができます。そしてもう一つはなんと言ってもリアルタイムな情報表示が可能なことです。株価、金融情報、メッセージ交換、IoTのセンサーデータ表示など幅広い分野に応用できるでしょう。

Q. hifiveを使っていて、良い点はなんですか？

公式ドキュメントが日本語で書かれています。英語で書かれている場合、私が理解できたとしてもそれを各メンバーに熟知してもらうのは困難と思われます。また、不具合が発生した時の調査がしやすかったという点が挙げられます。

Q. 2011年当時、どうやって周囲にHTML5/WebSocketでいこうと説得したのでしょうか？

元々は研究開発の一環ではじまっています。また、周囲に実際に試してもらうためにゲームをたくさん作りました。もちろんオークションシステムのモックアップも作っています。そうした体感を通じて利点を周知していった形です。