令和5年度 春期 応用情報技術者試験 午後問題 問4 SPAとキャッシュサーバによるニュース配信の再構築

テクノロジシステム構成データベース

この問題は2023(R5)春 応用情報技術者 午後に出題されたものです。出題時点の法令・制度に基づく内容のため、現行の内容と一致しない場合があります。

本ページの問題文・選択肢は、原本の体裁を Web 表示用に正規化しています(改行・記号・数式・図表参照の調整)。設問の趣旨および正解に影響する変更は加えていません。

学習ガイド

ITニュース配信システムをSPAとキャッシュサーバで再構築する事例です。画面ごとのWeb API呼出しを整理し、キャッシュヒット率を用いた平均応答時間を式から求めます。構成変更で生じる表示不具合も、データ取得の流れに沿って説明します。本文・表・図の根拠を行き来し、用語だけを暗記するのではなく、短い記述にも判断の理由を残して解答する手順を示します。

この記事で押さえる論点

  • CSSによるレスポンシブ対応とSPA・Web API・JSONの役割分担を説明できる
  • LFU方式でキャッシュに残りやすい記事の特徴を述べる
  • 表4の測定結果からWeb APIの呼出し回数とキャッシュヒット率を使って応答時間を計算する
  • SPAへの移行で従来のアクセスログ解析が成り立たなくなる理由を記述する

問題本文

ITニュース配信サービスの再構築に関する次の記述を読んで,設問に答えよ。

H社は,IT関連のニュースを配信するサービスを提供している。このたび,OSや開発フレームワークの保守期間終了を機に,システムを再構築することにした。

〔現状のシステム構成と課題〕

ITニュース配信サービスでは,多くの利用者にサービスを提供するために,複数台のサーバでシステムを構成している。配信される記事には,それぞれ固有の記事番号が割り振られている。現状のシステム構成を図1に,ニュースを表示する画面一覧を表1に示す。

図1 現状のITニュース配信サービスのシステム構成
図の説明テキスト

現状のITニュース配信サービスのシステム構成図。
・左側に「PC」「タブレット」「スマートフォン」があり、「インターネット」に接続している。
・インターネットから「FW」(ファイアウォール)を経由して「Webサーバ1」「Webサーバ2」に接続している。
・Webサーバ群からさらに「FW」を経由して「AP1」「AP2」「AP3」(アプリケーションサーバ)および「RDB」(関係データベースサーバ)が同一ネットワークセグメント上に接続している。
図の下部に「FW:ファイアウォール」「RDB:関係データベースサーバ」「AP:アプリケーションサーバ」という注記がある。

表1 画面一覧
図の説明テキスト
画面名 概要
ITニュース一覧 記事に関連する画像,見出し,投稿日時を新しいものから順に一覧形式で表示する。一覧は一定の記事数ごとにページを切り替えることで,古い記事の一覧を閲覧することができる。
ITニュース記事 ITニュース一覧画面で記事を選択すると,この画面に遷移し,選択された記事の見出し,投稿日時,本文及び本文内の画像を表示する。さらに,選択された記事と関連する一定数の記事の画像と見出しを一覧形式で表示する。

現状のシステム構成では,PC,タブレット,スマートフォン,それぞれに最適化したWebサイトを用意している。APでは,RDBとのデータ入出力とHTMLファイルの生成を行っている。また,関連する記事を見つけるために,夜間にWebサーバのアクセスログをRDBに取り込み,URL中の記事番号を用いたアクセス解析をRDB上のストアドプロシージャによって行っている。
最近,利用者の増加に伴い,通勤時間帯などにアクセスが集中すると,応答速度が遅くなったり,タイムアウトが発生したりしている。

〔新システムの方針〕

この課題を解消するために,次の方針に沿った新システムの構成とする。

  • aの機能を用いて,一つのWebサイトで全ての種類の端末に最適な画面を表示できるようにする。
  • APでの動的なHTMLの生成処理を行わない,SPA(Single Page Application)の構成にする。HTML,スクリプトなどのファイルはWebサーバに配置する。動的なデータはAPからWeb APIを通して提供し,データ形式は各端末のWebブラウザ上で実行されるスクリプトが扱いやすいbとする。
  • RDBへの負荷を減らし,応答速度を短縮するために,キャッシュサーバを配置する。
  • ITニュース一覧画面に表示する記事の一覧のデータと,ITニュース記事画面に表示する関連する記事に関するデータは,キャッシュサーバに格納する。キャッシュサーバには,これらのデータを全て格納できるだけの容量をもたせる。その上で,記事のデータは,閲覧されたデータをキャッシュサーバに設定したメモリの上限値まで格納する。
  • RDBのデータベース構造と,関連する記事を見つける処理は現状の仕組みを利用する。

APで提供するWeb APIを表2に示す。

表2 AP で提供する Web API
図の説明テキスト
Web API 名 概要
ITNewsList 表示させたい IT ニュース一覧画面のページ番号を受け取り,そのページに含まれる記事の記事番号,関連する画像のURL,見出し,投稿日時のリストを返す。データは,キャッシュサーバから取得する。
ITNewsDetail IT ニュース記事画面に必要な見出し,投稿日時,本文,本文内に表示する画像の URL,関連する記事の記事番号のリストを返す。1 件の記事に対して関連する記事は 6 件である。データは,キャッシュサーバに格納されている場合はそのデータを,格納されていない場合は,RDBから取得してキャッシュサーバに格納して利用する。キャッシュするデータはLFU方式で管理する。
ITNewsHeadline IT ニュース記事画面に表示する,関連する記事 1 件分の記事に関する画像の URL と見出しを返す。データは,キャッシュサーバから取得する。

次に,Webブラウザ上で実行されるスクリプトの概要を表3に示す。

表3 Web ブラウザ上で実行されるスクリプトの概要
図の説明テキスト
画面名 概要
ITニュース一覧 表示させたい IT ニュース一覧画面のページ番号を指定して Web API "ITNewsList" を呼び出し,取得したデータを一覧表として整形する。
ITニュース記事 表示させたい記事の記事番号を指定して Web API "ITNewsDetail" を呼び出し,対象記事のデータを取得する。次に,表示させたい記事に関連する記事の記事番号を一つずつ指定して Web API "ITNewsHeadline" を呼び出し,関連する記事の表示に必要なデータを取得する。最後に,取得したデータを文書フォーマットとして整形する。

〔キャッシュサーバの実装方式の検討〕

キャッシュサーバの実装方式として,次に示す二つの方式を検討する。

(1) 各APの内部にインメモリデータベースとして実装する方式
(2) 1台のNoSQLデータベースとして実装する方式

APのOSのスケジューラーが5分間隔で,ITニュース一覧画面に表示する記事の一覧と,各記事に関連する記事の一覧のデータを更新する処理を起動する。(1)の場合,各AP上のプロセスが内部のキャッシュデータを更新する。(2)の場合,特定のAP上のプロセスがキャッシュデータを更新する。

なお,APのCPU使用率が高い場合,Web APIの応答速度を優先するために,更新処理は行わない。

〔応答速度の試算〕

新システムにおける応答速度を試算するために,キャッシュサーバの二つの方式をそれぞれテスト環境に構築して,本番相当のテストデータを用いて処理時間を測定した。その結果を表4に示す。

表4 テストデータを用いて処理時間を測定した結果
図の説明テキスト
No. 測定内容 測定結果 方式(1) 測定結果 方式(2)
1 Web サーバが IT ニュース一覧画面又は IT ニュース記事画面のリクエストを受けてから,HTML やスクリプトなどのファイルを全て転送するまでの時間 80ms 80ms
2 AP が Web API "ITNewsList" のリクエストを受けてから,応答データを全て転送するまでの時間 100ms 200ms
3 AP が Web API "ITNewsDetail" でリクエストされた対象記事のデータがキャッシュサーバに格納されている割合 60% 90%
4 AP が Web API "ITNewsDetail" のリクエストを受けてから,キャッシュサーバにある対象記事のデータを全て転送するまでの時間 60ms 120ms
5 AP が Web API "ITNewsDetail" のリクエストを受けてから,RDB にある対象記事のデータを全て転送するまでの時間 300ms 300ms
6 AP が Web API "ITNewsHeadline" のリクエストを受けてから,応答データを全て転送するまでの時間 15ms 20ms
注記 ms:ミリ秒

インターネットを介した転送時間やWebブラウザ上の処理時間は掛からないと仮定して応答時間を考える。その場合,ITニュース一覧画面を初めて表示する場合の応答時間は,方式(1)では 180ms,方式(2)では c msである。ITニュース一覧画面のページを切り替える場合の応答時間は,方式(1)では 100ms,方式(2)では d msである。次に,記事をリクエストした際の平均応答時間を考える。Web API “ITNewsDetail”の平均応答時間は,方式(1)では 156ms,方式(2)では e msである。したがって,Web API “ITNewsHeadline”の呼び出しも含めたITニュース記事画面を表示するための平均応答時間は,方式(1)では f ms,方式(2)では 258msとなる。

以上の試算から,方式(1)を採用することにした。

〔不具合の指摘と改修〕

新システムの方式(1)を採用した構成についてレビューを実施したところ,次の指摘があった。

(1) ITニュース記事画面の応答速度の不具合
ITニュース記事画面を生成するスクリプトが実際にインターネットを介して実行された場合,試算した応答速度より大幅に遅くなってしまうことが懸念される。
Web API “g” 内から,Web API “h” を呼び出すように処理を改修する必要がある。

(2) APのCPU使用率が高い状態が続いた場合の不具合
APに処理が偏って CPU使用率が高い状態が続いた場合,ある画面の表示内容に不具合が出てしまう
この不具合を回避するためには,各APの CPU使用率を監視して,しきい値を超えた状態が一定時間以上続いた場合,APをスケールアウトして負荷を分散させる仕組みをあらかじめ用意する。

(3) 関連する記事が取得できない不具合
関連する記事を見つける処理について,現状の仕組みのままでは関連する記事が見つけられない。Webサーバのアクセスログを解析する処理を,APのアクセスログを解析する処理に改修する必要がある。

以上の指摘を受けて,必要な改修を行った結果,新システムをリリースできた。

設問と解答・解説

設問1

〔新システムの方針〕について答えよ。

(1)

本文中の a に入れる適切な字句を解答群の中から選び,記号で答えよ。

  1. CSS
  2. DOM
  3. HREF
  4. Python

模範解答

選択肢ア: CSS

配点 1

解説

SPA(Single Page Application)において、Webブラウザが受信する基本的な構成要素は HTMLCSSJavaScript です。これらによって動的な画面更新が実現されます。

各選択肢の解説

  • ア(CSS): 正解。Webページの見た目やレイアウトを指定するための言語です。
  • イ(DOM): Document Object Modelの略で、HTMLやXML文書をプログラムから操作するためのAPIですが、受信するファイル自体ではありません。
  • ウ(HREF): HTMLのaタグなどでリンク先を指定する属性名であり、構成要素そのものではありません。
  • エ(Python): サーバーサイドなどで動くプログラミング言語であり、ブラウザ上で標準的に実行されるスクリプト言語(JavaScriptなど)ではありません。

(2)

本文中の b に入れる適切な字句を答えよ。

模範解答

JSON

採点基準(配点 2点)

正確性(内容)(2点)

  • 2: 正解の字句(JSON)と完全に一致している。
  • 0: 正解の字句と一致していない、または無回答。

解説

SPA構成において、クライアント(Webブラウザ)とサーバ(Web API)との間の非同期通信では、軽量なデータ記述フォーマットである JSON(JavaScript Object Notation)が広く用いられます。

高得点のポイント

  • SPAにおけるデータ通信の標準的なフォーマットである JSON を正しく解答できていること。

(3)

表2中の下線①の方式にすることで,どのような記事がキャッシュサーバに格納されやすくなるか。15字以内で答えよ。

模範解答

参照回数の多い記事

採点基準(配点 1点)

知識・理解度(内容)(1点)

  • 1: キャッシュに格納されやすくなる記事の特徴(参照回数が多いなど)を正しく記述している。
  • 0: 内容が不適切、または無回答。

解説

キャッシュサーバにおいて、メモリ容量の制限によりすべてのデータを保持できない場合、効率的なキャッシュ管理アルゴリズムが採用されます。一般的に採用されるLFU(Least Frequently Used)などの方式では、参照回数の多い記事 を優先してキャッシュに保持することで、キャッシュヒット率を向上させます。

高得点のポイント

  • キャッシュサーバの基本的な仕組みとして、参照回数の多い記事 が残るという特徴を簡潔に表現できていること。
  • 指定された15字以内の文字数制限を厳守すること。

設問2

本文中の cf に入れる適切な数値を答えよ。

(1)

本文中の c に入れる適切な数値を答えよ。

模範解答

280

配点 2

解説

方式(2)で一覧画面を初めて表示すると、Webサーバから静的ファイルを受け取る 80 ms と、Web API「ITNewsList」の応答 200 ms が順に必要です。したがって、80 + 200 = 280 msです。

(2)

本文中の d に入れる適切な数値を答えよ。

模範解答

200

配点 2

解説

ページ切替えでは静的ファイルを再取得せず、方式(2)のWeb API「ITNewsList」だけを呼び出します。表4の測定結果から応答時間は 200 ms です。

(3)

本文中の e に入れる適切な数値を答えよ。

模範解答

138

配点 2

解説

方式(2)では対象記事がキャッシュにある割合は90%です。キャッシュ時は120 ms、RDB参照時は300 msなので、平均は 120 × 0.9 + 300 × 0.1 = 138 msです。

(4)

本文中の f に入れる適切な数値を答えよ。

模範解答

246

配点 2

解説

方式(1)の記事画面では、Web API「ITNewsDetail」の平均応答 156 ms に加え、関連記事6件分の「ITNewsHeadline」を呼び出します。1件15 msなので、156 + 15 × 6 = 246 msです。

設問2のfは,正答率がやや低かった。ITニュース記事とWeb APIの概要から,どのWeb APIが何回ずつ呼び出されるのかを正しく理解し,正答を導き出してほしい。

設問3

〔不具合の指摘と改修〕について答えよ。

(1)

本文中の g に入れる適切な字句を,表2中の Web API名の中から答えよ。

模範解答

ITNewsDetail

採点基準(配点 2点)

正確性(内容)(2点)

  • 2: 正解の字句(ITNewsDetail)と完全に一致している。
  • 0: 正解の字句と一致していない、または無回答。

解説

利用者が急増してシステムへの負荷がしきい値を超えた際の不具合に関する問題です。
アプリケーションサーバのCPU使用率が高い場合に、キャッシュサーバの更新処理が行われないことで影響を受けるWeb APIを特定します。

高得点のポイント

  • 事前検討の重要性を理解し、表2の中から影響を受けるWeb API名として ITNewsDetail を正確に抜き出していること。

(2)

本文中の h に入れる適切な字句を,表2中の Web API名の中から答えよ。

模範解答

ITNewsHeadline

採点基準(配点 2点)

正確性(内容)(2点)

  • 2: 正解の字句(ITNewsHeadline)と完全に一致している。
  • 0: 正解の字句と一致していない、または無回答。

解説

設問3(1)と同様に、システム高負荷時にキャッシュサーバの更新処理がスキップされることで影響を受ける別のWeb APIを特定する問題です。

高得点のポイント

  • アプリケーションサーバとキャッシュサーバの連携を理解し、表2の中から ITNewsHeadline を正確に抜き出していること。

(3)

本文中の下線②にある不具合とは何か。35字以内で答えよ。

模範解答

ITニュース一覧と各記事に関連する記事の一覧が更新されない。

採点基準(配点 2点)

知識・理解度(内容)(1点)

  • 1: 「ITニュース一覧」と「関連する記事の一覧」が更新されないという不具合の事象を正しく挙げている。
  • 0: 不具合の事象が誤っている、または記述されていない。

論理性(構造)(1点)

  • 1: 文脈が通る自然な日本語で、不具合の事象が明確に記述されている。
  • 0: 文脈が不自然、または論理に飛躍がある。

解説

アプリケーションサーバのCPU使用率が高い状態でキャッシュの更新処理が行われない場合、利用者にとってどのような不具合が生じるかを記述する問題です。
システム内部の挙動が、エンドユーザーの画面表示にどう反映されるかを考察する力が求められます。

高得点のポイント

  • キャッシュが更新されない結果として、ITニュース一覧各記事に関連する記事の一覧 が古い状態のままであり、更新されないことを指摘できていること。
  • 指定された35字以内という文字数制限を守り、論理的な文章で解答できていること。

(4)

本文中の下線③の理由を,40字以内で答えよ。

模範解答

記事間の遷移がWebサーバのアクセスログのURLでは解析できないから

採点基準(配点 2点)

知識・理解度(内容)(1点)

  • 1: SPAの特性により、記事間の遷移がアクセスログのURLで解析できないという理由を正しく指摘している。
  • 0: 指摘内容が誤っている、または記述がない。

論理性(構造)(1点)

  • 1: 「〜だから」など、理由を説明する適切な文末・文構成となっている。
  • 0: 文脈が不自然、または論理に飛躍がある。

解説

SPAにおける画面遷移の特徴に関する問題です。
SPAではページ全体を再読み込みせず、JavaScriptを用いて部分的に画面を更新(DOM操作)するため、従来のWebシステムのように画面遷移ごとにURLが変わりません。

高得点のポイント

  • SPAの通信方式により、記事間の遷移がWebサーバのアクセスログのURLでは解析できない という理由を明確に記述できていること。
  • Webサーバ側のアクセスログの特性と、SPAのクライアントサイドルーティングの仕組みの不一致を指摘していること。
  • 指定された40字以内の文字数制限を守り、論理的に記述されていること。

設問3(2)は,正答率がやや低かった。利用者が急増してシステムへの負荷がしきい値を超えた際に,利用者にどのような影響があるのかを事前に検討することは,不特定多数の利用者向けサービスの開発では特に重要である。アプリケーションサーバのCPU使用率が高い場合に,キャッシュサーバの更新処理が行われないと,どのような不具合が生じるのかについて本文から正しく読み取ってほしい。