2024/09/19
アドバンスド
このコンテンツでは、任意のビジュアライゼーションに移動するボタンを作成する方法について説明しています。
本コンテンツで利用したバージョンは、Spotfire Analyst 14.0です。ご利用環境によって、一部画面構成が異なる場合がありますので、ご了承ください。
ダッシュボードのカスタマイズをすることで、ユーザーにとってより分かりやすく・見やすい画面を作成できます。本コンテンツでは、HTML/JavaScript/CSSを用いて、同一ページ内の任意のビジュアライゼーションに移動するボタンの作成方法をご紹介します。
縦に長いページを利用している場合、画面下部にあるビジュアライゼーションへ移動する際にはマウスでのスクロールが必要になります。今回紹介するボタンを作成することでページ内をボタン操作のみで移動でき、効率的にビジュアライゼーションを確認できます。
ダッシュボードの完成形・本コンテンツで使用するひな形は、以下のリンクよりダウンロード可能です。
・【ひな型】java_text_area.dxp
・【完成形】java_text_area.dxp
オーサリングバーの「ビジュアライゼーションタイプ」から「テキストエリア」を追加します。
テキストエリア上で右クリック > HTMLを編集 > 以下のHTMLスクリプトを記載します。 緑色で表示されている文字はコメントアウトに該当するため、入力は必須ではありません。
【HTML】
任意のビジュアライゼーション(今回はテキストエリア)に移動するボタンを作成するために、アクションコントロール機能でリンクを挿入します。
下記画像において、赤色の点線で囲まれている箇所の<DIV id =jump1>と</DIV>の間にカーソルを合わせ、 アクションコントロールをクリックします。
「アクションコントロール」ウィンドウで以下の設定をします。
「実行可能なアクション」で、ボタンを押した際に遷移するテキストエリアを指定して「追加」をクリック して「OK」をクリックします。
手順③、④と同様に、任意のテキストエリアに移動するためのアクションコントロールを挿入します。
この後の手順⑦にてテキストエリアにボタンを作成するCSSコードを挿入します。テキストエリアにはCSSコードを直接挿入できないため、JavaScriptを利用してCSSコードを挿入します。
「HTMLを編集」ウィンドウ上部にある「JavaScriptを挿入」ボタンをクリックします。
「JavaScriptを挿入」ウィンドウで「新規」をクリック > 「新規スクリプト」ウィンドウでスクリプト名と下記のスクリプトを書き、「OK」をクリックします 。
を入力し、「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_flex
var css = `
/* 横並びで表現 */
.flex{
display: flex;
}
`;
// id = StyleDiv の要素に適用
$("<style/>").text(css).appendTo($("#styleDiv"));
今回は指定したテキストエリアに移動する設定を行います。
手順⑦と同様に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= regressionが含まれるテキストエリアに移動するように設定しました。そのため、移動先のテキストエリアにid= regressionを挿入します。
移動先のテキストエリア(線形回帰)で右クリックして「HTML」を編集を選択 > 下記のスクリプトを追加します。
【HTML】
<div id =regression >…</div>
手順⑩と同様に移動先のテキストエリアにid= anovaを挿入します。
移動先のテキストエリア(ANOVA分析)で右クリックして「HTMLを編集」を選択 > 下記のスクリプトを追加します。
【HTML】
<div id =anova >…</div>
試しに線形回帰ボタンをクリックすると、指定したテキストエリアに移動します。
ビジュアライゼーションに移動するボタンがあるテキストエリア上で右クリック > ビジュアライゼーションの複製をクリック > 画面下部のANOVA分析の隣に配置します。
以下のHTMLスクリプトを記載します。
手順③、④と同様にアクションコントロール機能でリンクを挿入します。下記画像において、赤色の点線で囲まれている箇所の<DIV id =jump3>と</DIV>の間にカーソルを合わせ、 「アクションコントロールの挿入」をクリックします。「アクションコントロール」ウィンドウにてタイトル上部のテキストエリア(統計解析)に移動するリンクを作成します。
【HTML】※スクリプト名:タイトル
<!--背景の色とサイズ指定-->
<TABLE style="HEIGHT: 10px; WIDTH: 170px; BACKGROUND-COLOR: #F1F1F1">
<!-- は空白-->
<DIV id=styleDiv>
<TD>
<!--色変更可能なボタンの作成-->
<DIV class=generate-button>
<!--ボタンを横に並べる-->
<DIV class=flex>
<!--任意のテキストエリアに移動させる-->
<DIV id=jump3></DIV>
</DIV></DIV></TD>
<DIV> </DIV></TABLE>
「HTMLを編集」ウィンドウの「JavaScriptを挿入」をクリック > 「jump」を選択した状態で「編集」をクリックします。
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'});
});
});
手順⑩と同様に移動先のテキストエリアにid= titleを挿入します。
移動先のテキストエリア(統計解析)で右クリックして「HTML」を編集を選択 > 下記のスクリプトを追加します。
【HTML】
<div id =title >…</div>
画面上部に移動するボタンを作成できます。
このようにして、任意のテキストエリアに移動するボタンを作成することで、確認したいグラフに素早く移動できます。
Spotfire活用セミナー
アーカイブ動画を配信中
【アドバンスド】最新の記事
<!--背景の色とサイズ指定-->
<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>
<!--ボタン間の空白スペース-->
<!--任意のテキストエリア(ANOVA)に移動-->
<DIV id=jump2></DIV>
</DIV></DIV></TD>
<!-- は空白-->
<DIV> </DIV></TABLE>