5.2 アダプティブレイアウト

プロジェクトリソース画面では、「ストーリー作成」をクリックすると、ストーリー定義画面が表示されます。「テンプレート」を選択し、左側から、図表を直接ドラッグして編集できます。

./img/story/020

./img/story/021

./img/story/022

左側の「リソース」の下にあるコンポーネントおよび「チャート」の下にあるコンテンツを、画面の中央の編集領域にドラッグできます。 レイアウトを自由に配置することが可能です。網掛け部が配置領域のツールヒントになります。領域の分割は、レイアウト済みのグラフの上下左右の位置によって、空間を均等に配置します。また、中央の位置に配置して、現在の図表を置き換えることも可能です。リソースを配置した後、配置領域のボーダーをドラッグして、リソースの配置領域のサイズを調整できます。

./img/story/023

5.2.1 図表の追加

画面の左側にある「チャート」領域には、現在のプロジェクト内のすべての図表が一覧表示されます。

図表をレイアウトにドラッグして、図表をストーリーの指定位置に直接挿入できます。図表は、利用済みとして識別され、現在のストーリー画面でこの図表を再度挿入できません。ただし、別のストーリー・ページでは、再度使用できます。

./img/story/024

5.2.2 他のリソースの追加

以下は、「リソース」にある個々のリソースの意味、レイアウトへドラッグした場合の効果について説明します。そのうち、「フリーブロック」、「ボーダー」、「タブページ」は特別なもので、それぞれ別の章で説明します。

(1) 「タイトル」、または「リッチテキスト」をドラッグして、マウスボタンを放すと、「リッチテキスト」ウィンドウがポップアップ表示されます。文字を入力して、文字スタイルを設定できます。「タイトル」は、ストーリー・ページの上、下、左、右にのみ配置できます。「リッチテキスト」は、任意の場所に配置できます。

./img/story/025

(2) 「イメージ」をドラッグした後、表示されたウィンドウでは、ローカル画像をアップロードしたり、画像のURLを入力したりして、画像を取得することが可能です。

./img/story/026

(3) 「ウェブ」をドラッグすると、URL入力ダイアログが表示されます。ストーリーに挿入すると、このURLのWebページ内容が直接表示されます。ここでは、絶対パスまたは相対パスを指定できます。デプロイメント版のユーザ-の場合、相対URLのルートパスは、dataviz-web/common/config.jsファイルで指定し、対応する属性名はcustomPageRootUrlです。

./img/story/027

(4)「空白」をドラッグすると、1つの空白領域がストーリーに直接挿入されます。これは、位置を占有し、ストーリーのレイアウトを容易に調整し、見栄えを良くするためです。

./img/story/028

(5) ボタンをドラッグすると、1つのボタンがレイアウトに直接ドラッグされます。右側の属性領域では、ボタンの表示内容と機能を設定できます。ボタン機能について、現在は、チャートデータのリフレッシュ、フィルタ条件のリセットの2種類があります。

./img/story/029

(6) ビデオ」をドラッグすると、ビデオ設定ダイアログがポップアップ表示されます。ビデオのアドレスを入力し、いくつかの属性を設定することが可能です。

./img/story/030

(7) 「時計」をドラッグすると、1つの時計がレイアウトに直接ドラッグされます。現在のシステム日付時刻をリアルタイムで表示するために使用されます。右側の属性領域で時計のフォーマット、フォントスタイルなどを設定できます。

./img/story/031

(8) 「アニメーション」をドラッグすると、アニメーション選択ウィンドウがポップアップ表示されます。アニメーションとは、アニメーション効果で、ストーリーにダイナミックなエフェクトを盛り込めて、簡単なインタラクション効果をシミュレートして、より生き生きとしたストーリーを実現します。アニメーションは、ベクトル図に似ていて、拡大・縮小によって歪みが生じることはありません。

./img/story/032

results matching ""

    No results matching ""