一.概要
応用シーン：「FineVisデータ可視化」プラグインをインストールしたユーザは、本文を参考にしてFineVisの関連機能を理解することができます。
1.バージョン
帳票サーババージョン | プラグインバージョン | 機能変動 |
11.0.22 | V2.9.1 | モバイル端末で「モバイル端末のレイアウト」を有効にできるようになり、従来の「再レイアウト」効果から「フロー型レイアウト」効果に変更されました。「フロー型レイアウト」効果は主に以下の「再レイアウト」の問題を解決します： 1）「再レイアウト」ではPC用のテンプレートを直接モバイル端末に切り替えた際、コンポーネントのサイズ、余白、順序などを自由に調整できず、PC端末とモバイル端末で1枚のテンプレートを共用できません。 2）デザイナの編集画面では、モバイル端末の設定効果をリアルタイムに確認できず、必ずブラウザでプレビューする必要がありました。新バージョンのプラグインでは、モバイル端末に切り替えた後もモバイル端末の設定が可能で、デザイナ内でモバイル端末のテンプレート表示効果を即時確認できます。 |
2.機能概要
FineVisのモバイル端末のテンプレートの作成とプレビューでは2種類のレイアウト方式がサポートされており、デフォルトのレイアウトは「PC端末レイアウト」で、PC端末と同一の表示となります。
「モバイル端末のレイアウト」を有効にできます。有効にすると「モバイル端末」モードに切り替わり、テンプレートの編集画面およびプレビュー画面はともにモバイル端末のレイアウト（フロー型レイアウト）の規則に従います。
3.互換性の説明
注意：モバイル端末のレイアウトは再レイアウト機能の強化版であり、再レイアウト機能との互換性も確保されています。
· 新規作成するテンプレートもヒストリカルテンプレートも、デフォルトでは[モバイル端末のレイアウトを有効にする]にチェックが入っていません。
· プラグインをアップグレードした後のヒストリカルテンプレートは、モバイル端末の編集画面でデスクトップ端末のレイアウトで表示されます。編集画面内でモバイル端末のレイアウトを確認するには、手動で[モバイル端末のレイアウトを有効にする]にチェックを入れる必要があります。実際のプレビュー時には、従来の再レイアウトの有効/無効設定に従って表示されます。
· モバイル端末のレイアウトでは、従来のプラグインとフォントのレンダリングに差異があり、主にフォントサイズの点で異なるため、必要に応じて手動でフォントサイズの微調整が必要な場合があります。
· 従来の再レイアウトを有効にしていたテンプレートで、[モバイル端末のレイアウトを有効にする]にチェックを入れた後にキャンセルした場合、デスクトップ端末のレイアウトが適用されます。
二.機能の入り口
FineVisの可視化カンバンに入る後、キャンバス頂部のツールバーの[テンプレート設定]-[モバイル端末]をクリックすると、モバイル端末のレイアウト方式を設定できます。
· デフォルトでは[モバイル端末のレイアウトを有効にする]にチェックが入っておらず、モバイル端末はデスクトップ端末のレイアウト（レイアウト保持）の規則に従い、PC端末と同一の表示となります。
· チェックを入れると、モバイル端末の編集画面およびプレビュー効果はともにモバイル端末のレイアウト（フロー型レイアウト）の規則に従います。[タブレットプレビュー効果]の選択もサポートします。
注意：PC端末のサイズのテンプレートはモバイル端末で直接プレビューするのに適していないため、モバイル端末のレイアウトを有効にしない場合、モバイル端末のテンプレートサイズを使用することをおすすめします。
三.モバイル端末のコンポーネントの規則
どちらのレイアウトでも、コンポーネントはモバイル端末で以下の規則に従います：
1）モバイル端末のコンポーネントは、デフォルトでPC端末のコンポーネントの内容を完全に継承します。モバイル端末のコンポーネントは個別に修正が可能で、修正後はPC端末の内容を継承しなくなります。
2）PC端末のキャンバス外に完全に配置されたコンポーネントは、モバイル端末のキャンバス及びコンポーネントリストに表示されません。
3）モバイル端末では「3Dコンポーネント」および「拡張チャート」のコンポーネントタイプをサポートしておらず、これらのコンポーネントはキャンバスに表示されず、コンポーネントリストでは自動的に非表示になりグレーアウトされ、選択不可となります。
4）モバイル端末のレイアウトを有効にした場合、モバイル端末でのコンポーネントの追加・削除はサポートされておらず、デスクトップ端末のレイアウトでのみ追加・削除が可能です。
四.デスクトップ端末のレイアウト
テンプレートで[モバイル端末のレイアウトを有効にする]にチェックが入っていない場合、モバイル端末とPC端末で1つのレイアウトを共用し、区分配置項目はそれぞれ表示することをサポートしています。
このレイアウトは、モバイル端末のサイズで直接テンプレートを作成する場合に適しています。
例：
テンプレート「銀行CEOパネル.fvs」の効果は以下の図のように：
対応するモバイル端末の効果は以下の図のように：
五.モバイル端末のレイアウト
[モバイル端末のレイアウトを有効にする]にチェックを入れると、スマートフォン端末はモバイル端末のレイアウト（フロー型レイアウト）の規則が適用され、タブレットのプレビュー効果でレイアウトの選択がサポートされます。
このレイアウトは、PC端末のテンプレートをモバイル端末に変換するシーンに適しています。
以下では
テンプレートを例に、モバイル端末のフロー型レイアウトの関連規則について説明します。
1.キャンバス表示規則
ダウンロードしたテンプレートを開くと、PC端末のキャンバスは以下の図のように：
モバイル端末に切り替えると、キャンバスは以下の図のように：
具体的な変更点は以下の表の通りです：
変更箇所 | 説明 |
キャンバスサイズ | · PC端末のキャンバスサイズの幅が高さと等しいまたは以上の場合、モバイル端末に切り替えるとキャンバスサイズがデフォルトの390×844に変更されます。幅が高さ未満の場合、キャンバスサイズはそのまま保持されます。 |
改ページエリア | 改ページエリアの位置がキャンバス下からキャンバス左に変更され、「プレビュー設定」、「クエリパネルの設定」及び「折りたたみ」ボタンが含まれます。 |
コンポーネントリスト | · 「コンポーネントレイヤー」リストから「コンポーネント順序」リストに変更され、キャンバス内のコンポーネント/組み合わせを上から下への表示順序とします。 · コンポーネントリストでのコンポーネント操作は非表示設定、リネーム、順序移動のみが可能で、削除とロックはサポートされません。 |
コンポーネントバー | モバイル端末のレイアウトを有効にした場合、コンポーネントの追加がサポートされないため、コンポーネントバーではコンポーネントの分類アイコンが非表示になります。 |
頂部ツールバー | 頂部ツールバーには「元に戻す/復元」のみが表示され、新たに「幅を調整」ツールが追加されます。組み合わせや削除操作はPC端末で実行する必要があります。 |
ページ属性 | モバイル端末のページでは、[ページ背景]、[ページの余白]、[コンポ間隔]を個別に設定できます。設定を変更すると、キャンバス内の効果が即時に確認できます。 |
ショートカットキー | PC端末に比べて複数のショートカットキーが削減されており、リストには利用可能なショートカットのみが表示されます。以下の図のように：
|
2.コンポーネント表示規則
2.1コンポーネント表示順序
1）キャンバス内のコンポーネント/組み合わせのデフォルトの表示順序は、「コンポーネント順序」リストに従って上から下に単列表示されます。
2）デフォルトの順序はPC端末キャンバスの左から右、上から下のコンポーネント/組み合わせ順序を継承し、レイヤーが重なる場合は最上層から最下層の順序で表示されます。
注意：組み合わせまたは絶対キャンバス内のコンポーネントはPC端末の効果に従って表示され、レイヤー順序を表し、コンポーネント表示順序ではありません。Tab内のコンポーネントはコンポーネント表示順序となります。
3）コンポーネントの幅を調整して並列表示する場合、キャンバス上の左から右の順序がリストの上から下の順序と一致します。
4）モバイル端末でコンポーネントの位置を調整した後、PC端末で新規追加されたコンポーネント/組み合わせはすべてモバイル端末でのキャンバスの最下部に表示されます。
5）最外層のコンポーネント/組み合わせが非表示になると、下方のコンポーネントが自動的に空きスペースを埋めます；組み合わせ/絶対キャンバス内のコンポーネントが非表示になった後は、空白スペースが残ります。
2.2コンポーネントの幅・高さの規則
キャンバス内のコンポーネントの幅・高さのデフォルト表示規則は以下の表の通りです：
注意：従来のテンプレートで再レイアウトが有効になっている場合、コンポーネントの幅・高さは比率に従ってズームされ、以下の表の規則に従いません。
コンポーネントの位置 | 幅 | 高さ |
最外層のコンポーネント/組み合わせ | デフォルトで自動適応して行全体を埋める | ウィジェット、チャート、タイトル、時間、絶対キャンバスコンポーネント及び組み合わせ： |
画像、ローカルビデオ及びモニタリングビデオコンポーネント： | ||
シート、Tab、ラジオボタン/チェックボックスグループ、 Webページボックス、及びリッチテキストコンポーネント： | ||
組み合わせ/絶対キャンバス内のコンポーネント | 組み合わせ/絶対キャンバスと等比にズーム | |
注意1：コンポーネントのズーム規則はPC端末と同じで、コンポーネント全体のズームは内容のフォントサイズに影響しません（シート除外：フォントサイズは内容に合わせて自動適応します）。
注意2：コンポーネントのデフォルトの幅・高さが未修正の場合、キャンバスサイズが変更されても、[調整ロックを有効]に関わらず、コンポーネントの幅は自動適応して行全体を埋め、高さは維持されます。
ただし、コンポーネントの幅・高さを修正した後、キャンバスで[調整ロックを有効]にチェックが入っている場合、コンポーネントはキャンバスと等比にズームされます。チェックが入っていない場合、コンポーネントのサイズは維持されます。
3.コンポーネント調整規則
3.1コンポーネントのサイズ調整
すべてのコンポーネントの幅・高さを自由に調整でき、幅の最大値はキャンバス幅、高さの最大値は制限ありません。
頂部のツールバーの[幅を調整]機能または右クリックでメニューを使用し、コンポーネントの幅を素早く調整でき、選択肢はキャンバスの1行あたりの比率です。以下の図のように：
注意：キャンバスの1行あたりの比率は、ページ幅から内側余白を差し引いた幅に基づいて計算されます。
3.2コンポーネント順序の移動
リストまたはキャンバス上で、最外層のコンポーネントまたは組み合わせを選択して順序を移動できます。Tab内のコンポーネント/組み合わせも同様に順序を移動できます。
· コンポーネントを縦方向に移動すると、自動的に吸着効果が発生し、空白の高さの下にあるコンポーネントが自動的に上方向に吸着します；
· 横方向に空白スペースが存在する場合、コンポーネントを並列表示できますが、表示できない場合は自動的に上下に表示されます。
3.3コンポーネントのスタイル調整
PC端末からモバイル端末のレイアウトに切り替える際、第5章第2.2節のコンポーネントの幅・高さの規則に従い、一部のコンポーネントの効果を手動で調整する必要があります。
モバイル端末のアイコン が付いた設定項目は、修正前はPC端末の設定に従って変化し、修正後はPC端末の影響を受けず、キャンバス上にモバイル端末の効果が即時表示されます。
3.4プレビュー時の高度適応
Tab、シート、Webページボックス、リッチテキスト、及びラジオボタン/チェックボックスグループのコンポーネントには、モバイル端末に[高度適応]の設定項目が新規追加され、デフォルトでチェックされています。
チェックを入れると、キャンバス上のコンポーネントの高さ設定に関わらず、プレビュー時に内容の高さに合わせて自動適応表示されます。チェックを外すと、設定されたコンポーネントの高さ通りに表示されます。
注意1：[高度適応]は、コンポーネントが行全体を埋める場合のみ有効になり、他のコンポーネントと並列表示されている場合には有効になりません。
注意2：組み合わせ内のコンポーネントの[高度適応]は有効になりません。絶対キャンバス内では、絶対キャンバスの再レイアウトの[高度適応]が有効になっている場合にのみ有効です。
注意3：シートの 走馬灯効果は、[高度適応]が有効になっていない場合にのみ有効になります。
3.5コンポーネントレイヤーの調整
V3.5.0バージョンで、モバイル端末のレイアウトにおける[レイヤー選択]の操作が新規追加されました。
1）キャンバス上で右クリックしてレイアウトを選択することで、複数のコンポーネントが重なった場合に必要なコンポーネントを迅速に選択できます。以下の図のように：
2）組み合わせ、絶対キャンバスブロック、拡張コンポーネント内のコンポーネントについて、リストまたはキャンバス上で右クリックして[レイヤー調整]を行うことができます。
注意：[最前面へ移動]、[最背面へ移動]はショートカットキー]と[で操作できます。
3.6 コンポーネント位置の調整
FineVis V3.5.0バージョンで、モバイル端末に以下の新規追加されたショートカットキーがサポートされました：
· 組み合わせ、絶対キャンバスブロック、拡張コンポーネント内のコンポーネントは、コンポーネントを選択した状態で方向キーを使用して位置を調整できます。
· shift キー+左クリックでのドラッグ操作で、コンポーネントを水平方向/垂直方向に移動できます。