2017年12月6日、アシアル株式会社・グレープシティ株式会社・新日鉄住金ソリューションズ株式会社・株式会社スタイルズの4社による共催セミナー『HTML5 Enterprise Application Conference 2017～HTML5で実現する業務アプリケーションのモダン化&マルチデバイス化～』を開催しました。本記事ではセミナーの様子をダイジェストでご報告します。
「日経コンピュータ」元編集長による情シス部門に向けた基調講演 業務システムの明日 ～ 内製の勧め
基調講演には、「日経コンピュータ」の元編集長であり「動かないコンピュータ」を10数年ご担当された、日経BP総研の谷島宣之氏をお招きしました。
谷島氏は、「社長が知りたいIT 50の本当」の著者としても有名です。
谷島 宣之 (著)
出版社: 日経BP社
システム内製のメリット
業務システムを内製化することで状況に合わせてシステムを改善し続けることが可能となり、企業の競争優位性に繋がります。また、社内の担当者であれば自社の業務を理解しているため、適切に要件をまとめることができます。業務上のトラブル発生時に自分でシステム改修が行えることも重要であるとし、旧電電公社が電話交換機が壊れた際に社内で対応できるよう、交換機OSを内製するようになった事例を紹介しました。
どうやって実現するか
業務システム内製化を達成するためには、まずは小さいシステムから始めて人材の育成を行うことが第一歩です。また昨今ではテクノロジーがものすごく多岐に渡るため、協業相手を見つけることも有効です。
谷島氏は「5年あれば内製の体制は作れる」と言います。旧電電公社の事例からもわかるように、やればできる、まずははじめることが重要であると語りました。
業務システムの明日
デジタルビジネスと創造的破壊の時代が到来し、これからの業務システムには利用者に価値を与えることと、システム担当者に価値を与えることの両方が必要になってきます。
攻めの業務を推進するために、HTML5などの新しいテクノロジーを活用して「業務システムの明日を切り開いて言ってほしい」と締めくくりました。
開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから
グレープシティ株式会社の村上功光氏は、業務システム向けUIライブラリ「Wijmo」「SpreadJS」を紹介されました。
グレープシティは、VB6時代からVisualStudioのサードパーティツールを提供してきた、Microsoftテクノロジーに強い老舗企業です。時代はVB6からASP.NETを経て、HTML5によるWebアプリケーション開発が主流となり、現在ではHTML5関連の開発支援ツールも数多く扱っています。
Wijmoはグリッドやチャートなどのグラフが簡単に書けるJavaScriptライブラリで、Angular、React、Vue.jsなどの各種JavaScriptフレームワークにも対応しています。描画の高速さと、高い拡張性が特徴です。
SpreadJSはExcelライクな高機能スプレッドシートが作れる製品です。HTML5のCanvasを利用してUIを描画するため、DOMを使用したデータグリッド描画よりもはるかに高速に動作します。
HTML5で業務アプリケーションを開発する際、高機能なUIパーツを一から作ろうとすると多大な実装コストがかかるため、WijmoやSpreadJSのようなツールを活用することをおすすめします。
WijmoやSpreadJSの採用事例は、以下の講演資料をご確認ください。
モバイルファーストな業務システムをHTML5で実現 〜Monaca活用事例に学ぶ、モバイルアプリ開発の成功ポイント解説〜
アシアル株式会社の塚田亮一氏は、Monacaの活用事例を元に、業務システム内製化を成功させるポイントについて解説しました。
NPOフュージョン長池の事例では、現場のニーズから生まれたアプリを導入することで、紙媒体での管理の撤廃など、既存の業務を大きく変革させました。
ジャパンネット銀行の事例では、ユーザ行動を徹底的に分析し、一番使われていた機能のみに絞ってアプリ化することで使い勝手の良さを実現しました。
またフジテック株式会社の事例では、すべてを自分達で実装するのではなく、mBaaSやWebAPIをフル活用することで短期開発を実現しました。フジテックでは、従来は事業部門から情報システム部門へ開発要請を行っていましたが、現在は開発プロセスを逆方向に変更し、情報システム部門が業務を調査して事業部門へシステムを提案する流れになりました。「システムで業務の何が改善されるのか」を理解しているのは情報システム部門の担当者であるため、現在の流れがもっとも合理的であるということです。
hifiveで実現するエンタープライズHTML5システム開発
新日鉄住金ソリューションズ株式会社の三淵喬氏は、企業Webシステムのための開発プラットフォーム「hifive」を紹介されました。
三淵氏は、業務Webシステムのクライアントサイド開発において、以下の3つの課題があるとしました。
2. 機能性とパフォーマンス
3. 長期にわたる運用保守
1つ目の課題は、多人数開発での役割分担をどうするかです。hifiveのアーキテクチャは、コンポーネント軸、画面スタック軸、データ軸の3つに分かれています。この構造によって、それぞれの処理が明確に分離され、実装の担当範囲を切り分けやすくなります。
2つ目の課題は、機能性とパフォーマンスについてです。大量のデータをHTMLで描画する場合、パフォーマンスに影響が出がちですが、hifiveでは内部的に以下の2つの処理を行うことで、高パフォーマンス化を実現しています。
ポイント2：画面上に表示されている領域のみを描画し、スクロールして見えなくなった箇所のオブジェクトは消去する
3つ目の課題は、長期にわたる運用保守をいかに自動化するか、です。目視でUIテストを行うのは効率的ではありませんが、テストの自動化にもコストがかかります。そこでhifive用テスト支援ツール「Pitalium」の出番です。Pitaliumはテストスクリプトの記述が簡易であり、結果のスクリーンショットが自動で取得されるという特徴を持っているため、テストの準備から確認までの工程を簡略化することができます。
hifiveおよびPitaliumはオープンソースで提供されていますので、ご興味のある方はぜひお試しください。
サポート終了が迫るFLEXをHTML5/Angularでリニューアル！
最後に、株式会社スタイルズの梶原稔尚氏からは、FlexシステムをHTML5/Angularにリライトするサービスについて紹介がありました。
2000年代初頭のまだWebの表現が乏しかった時代に、彗星のごとく現れたFlex・SliverLightといったRIA（リッチ・インターネット・アプリケーション）は瞬く間に流行しました。非常に細かい画面の作り込みができることから、業務システムにも広く利用され、現在でも多くの企業がFlexで構築された業務システムを資産として抱えています。HTML5の登場によりFlexは衰退し、Adobeは2020年末を持ってFlexの基盤技術であるFlashプレイヤーのサポートを終了します。
そこでスタイルズは、Flexによる業務システムをHTML5/Angularでリニューアルするサービスの提供をはじめました。HTML5/Angularに移行すると、当然ながらクライアントサイドのソースコードは全面書き換えとなります。UIの印象が大きく変わるため、顧客とイメージや操作感を共有し、早期の合意を得ておくことが重要になります。最近はフロント系エンジニアが枯渇状態にあるため、初期段階で画面の部品をパターン化し、フロントエンジニアでないとできないことを極力減らすといった工夫をされているとのことです。
講演資料はこちらよりダウンロードが可能です。
HTML5は業務システムをどう変えるか？
HTML5の登場により、Webの表現力が大幅に進化しました。それに伴ってWijmo、hifive、Monacaなど、HTML5をベースにしたツールが様々なベンダーから提供されるようになりました。こういった便利なツールをうまく取り入れることで業務システムの開発コストは軽減され、担当者は業務の改善に注力できるようになっていくのではないでしょうか。
モナカプレスではHTML5関連の最新情報を随時発信していきますので、今後の動向にご期待ください。