JavaScript/SpreadJS

SpreadJSにトグルボタンを実装して直感的な設定切り替えを実現！

by MESCIUS-dev

2025年10月30日にリリースされた「SpreadJS（スプレッドJS）」の最新バージョン「V18.2J」では、チェックボックス型セルとチェックボックスリスト型セルの表示形式として、トグルボタンが追加されました。これにより、ユーザーはより直感的かつスムーズにオン／オフを切り替えることができます。

トグルボタン

本記事では、チェックボックス型セルとチェックボックスリスト型セルをトグルボタン形式にしてカスタマイズする方法について解説します。

開発環境

事前準備

今回作成するファイルは次の3つです。

index.htmlページ本体。ページの要素としてSpreadJSコントロールを配置します
app.jsSpreadJSコントロールを作成するコードを記載します
styles.cssSpreadJSコントロールのスタイル定義を記載します

SpreadJSコントロールの使用にはSpreadJSのモジュールを環境に配置する必要があります。npmなどから入手する方法もありますが、今回は環境に直接SpreadJSのモジュールを配置していきます。あらかじめSpreadJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。CSSファイルは以下に記載のもの含め7種類あるのでお好みのテーマのものを選択してください。

  • scripts/gc.spread.sheets.all.18.2.4.min.js
  • scripts/resources/gc.spread.sheets.resources.ja.18.2.4.min.js
  • css/gc.spread.sheets.excel2013white.18.2.4.css

チェックボックス型セルとチェックボックスリスト型セルを実装する

それでは、チェックボックス型セルとチェックボックスリスト型セルを作成して、トグルボタン形式に設定しましょう。

今回作成するサンプルでは、チェックボックスリスト型セルに設定したトグルボタンのオン／オフによってチェックボックス型セルのトグルボタンのスタイルや動作を変更する仕様になっています。

最初に、SpreadJSライブラリの参照設定をHTMLファイルに追加し、SpreadJSのモジュールに加えて、前述の「app.js」と「styles.css」への参照も追加します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link href="css/gc.spread.sheets.excel2013white.18.2.4.css" rel="stylesheet" />
  <script src="scripts/gc.spread.sheets.all.18.2.4.min.js"></script>
  <script src="scripts/resources/gc.spread.sheets.resources.ja.18.2.4.min.js"></script>
  <link href="css/styles.css" rel="stylesheet" />
  <script src="scripts/app.js"></script>
</head>
<body>
  <div id="ss"></div>
</body>
</html>

続いて「app.js」を以下のように作成します。
※ ライセンスキーを設定しない場合、トライアル版を示すメッセージが表示されます。ライセンスキーの設定方法についてはこちらをご覧ください。

// ライセンスキーとカルチャの設定
GC.Spread.Sheets.LicenseKey = 'ここにSpreadJSのライセンスキーを設定します';
GC.Spread.Common.CultureManager.culture('ja-jp');

window.onload = () => {
  const spreadNS = GC.Spread.Sheets;

  // SpreadJSの生成と設定
  const spread = new spreadNS.Workbook("ss");

  // シートの設定
  const sheet = spread.getSheet(0);
  sheet.setColumnWidth(0, 270);
  sheet.setColumnWidth(1, 270);
  sheet.setRowHeight(0, 30);
  sheet.setRowHeight(1, 220);
  sheet.getRange(0, 0, 1, 2).foreColor('blue');
  sheet.getRange(0, 0, 2, 2)
    .hAlign(spreadNS.HorizontalAlign.center)
    .vAlign(spreadNS.VerticalAlign.center);
  sheet.setValue(0, 0, 'チェックボックス型セル');
  sheet.setValue(0, 1, 'チェックボックスリスト型セル');

  // チェックボックス型セルの設定
  const checkBox = new spreadNS.CellTypes.CheckBox();
  checkBox.mode('toggle');
  checkBox.textTrue('On');
  checkBox.textFalse('Off');
  sheet.setCellType(1, 0, checkBox);
  sheet.getRange(1, 0, 1, 1).font("26px メイリオ");

  // チェックボックスリスト型セルの設定
  const checkBoxList = new spreadNS.CellTypes.CheckBoxList();
  checkBoxList.mode('toggle');
  checkBoxList.items([
    { text: "カスタムサイズ", value: 0 },
    { text: "自動サイズ", value: 1 },
    { text: "テキスト配置", value: 2 },
    { text: "カスタム色", value: 3 },
    { text: "スライダー余白", value: 4 },
    { text: "半径", value: 5 },
    { text: "アニメーション速度", value: 6 },
  ]);
  checkBoxList.direction(spreadNS.CellTypes.Direction.vertical);
  checkBoxList.itemSpacing({ vertical: 10 });
  checkBoxList.textAlign(spreadNS.CellTypes.TextAlign.left);
  checkBoxList.toggleOptions({ autoSize: true });
  sheet.setCellType(1, 1, checkBoxList);

  // チェックボックス型セルのtoggleOptionsの変更
  ・・・（中略）・・・
}

チェックボックス型セルやチェックボックスリスト型セルの表示形式をトグルボタンに変更するには、上記のようにmodeメソッドの引数にtoggleを渡します。トグルボタンにした場合は次のプロパティは無効になります。

  • boxSize
  • isThreeState

なお、チェックボックスリスト型セルでは、項目ごとに異なるトグルボタンのスタイルを設定することはできません。toggleOptionsメソッドで設定したスタイルや動作は、セル内のすべてのトグルボタンに適用されます。

最後に「styles.css」にスタイルを記述します。

/* SpreadJSのスタイル */
#ss {
  inline-size: 600px;
  block-size: 300px;
  border: 1px solid silver;
}

以上を記述した後にアプリケーションを実行すると、次のようになります。

トグルボタンを実装

注記：

通常のチェックボックスでは、セル内のどこをクリックしてもチェックボックスのオン／オフが切り替わりますが、トグルモードではトグルボタン部分をクリックした場合のみ、オン／オフが切り替わります。

トグルボタンをカスタマイズする

トグルボタンのスタイルや動作は、チェックボックス型セルやチェックボックスリスト型セルのtoggleOptionsメソッドの引数であるIToggleOptionsインターフェイスの各プロパティを使って設定します。

また、チェックボックス型セルのテキストの配置はtoggleOptionsメソッドではなくtextAlignメソッドで設定します。textAlignメソッドに渡す引数のCheckBoxTextAlign列挙体の「inside」メンバーはトグルボタンでのみ有効です。

IToggleOptionsインターフェイスのプロパティは次のとおりです。これらの機能を使ってチェックボックス型セルのトグルボタンのスタイルと動作を変更できるようにします。各機能については、デモもご参照いただければと思います。

プロパティ説明既定値
animationDurationアニメーション速度100
autoSize文字サイズに合わせた自動調節false
heightトグルボタンの高さ15
sliderColorOffオフ時のスライダー色#ffffff
sliderColorOnオン時のスライダー色#ffffff
sliderMarginスライダーの余白2
sliderRadiusスライダーの半径undefined
trackColorOffオフ時のトラック色#bfbfbf
trackColorOnオン時のトラック色#4CAF50
trackRadiusトラックの半径undefined
widthトグルボタンの幅30

チェックボックスリスト型セルのトグルボタンをオン／オフにしたときにチェックボックス型セルのトグルボタンのスタイルや動作を変更するコードは、次のとおりです。ここでは、スプレッド構文を使ってtoggleOptionsメソッドに渡すオブジェクトを生成しています。

・・・（中略）・・・
// チェックボックス型セルのtoggleOptionsの変更
sheet.bind(spreadNS.Events.ValueChanged, (e, info) => {
  if (info.col == 1) {
    const value = info.newValue;
    checkBox.toggleOptions({
      ...(value.includes(0) ? {
        width: 200,
        height: 100
      } : {}),
      ...(value.includes(1) ? { autoSize: true } : {}),
      ...(value.includes(3) ? {
        sliderColorOff: 'seashell',
        sliderColorOn: 'aqua',
        trackColorOff: 'pink',
        trackColorOn: 'skyblue'
      } : {}),
      ...(value.includes(4) ? { sliderMargin: 6 } : {}),
      ...(value.includes(5) ? {
        sliderRadius: 0,
        trackRadius: 0
      } : {}),
      ...(value.includes(6) ? { animationDuration: 500 } : {}),
    });
    checkBox.textAlign(
      value.includes(2) ?
        spreadNS.CellTypes.CheckBoxTextAlign.inside :
        spreadNS.CellTypes.CheckBoxTextAlign.right
    );
  }
});

上記のコードを実装してチェックボックスリスト型セルのトグルボタンをオン／オフにしたときの動作は次のように変化します。

項目オフ時の設定オン時の設定
カスタムサイズwidth: 30, height: 15width: 200, height: 100
自動サイズfalsetrue
テキスト配置rightinside
カスタム色前述の表の既定値上記コードの各色
スライダー余白26
半径既定値（undefined）0
アニメーション速度100500

アプリケーションを実行して、チェックボックスリスト型セルの各項目のトグルボタンをオンにすると、下のようにチェックボックス型セルのトグルボタンが変化します。

今回ご紹介した内容については以下のデモアプリケーションで確認できます（“Run Project”をクリックするとデモが起動します）。

さいごに

今回の記事では、「SpreadJS」のチェックボックス型セルとチェックボックスリスト型セルをトグルボタン形式で表示してカスタマイズする方法についてご紹介しました。

製品サイトでは、SpreadJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／