インタラクティブ通信オーサリング UI の概要

インタラクティブ通信を作成するための直感的なユーザーインターフェイスには、インタラクティブ通信の印刷チャネルと Web チャネルを作成するための以下の機能が用意されています。

WYSIWYG ドラッグアンドドロップドキュメントエディター
アセット用の統合リポジトリー - サーバーにアップロードされてサーバー上で作成されたアセットは、インタラクティブ通信オーサリングインターフェイスのアセットブラウザーで使用することができます

新しいインタラクティブ通信の作成または既存のインタラクティブ通信の編集を行う場合は、以下のユーザーインターフェイス要素を使用します。

サイドバー
ページツールバー
コンポーネントツールバー
コンテンツ領域

インタラクティブ通信オーサリングユーザーインターフェイス

A. サイドバー B. ページツールバー C. コンテンツ領域

サイドバー

A. チャネルブラウザー B. コンテンツブラウザー C. プロパティブラウザー D. アセットブラウザー E. コンポーネントブラウザー F. データソースブラウザー - データモデル G. データソースブラウザー - マスターコンテンツ

サイドバーには、以下のブラウザーが用意されています。

チャネルブラウザー

チャネルブラウザーにより、インタラクティブ通信の印刷チャネルと Web チャネルを切り替えることができます。チャネルブラウザーで選択したチャネルに基づいて、コンテンツブラウザーやコンポーネントブラウザーなどのブラウザーに対応するオプションが表示されます。

コンテンツブラウザー
コンテンツブラウザーでは、選択したチャネルのドキュメントのオブジェクト階層を表示することができます。作成者は、ドキュメントオブジェクトツリーで目的の要素をタップして、特定のコンポーネントに移動することができます。作成者は、Web チャネルでオブジェクトを検索したり、ドキュメントオブジェクトツリーでオブジェクトの配置を変更したりすることができます。
プロパティブラウザー

コンポーネントのプロパティを編集できます。表示されるプロパティは、コンポーネントによって異なります。例えば、ドキュメントコンテナのプロパティを表示するには、以下の操作を実行します。任意のコンポーネントを選択し、／ドキュメントコンテナをタップし、をタップしてください。
アセットブラウザー
レイアウトフラグメント、画像、ドキュメント、ページ、ビデオなど、各種のコンテンツがタイプ別に表示されます。作成者は、アセットをインタラクティブ通信にドラッグアンドドロップすることができます。
コンポーネントブラウザードキュメントの印刷チャネルと Web チャネルを作成するためのコンポーネントが表示されます。コンポーネントをインタラクティブ通信にドラッグして要素を追加し、要件に合わせてその要素の設定を行うことができます。以下の表に、印刷チャネルと Web チャネルについてコンポーネントブラウザーに表示されるコンポーネントを示します。

コンポーネント	印刷チャネル	Web チャネル	機能
グラフ	✓	✓	インタラクティブ通信で使用できるグラフを追加して、フォームデータモデルのコレクションアイテムから取得された 2 次元のデータを視覚的に表現します。
ドキュメントフラグメント	✓	✓	再利用可能なコンポーネント、テキスト、リスト、条件をインタラクティブ通信に追加することができます。インタラクティブ通信に追加する再利用可能なコンポーネントは、フォームデータモデルベースのコンポーネントでも、フォームデータモデルを持たないコンポーネントでもかまいません。
画像	✓	✓	画像の挿入を可能にします。
パネル	-	✓	パネルコンポーネントは、他のコンポーネントをグループ化するためのプレースホルダーです。パネルコンポーネントにより、インタラクティブ通信内でのコンポーネントグループの配置方法が制御されます。パネルコンポーネントを使用して、エンドユーザーが繰り返し使用できるコンポーネントグループ（学歴を入力するための複数のエントリなど）を作成することもできます。また、複数のタブを持つインタラクティブ通信のタブごとにパネルを使用するのも、便利な方法です。
テーブル	*	✓	行と列にデータを整理できるテーブルを追加します。
ターゲット領域	**	✓	Web チャネル固有のコンポーネントを整理するためのターゲット領域を、その Web チャネルに挿入します。
テキスト	-	✓	インタラクティブ通信の Web チャネルにテキストを追加します。追加されたテキストでフォームデータオブジェクトを使用すると、動的なコンテンツを作成することができます。

* テーブルを追加するには、印刷チャネル内でレイアウトフラグメントを使用する必要があります。

** 印刷チャネルの場合、XDP テンプレートまたは印刷テンプレート内でターゲット領域が事前に設定されています。インタラクティブ通信オーサリング UI を使用して新しいターゲット領域を追加することはできません。

データソースブラウザー
データソースブラウザーには、インタラクティブ通信の作成時に選択したフォームデータモデル内の有効なデータソースが表示されます。

コンポーネントを操作する場合のキーポイント

インタラクティブ通信のコンポーネントを操作する場合のキーポイントを以下に示します。

各コンポーネントには、そのコンポーネントの外観と機能をコントロールするプロパティが関連付けられています。コンポーネントのプロパティを設定するには、コンポーネントをタップし、プロパティをタップして、プロパティブラウザーでコンポーネントプロパティを開きます。
コンポーネントは要素名で識別されます。コンポーネントの名前を変更するには、をタップし、プロパティブラウザーで「要素名」フィールドの値を変更します。要素名フィールドに使用できるのは、英字、数字、ハイフン（-）およびアンダースコア（_）のみです。その他の特殊文字は使用できません。また、要素名は英字で始まる必要があります。
インタラクティブ通信上にタイトルが表示されている場合は、インタラクティブ通信コンポーネントのタイトルプロパティをエディター内でインライン編集することができます。プロパティブラウザーを起動する必要はありません。これを行うには、以下の手順を実行します。
1. 「タイトル」プロパティが設定されていて、「タイトルを非表示」プロパティが無効になっているコンポーネントをタップして選択します。
2. をタップして、タイトルを編集可能にします。
3. タイトルを変更し、Return キーをタップするかコンポーネント以外の場所をタップして、変更内容を保存します。変更内容を破棄する場合は Esc キーをタップします。

コンポーネントツールバーのラベル

コンポーネントを選択すると、そのコンポーネントを操作するためのツールバーが表示されます。切り取り、貼り付け、移動およびコンポーネントのプロパティを指定するオプションを使用できます。以下のオプションがあります。

A. 設定：設定をタップすると、サイドバーにコンポーネントのプロパティが表示されます。

B. ルールを編集：「ルールを編集」をタップすると、ルールエディターが表示されます。このエディターで、選択したコンポーネントのルールの作成と編集を行うことができます。また、ルールエディターで他のフォームオブジェクト（コンポーネント）を選択し、そのフォームオブジェクトのルールの作成や編集を行うこともできます。

C. コピー：このオプションを使用してドキュメントをコピーし、そのドキュメントをインタラクティブ通信内の別の場所に貼り付けることができます。

D. 切り取り：このオプションを使用して、インタラクティブ通信内のコンポーネントを別の場所に移動することができます。

E. 削除：このオプションを使用して、インタラクティブ通信からコンポーネントを削除することができます。

F. コンポーネントを挿入：このオプションを使用して、選択したコンポーネントの上に別のコンポーネントを挿入することができます。

G. 貼り付け：このオプションにより、上記のオプションを使用してカットまたはコピーしたコンポーネントを貼り付けることができます。

H. グループ：複数のコンポーネントについて、切り取り、コピー、貼り付けを同時に実行したい場合に、複数のコンポーネントを選択できます。

I. 親：コンポーネントの親を選択します。

J. SOM 式を表示： コンポーネント用 SOM 式を表示します。

K: パネル内のオブジェクトのグループ化： パネル内のコンポーネントをグループ化して、それらのコンポーネントに対する操作を同時に実行可能にします。詳細については、パネル内のオブジェクトのグループ化を参照してください。

L. 子パネルを追加（パネルの場合のみ）：子パネルをパネルに追加できます。

M: パネルツールバーを追加（パネルの場合のみ）：パネルコンポーネント用のツールバーを追加します。その後、ツールバーで追加のアクションを実行できます。

また、ツールバーの置換オプションを使用すると、既存のコンポーネントを別のコンポーネントで置き換えることができます。このオプションは、パネルコンポーネントには使用できません。

画面上部のページツールバーには、インタラクティブ通信のプレビューを表示するためのオプションと、インタラクティブ通信のプロパティを変更するためのオプションが用意されています。インタラクティブ通信の作成時に、インタラクティブ通信のプレビューを表示し、必要に応じて変更を行うことができます。ページツールバーには、以下の項目が表示されます。

サイドパネルを切り替え：サイドバーの表示と非表示を切り替えます。
ページ情報：ページのプロパティを表示します。
エミュレーター：タブレットや携帯電話など、画面のサイズが異なるデバイスでインタラクティブ通信がどのように表示されるかをエミュレートすることができます。
編集：編集、スタイル、開発者、デザインなど、その他のモードを選択します。
- 編集：このモードでは、インタラクティブ通信とそのコンポーネントのプロパティを編集することができます。例えば、コンポーネントの追加、画像の削除、必須フィールドの指定などを行います。
- スタイル：このモードでは、インタラクティブ通信のコンポーネントの外観を調整することができます。例えば、スタイルモードでパネルを選択して、パネルの背景色を指定することができます。
- 開発者：このモードの場合、開発者は以下の操作を実行することができます。
  - インタラクティブ通信の構成要素を確認する。
  - エラーが発生したタイミングと場所を特定し、問題の解決に役立てます。
- ターゲット：このモードでは、カスタムコンポーネント、またはサイドバーに表示されていない既製のコンポーネントの有効と無効を切り替えることができます。
プレビュー：発行時のインタラクティブ通信の外観をプレビューすることができます。