albatrosary's blog

UI/UXとエンタープライズシステム

Rich Internet Application(RIA) から Single-page Application(SPA) へ

ここのところ SPA とは何かという話を良く聞かれてますので整理します。業務アプリケーションを構築するときに、SPA(Single-page Application) は RIA(Rich Internet Application) に変わる技術です。もはや Adobe Flash, Air, Silverlight, Javaアプレット など RIA の役割は終焉を迎え SPA という流れになっています(と考えています)。

従来の Rich Internet Application(RIA) 

RIA が注目されていた技術(特に下記3つ)は

  • 表現力の高さ:動画や音声などマルチディアの活用が可能で高いデザイン性を持った画面要素の再生機能を備える
  • デスクトップアプケーションと同等なUI:画面をリフレッシュすることなく、バックエンドでサーバーとデータの送受信が可能
  • ユーザーエクスペリエンス:ユーザーの操作が即座にレスポンスされ、表示される画面の情報が操作に応じて随時変化するようなインタラクティブな操作性を実現

こうしたビジュアル的な要素がエンタープライズでも受け入れられてきました。従来の HTML ではこれら実装は難しく Web アプリケーションでユーザビリティに優れているアーキテクチャとして以前は選ばれていました。

これからの Single-page Application(SPA) 

言い過ぎかもしれませんが RIA は 以前の HTML では実装が困難な部分を克服するために出現した技術です。しかし HTML5 の登場により RIA でできることはもはや HTML で実装可能です。その概念が シングルページアプリケーション (SPA) です。

wiki によると次のように書かれています。

シングルページインターフェイス(SPI)と呼ばれる単一ページのアプリケーション(SPA)は、デスクトップアプリケーションに似てより流動的なユーザーエクスペリエンスを提供することを目的とした単一のWebページに収まるWebアプリケーションまたはWebサイトです。

SPA を構築するための要素は

を考える必要がありますが、既に道具はそろっています。

SPA のための JavaScript フレームワーク

SPA を開発するためには JavaScript フレームワークを選ぶ必要があります。フレームワーク選びは、下記3つのフレームワークを基準にすると良いと考えます。

jQuery など今までのリソースを活用したい場合に backbone は有用です。UIバインディングを多く実装したい場合は AngularJS で、最もインタラクティブでエキサイティングな画面が実装できます。

SPA を構築するための開発環境

開発環境としては Yeoman が最も良いと考えています。これがあれば様々な JavaScript フレームワーク、テストフレームワークの元、開発が行えます。

Yeoman を使った開発はフルOSSでの実装となりますので、何かしらのサポートが必要な場合は Sencha が良いです。

SPA と HTML5

RIA で重要であった「表現力の高さ」「ディスクトップアプリケーションと同等のUI」「ユーザエクスペリエンス」はブラウザの性能向上と共に今や十分に実装可能です。また、体感!JavaScriptで超速アプリケーション開発 -Meteor完全解説 の「シングルページ・アプリケーション」でも述べられている通り、ページ遷移を単一にすることにより HTML5 で導入された WebSocket が有効に扱えます。

オフラインアプリケーションやデータのローカル保存も Application Cache、Web Storage といった HTML5 関連技術により実装可能です。

最後に

従来 RIA で実装されるようなアプリケーションは、 HTML5 の技術を含め SPA で実装可能です。SPA のメリットは、 RIA のような特別な技術は必要とせず、従来持ち合わせていた Webアプリケーションの技術を使いある程度構築できます。「ある程度」と言ってるのは、新しい開発環境や HTML5 による新しい技術、SPA の概念を学ぶ必要があります。