シングルページアプリケーション
技術
編集ページの遷移を伴わずにサーバと通信を行う技術には様々なものがある。
- 通信
- Ajax: JavaScriptを用いたリクエストと非同期更新技術の総称
- WebSocket: 双方向ソケット通信を可能にするプロトコル
- Server-sent events: サーバからクライアントへの送信を可能にするHTTP規格
- ブラウザのプラグイン: Silverlight、Flash、Javaアプレットなどのプラグインによる非同期通信
JavaScriptフレームワーク
編集データ転送
編集サーバへリクエストすると、通常は生データ(XMLやJSON)かHTMLのどちらかが送られてくる。HTMLであれば、クライアント側はJavaScriptでDOMの一部を更新する。生データであれば、クライアント側ではJavaScriptでテンプレートなどによってHTMLに変換し、その後同様にDOMの更新を行う。
サーバアーキテクチャ
編集Thin server architecture
編集クライアント側がロジックを持つ方法である。この方法ではサーバは純粋なAPIやWebサービスとなる。複雑さがサーバからクライアントに移動していることから Thin server architecture と呼ばれることがあるが、システム全体としての複雑さが削減されているかどうかは議論がある。
Thick stateful server architecture
編集サーバ側でクライアントのページの状態を記憶しておく方法である。リクエストを受けるとサーバは変更を伴う具体的なHTMLやJavaScriptを返し(クライアント側はこれでDOMの一部を更新する)、同時にサーバの状態を更新する。ロジックはほとんどサーバ側で実行され、HTMLも通常サーバ側で生成される。いくつかの方法では、サーバはブラウザをシミュレートし、イベントを受け取ると、シミュレートした状態がクライアントに自動的に伝播するようにして変更を実行する。
この方法はサーバのメモリやプロセッサ資源が多く必要である。しかし、アプリケーションがすべてサーバ側で実装されること、またカスタムの通信をクライアントと持たないためサーバ内のデータや状態が同一のメモリ空間で共有できることから、開発モデルが単純化されるという利点がある。
Thick stateless server architecture
編集サーバ側では状態を持たず、クライアントがリクエストの際にページの状態を送る方法である。サーバはこのデータからページを再構築し、JSONやJavaScriptといった必要なデータやコードを生成してクライアントに返す。
この方法はサーバに送るデータが大きく、リクエストのたびにサーバ側でページを再構築するため計算資源が多く必要である。一方でクライアントごとのページデータを持たないことから、セッションの共有なしにAjaxリクエストを別のサーバで処理することが可能であり、スケールしやすいという利点がある。
ローカルでの実行
編集一部のSPAはfile URIスキームを使用してローカルファイルから実行できる。これにより、ユーザがサーバからSPAをダウンロードしたあと、サーバとの接続に依存せずにローカルストレージからファイルを実行することが可能である。このようなSPAでデータを保存・更新したい場合は、ブラウザベースのWeb Storageを使用する必要がある。
SPAにおける課題
編集SPAはブラウザがもともと考慮していたステートレスなページ遷移モデルとは大きく異なるため、いくつか新たな課題が生じている。しかし、以下のものでそれらに対処することが可能である。
- 様々な問題に対処したクライアントサイドのJavaScriptライブラリ。
- SPAに特化したサーバサイドのフレームワーク。
- ブラウザの進歩、およびSPAを考慮して設計されたHTML5の仕様の進歩。
検索エンジン最適化 (SEO)
編集いくつかの一般的な検索エンジンのクローラではJavaScriptが実行されないため、SPAを採用しようとしているWebサイトにとってSEOはかねての課題である。これはSPAにとって些細な問題ではなく、検索エンジンへのインデックス付けが必須または望ましい状況では一般的にSPAは使用されない。
2009年以降、Googleは「AJAX crawling scheme」を提案・推奨していた。これはクローラが必要なメタデータを抽出できるよう、SPAに特別な動作の実装を要求するものであった。この提案は2015年に非推奨となった[2]。
Webサイトがクロール可能であるかのようにする方法はいくつかある。サーバでHTMLベースのサイトを生成してそれをクローラに渡す方法や、PhantomJSなどのヘッドレスブラウザでJavaScriptアプリケーションを実行してHTMLを出力する方法である。これらはいずれもSPAとは別個にHTMLページを作成しなければならない。かなりの労力が必要であるし、大規模なサイトではメンテナンスに苦労することになる。さらには、SEOの落とし穴も存在する。サーバが生成したHTMLがSPAの内容と大きく異なるとみなされると、サイトにペナルティが課せられる。PhantomJSでHTMLを出力した場合は、ページのレスポンスが遅くなる可能性があり、これは検索エンジン、特にGoogleにおいてランクを低下させる要因となる[3]。
ブラウザの履歴保持
編集アナリティクス
編集最初の読み込みの遅延
編集脚注
編集- ^ Flanagan, David, "JavaScript - The Definitive Guide", 5th ed., O'Reilly, Sebastopol, CA, 2006, p.497
- ^ “AJAX クロールに関するスキームを廃止します”. Google ウェブマスター向け公式ブログ (2015年10月15日). 2017年6月10日閲覧。
- ^ Holmes, Simone (2015). Getting MEAN with Mongo, Express, Angular, and Node. Manning Publications. ISBN 978-1-6172-9203-3