--- title: 【Sisense Plugin】Sisenseをダークモードにしてみた description: 皆さんダークモードは好きですか？僕は白い画面だと目がチカチカしてしまい、専らダークモード派です。iPhoneも、Google Chromeも、Slackも、コードエディターも。じゃあSisenseもしないと気がすまない！ってことで、今回はCSSでダッシュボードの見た目をダークモード風に変更してみようと思います。 image: https://knowledge.insight-lab.co.jp/hubfs/dark_mode.png --- ![INSIGHT LAB_文字のみ_WHT-1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png) ![INSIGHT LAB_文字のみ](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png) [![お問い合わせ](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/5935783/a4a0266e-14ad-4388-b83f-681a6f35b8a7.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/5935783/a4a0266e-14ad-4388-b83f-681a6f35b8a7) - [Sisenseとは](https://service.insight-lab.co.jp/sisense) - [Sisenseナレッジ](https://knowledge.insight-lab.co.jp/sisense) - [セミナー](https://event.insight-lab.co.jp/sisense-seminar) - [トレーニング](https://service.insight-lab.co.jp/data-analytics-dojo/training_course) - [お役立ち資料](https://download.insight-lab.co.jp/sisense/download) ###### 7 分で読むことができます。 # [【Sisense Plugin】Sisenseをダークモードにしてみた](https://knowledge.insight-lab.co.jp/sisense/plug-in/sisense-darkmode) 執筆者 [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle) 更新日時 2020年10月16日 ###### Topics: [Dashboard](https://knowledge.insight-lab.co.jp/sisense/tag/dashboard) [Plugin](https://knowledge.insight-lab.co.jp/sisense/tag/plugin) ![【Plug-in】Sisenseをダークモードにしてみた](https://knowledge.insight-lab.co.jp/hubfs/dark_mode.png) 目次 こんにちは。Michaelです。 皆さんダークモードは好きですか？僕は白い画面だと目がチカチカしてしまい、専らダークモード派です。iPhoneも、Google Chromeも、Slackも、コードエディターも。じゃあSisenseも黒くないと気がすまない！ってことで、今回はCSSでダッシュボードの見た目をダークモード風に変更してみようと思います。 先にBefore＆Afterをどうぞ。 #### Before(標準) ![スクリーンショット 2020-09-16 132652](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-16%20132652.png?width=820&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-16%20132652.png) #### After ![スクリーンショット 2020-09-16 132336](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-16%20132336.png?width=820&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-16%20132336.png)   ## 標準機能でできること 実はSisenseには、8.2.4バージョンからSisenseにはLook and Feelという機能が追加されました。 ![look-and-feel-main-screen](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/look-and-feel-main-screen.png?width=820&name=look-and-feel-main-screen.png) こんな感じに、AdminのLook and Feelのセクションからダッシュボード全体に対してのUIを変更できるようになりました。JavascriptやCSSを触らなくても、見た目を細かくカスタマイズできる素晴らしい機能です。 ただあくまでも、全てのダッシュボードが対象となり、ダッシュボードごとでの色の変更ができないという点もあります。そして、私のデモ開発環境ではバージョンが古い8.2.1が入っているのです。 ってことで、今回はJavascriptとCSSを使って、ダークモードを実装していきます。   ## ダークモード実装 ### ダッシュボード側の設定 まずは、ダッシュボード全体に対してJavascriptのコードを入れます。 内容的には「ウィジェットの準備が完了した時に、〇〇のクラスのCSSを△△のように変えて」というものをJ Queryの構文でひたすら書いています。 コードがこちら。 ``` dashboard.on('widgetready',function(d) { $('.dashboard-layout-column,.dashboard-layout').css('background-color', '#000'); $('.dashboard-layout-cell-horizontal-divider').remove(); $('.dashboard-layout-subcell-vertical,.widget-breadcrumbs-wrapper').css('background-color', '#444'); $('.dashboard-layout-subcell-host').css('padding', '10'); $('.dashboard-layout').css('padding-right', '10px').css('padding-left', '10px'); $('.widget-header--title-edited').css('border-bottom', 'none'); ``` }); 全体に共通する部分を変更点としては以下の通りです。 - ウィジェット同士の間隔を少し入れる - ダッシュボード背景を真っ黒にする - ドリルインした際に表示されるエリアを後に設定するウィジェットと同じグレイ（#444）に変更 - ウィジェットタイトルとウィジェット本体の間にある分割線を消す 個々のウィジェットに対して背景を変えるのは、ウィジェット設定画面側でしていきます。   ### ウィジェット編集側の設定 #### ウィジェットタイトルのスタイル変更 まずは、ウィジェットのタイトルの見た目を整えます。ウィジェットタイトルとはここのことですね。 ![スライド1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%891.png?width=820&name=%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%891.png)   ウィジェットタイトルをカスタマイズする方法は２つあります。 1. Widget Title Style プラグインを使う 2. JavascriptでCSSを変える 今回は、１のプラグインを使いました。ダウンロードは[Sisenseのコミュニティのサイトから。](https://support.sisense.com/hc/en-us/community/posts/221226208-Widget-title-style-plugin) プラグインがインストールされている環境では、ウィジェット編集画面の右下にタイトルをカスタマイズするオプションが表示されます。 ![widget_title_customize](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/widget_title_customize.png?width=706&name=widget_title_customize.png) ウィジェットタイトルの文字の色とウィジェットタイトルの背景色をウィジェット背景と同じグレイ（#444）にします。以下のように設定しました。 ``` Font Color: #fff Background color: #444 ``` #### ウィジェット背景色の変更 次に、Javascriptでウィジェットの背景色をグレイに変えます。今回のサンプルでは、インジケータ、棒グラフ、円グラフの3つのチャートがあります。 チャートのタイプにより、コードが少し違うのですが、それぞれ以下のように入力しました。 ##### インジケータ ``` var bgColor = '#444' widget.on('processresult', function(w, e) { var options = {　　 　　title : { color : 'white' },　　　 　backgroundColor: bgColor }; w.indicatorInstance.setOptions('numericSimple', options);}); widget.on('domready', function (w) { $(element).css('background-color', bgColor);}); ``` ##### 棒グラフ ``` widget.on('processresult',function(w,e){ e.result.plotOptions.series.dataLabels.style.color = "#C1C1C1"; e.result.plotOptions.series.dataLabels.style.fontSize = "12px"; e.result.plotOptions.series.dataLabels.style.fontWeight = "light";})widget.on('domready', function(se, ev){ $('.widget-body',element).css('fill','#444'); $(element).css('background-color','#444'); $('.highcharts-axis-labels text,.highcharts-legend-item text').css('fill','#C1C1C1');}) ``` ##### 円グラフ ``` widget.on('domready', function(se, ev){ $('.widget-body' ,element).css('fill','#444'); $(element).css('background-color','#444'); var color = '#F9C21F'; $('.pie-percent-label tspan').css('fill',color) $('.highcharts-data-label text tspan:first-child', element).remove(); $('.highcharts-data-label text', element).css('fill', '#C1C1C1');}) widget.on('processresult', function(se, ev){ var color = "#fff"; var legend = ev.result.legend; legend.itemStyle.color = color;}) ``` ### 完成物 最終的にできたものがこちら！ ![スクリーンショット 2020-09-16 132336-1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-16%20132336-1.png?width=820&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-16%20132336-1.png) 目が落ち着きますね！ ## 緑ポップモード実装 今回は、ダークモードの他に、ウィジェットをカードっぽく浮かせたものも作成しました。 ![スクリーンショット 2020-09-16 123607](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-16%20123607.png?width=820&name=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-16%20123607.png) 用いたコードは以下の通りです。 #### ダッシュボード側 変更点は以下の通りです。 - 各ウィジェットをカードっぽく見せるためにpaddingを入れる - box-shadowで影を入れて立体感を出す - ダッシュボードの背景色を薄いグレイ（#f0f0f0）に変更 ``` dashboard.on('widgetready', ()=> { $('.dashboard-layout-column,.dashboard-layout').css('background-color', '#f0f0f0'); $('.dashboard-layout-cell-horizontal-divider').remove(); $('.dashboard-layout-subcell-vertical').css('background-color', '#fff').css('box-shadow', '4px 5px 12px #00000078') $('.dashboard-layout-subcell-host').css('padding', '10'); $('.dashboard-layout').css('padding-right', '20px').css('padding-left', '20px'); }) ``` #### ウィジェット側 全てのチャートでウィジェットタイトルを以下のように設定します。今回は、背景色をポップな緑(#00C9B)にしました。 ``` Font Color: #fff Background: #00C9B ``` ##### インジケータ 前年比がプラスで▲（緑）を、マイナスで▼（赤）になるようにif文が記述してあります。また、ウィジェットを丸く見せるためにborder-radiusを入れてあります。 ``` widget.on('processresult', function(w, e) { var options = {　　 secondaryValue: { 　　　　fontFamily: 'Helvetica, sans-serif', 　　　　fontWeight: 'bold', 　　　　color: 'grey', 　　　　fontSizes: { 　　　　　　big: 20, 　　　　　　medium: 15 　　　　} 　　} }; if(e.result.secondary.data >= 0) {　　 e.result.secondary.text = '▲' + e.result.secondary.text; 　　options.secondaryValue.color = '#00FF00'; } else {　　 e.result.secondary.text = '▼' + e.result.secondary.text; 　　options.secondaryValue.color = '#FF0000'; } w.indicatorInstance.setOptions('numericSimple', options);}); widget.on('ready', ()=> {　　$(element).parent().css('border-radius', '20px');　　$(element).parent().parent().css('border-radius', '20px');}) ``` ##### 棒グラフ ウィジェットを丸く見せるためにborder-radiusを入れてあります。 ``` widget.on('ready', ()=> { 　　$(element).parent().css('border-radius', '20px'); 　　$(element).parent().parent().css('border-radius', '20px'); }) ``` ##### 円グラフ 同様にウィジェットを丸く見せるためにborder-radiusを入れてあります。 ``` widget.on('ready', ()=> { 　　$(element).parent().css('border-radius', '20px'); 　　$(element).parent().parent().css('border-radius', '20px'); }) ``` ## まとめ 今回は、CSSでダッシュボードの見た目をカスタマイズしてみました。 Google Chromeの検証でクラスを見つけてあげて、所定の書き方でCSSをいじってあげれば、実装可能です。これを使えば、ダッシュボード毎に見た目をカスタマイズできるので、色々と可能性が広がりそうです！ それではまた！Viva, Sisense！ Sisenseを体験してみませんか？ INSIGHT LABではSisense紹介セミナーを定期開催しています。Sisenseの製品紹介や他BI製品との比較だけでなく、デモンストレーションを通してSisenseのシンプルな操作性やプレゼンテーション機能を体感いただけます。 [![詳細はこちら](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/5935783/ff8d86bf-1184-4d92-8926-6a31a20de4b0.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/5935783/ff8d86bf-1184-4d92-8926-6a31a20de4b0) - [Tweet](https://twitter.com/share) ![Turtle](https://knowledge.insight-lab.co.jp/hubfs/Sunflower.jpg) #### 執筆者 [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle) 可視化領域を中心とした業務に従事しています。 ###### [前の投稿](https://knowledge.insight-lab.co.jp/sisense/data-modeling/cumulative-calendar) [![【Data Modeling】累計カレンダーでCOVID-19の移動合計推移を求めてみる](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/06_result-1024x517-1.png)](https://knowledge.insight-lab.co.jp/sisense/data-modeling/cumulative-calendar) ###### [【Sisense Data Modeling】累計カレンダーでCOVID-19の移動合計推移を求めてみる](https://knowledge.insight-lab.co.jp/sisense/data-modeling/cumulative-calendar) ###### [次の投稿](https://knowledge.insight-lab.co.jp/sisense/blog/decile_analysis) [![【Blog】サクッとデシル分析してみる](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/8f5d8415b9ca8b19457ccb26588a7b42-1024x338-2.png)](https://knowledge.insight-lab.co.jp/sisense/blog/decile_analysis) ###### [【Sisense Widget】サクッとデシル分析してみる](https://knowledge.insight-lab.co.jp/sisense/blog/decile_analysis) RECOMMEND こちらの記事も人気です。 ###### 4 分で読むことができます。 #### [【Sisense Administaration】無料のSSL証明書"Let's Encrypt"でSSL化してみる](https://knowledge.insight-lab.co.jp/sisense/administration/ssl_lets_encrypt) ###### 2020年 10月 16日 ###### 8 分で読むことができます。 #### [【API連携】Spotify音楽データの分析①【Sisense】](https://knowledge.insight-lab.co.jp/sisense/information/spotify_music_data_1) ###### 2020年 10月 16日 ###### 2 分で読むことができます。 #### [【Sisense Widget】折れ線グラフを階段状に表示する](https://knowledge.insight-lab.co.jp/sisense/widget/step_line_chart) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Widget】Radar Chartを使ってポケモンの種族値を表示してみた](https://knowledge.insight-lab.co.jp/sisense/widget/radarchart) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Formula】CASE関数を使って条件分岐する](https://knowledge.insight-lab.co.jp/sisense/formula/case) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Widget】折れ線グラフにおける欠落値の対処法](https://knowledge.insight-lab.co.jp/sisense/widget/line-graph) ###### 2020年 10月 16日 ##### 運営会社 運営会社 - [会社概要](https://www.insight-lab.co.jp/about/company.html) - [お問い合わせ](https://contact.insight-lab.co.jp/main) ##### メニュー メニュー - Sisenseとは - [Sisenseナレッジ](https://knowledge.insight-lab.co.jp/sisense) - [セミナー](https://event.insight-lab.co.jp/sisense-seminar) - [お役立ち資料](https://download.insight-lab.co.jp/sisense/download) [![INSIGHT LAB_文字のみ_WHT-1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=200&height=55&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png "INSIGHT LAB_文字のみ_WHT-1")](https://www.insight-lab.co.jp/) - [プライバシーポリシー](https://www.insight-lab.co.jp/privacy.html) Copyright © 2020 INSIGHT LAB, Inc.