Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

IT技術 (Technology)

画面設計の項目一覧の書き方とサンプルのご紹介

投稿日:2021年10月8日 更新日:

 

<目次>

(1) 画面設計の項目一覧の書き方とサンプルのご紹介
 (1-1) 項目一覧とは?
 (1-2) 項目一覧の書き方は?
 (1-3) 項目一覧のサンプル

(1) 画面設計の項目一覧の書き方とサンプルのご紹介

(1-1) 項目一覧とは?

画面設計を構成するドキュメントの一つで、画面を構成する各部品(例:テキストボックス、プルダウン、ラジオボタンなど)の実装(HTMLやJSPなど)や、画面の初期値や活性/非活性の制御(JavaScriptなど)の設計を一覧表で記載するためのドキュメントです。
 

(1-2) 項目一覧の書き方は?

項目一覧に最低限必要と思われる項目を以下にご紹介します。各項目毎にこれらの内容を設計する事で、項目一覧が仕上がります。

(表)

項目ID 項目を一意に特定するID
項目名 項目の論理名(画面表示やIFで使う名前)
部品種別 項目のGUI部品の種別を記載します。

(例)
・テキストボックス
・ラジオボタン
・チェックボックス
・ボタン
・表(テーブル)

参照テーブル ※出力(O)か入出力(I/O)の項目に対して記載。
項目を取得する時に参照するテーブルを記述します。複数のテーブルから取得する場合は、複数テーブルを記載します。
参照カラム ※出力(O)か入出力(I/O)の項目に対して記載。
項目を取得する時に参照するカラムを記述します。複数のカラムから取得する場合は、複数カラムを記載します。

(※上記の「参照テーブル」のうち、データを取得する対象カラムを記述する)

属性 I/O 項目が入力(I)なのか、出力(O)なのか、両方(I/O)なのか?を記載します。

・入力(I)
⇒ユーザーが入力する項目
・出力(O)
⇒画面に出力(表示)する項目
・入出力(I/O)
⇒上記の両方(入力&表示の両方を行う項目)

属性 文字種別 項目の「全角/半角」や「英数記号」の情報を記載します。

・半角数字
・半角英数
・半角英数記号
・半角カナ
・全角
・全角/半角混在

属性
┗桁数
最大桁数
最小桁数
項目で許可する「最大桁数」と「最小桁数」を記載します。具体的な制御としては、HTMLのタグで「maxlength」や「minlength」属性で指定するイメージです。

(例)minlength
<input type=”text” minlength=”5″ id=”sample”>

属性 文字配置 項目の寄せ方を指定します。
・右寄せ
・左寄せ
・中央寄せ
属性 必須 項目が入力必須か否か?を指定します。必須の場合は、空欄のまま処理を進めようとするとチェックでエラーになります。
(例)
必須=「Y」、任意=「-」(ハイフン)
属性 初期表示 項目のデフォルト値があれば記載します。

(例)
・本日日付を表示
・オペレーターの店番を表示
・テーブルより取得したデータを表示

属性 ソート順 表内の項目で、明細をソートする必要がある場合に追記します。

(例)
店番の昇順でソート

属性 編集仕様 項目を編集して表示する際に、その編集内容を記載します。

(例)
フルネームの項目で「セイ+” “+メイ」と連結して表示する場合など

活性/非活性 初期状態 項目の初期状態が「活性」なのか「非活性」なのか?を記載します。
活性/非活性 活性/非活性条件 項目が活性または非活性になる条件がある場合にそれらを箇条書きで記述します。

目次にもどる

(1-3) 項目一覧のサンプル

上記の項目を実際に埋めてみたサンプルをご紹介します。
 
(表)

項目ID 項目名 部品種別 参照テーブル 参照カラム I/O 文字種別 最小桁数 最大桁数 文字配置 必須 初期表示 ソート順 編集仕様 初期状態 活性/非活性条件
A0001 店番 テキスト 店舗マスタ 店番 I/O 半角数字 4 4 Y オペレーターの店番を表示
A0002 検索 ボタン I 非活性 店番がヒットし、配下の店番がある場合に活性
A0003 店名 テキスト 店舗マスタ 店名 O 全角 1 60 非活性 店番がヒットし、配下の店番がある場合に活性
A0004 カナ テキスト 店舗マスタ カナ店名 O 半角カナ 1 60 非活性 店番がヒットし、配下の店番がある場合に活性
A0005 住所 テキスト 店舗マスタ 所在地 O 全角/半角混在 1 100 非活性 店番がヒットし、配下の店番がある場合に活性
A0006 店長フルネーム テキスト 店舗マスタ 店長セイ
店長メイ
O 全角 1 10 店長セイ+” “+店長メイ 非活性 店番がヒットし、配下の店番がある場合に活性
A0007 配下店番表 表(テーブル) 店舗マスタ 店番 O 店番の昇順 非活性 店番がヒットし、配下の店番がある場合に活性
A0008





























(図131)

例えば、画面で店番「001」の情報を入れて検索を押下すると、001店番の詳細情報が画面に表示されます。

(図132)

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-IT技術 (Technology)

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

RESTful APIとは?概要や6つの原則についてご紹介

  <目次> (1) RESTful APIとは?概要や6つの原則についてご紹介  (1-1) RESTful APIの概要  (1-2) RESTの6つの原則 (1) RESTful AP …

Outlookの代行機能(代理人アクセス)の概要および出来る事/出来ない事の整理

  <目次> (1) Outlookの代行機能(代理人アクセス)の概要および出来る事/出来ない事の整理  (1-1) 「代理人アクセス機能」の概要  (1-2) 「代理人アクセス機能」の権限 …

Slackのソケットモードとは?概要からHello Worldの手順までご紹介

  <目次> (1) Slackのソケットモードとは?概要からHello Worldの手順までご紹介  (1-1) Slackのソケットモードとは?  (1-2) 設定手順(Hello Wo …

Slackでメッセージをエクスポートする手順をご紹介

  <目次> (1) Slackでメッセージをエクスポートする手順をご紹介  (1-1) エクスポートの概要  (1-2) 手順(パブリックチャンネルのExport)  (1-3) エクスポ …

Confluenceでページ毎の閲覧者数を表示する方法について

  <目次> (1) Confluenceでページ毎の閲覧者数を表示する方法について  (1-1) ページ毎の閲覧者数の表示や、アクセス解析を行う方法について  (1-2) 試しにFree …

  • English (United States)
  • 日本語
Top