Excelライクを瞬時に実現！SpreadJSのリボンコンテナを使う – カスタム編 –

// リボンコンテナを初期化します
var ribbonContainer = new GC.Spread.Sheets.Designer.Designer(domHost, null, spread);

// カスタマイズ情報を設定します
var config = /* JSON形式によるカスタマイズ情報を記述します */;

// リボンコンテナを初期化します
var ribbonContainer = new GC.Spread.Sheets.Designer.Designer(domHost,config,spread);

},
// 以下のオブジェクトを削除／コメントアウトして
// リボンメニューから「セル型」部分を削除します
// {
//     "label": "セル型",
//     "thumbnailClass": "ribbon-thumbnail-celltype",
//     "commandGroup": {
//         "children": [
//             {
//                 "commands": [
//                     "cellType",
//                     "cellDropdowns"
//                 ]
//             }
//         ]
//     }
// },
{
    "label": "スタイル",

"separator",
"gc.spread.contextMenu.filter",
// 以下のオブジェクトを削除／コメントアウトして
// コンテキストメニューから「ソート」を削除します
// "sort",
"table",
"separator",

// 以下のオブジェクトを削除／コメントアウトして
// 「挿入」タブをリボンメニューから削除します
// {
//     "id": "insert",
//     "text": "挿入",
//     "buttonGroups": [
//         {
//             "label": "テーブル",
//             "thumbnailClass": "ribbon-thumbnail-table",
//             "commandGroup": {
//                 "commands": [
//
//        -------------- （中略） ----------------
//
//                     "sparklinesYearSparkline",
//                     "sparklinesRangeBlockSparkline"
//                 ]
//             }
//         }
//     ]
// },
{
    "id": "formulas",
    "text": "数式",
    "buttonGroups": [

var config = {
    "ribbon": [
        // 独自タブを作成します
        {
            // タブのID情報を設定します
            id: "flexibleCustomize",
            // 表示上のタブ名称を設定します
            text: "自由なカスタマイズ",
            // タブ内に展開するボタンやラベルの情報を設定します
            buttonGroups: [
                {
                    // タブのラベル情報を設定します
                    label: "リボンコンテナでは、リボンの表示だけでなくタブの追加や非表示、ボタンの追加などを自由に行うことが可能です。",
                    // ボタン処理がある場合は以下のオブジェクト内で設定します
                    commandGroup: {}
                }
            ]
        },
        // 以下は既存のホームタブ定義です
        {
            "id": "home",
            "text": "ホーム",
            "buttonGroups": [

{
  // 独自タブを作成します
  id: "settings",
  // 表示上のタブ名称を設定します
  text: "独自のボタン設定",
  // タブ内に展開するボタンやラベルの情報を設定します
  buttonGroups: [
    {
      // タブのラベル情報を設定します
      label: "ファイル保存のデモ",
      // ボタン処理がある場合は以下のオブジェクト内で設定します
      commandGroup: {
        // ボタン押下時に呼び出すコマンドを設定します
        commands: ["cmdSaveData"]
      }
    }
  ]
},

// レイアウト情報のプロパティとしてコマンドを作成し追加します
config.commandMap = {
  // コマンド「cmdSaveData」を作成します
  cmdSaveData: {
    // ボタン上をマウスオーバーした際に表示されるキャプションを設定します
    title: "データを保存します",
    // ボタン下部に表示されるラベルを設定します
    text: "保存",
    // ボタン画像を参照するCSSクラスを設定します
    iconClass: "cmdSaveData",
    // リボン上で大きいサイズのボタン表示を行う場合は"true"に設定します
    bigButton: "true",
    // コマンド名を定義します
    commandName: "cmdSaveData",
    // コマンド実行時の処理を記述します
    execute: async (context, propertyName, fontItalicChecked) => {
      alert("データの保存に成功しました");
    }
  }
};

/* カスタムボタンのスタイル情報 */
.cmdSaveData {
    /* ボタン画像 （画像が配置してある任意の場所を指定してください）*/
    background-image: url('./saveData.png');
    /* ボタン画像のサイズ */
    background-size: 35px 35px;
}

"contextMenu": [
    // コンテキストメニューに「カスタムメニュー」を追加します
    "customContextMenu",
    // ここから下は既存のメニュー項目です
    "contextMenuCut",
    "contextMenuCopy",
    "contextMenuPaste",
    "designerPasteAll",

// レイアウト情報のプロパティとしてコマンドを作成し追加します
config.commandMap = {
  // コマンド「customContextMenu」を作成します
  customContextMenu: {
    // コンテキストメニューで表示される項目名を設定します
    text: "カスタムメニュー",
    // コマンド名を定義します
    commandName: "customContextmenu",
    // コマンド実行時の処理を記述します
    execute: async (context, propertyName, fontItalicChecked) => {
      // customize operator
      alert("カスタムコンテキストメニューが実行されました");
    }
  }
};

// 既存のレイアウト情報を取得します
var config = GC.Spread.Sheets.Designer.DefaultConfig;

// 「独自のボタン設定」タブ情報を作成します
var settingsTab = {​​​​​​​​
    // 独自タブを作成します
    id: "settings",
    // 表示上のタブ名称を設定します
    text: "独自のボタン設定",
    // タブ内に展開するボタンやラベルの情報を設定します
    buttonGroups: [
        {​​​​​​​​
            // タブのラベル情報を設定します
            label: "ファイル保存のデモ",
            // ボタン処理がある場合は以下のオブジェクト内で設定します
            commandGroup: {​​​​​​​​
                // ボタン押下時に呼び出すコマンドを設定します
                commands: ["cmdSaveData"]
            }​​​​​​​​
        }​​​​​​​​
    ]
}​​​​​​​​;

// 「自由なカスタマイズ」タブ情報を作成します
var flexibleTab = {
    // タブのID情報を設定します
    id: "flexibleCustomize",
    // 表示上のタブ名称を設定します
    text: "自由なカスタマイズ",
    // タブ内に展開するボタンやラベルの情報を設定します
    buttonGroups: [
        {
            // タブのラベル情報を設定します
            label: "リボンコンテナでは、リボンの表示だけでなくタブの追加や非表示、ボタンの追加などを自由に行うことが可能です。",
            // ボタン処理がある場合は以下のオブジェクト内で設定します
            commandGroup: {}
        }
    ]
};

// 独自のコマンド情報を作成します
config.commandMap = {
    // コマンド「cmdSaveData」を作成します
    cmdSaveData: {
        // ボタン上をマウスオーバーした際に表示されるキャプションを設定します
        title: "データを保存します",
        // ボタン下部に表示されるラベルを設定します
        text: "保存",
        // ボタン画像を参照するCSSクラスを設定します
        iconClass: "cmdSaveData",
        // リボン上で大きいサイズのボタン表示を行う場合は"true"に設定します
        bigButton: "true",
        // コマンド名を定義します
        commandName: "cmdSaveData",
        // コマンド実行時の処理を記述します
        execute: async (context, propertyName, fontItalicChecked) => {
            alert("データの保存に成功しました");
        }
    },
    // コマンド「customContextMenu」を作成します
    customContextMenu: {
        // コンテキストメニューで表示される項目名を設定します
        text: "カスタムメニュー",
        // コマンド名を定義します
        commandName: "customContextmenu",
        // コマンド実行時の処理を記述します
        execute: async (context, propertyName, fontItalicChecked) => {
        // customize operator
        alert("カスタムコンテキストメニューが実行されました");
        }
    }
};

// コンテキストメニューからソートを削除し、カスタムメニューを追加します
config.contextMenu.splice(config.contextMenu.indexOf("sort"), 1);
config.contextMenu.unshift("customContextMenu");
 
// セル型グループを削除します
config.ribbon[0].buttonGroups.splice(5, 1);
// 挿入タブを削除します
config.ribbon.splice(1, 1);

// 独自のタブを先頭に追加します
config.ribbon.unshift(settingsTab);
config.ribbon.unshift(flexibleTab);