CodeZine(コードジン)

特集ページ一覧

SEO対策やページ表示速度アップに有効!「Angular」のサーバーサイドレンダリング

次世代Webアプリケーションフレームワーク「Angular」の活用 第19回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

サーバーサイドレンダリングの機能制限

 サーバーサイドレンダリングで生成されたWebページでは、Angularの全機能が利用できるわけではありません。この機能制限について説明していきます。

サンプルの説明

 説明で利用するサンプルを図6に示します。

図6:Web APIからデータを取得して表示するサンプル(p002-router)
図6:Web APIからデータを取得して表示するサンプル(p002-router)

 このサンプルは、Web APIから取得したデータ(ここではスマートフォンのリスト)を一覧画面に表示します。リストされたデータのリンク、または「新規追加」リンクをクリックすると詳細画面に遷移します。

 詳細画面ではデータの登録/編集/削除を行います。テキストボックスの内容は、双方向データバインディングでタイトルに反映されます。「保存」「削除」ボタンをクリックすると、それぞれの処理を実行後、一覧画面に戻ります。「戻る」リンクをクリックすると、何もせずに一覧画面に戻ります。一覧画面と詳細画面のリンクは、ルーター機能のリンク(routerLink)で記述されています。実装の詳細はサンプルコードのREADMEファイルを参照してください。

サンプルをサーバーサイドレンダリング対応する手順

 リスト1のコマンドで、「--clientProject」オプションにプロジェクト名「p002-router」を指定して実行すれば、サーバーサイドレンダリングに対応できます。

 ただし、サーバーサイドレンダリングでは、Web APIにアクセスするURLは絶対パスである必要があります。図6のサンプルでは、APIにアクセスするApiClientServiceサービスのコンストラクターで、リスト8の通り実装して、APIのURLを絶対パスにします。

[リスト8]APIのURLを絶対パスにする処理(p002-router-ssr/source/app/api-client.service.ts)
apiUrl = 'api/phones';  // APIのURL
// コンストラクター
constructor(
  private http: HttpClient,
  @Optional() @Inject(APP_BASE_HREF) origin: string) { // オリジン取得...(1)
    if (origin !== null) {
      this.apiUrl = origin + this.apiUrl; // APIのURLを絶対パスにする
    }
}

 (1)で、絶対パスのオリジン(ホスト名とポート番号)を含む変数originを依存性注入で取得します。@Optional()はoriginがnullになりうることを表す指定です。また、@Inject(APP_BASE_HREF)は、APP_BASE_HREFという名前(DIトークン)で提供されているオリジンの値を受け取る指定です。

 オリジンの値はserver.tsのプロバイダーに、リスト9の通り設定します。オリジンの値は環境により変わりますが、ここではローカルでの実行を想定した値にしています。

[リスト9]APP_BASE_HREFのDIトークンにオリジンの値を設定(p002-router-ssr/server.ts)
providers: [
  { provide: APP_BASE_HREF, useValue: 'http://localhost:4000/' }
],

サーバーサイドレンダリングの機能制限

 ここまでの手順でサーバーサイドレンダリングに対応させたサンプル(p002-router-ssr)を実行して、JavaScriptを無効にしたWebブラウザーで開くと、図6と同一のページが表示され、以下の操作が問題なく実行できます。

  • 一覧画面のリストからリンクをクリックして詳細画面に遷移する
  • 一覧画面の「新規作成」リンクをクリックして詳細画面に遷移する
  • 詳細画面の「戻る」リンクで一覧画面に遷移する

 一方で、詳細画面では以下の問題が発生します。

  • 「名前を編集」のテキストボックスを編集しても、内容がタイトルに反映されない
  • 「保存」「削除」ボタンを押しても何も起きない

 これは、サーバーサイドレンダリングされたページでは、ルーター機能のリンク(routerLink)によるページ遷移以外の動作は機能しないためです。サーバーサイドレンダリングを利用する場合、この制限を考慮に入れておく必要があります。

 JavaScriptが有効なWebブラウザーでは、サーバーサイドレンダリングされたページの表示後、JavaScriptがダウンロードされて実行されると、通常のAngularのページに切り替わって、全機能が利用できるようになります。

[補足]Chromeの開発者ツールで通信速度が遅い環境を作る

 開発環境では、ダウンロード/実行の時間が非常に短いため、サーバーサイドレンダリングのページから通常のAngularのページへの切り替えがわかりにくいです。F12キーで起動できるChromeの開発者ツールを利用すると、疑似的に通信速度が遅い環境を作成して動作を検証できます。

図7:Chromeの開発者ツールで通信速度を遅くする設定
図7:Chromeの開発者ツールで通信速度を遅くする設定

 図7で通信速度を「Slow 3G」(3G携帯電話の遅い通信速度)に設定して、p002-router-ssrサンプルの一覧画面を表示させると、ページの表示後もJavaScriptのダウンロードが続き、完了後にページが再描画される(一覧画面のリストが一瞬リセットされて再取得される)様子が確認できます。

まとめ

 本記事では、Angularのサーバーサイドレンダリング機能について説明しました。サーバーサイドでWebページを生成するため、検索エンジンのクローラーが正しくページ内容を取得でき、SEO対策に有効です。また、端末の処理速度や通信速度が遅い環境でも、最低限のページ内容を先に表示させることができます。

 次回は、Angularのディレクティブに着目して、自作ディレクティブを実装する方法を解説していきます。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:次世代Webアプリケーションフレームワーク「Angular」の活用

もっと読む

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5