Velocity powered by Wavelink

画面要素の編集

ホスト画面を取り込み、インポートした後には、画面要素を編集し、想定通りの表示になるようにします。

既定では、Velocity は予測書式設定を適用します。予測書式設定を編集するか、Rapid Modernization と CSS で上書きできます。このトピックでは、画面要素と、予測書式設定を編集する方法について説明します。Rapid Modernization を使用した画面のカスタマイズについては、「Rapid Modernization の使用」をご参照ください。

各最新の画面には、キー テキスト、カーソル フィールド、データ ラベル、フィールド、ヘッダー、メニュー項目などの複数の要素があります。

関連する動画を観る (3:16)

画面の編集を開始する前に理解する必要があるいくつかの概念:

予測およびテンプレート画面。 画面を Velocity コンソールにインポートした後、黒と緑の画面が自動的にモバイル対応表示に変換されます。これらの画面には [予測] というラベルがあります。つまり、手動変更の影響を受けず、Velocity のビルトイン HTML および CSS レンダリング エンジンとユニバーサル スタイルが適用されます。画面が手動で変更されるときには、[テンプレート] という名前になり、そのページ固有のスタイルと書式が使用されます。画面をプロジェクトにインポートして、個別の画面要素スタイルを編集するには、「画面のインポート」をご参照ください。

テーマ。 画面の要素は画面単位で編集できます。つまり、単一の画面要素の変更は同様のタイプのすべての要素に適用されるわけではありません。あるいは、テーマを使用すると、すべての画面に適用される各要素タイプの書式スタイルを作成できます。プロジェクトのグローバル テーマを変更しても、画面の「予測」ステータスが「テンプレート」に変わりません。テーマの詳細については、「プロジェクト設定の構成」をご参照ください。

[テーマ] タブから設定されたテーマは、個別の要素が [画面] タブで編集されるときに上書きされます。

キー テキストとカーソル ゾーン。 キー テキストを使用すると、再書式設定変更の基になる画面テンプレートを作成できます。他の画面に選択したキー テキストが含まれる場合、その画面は、現在キー テキストがある画面に適用されたスタイルに自動的に書式変更されます。また、カーソル ゾーンを作成し、ユーザがフィールド間を移動するときにテンプレートを変更する複数のテンプレート ルールを単一の画面で作成できます。

タグ。 類似した画面のグループの支援または特定の画面を簡単に見つけられるようにするために、タグを使用して、画面の内容を説明できます。手動でタグを追加するには、画面番号の右のスペースをクリックします。関連するタグ単語をカンマ区切りで追加します。タグには記号を含めることができません。

スパニング。 スパン内に要素を配置し、まとめて表示します。たとえば、ユーザ名データ ラベルとユーザ名テキスト フィールドの周囲にスパンを配置し、並べて表示させます。

表。 再書式設定された画面に表を追加し、行と列で要素レイアウトを構造化します。表が作成されるときには、空のコンテナ セルが含まれ、その中で要素をドラッグしてドロップできます。これは特に、データ ラベルとフィールド、または複数のメニュー項目などの複数の要素を表示する際に有用です。

画面を編集するときには、UI の下部にある [プレビュー] ボタンをクリックして、ダイアログを開くと、クライアント ユーザへの一般的な画面表示方法を確認できます。

プレビュー モードでは、使用されるデバイス タイプの表示可能な領域 (キーボードを含まない画面アスペクト比)、拡大縮小 (画面の開発中にのみ使用)、画面解像度密度 (一般的に、1、1.5、2、3、または4)を入力できます。表示サイズおよび密度設定はプロジェクトとともに保存され、クライアント デバイスの [セッション詳細] で表示できます。

プレビュー モードで複数の画面をプレビューするには、キーボードの上下矢印をクリックして、タブを移動します。

画面リスト

画面キャプチャをインポートした後、画面は、クライアントからキャプチャされた順序で、画面リストに表示されます。また、このリストには関連付けられたタグと適用されたテンプレートが表示されます。リストの画面番号をドラッグして、画面を並べ替えます。

検索バーを使用して、タグ、画面テキスト、または画面名に基づいて、画面のリストをフィルタリングします。

+- などの論理演算子を使用して、検索にタグを含めたり除外したりできます。例: +red -green

^ を使用して、緑色の画面でテキストを検索します。例: ^qty

@ を使用すると、テンプレート名を検索します。例: @T9

# を使用すると、タグを検索します。例: #menu

リテラル語句は " " で囲みます。例: "pick order"

? を使用すると、1文字のワイルドカード検索を実行します。例: wil?

* を使用すると、複数文字のワイルドカード検索を実行します。例: Qty\:*

検索する場合は、次の文字の前に \ を使用します。

+ - & | ! ( ) { } [ ] ^ " ~ * ? : \ / @ #

例: \#login

インポートされた画面キャプチャから重複する画面を削除するには、画面リストの下部にある [重複の削除] ボタンをクリックします。重複する画面が自動的に検出されます。重複は、同じ画面のすべての文字と要素、および同じ位置にあるカーソル ゾーンに基づきます。[重複の削除] をクリックした後に、ダイアログが表示され、このリストで検出された画面の重複数の一覧と、削除を完了するための確認メッセージが表示されます。このオプションは、TE プロジェクトで使用できます。

インポートされた画面

元の黒と緑の画面は、この列のクライアント表示からキャプチャされます。ここのすべてのテキスト フィールドは、Velocity ビルトイン HTML と CSS エンジンを使用して識別およびレンダリングされます。

Velocity のほとんどの処理は [再書式設定された画面] と [画面要素] 列から実行されますが、テンプレートの照合、カーソルゾーンの追加、新しい要素の作成などの機能をここから実行できます。

Closedテンプレート一致のキーテキストを追加するには

テンプレート一致のために複数のキー テキスト フィールドを追加できます。他の画面はこの画面と比較されます。特定されたキー テキストが同じ場所にある場合は、これらの画面が同じテンプレートに関連付けられます。

2つのテキスト フィールドを並べて作成する場合は、1つのキー テキスト フィールドに自動的に結合されます。

1.クリックしてドラッグし、[インポートされた画面] ペインで、一致する必要があるテキストをハイライト表示します。

2.[キー テキストの追加] ボタンをクリックします。

3.[保存] をクリックして変更を保持します。

Closedカーソル ゾーンを追加するには

1.クリックしてドラッグし、[インポートされた画面] ペインで、一致する必要があるカーソル ゾーンをハイライト表示します。

2.[カーソル ゾーンの追加] ボタンをクリックします。

3.[保存] をクリックして変更を保持します。

画面に追加する最初のカーソル ゾーンは、インポートされた画面上で現在カーソルがある場所である必要があります。同様に、すべての他のカーソル ゾーンが削除されるまで、カーソルがあるカーソル ゾーンを削除できません。

Closed要素を追加するには

1.クリックしてドラッグし、新しい画面要素を対応させる緑の画面の一部をハイライト表示します。新しい画面の要素の場所に相対的な画面の領域を選択してください。

2.[新しい要素] ボタンをクリックします。

3.[タイプ] ドロップダウンリストから作成する要素のタイプを選択し、要素のオプションを設定します。

再書式設定された画面

この列には、ビルトイン HTML および CSS レンダリング エンジンが適用された、インポートされた画面が表示されます。[インポートされた画面] 列の黒と緑の画面は、モバイル画面のフィールド、ラベル、およびボタンに対応しています。各要素を選択し、[画面要素] 列からプロパティを編集できます。

テンプレート

画面が変更されるときに、名前をテンプレートに割り当てます。同じテンプレートのすべての画面には同じテンプレート名が表示されます。同じテンプレートの別の画面が変更されると、新しいテンプレートが作成され、他の画面の変更を防止します。

キー テキストが追加されるか、カーソル ゾーンが削除され、以前に一致したテンプレートが一致しなくなる場合、新しいテンプレートが作成されます。同様に、個別のフィールドを変更する場合は、新しいテンプレートが作成されます。以前のテンプレートと一致させるには、以前に追加された変更を削除するか、カーソル ゾーンをもう一度追加する必要があります。このときには、ユーザに変更が通知され、確認するように指示されます。確認すると、元のテンプレートは現在のテンプレートで上書きされます。行われた変更から新しいテンプレートを作成するときには、他のテンプレートよりも優先されます。この方法では、修正されたテンプレートは常に前のテンプレートよりも優先されます。

前のテンプレートに戻る場合は、[画面] タブで [テンプレートの削除] ボタンをクリックします。

テンプレート名は、画面固有のスコープを作成するときに使用されます。画面名を作成すると、この画面 (および同じテンプレート名を共有する他の要素) にアクセスするときにのみ実行されるスクリプトを関連付けることができます。

必要に応じて、手動でテンプレート名を変更できます。

テンプレート名が [スクリプト] タブから使用され、スクリプトのテンプレート固有の範囲を特定します。ここで、@ 記号を前に付け、値を使用します。

表の追加

既存の要素をドラッグできる表コンテナ要素を追加し、行と列のコンテナ内に並べて配置します。テーブルにはすべての要素タイプを含めることができます。

画面要素

この列には、再書式設定された要素を操作するためのすべての設定とオプションがあります。ここでは、要素の書式を変更し、コンテキスト メニュー項目を追加して、画面バナーを作成できます。[最初式設定された画面] 列から要素を選択し、ここでプロパティを編集し始めます。

Closed画面

画面背景

画面全体の背景色を設定します。これは画面単位またはテーマを使用して設定できます。

バナーを表示しない

個別の画面からグローバル バナーを非表示にします。バナーがテーマ レベルで作成される場合は、このオプションによって選択画面で非表示にできます。グローバル バナーが設定されるまでは、このオプションを変更できません。

バナー要素

画面の上に表示されるバナー要素をアクティブ化します。[オン] に設定すると、[要素] タブに移動し、スタイルを適用するか、バナータイトルを設定するか、ロゴ画像をアップロードします。これは画面単位またはテーマを使用して設定できます。

フッター要素

画面の下にフッターを追加します。新規または既存の要素をこの要素にドラッグできます。フッターと含まれる要素は、スクロール中にでも画面の下部に固定されます。

フッター背景

フッター要素の背景色を設定します。これは、[フッター要素] が有効な場合にのみ実行できます。

テンプレートの削除

選択した画面のテンプレートを削除し、画面の書式設定をリセットします。

画面の削除

選択した画面をプロジェクトから削除します。

Closed要素

テーブル プロパティ

Rows

テーブルに含まれる行の合計数を設定します。既定では、2に設定されます。

テーブルの行数を減らしても、削除中のセルにある要素は削除されません。テーブルからこれらの要素が削除され、以下に配置されます。

テーブルに含まれる列の合計数を設定します。既定では、2に設定されます。

テーブルの列数を減らしても、削除中のセルにある要素は削除されません。テーブルからこれらの要素が削除され、以下に配置されます。

テーブルが横方向に占める画面の量を定義します。既定では100%に設定されています。

テーブルは常に左寄せです。

背景色

この要素の背景色を設定します。これはテーブルまたはテーマ レベルで設定できます。

代替行色

テーブルの1行おきの背景色を設定します。2行目から開始します。これはテーブルまたはテーマ レベルで設定できます。

動的

選択したフィールドがある動的テーブルとしてテーブルを処理できます。このオプションをアクティブ化すると、[上に移動コマンド][下に移動コマンド]、および[選択コマンド] オプションにアクセスできます。選択した行は他の行と区別され、ユーザに使用中の行を通知します。

上に移動コマンド

キーストローク値を送信し、動的テーブル内で行を上に移動します。

下に移動コマンド

キーストローク値を送信し、動的テーブル内で行を下に移動します。

コマンドの選択

キーストローク値を送信し、動的テーブルにデータを入力するための現在のフィールドを選択します。

要素プロパティ

要素タイプ

要素のタイプまたはクラスを指定します。テーマが設定されているときには、同じタイプの要素に同じスタイルが適用されます。画面単位で要素タイプを編集できます。

使用可能な要素のタイプ:

ヘッダー。 画面を識別する見出しテキストは現在アクティブです。ヘッダーはまたがっている要素に追加できません。

データ ラベル。 フィールド ラベルで使用される静的サブヘッダー テキスト。この要素では、再書式設定された画面のラベルを変更できますが、このラベルの黒と緑のバージョンは変更されません。

データ値。 フィールド ラベルで使用される静的サブヘッダー テキスト。この値のこのテキストは変更できません。

フィールド。 エンドユーザが手動でテキストを入力できる空のテキスト フィールド。

メニュー項目。 エンドユーザが別の画面に遷移するボタン。メニュー項目はまたがっている要素に追加できません。

ボタン。 エンドユーザが別の画面に遷移するボタン。これらはメニュー項目と同様ですが、画面表示用に再書式設定されています。これらはまたがっている要素とフッターに追加できません。

各要素には、Velocity の予測書式設定で設定されている、固有の既定のスタイルが関連付けられています。詳細については、「予測形式」を参照してください。

削除\すべて削除

[削除] を選択すると、再書式設定された画面から選択した画面要素を削除します。[すべて削除] を選択すると、再書式設定された画面からすべての要素を削除します。画面要素を追加するには、以下の手順を参照してください。これはテーマ レベルで設定できません。

バナー プロパティ

タイトル

各画面の上に表示されるヘッダー要素をアクティブ化します。ここで入力されるテキストはその要素内に表示されます。画像がアップロードされると、このフィールドのテキストはロゴ画像の右側に表示されます。[バナー要素] を有効にしたときにのみこのオプションが表示されます。

画像

ロゴ画像をアップロードし、すべての画面の上部に配置します。画像は、幅100ピクセル以下、高さ60ピクセル以下にしてください。[バナー要素] を有効にしたときにのみこのオプションが表示されます。バナー以外の場所に画像を追加する場合は、画像要素を作成し、要素プロパティからスタイルを設定します。

フォント プロパティ

太字

要素テキストに太字を適用します。既定では、これは選択されません。

斜体

要素テキストに斜体を適用します。既定では、これは選択されません。

下線

要素テキストに下線を適用します。既定では、これは選択されません。

配置

テキストが右、左、または中央に配置されるかどうかを決定します。

サイズ

要素のフォント テキストのサイズを設定します。これは10~20ポイントで調整できます。既定値は選択した要素タイプによって異なります。

ファミリ

要素に使用するフォント ファミリを指定します。テーマが設定されている場合、同じタイプの要素は、同じフォント ファミリー スタイルを使用します。

Serif

Sans-serif

モノスペース

背景色

この要素の背景色を設定します。

フォント色

この要素の表示テキストの色を設定します。

テキスト

再書式設定された画面でこの要素に表示されるテキスト。この設定は、標準の黒と緑の画面のテキストを無効にしません。これはテーマ レベルで設定できません。

コマンド

特定のキー押下をメニュー項目に関連付けます。選択すると、そのキー押下に関連付けられた動作がホスト プロファイルに送信されます。たとえば、デモ サーバで、メニュー項目のコマンドは番号3です。送信されると、ユーザは次の画面に移動します。これはテーマ レベルで設定できません。

許可されたコマンドには次のキー押下があります。

F1 から F24

CTRL-[1文字、大文字または小文字]

キーコード16進数値(例: {hex:E03B}F1)。16進数値の前に \ または 0x はありません

マクロ (例: {hex:E050}{hex:E04D}{pause}{Enter}。「下」、「右」、250ミリ秒の一時停止、「Enter」キー入力を示す)

すべてのサポートされる16進数値の一覧については、「キーボード コードとコマンド」をご参照ください。

画像プロパティ

配置

親要素内の画像を配置します。

背景色

画像に透明度がある場合に表示される背景色。

URL

ファイル名と拡張子を含む画像への URL。URL へのパスは3つの形式を使用できます。

res://velocity/resources/ プロジェクトに関連付けられたリソースへのパス。

file:/// デバイスのどこかに保存されたファイルへのパス。これは追加のスラッシュを使用します。

http:// http を使用してアクセスできるリモート サーバに保存されたファイルへのパス。

画像 URL では、3種類の変数を使用できます。

コンポーネント変数は、 {component:the Component ID} の形式で、元の画面の正確なテキストを使用します。例:

res://velocity/resources/{component:added_636511066245633526}.jpg

各ページのテキストに関係なく、コンポーネントのテキストを画像名で使用します。

画面変数は、行、列、テキストの長さを {screen:row,column:length} の形式で指定します。例:

http://172.27.0.21/warehouse/images/{screen:4,1:12}.png

現在の画面の4行目、1列名から始まる12文字をファイル名として使用します。

{script:function()} の形式の、テキスト文字列を返すスクリプト変数。 例:

file:///{script:FindImage()}

スクリプト FindImage によって返されたパスとファイル名を使用します。

変数は、ファイル名または URL の他の部分で使用できます。また、必要に応じて、URL で複数の変数を使用できます。

コンポーネント ID

画像要素に関連付けられたコンポーネント ID。

キーボード プロパティ

キーボードの表示

フィールド要素が選択されない場合、キーハードボードポップアップの動作を設定します。これはテーマ レベルで設定できません。

表示する。 フィールドにタブ移動したときにキーボードが自動的に表示されます。

表示しない。 キーボードがアクティブな場合、フィールドにタブ移動したときに自動的に非表示になります。

無効にする。 フィールドにタブ移動するときには、カスタムおよび既定のキーボードのいずれも使用できません。

縦キーボード

画面が縦モードで表示されているときに、既定のカスタム キーボードを設定します。これはテーマ レベルで設定できません。

空白にする場合、既定のカスタム キーボードが使用されます。これは、[キーボード] 画面のキーボード パネルに表示される最上位のキーボードです。

横キーボード

画面が横モードで表示されているときに、既定のカスタム キーボードを設定します。これはテーマ レベルで設定できません。

空白にする場合、既定のカスタム キーボードが使用されます。これは、[キーボード] 画面のキーボード パネルに表示される最上位のキーボードです。

コンポーネント ID

フィールド ID を指定します。このフィールドは変更できません。要素の作成時に自動的に割り当てられます。この値の目的は特定のフィールドに影響するスクリプトでの参照です。

スコープ ID

画面とフィールド範囲を指定します。これは変更できません。要素の作成時にただちに割り当てられます。

ここの値は、コロン区切りで、@ 記号が先頭に付いているテンプレート名およびコンポーネント ID から構成されます。[スクリプト] タブからフィールド固有の範囲を設定するときに、このフィールド値をコピーおよび貼り付けしてください。

Closedコンテキスト メニュー

新規追加

新しいコンテキスト メニュー項目を追加し、メニュー項目タイトルショートカット コマンドを指定できます。 メニュー項目はテーマ レベルで追加できません。

音声の追加

メニュー項目の音声合成および音声認識機能を有効にします。また、[一致する語句] フィールドが追加されます。これには、ショートカット コマンドの音声マクロが特定の音声処理を完了する必要があります。

グローバル メニュー項目

画面固有またはグローバルとしてメニュー項目を指定します。[オン] に設定すると、すべての画面のコンテキスト メニューでメニュー項目が表示されます。[オフ] に設定すると、現在の画面のコンテキスト メニューでのみメニュー項目が表示されます。

メニュー項目

コンテキスト メニューのメニュー項目を作成および編集します。

この画面から、次の設定を構成できます。

メニュー項目タイトル。 コンテキスト メニュー項目のラベルとして表示されるテキスト。

ショートカット コマンド。 特定のキー押下をメニュー項目に関連付けます。許可されたコマンドの例については、「キーボード コードとコマンド」をご参照ください。

削除。 選択したメニュー項目を削除します。

完了。 コンテキスト メニューの変更を適用します。これは [再書式設定された画面] ペインに表示されます。

音声有効

音声対応語句の使用を有効にし、コンテキスト メニュー機能にアクセスします。[一致する語句] フィールドが表示されます。

一致する語句

音声コマンドを設定し、メニュー項目をアクティブ化します。クライアントが発音できる場合は、語句をここで入力できます。一致する語句はコンテキスト メニュー項目でのみ作成できます。

この一致する語句が検出されると、[ショートカット コマンド] フィールドに割り当てられたマクロ、テキスト、スクリプトが自動的に実行されます。

音声ショートカット コマンド

Velocity クライアントと Speakeasy を使用するときには、既定のコマンドがあらかじめ読み込まれます。これらのコマンドを呼び出すには、以下の値を使用して、グローバルまたは画面コンテキスト メニューに含める必要があります。これらのコマンドには追加の文法は必要ありません。

音量を上げる

{voice:volumeUp}

音量を下げる

{voice:volumeDown}

もう一度言う

{voice:repeat}

速く話す

{voice:faster}

ゆっくりと話す

{voice:slower}

較正

{voice:calibrate}

要素の編集

[再書式設定された画面] ペインの個別の要素はインタラクティブであり、スタイル要素を操作したり、まだインポートされた画面にない新しい要素を作成することもできます。

Closed画面要素を追加するには

1.クリックしてドラッグし、[インポートされた画面] ペインで新しい画面要素を追加する場所をハイライト表示します。

2.[新しい要素] ボタンをクリックします。

3.必要に応じて画面要素を設定します。

4.[保存] をクリックして変更を保持します。

新しい要素はインポートされた画面に表示されません。再書式設定された画面のみです。

Closed画面要素を編集するには

1.[再書式設定された画面] ペインで、任意の画面要素をクリックします。

2.画面要素プロパティを編集します。

3.[保存] をクリックして変更を保持します。

Closed画面要素の順序を変更するには

1.[再書式設定された画面] ペインで、画面要素をページの新しい位置までドラッグします。

ペインの左側に赤色の矢印が表示され、ドロップされる要素が配置される場所を示します。データ ラベル、データ値、およびフィールドは、垂直スパニングの場合は相互の中に配置でき、デバイスで要素を並べて表示します。

2.[保存] をクリックして変更を保持します。

Closed要素スパニングを作成するには

1.既存の要素を選択し、別の要素にドラッグします。

2.赤色の > が表示され、固定要素の横の配置を示すときには、要素をリリースします。

ドラッグした要素は、既存の要素の横に表示されます。追加の要素をスパンできます。十分な要素が並べて配置されるときには、自動的に次の行に折り返されます。

要素スパニングのヘッダーまたはメニュー項目は追加できません。

Closedテーブルを追加するには

1.[再書式設定された画面] ペインの上の [テーブルの追加] ボタンをクリックします。縦2行横2列の表が画面の上に表示されます。

2.再書式設定された画面の任意の場所に移動します。

3.要素を個別のセルにドラッグし、テーブルに追加します。複数の要素を1つのセルに追加できません。


この記事は役に立ちましたか?    

トピックの評価:

不正確

不完全

期待していた内容ではない

その他