リボンをつけてExcelライクなインターフェースを実現する
SpreadJSでは、リボンをWebアプリに追加することもできます。リボンは、デスクトップ版のMicrosoft Officeでおなじみの、あのUIコンポーネントです。
さきほど配置したボタンの代わりにリボンを使用して、よりExcelに近い画面にしてみましょう。
リボン関連ファイルの追加
リボン関連のファイルは、SpreadJSのパッケージファイルのSpreadJS_Release/RibbonContainerフォルダ以下に含まれているので、必要なファイルをscriptsフォルダにコピーしてください。配置例は03-with-ribbonプロジェクトを参考にしてください。
なお、CSSとJSファイルはribbonという直感的な名前のファイルではなくdesignerという名前になっています。これは、SpreadJSのDesignerと呼ばれる機能を使用してリボンを実現するためです。
リボンつきでSpreadJSを初期化する
これまでの例ではnew GC.Spread.Sheets.Workbook("container")のようにWorkbookを初期化していましたが、リボンを使用する場合は先にDesignerを初期化します。Designerを初期化した後、getWorkbook()メソッドでWorkbookを取得します。
// Designer用デフォルト設定を取得
const config = GC.Spread.Sheets.Designer.DefaultConfig;
// 既存タブをすべてクリア
config.ribbon = [
// リボンのタブ・ボタン設定
];
config.commandMap = {
// リボンのコマンド設定
};
// Designerを生成（Designerはリボンを実現するためのコンポーネント）
const designer = new GC.Spread.Sheets.Designer.Designer(
document.getElementById("container"),
config
);
// Workbookを取得
const workbook = designer.getWorkbook();
なお、リボンを使う場合は、SpreadJSのライセンスキーのほかにGC.Spread.Sheets.Designer.LicenseKeyに「リボンコンテナ配布用」のライセンスキーを設定する必要があるので注意してください。
リボンのタブやボタンの設定は、config.ribbonにJSON形式で指定します。そのボタンに対する処理（コマンド）は、config.commandMapに定義します。実際の定義例はサンプルファイルをご確認ください。
たとえば集計ボタンのコマンドでは以下のように定義し、ボタンが押されたときには元のperformAggregate関数が呼び出されるようにしています。
cmdAggregateExec: {
title: "集計シートに店舗の売り上げを転記します",
text: "集計",
iconClass: "cmdAggregateExec",
bigButton: "true",
commandName: "cmdAggregateExec",
execute: () => performAggregate(),
},
実際にLive Serverを起動して、http://localhost:5500/03-with-ribbon/をブラウザで開いてみると、画面上部にリボンが表示され、ボタンを押すと、集計シートの内容が変更されることが確認できると思います。
まとめ
本記事では、SpreadJSを使用して既存のExcel資産をWebアプリに移行する方法を解説しました。Excelに慣れたユーザーにとっては、操作感を損なうことなく、直感的に利用できるWebアプリが構築できそうです。
開発者にとっても、Excelの数式や条件付き書式をそのまま使用できるため、複雑なロジックをJavaScriptで実装する必要がなく、開発工数を大きく削減できるでしょう。APIも豊富に用意されており、業務ロジックに合わせたカスタマイズも容易です。
有料のライブラリですが、ExcelライクなUI/UXを実現するための開発コストを考えれば、リーズナブルに感じます。要件や予算にもよりますが、Excel資産が多い場合や、ユーザーにとってExcelライクな操作が重要な場合は、SpreadJSを検討してみてはいかがでしょうか。
