株式会社スタイルズ
  • ビジネス
    • システム・インテグレーション
    • オープンソース
    • アプリケーション保守
    • システム監視・運用保守(24×365対応)
    • オフショア・ニアショア開発
    • IT人材・BPOサービス
    • SESパートナー募集
    • 受託開発パートナー募集(ニアショア含む)
  • サービス
    • Struts/Struts2/Seasar2からSpringへ移行ツールサービス
    • AWS移行・監視・運用までトータルにサービス
    • API Factory AWSで実現するエコシステムの受託開発
    • 他社開発アプリケーション保守引継ぎ
    • Nextcloud OSSオンラインストレージ
    • オープンデータスタック
    • Zabbix保守サポート
    • Rancher日本語による構築、商用保守サポート
    • IoTデバイスのためのセキュリティremote.it
  • 事例
    • AWSクラウドネイティブ構築事例
    • その他のシステム事例
  • お知らせ
    • セミナー
  • 会社情報
    • 会社概要
    • 代表あいさつ
    • 沿革
    • アクセス
    • 財務情報
  • 技術者ブログ
  • 採用情報
  • コラム
  • お問合せ
    • お問合せ
    • 資料請求
    • ホワイトペーパー

HTML5とAngularによる大規模業務システムの開発事例+AWSによる分散バッチ環境の構築

Home 導入事例 HTML5とAngularによる大規模業務システムの開発事例+AWSによる分散バッチ環境の構築
  • E-PORTER+
    E-PORTER+

開発事例:コネクシオ株式会社様

新システム導入の効果1:HTML5とAngularで変える業務システム開発

新システム導入の効果2:AWSによる分散バッチ環境の構築

E-PORTER+は、モバイル端末の資産管理をベースとし、料金管理(携帯電話利用料など)、ライセンス管理(MDMなど)が可能なHTML5とAngularで開発された業務システムです。
従来型のケータイ電話、スマートフォンはもちろん、タブレット端末、データカード、Wi-Fi端末の利用料金やライセンスを一括管理できる次世代型『モバイル統合管理システム』です。

新システム導入の効果1
新システム導入の効果2
本事例の関連サービス

新システム導入の効果1

HTML5とAngularなどによる最新技術UIの実現

導入前の課題1

それまで利用していた旧システムはAdobe Flexで構築されていたため、スマートデバイスやAdobeソフトウェアがダウンロードされていない新世代のブラウザからは、システムの対応ができないでいた。

新システム導入の効果

HTML5とAngularなどによる最新技術を使うことで、優れた操作性や各種グラフ表示等の良さを引き継ぐ形でシステムの再構築を実施。
新世代のブラウザやスマートデバイスでの利用も可能とした。

1.Angular

AngularJS

フロントエンドは最近では、Backbone.jsやAngularに代表されるクライアントjavascriptフレームワークをベースに構築します。
その場合、ユーザインターフェースは、BootstrapなどのCSSフレームワークを組み合わせます。
Angularは、Googleが開発を行っているJavaScriptのアプリケーションフレームワークです。
いわゆるMV*と呼ばれる種類のフレームワークで、Backbone.jsやKnockout.jsなどとよく比較されます。
注)MV*フレームワークというのは、MVC、MVVM、MVPなど、さまざまな設計パターンの総称で、Model、View、ほかに何かという意味です。

Angularの公式サイトでは、「Angularは、MVWフレームワークである」と定義しています。
「MVW」とは、「Model-View-Whatever」の略語で、「Model」「View」「その他何でも」という意味です。
データバインディングやDI(依存性注入)などを使用でき、複雑なWebアプリのフロントエンドも効率よくシンプルに実装できます。
また、Angularはフルスタックフレームワークであるという特徴を持っています。
それは、クライアントサイドを実装する上で必要な機能はすべてそろっているという意味です。
いまJavaScriptのフレームワークといえば、一番最初に名前が挙がると思われます。

Angularは下記のような機能を持っています。

  • 双方向データバインディング
  • DI(依存性注入)によるモジュール管理機能
  • ルーティング機能
  • Ajax通信機能

スタイルズでは、シングル・ページ・アプリケーションとして業務システムを開発する場合、標準的にAngularを採用しています。

2.Yeoman

YEOMAN

Google社が作成した総合開発ツールです。
Yeomanの読み方はそのまま「ヨーマン」と呼びます。
Yeomanは【Yo】【Grunt】【bower】のコアツールの総称です。
Yeomanは、タスクの自動化を行うGruntや、Webアプリ向けのパッケージマネージャーであるBowerと連携しながら、Webアプリのコード生成を自動化してくれるツールです。
Yeomanには数多くのサブジェネレーターが存在し、様々なアーキテクチャに基づいたWebアプリケーションを迅速に構築することが可能です。

3.JHipster

JHipster

JHipsterは、AngularJSとSpringフレームワーク(Spring Boot)を使って、Webアプリケーションを素早く開発するための、アプリケーションジェネレーターであり、オープンソース製品です。

4.Springフレームワーク(Spring Boot)

Spring Boot

Javaのフレームワークとしてかなりデファクトに近いフレームワークとして「Spring」があります。Spring Bootは、Springの各種フレームワークを新しい形で「統合」したものです。

5.TypeScript

TypeScript

TypeScript はマイクロソフトによって開発されたオープンソース製品で、JavaScriptに静的型付けとクラスベースオブジェクト指向を加えたスーパーセットです。既存のJavaScriptライブラリに型情報を加えることのできるヘッダファイルをサポートしています。

6.Kendo UI

KendoUI

Kendo UI は、telerik社によって開発された、jQuery をベースとした JSライブラリです。
ビジネス向けの UIパーツを豊富に持ち、商用利用向けの有償ライセンスと、GPLv3ライセンスのオープンソースのデュアルライセンスで提供されていましたが、2014年に Kendo UI の主要なパーツが オープンソース化して、Apache ライセンスで利用出来るようになりました。

新システム導入の効果2

AWSによる分散バッチ環境の構築で月次バッチを5倍高速に

導入前の課題2

料金管理(電話利用料、MDMライセンス料など)のために大量のデータを取り込み・料金算出・分析処理を月次バッチ処理で行っていたが、プロプタイエタリなサーバーと商用データベースによって、多大な時間を要していた。

新システム導入の効果

AWSによる分散バッチ環境の構築で月次バッチを5倍高速に。新システムでは、バッチサーバーをAWS上で十数台のサーバーと各サーバー上のMySQLによって、分散並列実行させることにより、処理時間を1/5程度まで高速化。
月次処理日以外は、そのインスタンスは停止されており、コストの削減にも貢献。

AWSシステム構成

既存で40時間を要していた大量の携帯電話の料金明細データを扱う月次バッチ処理をAWSの特性を活かした並列処理により処理時間を1/5程度に高速化。

本事例の関連サービス

Flex→HTML5自動移行サービス(旧HTML5とAngularで変える業務システム開発)

AWSコンサルティングサービス

株式会社スタイルズでは、HTML5とAngularによる業務システムの開発に関する業務を受託しております。
詳しくはお問合せフォームより、ご連絡下さい。

CONTACT

HTML5、AngularJS等によるシステム開発のお問合せはこちらから

お問合せフォームはこちら講演資料のご請求はこちら

-COMPANY-

〒101- 0052
東京都千代田区神田小川町1-2
風雲堂ビル6階

-MENU-

  • 株式会社スタイルズ
  • ビジネス
  • サービス
  • 事例
  • お知らせ・ニュースリリース
  • 会社情報
  • 個人情報保護方針
  • 採用情報
  • AWSに特化したZabbix障害監視サービス
  • オープンソースファイル共有ソフトNextcloud公式パートナー

-PARTNER-

APN_ConsultingPartner

nextcloud

VMWARE

ZABBIX

RancherPartner

JSTQB-Partner

-FACEBOOK-

株式会社スタイルズ
© 2003 - 2021 Stylez Corp.