本文へジャンプします。

シングルページアプリケーション(SPA)を実現する技術(Backbone.js, Angular.js, Ember.js)

こんにちは、ニフティクラウドの 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.js のフレームワーク

Chaplin 詳しいドキュメントは、こちらをご参照ください。
http://docs.chaplinjs.org/

また、将来的には DOM の描画速度を最適化するために、React なども検討したいと考えています。

ネットワーク図の描画に利用している技術

つづいて、今回の新しいコントロールパネルの目玉でもある、ネットワーク図の描画に利用している技術についてご紹介します。

ネットワーク図は、IE9 以上、Chrome, Firefix の最新版など、主要ブラウザで実装されている
SVG(Scalable Vector Graphics)という技術を使用して描画しております。

SVG とは、2 次元のベクターグラフィックスを XML で記述できるファイル形式で、W3C 勧告として
公開されています。

その SVG を d3.js というグラフ描画に適したライブラリを用いて、JavaScript 経由で操作しております。

まとめ

新しいコントロールパネルが SPA で作成されている点と、SPA を実現するために利用している技術、
およびネットワーク図の描画に利用している技術について、ご紹介しました。

今後も、各ブラウザのサポート状況を確認しつつ、さまざまな技術を取り込み、よりお客様が
使いやすいコントロールパネルにしようと思っておりますので、ぜひお楽しみください。

ニフティクラウド 導入相談窓口
ニフティクラウド 無料セミナー

閉じる

閉じる

クラウドブログ編集部

クラウドブログ編集部

ニフティクラウド ユーザーブログ編集部のアカウントです。 編集部からのお知らせや、レギュラーライター以外のゲストによる寄稿記事を掲載していきます。

浜中 慶

浜中 慶

1980年、神奈川県生まれ。2003年ニフティ入社。 ポータルサイト開発を中心に、音楽配信サービス、CGMサービスなど様々なプロジェクトに企画/デザイン/システム担当として参加。現在は@niftyのポータルサービス向けコンテンツ管理システムの企画/開発/運用を担当。

吉田 雄哉

吉田 雄哉

株式会社co-meetingの創業メンバー。「取締役&External- facing Technologist」と名乗り新しいIT技術を広く伝える活動とWebアプリケーション開発を行う毎日。パッケージベンダーでのSaaS立上げ・製造業の情報システム部門で企画やPM・受託開発と従事してきたため、ベンダーサイドとユーザサイド の両方の視点を持ち合わせる。

石田 健亮

石田 健亮

株式会社ドリーム・アーツで小売事業者向けSaaS「Shopらん」を企画、開発。メインの仕事はプログラマーだがサーバー管理や営業もこなすユーティリティプレイヤー。最近好きな事はパフォーマンスチューニング。特に並列化プログラミングがマイブーム。キライなことはデータセンターでの作業。騒音と乾燥が弱点。ニフティクラウドでデータセンターに行く必要が無くなったことが本当の利点だ と思っている。

五月女 雄一

五月女 雄一

ニフティでは「インフラを守る簡単な様で奥が深いお仕事」をしています。 夢はインフラの気持ちが読めるエンジニアになること。

わたなべ かずひろ

わたなべ かずひろ

専門学校卒業後、ソフトウェア開発会社で電力系統制御システムの開発に従事。その後、CD-ROM等マルチメディア系PCソフトの開発を経て、1998年フリーランスに。 2000年8月に株式会社イーツーの設立に参画。携帯を含む様々なWeb系のシステム開発に携わる。現在はiPhone/Androidアプリなどの開発も手がけている。

市角

市角

ニフティクラウドのコントロールパネル設計・開発をメインに、たまにインフラの運用やお手伝いもやっていたりします。コントロールパネルや新機能の活用方法、アイデアなどを中心に書いていく予定です。

仲山 昌宏

仲山 昌宏

歌って踊れるインフラエンジニア兼、PHPもRubyもJavaも書くPerl使い。 物理サーバの運用に飽きて、フルラックに格安サーバ詰めて自宅プライベートクラウドを構築中。 今年は個人的には分散処理を攻めていきます。

猪飼 賢広

猪飼 賢広

1984年、愛知県名古屋市生まれ。大学は福島県にある某大学。2008年ニフティに入社。 開発系部署に配属後、主に各種テーマサイト開発のシステム面調整、開発進行管理役などとして参加。 現在もPC・ガラケーサイトの開発まわりを担当。インフラまわりを触る案件にも携わっており、日々修行中。 好きな芸人はなかやまきんに君とレイザーラモンRG。

久江 裕之

久江 裕之

ニフティクラウドのインフラ運用、OS提供の仕事をしています。 新しいOSやイメージが出る時にこのブログでご紹介いたします。入社5年目。一流のインフラエンジニアを目指して日々勉強中。

竹内 豪

竹内 豪

ニフティクラウド エンジニア

山口

山口

ニフティクラウドの基盤設計、新サービス/アライアンス/インフラ企画、その他雑用全般を担当しています。 クラウドに欲しい機能や、こんなふうに使ってほしいという想いが共有できれば良いですね。

芳中 隆幸

芳中 隆幸

ニフティクラウドの開発、運用を担当しています。

酒井 浩平

酒井 浩平

ニフティクラウドの中にいます。 ネットワークまわりの運用・開発や自動化などに取り組んでいます。 すべてのエンジニアを幸せにすることを目指しています。

higebu

higebu

ニフティクラウド IaaSのエンジニアです。 ネットワーク、DRサービス with VMware vCloud® Air™ Technology辺りの担当をしています。

武田

武田

ニフティクラウドの開発・運用を担当しています。 各種機能の内容についてなどで執筆させていただく予定です。

森藤 大地

森藤 大地

データに関する仕事が好きです。

宮原徹

宮原徹

日本仮想化技術株式会社 代表取締役社長兼CEO。仮想化技術に関するコンサルタントとして長年活動しており、特にベンチマークテストによる性能評価を得意としている。

荒谷翔

荒谷翔

株式会社はてなでMackerelのセールスデベロッパーとして勤務しています

東條 望

東條 望

2014年にニフティへ中途入社。 入社後から現在まで、ニフティクラウドのサービス企画・開発を担当しています。 各サービスの紹介を執筆させていただく予定です。