1. No category

特集
特 集
速さ、使い勝手が大幅向上 常識変わる
技術
W
e
b
● PART 1　総論.................................................... p.24
● PART 2　進化の全体像...................................... p.26
● PART 3　Single Page Application（SPA）..... p.30
● PART 4　HTML5.............................................. p.36
● PART 5　通信技術............................................ p.41
22
NIKKEI SYSTEMS 2015.1
特 集
速さ、使い勝手が大幅向上 常識変わる
企業の業務システムに、新しいWeb技術を取り入れるケースが増えてきた。
新技術を取り入れることで、応答が速く、操作性の高いWebアプリケーショ
ンを開発できる。では、どんな新技術をどのように取り入れてWebアプリ
を進化させるべきか。アーキテクチャー、言語、通信技術という三つの観
点から、Web技術のトレンドを解説する。
（堀内 かほり）
技術
W
e
b
＜写真：Getty Images ＞
NIKKEI SYSTEMS 2015.1
23
総論
SPA、HTML5、SPDYで
Webアプリは新時代に突入
新しいWeb技術の登場で、Webシステムは急速に進化している。新技術を使った、性能や操作性の
高いWebアプリケーションが、企業の業務システムでも実現されるようになった。アーキテクチャー、
開発言語、通信技術の3分野に着目し、新しい流れをつかもう。
「画面遷移のたびに読み込みがもた
開発の中心となるのは、もっぱらサー
従来Webアプリに比べて、通信量が少
ついて遅い」
「カメラやGPSのようなタ
バーサイドだった。
なくて済む。そのため、画面の反応が
ブレット端末の機能を使えない」
「サー
しかし最近は、クライアントサイド
速い。さらに、クライアントサイドで
特 集
バー側でデータが更新されても、ブラ
で多くの処理をするWebアプリが主
動作するJavaScriptによって、操作性
ウザー画面に反映されない」─。そ
流になってきている。そうしたWeb
の高いユーザーインタフェースを作り
速さ、使い勝手が大幅向上 常識変わる
んなWebシステムはもはや時代遅れ
アプリの特徴は、表示を更新するたび
込める。SPAを適用したWebアプリ
だ。ここ数年でWeb技術は大きく進
にサーバーが画面データ（HTML）を
は、2005年頃から増え始め、業務シス
化した。それらを使えば、性能や操作
生成してクライアント（Webブラウ
テムにも取り入れられつつある。
性を大幅に向上できる（図1）
。枯れた
ザー）に渡すのではなく、クライアン
Web技術ばかりを使い続けている場
トがサーバーのAPIを呼び出して表示
合ではない。
に必要なデータを取得し、画面を作成
例えば、ネット専業FX（外国為替
す る こ と。 こ の よ う なWebアプリ
証拠金取引）事業者であるマネーパー
（サーバーサイドとクライアントサイド
トナーズは、口座管理システムにSPA
Webアプリの新アーキテクチャー
技術
W
e
b
業務システムの一覧性を高める
新たなWeb技術で大きく変わった
の両方のWebアプリケーション）や、
を取り入れた（図2左）
。
のは、主にクライアントサイドである。
そ の ア ー キ テ ク チ ャ ー を「Single
口座開設の確認画面では、業務プロ
従来のWebアプリケーションは、一般
Page Application（SPA）
」という。
セスごとに必要な情報を一画面で一覧
にサーバーサイドでアプリの動作を制
最 近 のS P Aで は、 主 にH T M L 5、
できる。業務プロセスの各項目をク
御したりHTMLなどの画面データを
JavaScript、CSS3が用いられる。
リックすると、サーバーからHTMLを
生成したりするものが多い。
そのため、
SPAでは、画面を丸ごと更新する
取得して画面の枠組みを表示し、その
アーキテクチャー
言語
通信技術
SPA
HTML5
SPDY
WebSocket
WebRTC
応答が遅くて、
使い勝手がイマイチだ
従来の
Webシステム
応答が速くて、
使い勝手が良い
新しい
Webシステム
SPA：Single Page Application
1 新しいWeb技術によって、システムの性能や使い勝手が高まる
図
ここ数年の間に登場したWebシステム向けの新技術を適用することで、性能や使い勝手が大きく向上する
24
NIKKEI SYSTEMS 2015.1
速さ、使い勝手が大幅向上
常識変わるWeb技術
適用技術
マネーパートナーズの口座管理システム
SPA
ニプロの医療機関向け透析情報管理システム
HTML5
SPA
HTML5
タブレット
端末用
Webアプリ
PC用
Webアプリ
特 集
速さ、使い勝手が大幅向上 常識変わる
SPA：Single Page Application
効果
クライアントとサーバー
間の通信量を減らし、
応答性能を向上
サーバーの処理
負荷を軽減
業務に則して
情報の一覧性を
向上
2 新技術の適用で生まれ変わった業務システム
図
ネット専業のFX（外国為替証拠金取引）事業者マネーパートナーズ、医療機器メーカーのニプロなど、Webの新技術を業務システムに適用し効果を上げる事例が相次い
でいる
ごとにクライアント（Webブラウザー）
新たな通信技術も重要だ。従来の通
客情報や作業コメントなどのデータを
からサーバーのAPIを呼び出し、デー
信プロトコルであるHTTPを高速化す
取得する。
タをやり取りする。
る「SPDY」
、サーバーからクライアン
開発を率いたマネーパートナーズソ
この仕組みのため、例えば別の患者
トへのプッシュ通知を実現する
リューションズの風間 淳一郎氏（執
の情報に切り替えたとき、画面全体の
「WebSocket」が登場している。さら
行役員 システムマネジメント部 部長）
データをサーバーから再度取得する必
に、Webブラウザー間のPeer to Peer
は、
「画面全体を表示後、中身のデー
要はない。治療内容などの情報だけを
（P2P）通信を可能にする「WebRTC」
タを非同期で取得するので、表示の待
取得するので、応答が速い。
ち時間が短くなった」と話す。
医療機器メーカーのニプロも、医療
言語と通信技術も変化している
W
e
b
技術
後APIを利用して画面内に表示する顧
スピーディー
が注目を集めている。
これらの新しいWeb技術の波は急
速に押し寄せている。本特集では、ま
機関向けのあるWebアプリをSPAと
重要な新技術は、SPAだけでない。
ずPART2で現在に至るWeb技術の進
して開発した。これは、人工透析治療
SPAの開発でよく用いられるHTML5
化の全体像を解説する。続くPART3
に用いる情報管理アプリ。看護師が患
は、Webページの記述言語という従来
ではSPA、PART4でHTML5、最後
者のベッドサイドでタブレット端末
のHTMLの役割ではくくれない。例
のPART5で通信技術を取り上げ、そ
（iPadとAndroid端末のどちらにも対
えば、スマートフォンやタブレット端
れぞれの仕組みや事例を紹介する。現
応）を使い、患者ごとに治療内容や心
末が備えるカメラやGPSなどに対して
在のWeb技術のトレンドを知り、ぜひ
拍・血圧の状態を閲覧したり記録した
標準APIを提供し、それらの機能を使
Webシステムの企画や開発に生かして
りする（同右）
。その際、画面の項目
うWebアプリの開発を容易にする。
ほしい。
NIKKEI SYSTEMS 2015.1
25