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

インタラクティブ通信を作成するための各種ユーザーインターフェイス要素の概要

オーサリング用のユーザーインターフェイス インタラクティブ通信 は直感的で、インタラクティブ通信の印刷チャネルと Web チャネルを作成するための次の機能を提供します。

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

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

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

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

サイドバー

クリックして拡大

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

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

  • チャネルブラウザー

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

  • コンテンツブラウザー

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

  • プロパティブラウザー

    コンポーネントのプロパティを編集できます。表示されるプロパティは、コンポーネントによって異なります。例えば、ドキュメントコンテナのプロパティを表示するには、次のようにします。

    コンポーネントを選択し、 フィールドレベル > ドキュメントコンテナ​次に、 cmppr.

  • アセットブラウザー

    レイアウトフラグメント、画像、ドキュメント、ページ、ビデオなど、様々なタイプのコンテンツを区別します。 作成者は、アセットをインタラクティブ通信にドラッグ&ドロップできます。

  • コンポーネントブラウザー

    ドキュメントの印刷チャネルと Web チャネルを構築するために使用できるコンポーネントが含まれます。 コンポーネントをインタラクティブ通信にドラッグして要素を追加し、必要に応じて追加の要素を設定できます。 以下の表に、印刷チャネルと Web チャネルについてコンポーネントブラウザーに表示されるコンポーネントを示します。

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

*印刷チャネルのレイアウトフラグメントを使用してテーブルを追加します。

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

  • データソースブラウザー

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

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

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

  • 各コンポーネントには、そのコンポーネントの外観と機能をコントロールするプロパティが関連付けられています。コンポーネントのプロパティを設定するには、コンポーネントをタップし、 cmppr をクリックして、プロパティブラウザーでコンポーネントのプロパティを開きます。

  • コンポーネントは要素名で識別されます。タップ時に cmpprを使用すると、プロパティブラウザーで「要素名」フィールドの値を変更して、コンポーネントの名前を変更できます。 要素名フィールドに使用できるのは、英字、数字、ハイフン（-）およびアンダースコア（_）のみです。その他の特殊文字は使用できません。また、要素名は英字で始まる必要があります。

  • インタラクティブ通信にタイトルが表示されている限り、プロパティブラウザーを開かずに、エディター内でインラインでインタラクティブ通信コンポーネントのタイトルプロパティを変更できます。 この作業を行うには、以下の手順を実行します。

    1. 「タイトル」プロパティが設定されていて、「タイトルを非表示」プロパティが無効になっているコンポーネントをタップして選択します。
    2. タップ aem_6_3_edit タイトルを編集可能にします。
    3. タイトルを変更し、Return キーをタップするかコンポーネント以外の場所をタップして、変更内容を保存します。変更内容を破棄する場合は Esc キーをタップします。

コンポーネントツールバー

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

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

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

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

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

E. 削除:インタラクティブ通信からコンポーネントを削除できます。

金。 コンポーネントを挿入:選択したコンポーネントの上にコンポーネントを挿入できます。

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

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

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

J. 詳細:選択したコンポーネントを操作するためのその他のオプションを提供します。

  • SOM 式を表示（パネルのみ）
  • パネル内のオブジェクトをグループ化（パネルのみ）
  • フラグメントを編集（フラグメントのみ）
  • パネルをフラグメントとして保存（パネルのみ）
  • 子パネルを追加（パネルのみ）
  • パネルツールバーを追加（パネルのみ）
  • 置換（パネル以外）

ページツールバー

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

  • サイドパネルを切り替え toggle-side-panel：サイドバーの表示と非表示を切り替えます。

  • ページ情報 pageinformationad:ページのプロパティを表示できます。

  • エミュレーター ルーラー:タブレットや携帯電話など、様々な画面サイズでのインタラクティブ通信の外観をエミュレートできます。

  • 編集：編集、スタイル、開発者、デザインなど、その他のモードを選択できます。

    • 編集：インタラクティブ通信とそのコンポーネントのプロパティを編集できます。 例えば、コンポーネントの追加、画像の削除、必須フィールドの指定などを行うことができます。

    • スタイル：このモードでは、インタラクティブ通信のコンポーネントの外観を調整することができます。例えば、スタイルモードでパネルを選択してパネルの背景色を指定できます。

    • 開発者：以下が可能です。

      • インタラクティブ通信の構成要素を確認します。
      • 何がいつ、どこで起きているかを確認し、問題の解決に役立てます。

    • ターゲット：サイドバーに表示されていないカスタムコンポーネントや標準搭載のコンポーネントを有効または無効にできます。

  • プレビュー：インタラクティブ通信を公開するときのインタラクティブ通信の外観をプレビューできます。

このページ