現在表示中:

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

インタラクティブ通信を作成するための直感的なユーザーインターフェイスには、インタラクティブ通信の印刷チャネルと 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 キーをタップします。

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

toolbar

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

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

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

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

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

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

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

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

H. グループ:複数のコンポーネントの切り取り、コピー、貼り付け操作をまとめて実行する場合は、このオプションを使用すると、目的のコンポーネントをまとめて選択することができます。

I. :このオプションを使用して、コンポーネントの親を選択することができます。

J. その他:このオプションにより、選択したコンポーネントを操作するためのその他のオプションを表示することができます。  

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

ページのツールバー

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー