DesignOps - 表記規則

表記規則は、デザイナーのプロファイルと開発者のプロファイルを区別するのに役立ちます。
デザイナーは、抽象化を考慮せずに作成、描画を行う場合があります。描画の一部は実装時に、たとえば画像である必要があります。こうしたコンポーネントの内部的な詳細は GeneXus にインポートされません。
デザイン時の自由度が高いため、描画内容の意味を識別するための単一のヒューリスティックが現時点ではありません。このような理由から、デザインを実装に明確に伝える表記規則を用意しています。

表記規則

表記規則は、レイヤーにラベルを設定するためにデザイナーが使用する接頭語であり、デザインの中で意図するコントロールタイプや動作を伝えるための標準化されたアプローチを提供し、開発プロセス全体を通してまとまりと一貫性を保証します。これらの接頭語は大文字と小文字を区別しないので、(他の言語に翻訳せずに) キーワードとして扱うべきです。

無視するレイヤー

GeneXus にインポートしないドラフトを描画するときに使用します。

接頭語	_ (アンダースコア)
適用対象	任意のレイヤー
例	Root/Group/Frame layer └─ _ Ignore this layer

注

アプリケーション内の一部のエレメントは標準とすることを意図しているため、次のキーワードでもレイヤーが無視されます: 'keyboard'、'status bar'

静的コンテンツ

静的コンテンツ (セクションのタイトルや静的画像など) を定義するために使用されます。GeneXus はこれを、テキストレイヤーの場合は TextBlock として、ビットマップレイヤーまたは画像としてエクスポートされたレイヤーの場合は画像コントロールとして解釈します。

接頭語	static
適用対象	テキスト、ビットマップ、画像としてエクスポートされたレイヤー
例	Root/Group/Frame layer └─ Static Header title

動的コンテンツ

動的コンテンツ (顧客名など) の定義に使用します。GeneXus では読み取り専用の変数として解釈されます。

接頭語	(なし)
適用対象	テキストレイヤー
例	Root/Group/Frame layer └─ Customer Name

編集可能なコンテンツ

編集可能なコンテンツ (ユーザー入力など) の定義に使用します。GeneXus では編集可能な変数として解釈されます。

接頭語	input
適用対象	テキストレイヤー
例	Root/Group/Frame layer └─ Input Customer Name

注

インポートプロセスでは、入力フィールドに関連付けられた値が事前に設定された値か、招待メッセージかどうかを推論することはできません。どのケースが表示されているかを開発者に知らせてください。それにより、開発者は各ケースに対して適切な色をカスタマイズできます。GeneXus は、入力フィールドに関連付けられた値を設定することはありません。代わりに、その値を招待メッセージとして使用します。

ボタンコントロール

ボタンの定義に使用します。GeneXus ではボタンコントロールとして解釈されます。レイヤーでリンクを定義している場合、GeneXus では、ターゲットアートボードで定義されているパネルへの呼び出し処理が解釈されます。それ以外の場合はダミーメッセージが表示されます。

接頭語	button
適用対象	グループまたはフレームレイヤー
例	Root/Group/Frame layer └─ Button Cancel ├─ Caption ─> キャプション └─ Background ─> 背景および形

注

ボタンのキャプションを定義するテキストレイヤーが複数ある場合、最初のテキストレイヤーのみが考慮されます。

ComboBox コントロール

コンボボックスコントロールの定義に使用します。GeneXus では [ Control Type ] = Combo Box の変数として解釈されます。

接頭語	combobox
適用対象	グループまたはフレームレイヤー
例	Root/Group/Frame layer └─ ComboBox Country ├─ Uruguay ─> 表示される値 ├─ Chevron Drawing ─> 山型の描画 └─ Background ─> 背景および形

注

GeneXus は常に既定のコンボボックスコントロールを使用します。そのため、カスタムの山型の描画はレンダリングされません。

チェックコントロール

チェックボックスコントロールの定義に使用します。GeneXus では [ Control Type ] = Check Box の変数として解釈されます。

接頭語

checkbox

適用対象

グループまたはフレームレイヤー

例

 Root/Group/Frame layer 
 └─ CheckBox Agree 
    ├─ Are you agree?  ─> チェックボックスのラベル
    ├─ Check Drawing   ─> チェックの四角形の描画
    └─ Background      ─> 背景および形

注

GeneXus は常に既定のチェックボックスコントロールを使用します。そのため、カスタムのチェックの描画はレンダリングされません。

ラジオボタンコントロール

ラジオボタンコントロールの定義に使用します。GeneXus では [ Control Type ] = Radio Button の変数として解釈されます。グループ内で定義されているエレメントがラジオボタンの項目になります。

接頭語

radiobutton

適用対象

グループまたはフレームレイヤー

例

 Root/Group/Frame layer 
 └─ RadioButton Payment Currency
    ├─ USD Item 
    │  ├─ USD            ─> 最初のラジオボタンのラベル
    │  └─ Radio Drawing  ─> 最初のラジオボタンの円の描画
    ┆ ...
    ├─ UYU Item
    │  ├─ UYU            ─> 最後のラジオボタンのラベル  
    │  └─ Radio Drawing  ─> 最後のラジオボタンの円の描画
    └─ Background  ─> 背景および形

注

GeneXus は常に既定のラジオボタンコントロールを使用します。そのため、カスタムのラジオボタンの描画はレンダリングされません。

タブコントロール

タブコントロールの定義に使用します。GeneXus では、タブコントロールとして解釈されます。グループで定義されるエレメントは、次の 2 つです: タブストリップ用のグループとタブコンテンツ用のグループ。

接頭語

tabs

適用対象

グループまたはフレームレイヤー

例

 Root/Group/Frame layer 
 └─ Tabs Information
     ├─ Tab Strip
     │  ├─ About       ─> このアートボードの接尾語と一致/選択されたスタイルを適用済み
     │  ┆ ...
     │  └─ Directions  ─> 別のアートボードの接尾語と一致/選択されていないスタイルを適用済み
     └─ Tab Content
        └─ (「About」セクション向けのタブのコンテンツの設計)

注	1)	タブストリップで選択されたタブアイテムは、ほかのタブアイテムと区別する (フォントの色を変えるなど) 必要があります。
	2)	タブコンテンツのバリエーションは、同じ接頭語を共有する別のアートボードで設計する必要があります。たとえば、「Attraction」というパネルを設計し、そこに「About」と「Directions」という項目を持つタブを含めるとします。その場合、2 つのアートボードを設計し、名前をそれぞれ「Attraction - About」と「Attraction - Directions」にする必要があります。両者は、タブコンテンツのセクションとタブアイテムのスタイルを除いて同一です。
	3)	スクロール可能なタブストリップは使用できません。また、タブは最大で 4 個にすることをお勧めします。
	4)	タブストリップは (シンボルではなく) グループとして定義する必要があります。
	5)	各タブアイテムではテキストレイヤーのみを使用できます (アイコンやセレクターバーは使用できません)。

リストとカルーセル

リスト (縦方向にスクロール) またはカルーセル (横方向にスクロール) の定義に使用します。GeneXus では、対応する方向のグリッドコントロールとして解釈されます。

接頭語

grid (vertical | horizontal)

適用対象

グループまたはフレームレイヤー

例

 Root/Group/Frame layer 
 └─ Grid Attractions
    ├─ Attraction 1
    │  ├─ Attraction Name   ─> 最初にオーバーライドされた値/スタイル
    │  └─ Attraction Image  ─> 最初にオーバーライドされたスタイル
    ┆ ...
    └─ Attraction N
       ├─ Attraction Name   ─> 最初にオーバーライドされた値/スタイル
       └─ Attraction Image  ─> 最初にオーバーライドされたスタイル

注	1)	方向の指定がなかった場合、GeneXus が推測を試みます。
	2)	シンボルまたはコンポーネントを使用して、リストの項目を再利用することをお勧めします。実際、グリッドとは、各項目が同じ意味合いを持つ、一連の繰り返しエレメントです。重要: モバイル向けのグリッドの設計では、複数のシンボルまたはコンポーネントのインスタンスを使用できます (異なるレイヤーとして表示される)。 Web 向けのグリッドの設計では、単一のシンボルまたはコンポーネントのインスタンスを使用できます (単一のレイヤーのみを使用できるため)。最初のシンボルまたはコンポーネントのインスタンスと異なるその他のインスタンスは無視されます。
	3)	グリッドレイヤーが自動レイアウトとして定義され、レイアウトフローがラップとして定義されている場合、グリッドコントロールは GeneXus で [ Control Type ] = Flex として定義されます (Flex Grid の定義)。

ナビゲーションバー

モバイルアプリケーションパネルのナビゲーションバーのレンダリングに使用します。GeneXus ではターゲットパネルのアプリケーションバーとして解釈されます。

接頭語

navigation

適用対象

グループまたはフレームレイヤー

例

 Root Layer 
 └─ Navigation Bar
    ├─ Back Icon      ─> オプションの左アイコン
    ├─ Title          ─> タイトル
    ├─ Profile Icon   ╮
    ┆   ...          ├> オプションの右アイコンのシーケンス
    └─ Cart Icon      ╯

注	1)	モバイルアプリケーションのみに適用されます。Web アプリケーションの場合は、この規則は無視され、そのまま生成されます。
	2)	左アイコンは 1 つのみ使用できます (例: 戻るボタンを定義するため)。
	3)	タイトルとして、中央揃えのテキストは 1 つのみ使用できます。
	4)	複数の右に重なったアイコンを使用できます (複数のオプションが可能)。

ナビゲーションタブ

モバイルアプリケーションのナビゲーションタブのレンダリングに使用します。GeneXus では複数のターゲットパネルを参照する Menu オブジェクトとして解釈されます。

接頭語

tabbar

適用対象

グループまたはフレームレイヤー

例

 Root Layer 
 └─ TabBar Menu
    ├─ Attractions           ─> グループの名前が「Attractions」アートボードを参照
    │  ├─ Attractions Label
    │  └─ Attractions Icon
    ┆  ...
    └─ Profile               ─> グループの名前が「Profile」アートボードを参照
       ├─ Profile Label
       └─ Prifile Icon

注	1)	Web アプリケーションには適用されません。モバイルアプリケーションの場合、タブは最大で 5 個にすることをお勧めします。
	2)	各タブアイテムはグループ化する必要があり、各グループの名前は、表示されるアートボード (またはほかのアートボードとリンクした最初のアートボード) の名前と正確に一致する必要があります。たとえば、ナビゲーションタブに「User Profile」という名前のアートボードを表示するアイテムがある場合、そのアイテム (レイヤーグループ) も「User Profile」という名前である必要があります。
	3)	各タブアイテムには、1 つ以上のテキストレイヤー (タブのキャプションを表す)、または画像/エクスポートされたレイヤー (タブのアイコンを表す) が含まれる必要があります。

プレースホルダー

アートボードまたはメインフレームで定義され、GeneXus によって、コンテンツホルダーコントロールを含む Master Panel オブジェクトとして解釈される場合に、プレースホルダーをレンダリングするために使用されます。一方、シンボルやコンポーネント内のグループやフレームレイヤーに規則が定義されている場合、そのレイヤーは [ Is Slot ] プロパティが True に設定された GeneXus のテーブル/キャンバスコントロールを生成します。

接頭語	slot
適用対象	グループまたはフレームレイヤー
例	Root Layer ─> アートボードまたはメインフレームは、マスターパネルとして定義 ├─ Header │ ├─ Static Title │ └─ Header Background │ ... ├─ Slot Body ─> 他のパネルが配置されるプレースホルダーを定義 │ ... └─ Footer ├─ Static Copyright └─ Footer Background
例	Component Layer ├─ User Profile Image ├─ Slot Body ─> Is Slot = True で定義されます │ ├─ User Name ─> 開発者は Stencil のインスタンスで編集できます │ ├─ User Company ─> 開発者は Stencil のインスタンスで編集できます │ └─ Background ─> コントロールとして生成されませんが、コンテナのスタイルクラスを定義します └─ Line

注	1)	この規則は、アートボードまたはメインフレームに適用された場合、Web または Angular プラットフォームでのみ使用できます。
	2)	アートボードまたはメインフレームで複数のレイヤーを「slot」規則で定義する場合、コンテンツホルダーコントロールは Master Panel オブジェクト内で一意でなければならないため、1 つのレイヤーだけが考慮されます。
	2)	アートボードやメインフレームでコンテナレイヤーを「slot」規則で定義する場合、コンテンツホルダーコントロールの目的はプレースホルダーのセクションを定義することであるため、そのコンテナのコンテンツは無視されます。
	3)	シンボルやコンポーネントでコンテナレイヤーを「slot」規則で定義すると、そのコンテナのコンテンツは Stencil のインスタンスで開発者が編集できるようになります。

表記規則

無視するレイヤー

静的コンテンツ

動的コンテンツ

編集可能なコンテンツ

ボタンコントロール

ComboBox コントロール

チェックコントロール

ラジオボタンコントロール

タブコントロール

リストとカルーセル

ナビゲーションバー

ナビゲーションタブ

プレースホルダー

適用範囲

参考情報

使用可能バージョン