2022年8月1日更新
WebアプリケーションのクライアントサイドでExcelライクなUIを実現できる高性能JavaScriptライブラリ「SpreadJS（スプレッドJS）」。最新版の「V14J」では「ファンネルチャート」や「マルチカラムピッカー」をはじめとする様々な機能が追加されました。今回はその中でも1、2の注目度を争う目玉機能「リボンコンテナ」をご紹介いたします。
Excelライクを瞬時に実現する「リボンコンテナ」
V14Jで登場した「リボンコンテナ」は、リボン、数式バー、ステータスバー、コンテキストメニュー、そしてスプレッドシートといったExcelライクなUI要素を全て備えたコンポーネントです。このコンポーネントを利用することで、Excelライクな外観と機能を搭載したアプリケーションをすばやく、効率的に開発できるようになっています。次の項目からはその基本的な用法とその標準機能について解説していきます。
基本的な使い方
初期化と表示
リボンコンテナの実装は非常に簡単です。SpreadJSを単体で使用する場合と同じようにHTMLファイル上でライブラリを参照し、リボンコンテナの配置に必要なDOM要素を1つ用意の上、JavaScriptコードで初期化します。以下に例を示します。
HTMLファイル ライブラリ参照コードの記述例
<!--SperadJS関連のCSSとライブラリファイルを参照します-->
<!--CSSファイル-->
<link rel="styleSheet" href="css/gc.spread.sheets.14.0.6.css" />
<!--JavaScriptファイル-->
<script src="scripts/gc.spread.sheets.all.14.0.6.min.js"></script>
<script src="scripts/gc.spread.sheets.charts.14.0.6.min.js"></script>
<script src="scripts/gc.spread.sheets.shapes.14.0.6.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.print.14.0.6.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.barcode.14.0.6.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.pdf.14.0.6.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.excelio.14.0.6.min.js" type="text/javascript"></script>
<!--リボンコンテナ関連のCSSとライブラリファイルを参照します-->
<!--CSSファイル-->
<link rel="styleSheet" href="css/gc.spread.sheets.designer.14.0.6.min.css" />
<!--JavaScriptファイル-->
<script src="scripts/gc.spread.sheets.designer.resource.ja.14.0.6.min.js " type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.designer.all.14.0.6.min.js" type="text/javascript"></script>HTMLファイル DOM要素定義コードの記述例
<!--リボンコンテナを配置するDOM要素を定義します-->
<div id="ribbonContainerHost"></div>JSファイル JavaScriptによる初期化コードの記述例
// 配置の対象となるDOM要素を取得します
var domHost = document.getElementById("ribbonContainerHost");
// リボンコンテナを初期化します
var ribbonContainer = new GC.Spread.Sheets.Designer.Designer(domHost);このコードを実行すると以下のような画面が表示されます（“Run Project”をクリックするとサンプルが起動します）。
非常に少ないコーディング量でリボンや数式バー、ステータスバーなどを備えるスプレッドシート画面が出来上がりました。なお、上記の例では任意の場所に配置したライブラリやCSSを参照する方法を示しましたが、SpreadJSはnpmを使ったインストールにも対応しています。詳細についてはこちらをご覧ください。
また、リボンコンテナの初期化では、SpreadJS単体で作成した既存のスプレッドシートをリボンコンテナのスプレッドシート部に統合することも可能です。その場合は以下のようにしてSpreadJSのインスタンスを引数に設定してリボンコンテナを初期化します。
JSファイル JavaScriptによる初期化コードの記述例（既存のSpreadJSを使用する場合）
// ページ内のDOM要素を取得します
var elemSpread = document.getElementById("spreadHost");
// SpreadJSを初期化しデータを読み込みます
var spread = new GC.Spread.Sheets.Workbook(elemSpread);
// ...(既存のSpreadJS処理)...
// 配置の対象となるDOM要素を取得します
var domHost = document.getElementById("ribbonContainerHost");
// スプレッドシートを統合しながらリボンコンテナを初期化します
var ribbonContainer = new GC.Spread.Sheets.Designer.Designer(domHost, null, spread);参考としてこの方法で作成したデモを以下に示します。「SpreadJSをリボンコンテナに統合する」ボタンを押下すると、最初に表示されていたSpreadJSコントロールがリボンコンテナに組み込まれた状態で表示されるようになります（“Run Project”をクリックするとサンプルが起動します）。
このようにすることで、すでにSpreadJSを用いた開発を行っている方も簡単にリボンコンテナを実装いただけるようになっています。
リボンコンテナの標準機能
リボンコンテナの表示をご確認いただいたところで、今度はその標準機能を見ていきたいと思います。
リボンメニュー
リボンコンテナの「リボンメニュー」にはフォント設定やセルの書式設定など、なじみのあるボタンが数多く搭載されています。リボンコンテナが組み込まれたアプリケーションのユーザーは、このリボンメニューを使用してExcelライクなUI操作やスプレッドシート設定を直感的に行うことが可能です。
また、リボンメニューには「セル型」や「ドロップダウン」といったExcelでは見かけないボタンも配置されています。実はこのリボンコンテナ、「SpreadJSデザイナ」をベースに開発されたコンポーネントとなっており、初期状態ではこういった同デザイナの機能もそのまま使えるようになっているのです。
もちろん、こういったデザイナ機能が不要の場合はカスタマイズにより非表示にすることもできます。この方法については次回の記事で詳しくご紹介いたします！
数式バー
リボンメニューの下には、こちらもExcelでお馴染みの「数式バー」が搭載されています。SpreadJS単体を使った数式バーの実装では、すこしコーディングをして実現する必要があった「名前ボックス」もリボンコンテナに最初から組み込まれた状態になっています。
スプレッドシート
数式バーの下部にはSpreadJSと同様の機能を持ったスプレッドシートが搭載されています。
このスプレッドシートはプログラムからのアクセスが可能となっており、以下のようにgetWorkbookメソッドでそのインスタンスを取得した後は、SpreadJSと全く同様のAPIで操作できるようになっています。
// 配置の対象となるDOM要素を取得します
var domHost = document.getElementById("ribbonContainerHost");
// リボンコンテナを初期化します
var ribbonContainer = new GC.Spread.Sheets.Designer.Designer(domHost);
// リボンコンテナからワークブックとスプレッドシートを取得します
var ribbonContainerSpread = ribbonContainer.getWorkbook();
var ribbonContainerSheet = ribbonContainerSpread.getActiveSheet();
// SpreadJSのメソッドやプロパティを使い、A1セルに値を設定します
ribbonContainerSheet.getCell(0, 0).text("SpreadJSのAPIによる設定が可能です");コンテキストメニュー
リボンコンテナのスプレッドシート上でマウスの左クリックを実行するとコンテキストメニューが表示されます。単体のSpreadJSでも同様の操作でコンテキストメニューが表示されますが、リボンコンテナのコンテキストメニューはさらに強力です。「セルの書式設定」や「リンク」といったメニューが追加され、これらのメニュー実行時には専用ダイアログによる各種設定ができるようになっています。
ステータスバー
リボンコンテナの最下部にはステータスバーが配置されています。このステータスバーは、シート上で選択されたデータを自動で分析し、様々な情報を表示します。平均値やデータ数、合計値などを表示できるほかスライダーを使ったシートの拡大・縮小操作も可能です。
カスタマイズ編に続く！
今回はSpreadJSの「V14J」で新しく収録された「リボンコンテナ」について、その基本的な用法と機能をご紹介しました。非常に少ないコーディング量であっという間にExcelライクな外観と機能を実装できる、大変便利なコンポーネントだということがお分かりいただけたかと思います。しかし、このリボンコンテナはこれだけではありません。次回の記事ではリボンメニューとコンテキストメニューをカスタマイズして、開発アプリケーションの要件にマッチした機能を実装する方法についてご紹介いたしますので、ご期待ください。
さいごに
弊社Webサイトでは、SpreadJSの機能を手軽に体験いただけるデモアプリケーションや無料のトライアル版をご用意しています。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問などがございましたら下記までお気軽にお問合せください。