FineVisオフスクリーンコントロール

応用シーン：「FineVis データ可視化」プラグインをインストールしたユーザは、本文を参考に FineVis の関連機能を理解できます。

1.バージョン

2.応用シーン

大型スクリーンでの見学やプレゼンテーションなどのシナリオでは、ユーザは来場者にスクリーンの内容を説明すると同時に、テンプレートの操作を行う必要があります。二人で連携して操作すると、手際よく進められない場合もあります。

この時、「オフスクリーンコントロール」機能を利用すると、モバイルデバイスで大型スクリーンをリモート操作することが可能となり、発表者が一人でスムーズに内容を説明できるようになります。

3.機能紹介

FineVis テンプレートに「FVSオフスクリーンコントロール」機能を有効にすると、「投影の比率」と「インタラクションイベント」の設定が可能になります。

プレビュー時には、テンプレートの URL リンクの末尾に &offScreen=true という接尾辞を追加する必要があります。リンクを更新し、モバイル端末でQRコードをスキャンすると利用可能になります。

オフスクリーンコントロール端末では、テンプレート上に元からある全てのインタラクションイベントを操作可能です。例えば、ページ切り替えボタン、クリックでチャートの連動、クリックでポップアップ表示などが含まれます。

1.ハードウェア環境

　·　サーバ側：FineReport プロジェクトの要件を満たしていれば済みです。

　·　クライアント側：これは大型スクリーンに投影するための PC、あるいは MAXHUB などのオールインワン端末を指します。ユーザはこのクライアントを通じてサーバ上の FineVis テンプレートにアクセスします。

　·　オフスクリーンコントロール端末：これは大型スクリーンを制御するためのモバイル端末（スマートフォンやタブレットなど）を指します。ユーザはそのスクリーンにタッチすることで大型スクリーンを操作できます。

2.ソフトウェア環境

　·　サーバ側：FineReport 11.0.9 以上の環境、かつ FineVis プラグイン V1.12.2 以上のバージョンをインストールすることが必要です。（ローカルデザイナでテストする場合は、クライアント端末にインストールすれば済みです。） 

　·　クライアント側：Chromeブラウザで FineVis テンプレートをプレビューする時、3Dコンポーネントが含まれている場合は、バージョン 86 以上が最低動作環境として必要です。

　·　オフスクリーンコントロール端末：クリックして最新版の モバイルBI をダウンロードします。

3.ネット環境

3.1localhost 環境

クライアントが localhost にアクセスする場合、オフスクリーンコントロール端末と同一のネット環境にある必要があります。つまり、同じ WIFI に接続され、両方の IP アドレスが同一ネットワークセグメントに属し、かつ WIFI でネットワーク隔離が設定されていないことが条件となります。

注意：WIFI でネットワーク隔離が設定されている場合は、ご自身でホットスポットをオンにして利用可能です。

3.2localhost 以外の環境

1）クライアントが localhost 以外の IP アドレスやリモートサーバにアクセスする場合も、オフスクリーンコントロール端末と同一のネット環境にある必要があります。また、WIFI でネットワーク隔離が設定されていない状態も必須条件です。

また、HTTP またはブラウザに信頼されていない証明書を使用する場合は、chrome://flags/ で insecure の関連設定を行う必要があります。具体的な手順は以下の通りです：1.chrome://flags/ にアクセスし、検索欄で[insecure]を検索します。2. 表示された項目に、アクセスされているサーバの IP アドレスとポート（http://ip:ポート の形式）を入力します。3. オプションを[有効]に設定します。4. [再起動]ボタンをクリックしてブラウザを再起動します。

注意：複数のアドレスを追加する場合は、英語のカンマ「,」で区切ってください。

以下の図のように：

2）投影用クライアントが有線ネットワークに接続している場合、上記の要件に加え、chrome://flags/ で mdns を設定する必要があります。chrome://flags/ にアクセスし、検索欄で[mdns]を検索し、[Disabled]を選択し、[再起動]をクリックしてブラウザを再起動します。以下の図のように：

1.オフスクリーコントロールを有効にする

1）テンプレートEC販売リアルタイム大型データスクリーン.fvs をクリックしてダウンロードし、現在の実行環境ディレクトリに保存します。

2）デザイナでテンプレートを開き、キャンバス右上の[テンプレート設定]-[オフスクリーンコントロール]をクリックし、「オフスクリーコントロール有効」にチェックを入れます。

以下の図のように：

2.投影の比率を選択

投影の比率とは、テンプレートが「オフスクリーンコントロール端末」で局部拡大される比率を指します。最終的な表示効果は、オフスクリーンコントロール端末のアスペクト比に基づいて決定され、設定された比率を近似して保持しつつ、端末の画面に内容が全体的に表示されるように調整されます。

オフスクリーンコントロールを行う時には、オフスクリーンコントロール端末の左上に「テンプレートマップ」が生成され、比例効果が表示されます。2種類の効果を例として、比較は以下のように：

　·　1:1

　·　1:4

本文例示では「1:1」を選択します。以下の図のように：

3.インタラクションイベント

[インタラクションイベント]には、デフォルトで「テンプレートページ切り替え」イベントが存在し、[ボタン名称]はデフォルトで「ページ切り替え」となっています。名称の変更やイベントのチェックを外すことは可能ですが、このイベントの削除はできません。

本例はデフォルトのままで済みです。以下の図のように：

デフォルトのイベントを使用したくない場合、またはテンプレート内の一部インタラクションイベントがモバイル端末で操作しにくい場合は、「インタラクティブイベンドを追加」がサポートされています。これはJavaScript スクリプトを通じて実現します。

新規追加したインタラクションイベントは編集と削除が可能です（これらの操作の取り消しはできませんのでご注意ください）。

オフスクリーンコントロール端末の右下にあるインタラクションイベントリストボタンをクリックすると、設定されたインタラクションイベントが表示されます。

4.プレビューと拡張子追加

オフスクリーンコントロールを設定済み後、テンプレートをプレビューし、URLの末尾に &offScreen=true という拡張子を追加して Enter キーでページを更新すると、オフスクリーンコントロール用のQRコードが表示されます。以下の図のように：

5.オフスクリーンコントロール端末でQRコードをスキャン

オフスクリーンコントロールデバイスとクライアントが同一のネット環境にあることを確認し、オフスクリーンコントロール端末の「データ分析」AppでQRコードをスキャンした後、クライアント側での権限付与が完了するまでお待ちください。

注意：Mac システムのコンピュータで初めてQRコードをスキャンする場合、Chromeの画面録画権限を許可する必要があります。設定方法は下図の通りです。

6.クライアント権限付与

クライアントで共有したいページを選択し、「ウィンドウ」または「画面全体」を選択します。内容を確認後、[共有]をクリックすると権限付与が完了します。以下の図のように：

注意：オフスクリーンコントロールは、ウェブページの全画面表示モードで利用する必要があります。権限付与完了後、ブラウザページを全画面表示にし、かつズーム比例を100%に保持してください。そうしないと、オフスクリーンコントロール端末でのクリックイベントの位置がずれる可能性があります。

7.オフスクリーコントロールを開始

権限付与が完了すると、コントロール端末で FineVis テンプレートの操作が可能になります。

また、オフスクリーンコントロール時、コントロール端末の左上に表示される「テンプレートマップ」は、ダブルクリックで拡大表示に対応しています。拡大後はシングルクリックで元のサイズに戻ります。さらに、指で特定範囲をタップまたはスワイプすると、テンプレートの表示内容が「テンプレートマップ」に従って変化します。

以下の図のように：

1.ファイアウォールによるオフスクリーンコントロール権限付与のブロック

問題概要

クライアントとオフスクリーンコントロール端末が同一ネット環境にあることを確認した上で、コントロール端末でQRコードをスキャンした後、クライアント側に共有権限付与のポップアップウィンドウが表示されません。

原因分析

クライアント側のファイアウォールがアプリをブロックしている可能性があります。ファイアウォールを無効にして試してみてください。

ソリューション

1）方法1：ファイアウォールを無効にします

2）方法2：[ファイアウォール設定]-[アプリをファイアウォール経由で通信許可]-[設定を変更]で設定を行い、Google Chromeアプリを許可します。具体的な方法については、ご自身で Google などで検索してください。