こんにちは、ニフティクラウドの UI を担当している岡田と申します。 本記事では、リニューアルされた新しいコントロールパネルについてご紹介します。
シングルページアプリケーション（SPA）
皆さんは、シングルページアプリケーション（SPA）という言葉はご存知でしょうか。 SPA とは、
- 単一ページによるWebアプリケーション
- ページはハッシュの変更や DOM の操作によって切り替わる
- サーバとの通信は Ajax や WebSocket などで行う
といった特徴をもつ Web アプリケーションのことをいい、2013 年ごろから Web 業界で 盛り上がりを見せている技術です。
参考情報として、オライリー社のサイトでは、以下のように書かれています。
シングルページWebアプリケーション――Node.js、MongoDBを活用したJavaScript SPA シングルページWebアプリケーション（SPA）は、最近注目を集めているWebアプリケーションのアーキテクチャです。SPAは、ユーザがアプリケーションを使っている間、Webページ全体をロードすることがなく、レスポンスが高速でUI/UXに優れているという利点を持っています。（以下略） http://www.oreilly.co.jp/books/9784873116730/
従来のコントロールパネルでは、画面を遷移するたびにサーバにリクエストし、 返却された HTML を描画するという処理を行っていましたが、新しいコントロールパネルでは、 ログイン時に、HTML ファイル、CSS ファイル、JavaScript ファイルといった静的ファイルを取得し、 初期画面を表示します。
そして、初期画面が表示された後に、Ajax によって、非同期に API リクエストし、 レスポンスが返ってき次第、結果を反映するために DOM を書き換えるという処理を 行っています。
また、API のレスポンス結果は、ブラウザにキャッシュとして保持しておき、 変更がない場合は、できるだけ再利用しています。
そのため、画面を遷移してもすぐに次の画面が表示されるので、従来のコントロールパネルと比較して、 待ち時間が少なく、結果としてストレスなくご利用いただいているのではないかと思います。
また、上記の技術は、ブラウザの JavaScript の処理速度に大きく依存しているため、、 IE よりも Chrome や Firefox といったブラウザの方が、より快適にご利用いただけると思います。
SPA を実現するために利用している技術
では次に、この SPA を実現するために利用している技術およびライブラリをご紹介します。
SPA を実現するための JavaScript フレームワークには、Backbone.js, Angular.js, Ember.js、最近ですと React などあるのですが、新しいコントロールパネルでは、 Backbone.js を使用しております。
Backbone.js を採用した理由としては、国内・海外の採用実績が多く、ソースコードも 1,600 行程度と軽量であること。テストコードも充実しており、問題があった場合に処理を 追いやすい点が挙げられます。
ただ、Backbone.js は MVC の基本的な問題は解決してくれますが、Controller の取り回しや、 一覧画面を描画する機能などの問題を解決するためには不十分なので、Backbone.js にプラスして、 Chaplin.js というライブラリを使用しています。
Chaplin.js は、Backbone.js のフレキシブルな設計にデザインパターンや ベストプラクティスに則って、Router, Dispatcher, Controller, Mediator などが 加えられています。
Chaplin 詳しいドキュメントは、こちらをご参照ください。 http://docs.chaplinjs.org/
また、将来的には DOM の描画速度を最適化するために、React なども検討したいと考えています。
ネットワーク図の描画に利用している技術
つづいて、今回の新しいコントロールパネルの目玉でもある、ネットワーク図の描画に利用している技術についてご紹介します。
ネットワーク図は、IE9 以上、Chrome, Firefix の最新版など、主要ブラウザで実装されている SVG（Scalable Vector Graphics）という技術を使用して描画しております。
SVG とは、2 次元のベクターグラフィックスを XML で記述できるファイル形式で、W3C 勧告として 公開されています。
その SVG を d3.js というグラフ描画に適したライブラリを用いて、JavaScript 経由で操作しております。
まとめ
新しいコントロールパネルが SPA で作成されている点と、SPA を実現するために利用している技術、 およびネットワーク図の描画に利用している技術について、ご紹介しました。
今後も、各ブラウザのサポート状況を確認しつつ、さまざまな技術を取り込み、よりお客様が 使いやすいコントロールパネルにしようと思っておりますので、ぜひお楽しみください。
