2024/09/19

アドバンスド

JavaScript活用例②:任意のビジュアライゼーションに移動するボタン

このコンテンツでは、任意のビジュアライゼーションに移動するボタンを作成する方法について説明しています。
本コンテンツで利用したバージョンは、Spotfire Analyst 14.0です。ご利用環境によって、一部画面構成が異なる場合がありますので、ご了承ください。

はじめに

ダッシュボードのカスタマイズをすることで、ユーザーにとってより分かりやすく・見やすい画面を作成できます。本コンテンツでは、HTML/JavaScript/CSSを用いて、同一ページ内の任意のビジュアライゼーションに移動するボタンの作成方法をご紹介します。

任意のビジュアライゼーションに移動するボタンとは

縦に長いページを利用している場合、画面下部にあるビジュアライゼーションへ移動する際にはマウスでのスクロールが必要になります。今回紹介するボタンを作成することでページ内をボタン操作のみで移動でき、効率的にビジュアライゼーションを確認できます。

ダッシュボードの完成形・本コンテンツで使用するひな形は、以下のリンクよりダウンロード可能です。
【ひな型】java_text_area.dxp
【完成形】java_text_area.dxp

任意のビジュアライゼーションに移動するボタン作成

手順①:任意のビジュアライゼーションに移動するボタンを作成するため、テキストエリアを追加

オーサリングバーの「ビジュアライゼーションタイプ」から「テキストエリア」を追加します。

手順②:HTMLを編集

テキストエリア上で右クリック > HTMLを編集 > 以下のHTMLスクリプトを記載します。 緑色で表示されている文字はコメントアウトに該当するため、入力は必須ではありません。

【HTML】

<!--背景の色とサイズ指定-->
<TABLE style="HEIGHT: 1px; WIDTH: 400px; BACKGROUND-COLOR: #F1F1F1">

<!--JavaScriptと連動させるためのidタグ-->
<DIV id=styleDiv>

<TD>
<DIV>クリックすると、対象のレポートに遷移します。 </DIV>
<!--色変更可能なボタンの作成_CSSと連動-->
<DIV class=generate-button>

<!--ボタンを横に並べる_CSSと連動-->
<DIV class=flex>

<!--任意のテキストエリア(線形回帰)に移動-->
<DIV id=jump1></DIV>

<!--ボタン間の空白スペース-->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<!--任意のテキストエリア(ANOVA)に移動-->
<DIV id=jump2></DIV>
</DIV></DIV></TD>
<!--&nbspは空白-->
<DIV>&nbsp;</DIV></TABLE>

手順③:任意のビジュアライゼーションに移動するボタン作成の準備

任意のビジュアライゼーション(今回はテキストエリア)に移動するボタンを作成するために、アクションコントロール機能でリンクを挿入します。
下記画像において、赤色の点線で囲まれている箇所の<DIV id =jump1>と</DIV>の間にカーソルを合わせ、 アクションコントロールをクリックします。

手順④:アクションコントロールの設定

「アクションコントロール」ウィンドウで以下の設定をします。

  • 「表示テキスト」:ボタンに表示させる名前
  • 「 コントロールタイプ」:リンク

「実行可能なアクション」で、ボタンを押した際に遷移するテキストエリアを指定して「追加」をクリック して「OK」をクリックします。

手順⑤:アクションコントロールの設定

手順③、④と同様に、任意のテキストエリアに移動するためのアクションコントロールを挿入します。

手順⑥:CSSコードをテキストエリアに埋め込むための準備(JavaScriptを追加)

この後の手順⑦にてテキストエリアにボタンを作成するCSSコードを挿入します。テキストエリアにはCSSコードを直接挿入できないため、JavaScriptを利用してCSSコードを挿入します。
「HTMLを編集」ウィンドウ上部にある「JavaScriptを挿入」ボタンをクリックします。

手順⑦:ボタンを作成するCSSを追加

「JavaScriptを挿入」ウィンドウで「新規」をクリック > 「新規スクリプト」ウィンドウでスクリプト名と下記のスクリプトを書き、「OK」をクリックします 。

  • スクリプト名:css_button
  • スクリプト:以下のCSS

を入力し、「OK」をクリックしてCSSの挿入が完了します。

【CSS】

var css = `
/* 色変更可能なボタン作成 */
div.generate-button a{
    border:1px solid #d3d3d3;
    background: #ffffff;
    padding: 5px 0px 0px;
    margin: 0px 0px 4px 0px;
    cursor: pointer;
    height: 22px;
    font-weight: 500;
    font-size: 11px;
    width: 160px;
    display: inline-block;
    text-align: center;
}
/* ホバー時の設定 */
div.generate-button a:hover{
    background: #d3d3d3;
    border: 1px solid #d3d3d3;
    cursor: hand;
    text-decoration: none;
    box-shadow: 5px 3px 6px #888888;
}
`;

/* id = styleDiv を持つ要素に上記のスタイルを適用 */
$("<style/>").text(css).appendTo($("#styleDiv"));

手順⑧:ボタンを並行して並べるCSSを追加

手順⑦と同様にCSSを追加します。

【CSS】※スクリプト名:css_flex

var css = `
/* 横並びで表現 */
.flex{
  display: flex;
}
`;

// id = StyleDiv の要素に適用
$("<style/>").text(css).appendTo($("#styleDiv"));

手順⑨:ボタンをクリックした際に任意のビジュアライゼーションに移動するJavaScriptを追加

今回は指定したテキストエリアに移動する設定を行います。

手順⑦と同様にJavaScriptを追加して、「HTMLを編集」ウィンドウを閉じます。

【JavaScript】※スクリプト名:jump

//関数作成
$(function() {
  console.log( "ready!" );
  $('#jump1 a').click( function() {
    //id=regression のテキストエリアに移動する
    $('#regression')[0].scrollIntoView({behavior: 'smooth'});
  });
  $('#jump2 a').click( function() {
    //id=anova のテキストエリアに移動する
    $('#anova')[0].scrollIntoView({behavior: 'smooth'});
  });
});

手順⑩:ボタンをクリックした際に移動するテキストエリアにidを挿入

手順⑨のスクリプト内で線形回帰ボタンを押した際に、id= regressionが含まれるテキストエリアに移動するように設定しました。そのため、移動先のテキストエリアにid= regressionを挿入します。

移動先のテキストエリア(線形回帰)で右クリックして「HTML」を編集を選択 > 下記のスクリプトを追加します。

【HTML】

<div id =regression >…</div>

手順⑪:ボタンをクリックした際に移動するテキストエリアにidを挿入

手順⑩と同様に移動先のテキストエリアにid= anovaを挿入します。
移動先のテキストエリア(ANOVA分析)で右クリックして「HTMLを編集」を選択 > 下記のスクリプトを追加します。

【HTML】

<div id =anova >…</div>

試しに線形回帰ボタンをクリックすると、指定したテキストエリアに移動します。

手順⑫:ページのトップに移動するボタンを作成

ビジュアライゼーションに移動するボタンがあるテキストエリア上で右クリック > ビジュアライゼーションの複製をクリック > 画面下部のANOVA分析の隣に配置します。

手順⑬:HTMLを編集

以下のHTMLスクリプトを記載します。

手順③、④と同様にアクションコントロール機能でリンクを挿入します。下記画像において、赤色の点線で囲まれている箇所の<DIV id =jump3>と</DIV>の間にカーソルを合わせ、 「アクションコントロールの挿入」をクリックします。「アクションコントロール」ウィンドウにてタイトル上部のテキストエリア(統計解析)に移動するリンクを作成します。

【HTML】※スクリプト名:タイトル

<!--背景の色とサイズ指定-->
<TABLE style="HEIGHT: 10px; WIDTH: 170px; BACKGROUND-COLOR: #F1F1F1">

<!--&nbspは空白-->
<DIV id=styleDiv>
<TD>
<!--色変更可能なボタンの作成-->
<DIV class=generate-button>

<!--ボタンを横に並べる-->
<DIV class=flex>

<!--任意のテキストエリアに移動させる-->
<DIV id=jump3></DIV>
</DIV></DIV></TD>
<DIV>&nbsp;</DIV></TABLE>

手順⑭:ページトップに移動する設定を行うために、JavaScriptを編集

「HTMLを編集」ウィンドウの「JavaScriptを挿入」をクリック > 「jump」を選択した状態で「編集」をクリックします。

手順⑮:ページ上部に移動する設定を行うために、JavaScriptを編集

id = jump3のボタンを押した際に、id = titleが含まれるテキストエリアに移動するようにスクリプトを編集します。

以下のスクリプトを書いて「OK」をクリック > 「JavaScriptを挿入」ウィンドウで「OK」> 「HTMLを編集」ウィンドウの順に閉じます。

【JavaScript】※スクリプト名:jump

//関数作成
$(function() {
  console.log( "ready!" );
  $('#jump1 a').click( function() {
    //id=regression のテキストエリアに移動する
    $('#regression')[0].scrollIntoView({behavior: 'smooth'});
  });
  $('#jump2 a').click( function() {
    //id=anova のテキストエリアに移動する
    $('#anova')[0].scrollIntoView({behavior: 'smooth'});
  });
  $('#jump3 a').click( function() {
    //id=title のテキストエリアに移動する
    $('#title')[0].scrollIntoView({behavior: 'smooth'});
  });
});

手順⑯:ページ上部に移動する設定を行うために、JavaScriptを編集

手順⑩と同様に移動先のテキストエリアにid= titleを挿入します。

移動先のテキストエリア(統計解析)で右クリックして「HTML」を編集を選択 > 下記のスクリプトを追加します。

【HTML】

<div id =title >…</div>

画面上部に移動するボタンを作成できます。

このようにして、任意のテキストエリアに移動するボタンを作成することで、確認したいグラフに素早く移動できます。

Spotfire活用セミナー
アーカイブ動画を配信中

【アドバンスド】記事一覧に戻る
全記事一覧に戻る