Webアプリケーションなどでフォーム入力を行ったり、Ajaxを使った処理の結果を表示することは多々あるでしょう。しかし、ページをスクロールしていたりすることがあるため、適切な場所がどこか分からないことがあります。
そんな時にはフローティングで使える通知ライブラリが便利です。エラーやウォーニング、サクセスなど多数のパターンに対応したライブラリを紹介します。
Notify.js
jQueryプラグインとして使える通知ライブラリです。メッセージの種類によって背景色が変化します。基本は右上ですが、ページの上下左右を指定したり、特定のDOMの横に表示することもできます。
Notie – A Javascript Notification Plugin
画面上部に幅100%で表示されますのでインパクトが強いです。さらに確認のボタンを出したり、インプットフィールドを追加することもできます。デザインはフラットです。
naoxink.hol.es/notifIt/
横や上からスライドしながら表示されます。表示する大きさは自由に設定ができます。アニメーションすることで、より注意を引きつけられるでしょう。
messenger
基本は右下に出るタイプとなっています。小さなアイコンとメッセージという組み合わせで、シンプルな表示となっています。
humane.js
基本は右下にさりげないアニメーションとともに表示されます。その他画面中央や上に出すと言った指定もできます。
HTML iOS Notifications
iOS風の通知表示が特徴です。プッシュ通知風にメッセージが出ます。
alertify.js – browser dialogs never looked so good
上からスライドしながら表示されたり、右下にバナーを出したりできます。アラートやプロンプトの代わりに使うこともできるでしょう。
noty – a jQuery Notification Plugin
jQueryプラグインの通知ライブラリです。アニメーションしながら表示されます。デザインはテキストとアイコン表示となっています。アニメーションがこっています。
Notifier.js Examples
アイコン＋メッセージという形の通知が表示できます。表示場所は上下左右に細かく指定できます。
通知を上手に使うと、JavaScriptの特性である非同期処理と絡めてメッセージングができるようになります。ユーザがすでに別な場所まで移動してしまっていたとしても、常時画面上部などに表示できるのでユーザビリティが高くなるでしょう。
hifiveが提供している業務システム開発で使えるUIライブラリの紹介です。今回はArrowBoxを紹介します。ArrowBoxは指定したDOMの上下左右、任意の場所に対してツールチップを出すライブラリです。
今回はクリックした場所にツールチップを出す方法を紹介します。（前回の記事も合わせてご覧ください。）
動作デモはこちらで確認できます。使ってみているところは下の画像を参照してください。
使い方
HTMLはとてもシンプルなものです。ただし、h5arrowboxというIDのDOMを用意しているのが特徴になります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="sampleDiv"> | |
| <h2>この中をクリックするとツールチップが出ます</h2> | |
| </div> | |
| <script type="text/ejs" id="h5arrowbox"> | |
| <div class="h5arrowbox"></div> | |
| </script> | |
| <script type="text/ejs" id="message"> | |
| <div><p>吹き出しサンプル</p><p>吹き出しサンプルです</p><button class="removeArrowBox" style="float:right">OK</button></div> | |
| </script> |
そして、JavaScriptのコントローラは次のようになります。view.registerが特徴です。そして、 this.__arrowClassを追加してあります。このクラスはツールチップの独自のクラス名としておきます。このクラス名があるかどうかで、ツールチップが表示済みかどうかを判定します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| var controller = { | |
| __name: 'PageController', | |
| __arrowClass: 'position-set', | |
| _arrowboxController: h5.ui.components.arrowbox.ArrowBoxController, | |
| __ready: function() { | |
| }, | |
| } | |
| }); |
そして、ボタンをクリックした時のイベントを作成します。この時の処理は2つあり、まずすでに表示しているツールチップがあれば、それを消します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '.sampleDiv click': function(context, $el) { | |
| // 既にposition-setクラスを持つ吹き出しがあったら削除する | |
| var $arrowbox = this.$find('.position-set'); | |
| // 吹き出しの要素からArrowBoxインスタンスを取得 | |
| var preArrowbox = this._arrowboxController.getArrowBoxFromElement($arrowbox); | |
| // 吹き出しをdispose | |
| preArrowbox && preArrowbox.dispose(); | |
| : | |
| }, |
そして後半でツールチップを表示します。この時、ポジションを指定することで表示場所が指定できます。ポジションは context.event.pageX/context.event.pageYで取得できます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '.sampleDiv click': function(context, $el) { | |
| : | |
| // 第2引数でクラスを追加する | |
| var arrowbox = this._arrowboxController.create(this.view.get('message'), { | |
| cls: 'position-set' | |
| }); | |
| var x = context.event.pageX; | |
| var y = context.event.pageY; | |
| arrowbox.show({ | |
| position: { | |
| left: x, | |
| top: y | |
| } | |
| }); | |
| }, |
さらに吹き出しを消すためのイベントも作成します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var controller = { | |
| __name: 'PageController', | |
| : | |
| '.removeArrowBox click': function(context, $el) { | |
| // 吹き出し要素の取得 | |
| var $arrowbox = $el.parents('.h5arrowbox'); | |
| // ArrowBoxインスタンスの取り出し | |
| var arrowbox = this._arrowboxController.getArrowBoxFromElement($arrowbox); | |
| // 吹き出しの削除 | |
| arrowbox.dispose(); | |
| } |
このような実装によって、ツールチップがクリックした場所に出せるようになります。
動作デモはこちらで確認できます。ヘルプとしてぜひ使ってみてください。
hifiveはフレームワークですが、業務システムでよく使われるUIについてはライブラリとして提供しています。今回は操作中によく表示されるポップアップ、モーダル表示を行うポップアップライブラリを紹介します。
今回は表示場所を調整する方法を紹介します。実際に動いているデモはこちらにあります。アニメーションは次のようになります。
使い方
まずpopup.jsとpopup.cssを読み込みます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
次にHTMLを次のように記述します。ボタンを押したらポップアップが表示されます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="sample-wrap"> | |
| <label>メッセージ表示</label><br> | |
| <button class="top-popup">開く</button> | |
| </div> |
JavaScriptの実装は次のようになります。ボタンをクリックされた時のイベントで、 h5.ui.popupManager.createPopup を実行します。タイトル、本文を指定します。その後、 setPosition メソッドで表示場所の指定を行い、さらに setContentsSize を使ってポップアップのサイズを指定します。最後に show メソッドを実行します。
setPosition を実行する際に、2つ目の引数で指定する点がポイントです。今回は top: 30 としていますので、上から30px下に表示されます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| var pageController = { | |
| __name: 'PageController', | |
| 'button.top-popup click': function(context, $el) { | |
| var popup = h5.ui.popupManager.createPopup('sample', '位置指定ポップアップ', 'サンプルです'); | |
| popup.setPosition(null, { | |
| top: 30 | |
| }); | |
| popup.setContentsSize(250, 50); | |
| popup.show(); | |
| }, | |
| }; | |
| h5.core.expose(pageController); | |
| })(jQuery); | |
| $(function() { | |
| h5.core.controller('body', PageController); | |
| }); |
実際に動いているデモはこちらにあります。JavaScript標準のアラートに比べて表示のカスタマイズや細かなハンドリングができますのでぜひお使いください。
先日行われましたEnterprise HTML5 Seminar 2017のセッション内容について紹介します。幾つかのセッションは非公開となっています。今回は日本マイクロソフト株式会社 エバンジェリスト物江 修 氏による「HTML5 と Visual Studio tools for Apache Cordova ではじめるモバイルアプリ開発」の内容を紹介します。
本日様々な方に語ってもらっていました、HTML5を使ってスマートフォンアプリを開発していこうという話をします。この話の中でApache Cordovaというソフトウェアを使うのですが、さらにそれを快適に使うためのVisual StudioのCordova開発環境、そして検証環境についてお話しします。
まずApache Cordovaについてです。Apache CordovaとはHTMLとJavaScriptを使ってスマートフォンやタブレットアプリを開発できるフレームワークになります。Webブラウザで実行するのに比べて、プラットフォームが持っているリソース（例えば予定表やカメラ、連絡先、バイブレーションなど）へアクセスできるようになります。そして作成したソフトウェアはスマートフォンアプリになりますので、アプリストアから配布できるようになります。
さらに大きなメリットとしてシングルコード、一つのコードでAndroidやiOSといった複数のプラットフォームに対応させることができます。通常、AndroidであればJava、iOSであればObjective-CやSwiftを使ってそれぞれのプラットフォーム向けに言語を分けなければなりませんが、Apache Cordovaであれば使い慣れたWeb技術だけで両プラットフォームに対応したアプリが開発できます。
Apache Cordovaは元々PhoneGapと呼ばれていました。ニトビソフトウェアという会社がオープンソースで開発していましたが、2010年Adobe社が買収しました。PhoneGapは今もAdobe社が保有していますが、そのソースコードをApache財団に提供し、Apache Cordovaとして開発が続けられています。Cordovaを使うとiOS/Android/Windowsなどのアプリケーションが開発できます。
PhoneGapではいわゆるハイブリッドアプリと呼ばれる仕組みになっています。WebViewを使ったHTML/JavaScriptで作られたWebアプリケーションをネイティブコードでラッピングし、動作します。さらにプラグインと呼ばれるネイティブコードが書かれた仕組みを使うことによってプラットフォームの持つ様々なリソースにアクセスすることができます。昔はパッケージドアプリと呼ばれる、アプリ内にあるファイルしか呼び出せなかったのですが、最近ではホスティッドアプリというWebサイトで提供されているコードも使えるようになっています。これによってメンテナンスをWebサイト側だけにまとめられるようになっています。
続いてApache Cordovaの開発に際してVisual Studioがなぜ良いのかという話をしていきたいと思います。Visual Studioはマイクロソフトがリリースしている統合開発環境になります。かつてはWindowsプラットフォーム上で動作するアプリやドライバー、Webシステムなどを開発するのに用いられてきましたが、現在はiOSやAndroidアプリ開発などマルチプラットフォームで動作するソフトウェアを開発できるようになっています。さらに最近では.NET Coreをオープンソース化したことで、macOSやLinux上でも.NETアプリが実行できるようになっています。
そしてCordovaに対してですが、Visual Studio向けにTools for Apache Cordovaを提供しています。これはCordovaビルド環境、プロジェクトテンプレート、シミュレータ、macOS用リモートエージェントなどが合わさったツールになります。つまりTools for Apache Cordovaを使えばCordova向けの開発がほぼまかなえるようになっています。
一番大きいのはCordovaビルド環境ではないでしょうか。通常はNode.jsやJava、Android SDK、Cordovaのインストールが必要になります。さらにそれぞれのライブラリについて、アップデートを管理しなければなりません。Visual Studioを使うと、これらのインストールをGUI上でまとめて行ってくれるようになります。アップデートの管理もVisual Studio上でまとめて行えます。
どういったものがビルドできるかと言いますと、Android 2.33+（4.4推奨）、iOS6以上、Windows8/8.1、Windows Phone 8/8.1、Windows 10となっています。ビルドはAndroidまたはWindowsアプリ、デバッグについてはAndroid 4.4以上、Windows 10、Windows 8/8.1（Phone含む）に対して行えます。最新の環境に対応していると言えます。iOSについてはmacOSでしかビルドできないという問題はありますが、Cordova向けの開発では一つの環境に対してきちんとデバッグを行っておけば、他の環境に対しても殆ど問題になることはありません。
エミュレータについては、AndroidはHyper-Vを使ったエミュレーション機能に対応しており、実際の端末に近いテストが行えます。もっと軽い動作確認用としてはRippleという仕組みを使ったエミュレータも用意しています。iOS向けにはリモートエージェントをmacOSにインストールすると、Visual StudioからmacOS上のiOSシミュレータに信号を送ってコントロールできるようになります。従ってmacOSにWindowsの仮想環境をインストールしている場合、一台でVisual Studioを使った開発が実現できるようになります。
後はHTML、JavaScriptさらにプラグインに関しては優れたコード補完が組み込まれています。JavaScriptは大文字小文字を区別しますし、存在しないプロパティに対してアクセスしてもエラーにはなりません。そうしたミスを防ぐためにもコード補完が役立ちます。
さらにCordovaアプリからスマートフォンやタブレットのハードウェアリソースにアクセスするためにはプラグインを使います。このプラグインを使うためにはXMLを編集する必要があるのですが、Visual StudioだとGUIで設定ができます。かつプラグインのIDやGitリポジトリから取得できるので開発生産性が高く、ミスが少ないのが利点です。
そしてここから実際の開発を行うデモを紹介してくれました。今回は特に既存のSPA（シングルページアプリケーション）からスマートフォンアプリにどう変換するかについて重点が置かれていました。
Visual Studioを使うと既存のWeb資源を簡単にスマートフォンアプリに展開できますのでぜひ試してみてください。
最後に検証環境について紹介します。まずChromiumをベースにしたRippleという環境があります。さらにHyper-Vを使ったエミュレータで、こちらはハードウェアをエミュレートするのでより高度な検証が可能です。さらにアシアル株式会社が提供するMonacaではMonacaデバッガーというアプリがあります。Monacaではビルド環境をクラウドで提供しており、WindowsでもiOSアプリの開発、ビルドができるようになっています。Monacaデバッガーでは開発者ライセンスを持っていなくとも、Visual Studioで作ったコードを実機で動かせるようになります。さらにWindows Phone用のエミュレータも用意されています。このエミュレータではSDカードへのアクセス、位置情報、ネットワークの状態、バッテリーなど様々な状態を変更してテストを行えるようになっています。
初期では2種類しかインストールされていませんが、Visual Studioエミュレータ for Androidというソフトウェアを起動すると、様々なエミュレータが表示されます。Androidのバージョンや機種ごとにダウンロードして試すことができます。
Visual Studioを使いますとApache Cordovaを使ったスマートフォンアプリが簡単に行えるようになります。Apache Cordovaは本日見てきた様々なセッションの中で語られていたHTML5を使ったアプリケーションをWebブラウザだけではなく、スマートフォンのアプリとして幅広く使えるようになります。例えば業務アプリなど、スマートフォン向けのちょっとしたアプリを作る際にも、高度なプログラミング言語を覚える必要なく、すでに知っているWeb技術で開発できるようになります。
本セッションの資料はSlideShareで公開されています。こちらもぜひご覧ください。
先日行われましたEnterprise HTML5 Seminar 2017のセッション内容について紹介します。幾つかのセッションは非公開となっています。今回は特定非営利活動法人 LPI-Japan 和田 真輝様による「IT企業/IT技術者のためのHTML5 さらなる優位性の築き方」の内容を紹介します。
昨年我々が開催したHTML5ビジネスサミット2016というイベントがあります。ここではSAP社に登壇いただいたのですが、彼らのコンセプトはデザインシンキングになります。SAP社は利用ユーザ企業の考え、行動から学んでデザインに取り入れていこうという考え方をしています。ユーザに対してどうやって高いユーザ体験を提供できるのか、そういった観点からHTML5を導入しています。
次に話を少し変えまして、業務システムにおいてHTML5のどういった機能が役立つのかを紹介します。一つ目はワンソースでマルチデバイスに、二つ目はオフライン時にはService Workers、最後にGPS情報の活用になります。
現在業務の世界ではモバイルデバイスの利用が当たり前になっています。2018年には1,070万のモバイルデバイスが業務で活用されていると言われています。そのような中ではデスクトップだけでなくスマートフォン、タブレットにもワンソースでサービスを提供できなければいけません。
モバイルデバイスの利用が増加するのに伴って、それを使ったモバイルワークも増加していきます。昨今政府がテレワークという単語を使うのですが、これはリモートワークのことだけでなく、サテライトオフィスやモバイルワークも含まれています。そのような中、別な階や場所を移動したら無線が使えなくなってしまったというと不便きわまりないでしょう。Service Workersではクライアント側でキャッシュする仕組みなので、オフライン時にも仕事が続けられるでしょう。
最後にモバイルデバイスを使った業務として役立つのはモバイルデバイスに付属したセンサーや機能を使ったものです。例えば位置情報を扱うためのGPSがあります。配送車やルートサービスなどのGPSと業務システムが連携していれば、急な呼び出しに対しても一番最適な担当者が訪問できたり、ログを取っておくことでルートの確認ができるようになります。
次にパフォーマンスの観点でお話をします。例えばAmazonでは100ms反応を速くするだけで利益が1%増えると言われています。それはコンシューマ向けに限らず、今後業務システムにおいてもデザインシンキングの考えに基づくのであれば、必ずパフォーマンスが問題になってきます。お勧めは下記のGoogleの方が紹介してくれる手法です。
https://www.youtube.com/watch?v=GNAENzKdciQ&list=PLAwxTw4SYaPmKmNX-INgcxQWf30KuWa_A
JavaScriptはインタプリタなプログラミング言語なので、実行速度が遅いんじゃないかと言われることがよくあります。しかし、JITコンパイラですので遅くはありません。速度を比較したグラフによれば、Javaよりも圧倒的に高速です。
では次に企業においてどういった人材が求められているのかを紹介します。今のシステムというのはクライアントとサーバの構成で成り立っています。そうした中、サーバサイドだけ、クライアントサイドだけでなく、両方できるような人材が優位性を生むようになっています。
そこで役立つのがHTML5プロフェッショナル認定制度ではないかと思います。Level1とLevel2があり、前者は「マルチデバイスに対応したWebコンテンツをHTML5を使って企画・制作できる」、後者は「最新のAPIを駆使したWebアプリケーションを設計・開発できる」のを目的としています。HTML5認定の評価として、今後取得したい資格の一位に選ばれています。
先日行われましたEnterprise HTML5 Seminar 2017のセッション内容について紹介します。幾つかのセッションは非公開となっています。今回は新日鉄住金ソリューションズ システム研究開発センター hifive開発チーム 石川 真也による「HTML5時代のUIテスト自動化」の内容を紹介します。
HTML5によって多彩な表現が可能になりました。円グラフなどもHTML5だけで描けるようになっています。その一方で、ユーザにどう見えているのか、正しく見えているのかというテストが必須になっています。きちんと表示されているか、表示場所は正しいか、表示内容が正しいかどうかといった確認が必要です。さらにマウスを重ねた時の表示など、操作も合わせた表示確認が必要になります。
この表示に関するUIテストと呼んでいます。例えば以下の2つの画面があった時に、いいねボタンのあるなしが違います。これくらいの違いしかないと、目視確認では見落としがちです。
次に複数ブラウザ、デバイスの対応とテストという問題があります。HTML5はレスポンシブWebデザインによって一つのHTMLソースで複数のブラウザ、デバイスに対応可能になりました。デザイナーが楽になる一方、ブラウザ間の差異によるレイアウト崩れが起きることもあります。対応ブラウザ、デバイスすべてで表示を確認しなければなりません。今まではIEだけ対応していれば良かったのが、Google Chromeやスマートフォン、タブレットでもテストしなければならなくなりました。特にスマートフォンでのテストは負荷が大きいとよく聞きます。
さらに最近の開発体制の変化によって、短いサイクルでの開発、リリースへの需要が増えています。継続的インテグレーションが一般的になってきており、リリースの度に繰り返しテストを行う必要が出ています。UIテストについても自動化されていないとテストがボトルネックになってしまいます。
一回のテストであれば問題ありませんが、細かくリリースする度にテストをしていたのでは、掛け算的に負担が増えてしまいます。そこで自動化を考える必要があります。
しかしテスト自動化を阻む課題が存在します。まず自動化環境やスクリプトの作成、保守コストが大きいという問題があります。ブラウザ間の差異に対応するために同じテストに対してブラウザ毎に個別のスクリプトを書く場合もあります。さらに「画像が正しく表示されること」をどう定義、記述するかという問題があります。
この課題に対して私たちが行っているのがPitaliumというツールになります。テストスクリプトの作成を簡略化できます。さらにワンソースで複数ブラウザのテストができます。そしてレイアウトの確認も自動判定で処理できます。Pitaliumではスクリーンショットを比較することでテストの合否判定を行います。テストで取得したスクリーンショットと、予め用意しておいたスクリーンショットを比較してテストの合否判定に使います。最初の実行で保存されたスクリーンショットが正解として保存されます。二回目以降は正解と指定されている画像と比較することによってテストの合否を判定します。もし失敗した場合には正解と失敗の画像を比較して差分で確認できます。もし失敗した場合も正しい仕様変更によるものであれば、新しい画像を正解と定義し直すことができます。
スクリーンショット比較によるメリットとしては人間の目視による判定をなくし、負荷を大幅に減らすことができます。
本発表の資料はSlideShareでも公開されていますので、ご覧ください。
先日行われました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でいこうと説得したのでしょうか？
元々は研究開発の一環ではじまっています。また、周囲に実際に試してもらうためにゲームをたくさん作りました。もちろんオークションシステムのモックアップも作っています。そうした体感を通じて利点を周知していった形です。
先日行われました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でも記事にしていますので、ぜひご覧ください。
2017年1月18日、HTML5による業務システム開発の現状と検討プロセス、事例を紹介するHTML5 Enterprise Seminar 2017が開催されました。参加者は総計93名で、セミナールームも満員となっていました。
一部のセッションは非公開となっていますが、公開可能なものは随時記事にして紹介していきます。
セミナーだけでなく、展示ブースについても多数の方に訪れていただきました。
皆さまのご参加誠にありがとうございました。
以下で一部のセッションのレポートを載せておりますので、こちらもご覧ください。
- hifiveで実現するエンタープライズHTML5 Webアプリケーション開発
- えっ！ここまで出来るHTML5のフロントエンド。
- HTML5時代のUIテスト自動化
- IT企業/IT技術者のためのHTML5 さらなる優位性の築き方
- HTML5 と Visual Studio tools for Apache Cordova ではじめるモバイルアプリ開発
企業におけるHTML5活用が広がっている昨今、2017年1月18日にhifiveチームにてHTML5 Enterprise Seminar 2017を開催します！
HTML5 Enterprise Seminar 2017 – hifive
開催概要
HTML5 は次世代標準のWeb 技術です。スマートフォンを含めたWeb ブラウザの進化や、セキュリティの懸 念による脱ブラウザプラグインの流れもあり、HTML5 に対応したWeb サイトは着実に増えてきています。企業 システムにおいても、使い勝手の向上、高い表現力、マルチデバイスへの対応など の利点を活かすことで、 新しい価値の創出や、既存の業務を変革することができるようになってきました。特に、ここ数年での機能や パフォーマンス面でのブラウザの進化は急速であり、従来なら対象外としていたシステムも含め、HTML5 を 活用した様々な事例が出てきています。
このような事例においては、HTML5 を採用するに至るまでには、機能の使いこなし、これまでのWeb の資産の有効活用、パフォーマンスを引き出すためのノウハウの不足、進化し続けるブラウザへの対応など、多岐に渡る課題の検討が行われています。
本セミナーでは、HTML5 の最新動向や、実際に採用されている企業様から採用に至るまでの検討プロセス、事例についてご紹介頂きます。また、HTML5 のシステムを効率的に開発するためのポイントや、その際に着目されるソリューションをご紹介いたします。それにより、参加者の皆様がHTML5 について理解を深め、採用の検討やHTML5 のパワーを益々活用するための糸口を掴む機会にして頂きたいと思います。
日時
2017年01月18日 13時30分〜18時00分（セミナー）、13時30分～18時30分（ブース）
場所
- JR品川駅 高輪口 徒歩１分
- 京急本線 品川駅 徒歩２分
プログラム
13:30 開会のご挨拶
13:35 エンタープライズWebの幕開け ～業務システムにHTML5を使うわけ～
有限会社futomi 代表取締役、株式会社ニューフォリア 取締役 CTO 羽田野 太巳 氏
HTML5はWebのフロントエンドの大きな進歩として話題になり、今では当たり前のように使われている。Webブラウザーから有名なWebサイトを訪れば、それはHTML5ベースで作られいることだろう。
しかし、それがまだ当たり前でない領域がある。そう、企業で使われる業務システムだ。 一般消費者向けのコンテンツは常に技術トレンドをキャッチアップする一方、企業向けシステムは常に保守的で技術トレンドの採用は遅れがちだ。しかし、HTML5をはじめとしたWebフロントエンドの技術は、まだまだ進化し続け、カッティングエッジの技術も登場し続けているものの、その多くはすでに成熟している。 にもかかわらず、企業向けシステム開発において、フロントエンドにWeb技術をあえて採用する理由はあまり理解されていない。それはWeb技術がホームページを作成するための技術であるとの先入観が世間一般に浸透しているからに他ならない。 HTML5をはじめとしたWeb技術がどういった方向性で進化し続けているのかを理解すれば、その応用範囲は多岐に及ぶことが分かるはずだ。 本講演では、HTML5をはじめとしたフロントエンドのWeb技術を企業向けシステムに採用するメリットとデメリット、そして、Web技術の最新動向を踏まえ、今後、Web技術でどこまで業務システムのフロントエンドを置き換えられるのかを占う。
【講演者紹介】
1993年 日本電信電話(株)（NTT）入社。伝送系エンジニアとして通信系インフラの保守運用を経て、通信系SIとして企業通信系システム設計に従事。 1999年 NTTぷららに出向、インターネット接続サービスおよびサーバーのシステム運用、サービス企画に従事し、IPTVサービスの立ち上げに携わる。2004年独立後、(有)futomiを設立し、ウェブ・システム開発の傍ら、ウェブコンサルティングも手がける。 HTML5の気運が高まる以前からHTML5の探求を始め、HTML5の普及啓蒙に関わり、HTML5関連書籍や雑誌記事執筆も行う。2011年 (株)ニューフォリア取締役(最高技術責任者)に就任し、HTML5を使ったコンテンツ作りの指揮を執る。
14:15 休憩
14:20 hifiveで実現するエンタープライズHTML5 Webアプリケーション開発
新日鉄住金ソリューションズ システム研究開発センター hifive開発チーム 下田 修氏
【講演者紹介】
新日鉄住金ソリューションズ株式会社 技術本部 システム研究開発センター所属。「水曜どうでしょう」が好きな北海道育ち。会社ではWebシステム（やや画面寄り）の領域で研究開発を行っており、「hifive」のチーフアーキテクトも務める。学生時代に「Imagine Cup 2007日本大会」で優勝し、シアトルでビルゲイツを前にプレゼンしたのがちょっとした自慢。
15:00 休憩
15:20 HTML5事例紹介1
新日鐵住金株式会社 業務プロセス改革推進部 IT企画室長 寺原 秀明 氏
15:50 最先端フロントエンド開発とは・・・
株式会社オークネット 統括GM 黒柳 為之 氏、フロントエンドエンジニア 大橋 秀紀 氏
16:20 休憩
16:40 HTML5アプリケーションにおけるUIテストのポイントとは(仮)
新日鉄住金ソリューションズ システム研究開発センター hifive開発チーム 石川 真也氏
【講演者紹介】
新日鉄住金ソリューションズ株式会社 技術本部 システム研究開発センター所属。「hifive」リードエンジニア。hifiveの機能開発や対外広報活動に携わる傍ら、見て楽しい・触って楽しいデモアプリの製作にも余念がない
16:55 IT企業/IT技術者のためのHTML5 さらなる優位性の築き方
特定非営利活動法人 LPI-Japan 和田 真輝 氏
ビジネスを効率的に推進してゆく根幹となる業務システムの多くは、クライアントサーバモデルを採用している。業務システムはサーバーサイドで動作することが多く、ITの発展とともに様々な機能をサーバーへ取り込んできたが、クライアントの果たす役割は少なかった。 いち早くHTML5およびその関連技術を導入してきたSNSなどのWebサービスやWebアプリケーションは、クライアント端末の多様化に対応し、またリッチなユーザエクスペリエンスの提供による成功を収めている。 業務システムへのHTML5の導入により、業務システムは新たな進化を遂げる可能性があり、またIT企業/IT技術者はHTML5を習得することで他社(他者)との優位性を築き、差別化を図ることができる。
17:25 HTML5 と Visual Studio tools for Apache Cordova ではじめるモバイルアプリ開発
日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 物江 修 氏
Visual Studio tools for Apache Cordova は Web 開発者が慣れ親しんだ HTML + JavaScriptを使用して、Android、iOS といったプラットフォームを横断したシングルコードでのモバイルアプリの開発を可能にします。このセッションでは Visual Studio を使用した Cordova アプリの基本的な開発方法、Cordova 開発用に用意された Visual Studio のさまざまな機能について紹介します。
【講演者紹介】
2000年よりマイクロソフト、NTTドコモのジョイントベンチャー立ち上げに参加。技術者として.NET Framework を使用した商用ASPサービスの設計と開発に従事。2004年、マイクロソフト・アジアリミテッド入社。インターネット開発製品のサポートエンジニアを経て現職のデベロッパー＆プラットフォーム統括本部エバンジェリストとなる。以来、ASP.NET、IIS（Webサーバー）の啓発活動に従事し、現在はEdge、Windows 10 を広く開発者に知ってもらうべく活動中。
17:55 閉会のご挨拶
募集はConnpass上で行っています。ぜひご参加ください！
HTML5 Enterprise Seminar 2017 – connpass
hifive – HTML5企業Webシステムのための開発プラットフォーム
hifive開発者ブログ 
