閉じる

応用情報技術者過去問題 令和7年秋期 午後問8

⇄問題文と設問を画面2分割で開く⇱問題PDF

問8 情報システム開発

モバイルオーダーシステムの画面設計に関する次の記述を読んで,設問に答えよ。

 C社は,カフェを運営する会社であり,オフィス街の駅前を中心に約500店舗を運営している。C社の商品は,顧客の好みに応じたトッピングやサイズを細かくオーダーできることが人気を呼び,売上げを伸ばしている。しかし,朝や昼のピーク時間帯では,オーダーに時間が掛かることが原因で,顧客からクレームが来ている。
 そこで,C社では,顧客自身のスマートフォン(以下,スマホという)でオーダーできるモバイルオーダーシステム(以下,新システムという)を構築することにした。新システムの構築は,C社情報システム部のR君が担当することになった。

〔新システムへの要望〕
 R君は,C社の商品開発部の部員やスマホからのオーダーへのニーズがある店舗の店長を招集し,新システムに対する要望のヒアリングを行った。R君はヒアリング結果を次のように整理した。
  • 顧客のスマホにC社専用のアプリケーションソフトウェアをあらかじめインストールして利用してもらう。
  • 顧客が商品のオーダーから決済までをスマホでできるようにする。
  • 店内利用かテイクアウトかを選択するとともに,連絡が取れる電話番号をハイフン記号を含めて入力できるようにする。顧客の中には海外からの観光客も多いので,プラス記号から始まる国番号を含む電話番号も入力できるようにする。
  • 季節商品を顧客にアピールできるようにする。
  • 店舗ごとのおすすめ商品や独自商品をアピールできるようにする。
  • 選択された商品についてはアイス又はホットのいずれかを選択できるようにする。
  • サイズの指定は,S(150ml),M(200ml),L(250ml)の3段階に加え,100ml~500mlの間で50ml間隔で設定できるようにする。
  • トッピングの指定は,コーヒーパウダー,チョコパウダーなど複数のトッピングも指定できるようにする。
  • 商品に関する"おこのみ要望"を受け付けられるようにする。
  • 商品の受取りは,対象店舗の当日の開店時刻から閉店時刻の30分前までとする。
 R君は,これらの要望を満たすための要件定義書を作成した。

〔画面の設計〕
 R君は,新システムの要件定義書を基に画面設計を開始した。R君が設計中のトップ画面と商品選択画面の画面レイアウト例を図1に,トップ画面の画面項目定義書を表1に,商品選択画面の画面項目定義書を表2に示す。
pm08_1.png/image-size:594×448
pm08_2.png/image-size:607×186
pm08_3.png/image-size:609×240
pm08_4.png/image-size:608×437
 二つの画面ともに,画面上部にC社のロゴと会社名を配置する。さらに,右上には商品紹介サイト,ログイン,顧客情報変更へのリンクを表示するためのa型の画面コンポーネントを配置する。
 トップ画面には,季節商品を表示する領域を配置し,商品の画像を順に表示する。店舗選択と受取り時刻の画面項目は,画面項目の選択時に選択肢のリストを表示し,表示された複数の選択肢から一つを選択するb型の画面コンポーネントを利用する。連絡先の画面項目は,①連絡先の電話番号を入力できるようにする。また,店内利用/テイクアウトの画面項目は,あらかじめ表示された選択肢の中から一つを選択するc型の画面コンポーネントを利用する。
 商品選択画面には,商品を選択するための画面項目を配置する。サイズ指定の画面項目の,S,M,L,自由指定の選択肢のうち,②自由指定を選択した場合だけサイズ自由指定の画面項目を操作可能にし,自由指定以外を選択した場合は操作できないようにする。また,トッピング指定の画面項目は,あらかじめ表示された選択肢から任意の数のトッピングを選択可能とするためにd型の画面コンポーネントを利用する。

〔設計レビュー〕
 R君は設計した画面について,R君の上司であるU課長にレビューを依頼した。U課長は,次のように指摘した。
指摘1:
トップ画面の受取り時刻の画面項目について,選択肢と入力チェックに関して,設計に不備があるので修正すること。
指摘2:
商品選択画面の商品選択の画面項目について,テーブル型の画面コンポーネントを利用する場合,"店舗ごとのおすすめ商品や独自商品をアピールできるようにする"という要望の具体化不足が疑われる。これは商品の売行きに影響があるので,商品開発部に確認すること。
〔新システムのテスト〕
 新システムの実装を完了し,R君が商品選択画面をテストしたところ,画面の初期表示に時間が掛かるという問題が検出された。この問題は,全商品の情報を一度に読み込むことが原因であったので,一度に読み込む商品数を少なくするために③画面コンポーネントを追加した。また,セキュリティ診断ツールを用いたテストを実施したところ,商品選択画面のおこのみ要望の画面項目に関して,④SQLインジェクションに関する不具合が検出された。
 その後,R君は検出された不具合の修正を行って新システムの構築を完了させ,C社は新システムの運用を開始した。

設問1

〔画面の設計〕について答えよ。
  • 表1,表2及び本文中のadに入れる,最も適切な字句を解答群の中から選び,記号で答えよ。
  • 本文中の下線①について,電話番号の入力チェックに用いる正規表現として最も適切なものを解答群の中から選び,記号で答えよ。なお,正規表現の表記法は,[]は括弧内に含まれる1文字,0-9は数字1文字,+は直前の文字の1回以上の繰返し,{m,n}は直前の文字のm回以上回以下の繰返し,\はエスケープ文字を表すものとする。
  • 本文中の下線②について,配置した画面コンポーネントを操作できない状態にすることを何というか。10字以内で答えよ。
a,b,c,d に関する解答群
  • カルーセル
  • コンボボックス
  • チェックボックス
  • ドロップダウンリスト
  • パンくずリスト
  • ハンバーガーメニュー
  • ラジオボタン
  • リストボックス
解答群
  • [0-9]+
  • [0-9\-]+
  • \+{0,1}[0-9]+
  • \+{0,1}[0-9\-]+

解答入力欄

    • a:
    • b:
    • c:
    • d:

解答例・解答の要点

    • a:
    • b:
    • c:
    • d:
    • 非活性化 (4文字)
  • 解説

    • aについて〕
      本文では、二つの画面の右上に、商品紹介サイト、ログイン、顧客情報変更へのリンクを表示するためのa型の画面コンポーネントを配置するとあります。図1の画面レイアウトを見ると、画面右上には特徴的な三本線のアイコン(≡)が表示されています。これは「ハンバーガーメニュー」という画面コンポーネントで、アイコンをタップすると隠れていたメニューが表示される仕組みです。
      pm08_5.png/image-size:418×243
      元々は画面領域が狭く、ナビゲーションメニューを常時表示できないスマートフォン向けに採用された仕組みですが、レスポンシブデザインの普及によってデスクトップでも一般的になりました。

      a=カ:ハンバーガーメニュー

      bについて〕
      空欄bには、「画面項目の選択時に選択肢のリストを表示し,表示された複数の選択肢から一つを選択する」ための画面コンポーネントが入ります。図1の"店舗選択"及び"受取り時刻"を見ると、この2つの選択では、テキストボックスの右端に下向き三角(▼)が付いた画面コンポーネントが使用されています。これは「ドロップダウンリスト」という画面コンポーネントで、多くの項目の中から1つを選択する場合に使用します。
      pm08_6.png/image-size:418×243
      排他的選択は後述のラジオボタンでも可能ですが、店舗や時刻のように選択肢が多い場合は、必要時に選択肢を展開するドロップダウンリストを用いることで、画面の見やすさと選択のしやすさを両立できます。なお、ドロップダウンリストは、プルダウンメニュー/セレクトボックスとも呼ばれます。

      b=エ:ドロップダウンリスト

      cについて〕
      空欄cには、「あらかじめ表示された選択肢の中から一つを選択する」ための画面コンポーネントが入ります。図1の"店内利用/テイクアウト"を見ると、選択肢となるテキストが表示され、それぞれ先頭に白丸(○)が描かれています。これは「ラジオボタン」という画面コンポーネントで、あらかじめ用意された項目の中から1つを選ぶ(排他的選択:シングルアンサー)する場合に使用します。選択中の項目には丸中黒(◉)が付きます。
      pm08_7.png/image-size:418×242
      ドロップダウンメニューでは選択に2回のクリックが必要ですが、ラジオボタンではクリック1回で選択ができるため、UXの観点で優れています。このため「店内利用/テイクアウト」「ホット/アイス」のように、項目数が少ない場面ではラジオボタンの使用が適しています。

      c=キ:ラジオボタン

      dについて〕
      空欄dには、「あらかじめ表示された選択肢から任意の数のトッピングを選択可能とする」ための画面コンポーネントが入ります。図1のトッピング指定"を見ると、選択肢となるテキストが表示され、それぞれ先頭に白い四角(□)が描かれています。これは「チェックボックス」という画面コンポーネントで、あらかじめ用意された項目の中から任意個を選ぶ(複数選択:マルチアンサー)する場合に使用します。選択中の項目にはチェックマーク(✔)が付きます。
      pm08_8.png/image-size:418×242
      トッピング指定については、複数のトッピングを組み合わせ可能なことが前提となっているため、1つしか選べないラジオボタンは要件を満たさず、複数選択が可能なチェックボックスが適しています。

      d=ウ:チェックボックス

      その他の選択肢の簡単な説明です。
      ア:カルーセル
      複数の画像やカードを横方向にスライドさせて切り替えて表示するUI部品。トップのバナーやおすすめ商品の回転表示などに使われる
      イ:コンボボックス
      ドロップダウンメニューにテキストボックスを組み合わせたUI部品。候補リストから選択に加え、自由入力もできる
      オ:パンくずリスト
      Webサイトの階層構造における現在位置を「トップ>カテゴリ>…」の形で示すナビゲーション部品
      ク:リストボックス
      ドロップダウンメニューのように開閉するのではなく、候補リストを枠内に常時表示し、その中から選択するUI部品
    • 連絡先の電話番号はハイフンを含めて入力でき、さらに海外観光客向けにプラス記号から始まる国番号を含む形式も入力できる必要があります。具体的には「+」から始めることができ、その後に数字とハイフンを含む形式が想定されています。

      まず、先頭に付く「+」はあってもなくてもよいため、\+{0,1}として0回または1回の出現を許可します。続いて、電話番号本体は数字(0-9)とハイフン(-)の並びになるため、[0-9\-]+で数字またはハイフンが1回以上続くことを表します。したがって「エ:\+{0,1}[0-9\-]+」が正解となります。
      pm08_9.png/image-size:334×171
      他の選択肢は以下の理由で誤りです。
      • [0-9]+では数字しか許容せず、+やハイフンを含められません。
      • [0-9\-]+でハイフンは許容しますが、国番号に必要な先頭の+を受け付けません。
      • 先頭の+は受け付けますが、[0-9]+のため電話番号にハイフンを含められません。
      なお「エ」の正規表現も、+-----といった文字列でもチェックを通ってしまうため実用には耐えません。あくまでも試験問題用の簡易的な仕様と考えてください。

      ∴エ:\+{0,1}[0-9\-]+

    • 下線②では、「サイズ指定の選択肢のうち自由指定を選んだ場合だけサイズ自由指定の画面項目を操作可能にし,自由指定以外を選んだ場合は操作できないようにする」とあります。つまり、条件を満たさない間は、その画面コンポーネントを表示したまま操作だけできない状態にする設計です。

      設問では、このように画面上の項目を操作できない状態にすることを何と呼ぶかを問うています。一般に、この操作できない状態は「非活性化」と呼ばれます。非活性化状態の画面コンポーネントはボタンや入力欄がグレーアウトして表示され、操作できないことを視覚的に示すことがあります。HTMLの実装では、HTML要素にdisabled属性を付与することで操作を不能にします。
      pm08_10.png/image-size:199×122
      もっとも、「非活性化」という用語は必ずしも一般的ではないため、同じ意味を持つ「無効化」や「非アクティブ化」という表現も、正解として扱われると思われます。

      ∴非活性化

    設問2

    〔設計レビュー〕について答えよ。
    • 指摘1について,設計の不備を20字以内で答えよ。
    • 指摘2について,商品開発部に確認すべきことは何か。10字以内で答えよ。

    解答入力欄

    解答例・解答の要点

    • 閉店時刻の30分前までとする。 (15文字)
    • 商品の並び順 (6文字)
  • 解説

    • 指摘1は、トップ画面における受取り時刻の画面項目について、選択肢の表示と入力チェックの設計に不備があるため、その修正を求めるものです。

      要件では「商品の受取りは,対象店舗の当日の開店時刻から閉店時刻の30分前まで」としています。しかし、表1の定義書では、この要件が受取り時刻の選択肢と入力チェックに反映されていません。受取り時刻の選択肢は「現在時刻+15分以降の時刻のリスト」とされているため、閉店近くに注文した場合、閉店時刻の30分前より後の時刻が選択肢として表示・選択されてしまうおそれがあります。また、入力チェックにおいても、注文時刻以降であるかどうかのみを確認しており、閉店時刻の30分前までという制約が考慮されていません。

      したがって、受取り時刻の画面設計に関する設計の不備とは、「閉店時刻の30分前までに制限していない」点を指していると判断できます。

      ∴閉店時刻の30分前までとする。

    • 指摘2は、商品選択画面の"商品選択"項目にテーブル型コンポーネントを用いる場合に、「店舗ごとのおすすめ商品や独自商品をアピールできるようにする」という要件の具体化が不足している点を問題としています。

      図1の商品選択画面を見ると、最初に表示できる商品は6つに限られ、それ以外の商品はスクロールしないと確認できません。並び順を見ると、売れ筋順に表示しているように見えます。これでは、特定商品のアピールはできません。また、表2の画面項目定義書では、No.2商品選択の選択肢が「対象店舗で販売可能な商品」とのみ定義されており、要件を実現するための施策が設計に反映されていないことが読み取れます。

      テーブル形式は各商品が同一サイズで整然と並ぶため、強調したい項目を目立たせるには、表示順やラベルによる視線誘導が重要です。本問の場合、アピールしたい商品がファーストビューに表示されていないため、要件を満たすには、まず商品の並び順を見直すことが不可欠です。

      ∴商品の並び順

    設問3

    〔新システムのテスト〕について答えよ。
    • 本文中の下線③について,どのような画面コンポーネントを追加したか。画面コンポーネント名を15字以内で答えよ。
    • 本文中の下線④について,SQLインジェクションの対策にならないものを解答群の中から選び,記号で答えよ。
    解答群
    • SQLで利用する記号を入力不可にする入力チェックを追加する。
    • SQL文の組立てにおいて,プレースホルダを使用する。
    • 新システムへのアクセスはWAF経由とする。
    • 新システムを動作させるサーバにマルウェア対策ソフトを導入する。

    解答入力欄

    解答例・解答の要点

    • ページネーション (8文字)
  • 解説

    • 新システムのテストでは、商品選択画面の初期表示に時間が掛かる問題が検出され、原因は全商品の情報を一度に読み込むことだと判明しています。この問題に対応するため、一度に読み込む商品数を減らすための画面コンポーネントを追加したと記述されています。

      方向性としては、一度に読み込む件数減らし、段階的に表示する仕組みを採用することになります。このように初期表示の件数を抑えた場合、利用者が他の商品を確認できるよう、表示内容を切り替えるための画面上のナビゲーションが必要となります。その代表的な仕組みが「ページネーション」です。ページネーションとは、ECサイトなどで一般的に用いられているように、前へ/次へ/ページ番号の操作によってページ間を移動できるようにする画面コンポーネントです。一度に処理する量が減ることから、読込み負荷の低減、表示速度の向上が期待できます。

      したがって、下線③で追加された画面コンポーネントは「ページネーション」となります。ページングやページ送りでも可でしょう。
      pm08_11.png/image-size:418×266
      なお、同じ目的を実現する別の方法として、レイジーロード(遅延読み込み)と無限スクロールを組み合わせる手法も考えられます。この方法では、初期表示では一部の商品だけを読み込み、利用者が下方向にスクロールした際に追加分を順次読み込んで表示します。ただし、本問は「追加した画面コンポーネント名」を問うているため、明示的な切替部品であるページネーションを答えとするのが適切です。

      ∴ページネーション

    • SQLインジェクションは、入力欄にSQLの断片を混入させることで、アプリケーションが意図しないSQL文を実行してしまう攻撃です。"おこのみ要望"の入力欄は自由入力となっているため、Webアプリケーション側で適切な対策を講じる必要があります。この設問では、対策とならないものを選択します。
      • 適切。入力チェックを追加すれば、攻撃に使われる記号の混入を防止する効果があります。ただし、入力チェックはあくまでも保険的な対策です。
      • 適切。プレースホルダ(SQL文の雛形の中に変数の場所を示す記号)を用いた SQL文の組み立ては、SQLインジェクション脆弱性の根本的な解決法の一つです。プレースホルダを置いて、SQL文の実行時に実際の値を割り当てることで、入力値は単なる値として安全に処理することができます。
      • 適切。WAF(Web Application Firewall)を前段に置くことで、既知の攻撃パターンを含むリクエストをWebアプリケーションに届く前に検知・遮断できる可能性があるため、補完的対策として位置付けられます。
      • 不適切。マルウェア対策ソフトは、不正プログラムの実行や感染を防ぐものです。SQLインジェクションはWebアプリケーションの実装不備が原因であり、マルウェアが引き起こす被害ではないため、サーバにマルウェア対策ソフトを導入しても防ぐことはできません。
      ∴エ:新システムを動作させるサーバにマルウェア対策ソフトを導入する。
    問8成績

    令和7年秋期 午後問題一覧

    問1 問2 問3 問4 問5 問6 問7 問8 問9 問10 問11 採点講評

    Pagetop