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

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

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

要素を追加するには

再書式設定された画面

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

テンプレート

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

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

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

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

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

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

表の追加

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

画面要素

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

画面

要素

コンテキストメニュー

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

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

音量を上げる	{voice:volumeUp}
音量を下げる	{voice:volumeDown}
もう一度言う	{voice:repeat}
速く話す	{voice:faster}
ゆっくりと話す	{voice:slower}
較正	{voice:calibrate}

要素の編集

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

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

トピックの評価:

不正確

不完全

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

その他

プライバシーおよび法的情報

画面背景	画面全体の背景色を設定します。これは画面単位またはテーマを使用して設定できます。
バナーを表示しない	個別の画面からグローバルバナーを非表示にします。バナーがテーマレベルで作成される場合は、このオプションによって選択画面で非表示にできます。グローバルバナーが設定されるまでは、このオプションを変更できません。
バナー要素	画面の上に表示されるバナー要素をアクティブ化します。[オン] に設定すると、[要素] タブに移動し、スタイルを適用するか、バナータイトルを設定するか、ロゴ画像をアップロードします。これは画面単位またはテーマを使用して設定できます。
フッター要素	画面の下にフッターを追加します。新規または既存の要素をこの要素にドラッグできます。フッターと含まれる要素は、スクロール中にでも画面の下部に固定されます。
フッター背景	フッター要素の背景色を設定します。これは、[フッター要素] が有効な場合にのみ実行できます。
テンプレートの削除	選択した画面のテンプレートを削除し、画面の書式設定をリセットします。
画面の削除	選択した画面をプロジェクトから削除します。

テーブルプロパティ
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 から構成されます。[スクリプト] タブからフィールド固有の範囲を設定するときに、このフィールド値をコピーおよび貼り付けしてください。

新規追加	新しいコンテキストメニュー項目を追加し、メニュー項目タイトルとショートカットコマンドを指定できます。メニュー項目はテーマレベルで追加できません。
音声の追加	メニュー項目の音声合成および音声認識機能を有効にします。また、[一致する語句] フィールドが追加されます。これには、ショートカットコマンドの音声マクロが特定の音声処理を完了する必要があります。
グローバルメニュー項目	画面固有またはグローバルとしてメニュー項目を指定します。[オン] に設定すると、すべての画面のコンテキストメニューでメニュー項目が表示されます。[オフ] に設定すると、現在の画面のコンテキストメニューでのみメニュー項目が表示されます。
メニュー項目	コンテキストメニューのメニュー項目を作成および編集します。この画面から、次の設定を構成できます。 •メニュー項目タイトル。コンテキストメニュー項目のラベルとして表示されるテキスト。 •ショートカットコマンド。特定のキー押下をメニュー項目に関連付けます。許可されたコマンドの例については、「キーボードコードとコマンド」をご参照ください。 •削除。選択したメニュー項目を削除します。 •完了。コンテキストメニューの変更を適用します。これは [再書式設定された画面] ペインに表示されます。
音声有効	音声対応語句の使用を有効にし、コンテキストメニュー機能にアクセスします。[一致する語句] フィールドが表示されます。
一致する語句	音声コマンドを設定し、メニュー項目をアクティブ化します。クライアントが発音できる場合は、語句をここで入力できます。一致する語句はコンテキストメニュー項目でのみ作成できます。この一致する語句が検出されると、[ショートカットコマンド] フィールドに割り当てられたマクロ、テキスト、スクリプトが自動的に実行されます。