JavaScript/SpreadJS

シート以外もExcelらしく！Spread.Sheetsで名前ボックスを実現する

by MESCIUS-dev

こんにちは。今回はSpreadJS収録のライブラリ「Spread.Sheets」を使ったアプリケーションを、よりExcelライクにするTIPSをご紹介したいと思います。

皆さんはExcelで「名前ボックス」と呼ばれているUIをご存知でしょうか。名前を聞いてピンとこない方も、こちらの画像を見ればすぐに分かると思います。

f:id:GrapeCity_dev:20180412132550p:plain

シート上のセル位置や選択状態の確認には欠かせないUIですね。Excelライクな機能要件をもつアプリケーションの開発ではスプレッドシート以外に、このようなUIの実装も必要になってくる場合が多いのではないでしょうか。

残念ながら、スプレッドシート自体の表現をメインとするSpread.Sheetsにこのボックスを生成する機能はありません。しかし、同ライブラリのrangeToFormulaメソッドを使うことで、簡単にこのUIを実装することが可能です。

rangeToFormulaメソッド

Spread.SheetsのrangeToFormulaメソッドは、スプレッドシート上で選択されているセルの位置や範囲を、同ライブラリの数式関数で利用可能な文字列の形式で取得できる関数です。例えばスプレッドシート上で第1行、第1列目のセルを選択し同メソッドを呼び出すと、戻り値として文字列”A1″を取得できます。以下は同メソッドのソースコード付き実行サンプルです。

実行サンプル

シート上で任意のセルを選択すると、rangeToFormula メソッドの結果が表示されます。

名前ボックスの作成

上記のサンプルでは、スプレッドシート上部に用意したHTMLのDIV要素に、セル選択のタイミングでrangeToFormulaメソッドの戻り値を表示しています。このDIV要素のスタイル設定を工夫し、JavaScriptコードを少し追加して、Excelライクな名前ボックスを作成してみましょう。

まず初めに、サンプルコードにあるDIV要素”result”とそのCSS設定を以下のように変更します。

HTML

変更前

<!-- 結果を表示するボックス -->
<div id="result"></div>

変更後

<!-- 名前ボックス -->
<div id="namebox"></div>

CSS

変更前

/* rangetoformula 結果出力ボックスのCSS設定 */
#result {
height: 35px;
font-size: 11pt;
font-weight: bold;
color: teal;
}

変更後

/* 名前ボックスのCSS設定 */
#namebox {
font-family: "Meiryo";
width: 200px;
height: 25px;
margin: 5px;
text-align: center;
background-color: whitesmoke;
border: 1px solid gray;
}

上記の変更後にコードを実行すると、以下のような矩形が表示されるようになります。名前ボックスらしくなってきたのではないでしょうか。

f:id:GrapeCity_dev:20180410171920p:plain

次に、JavaScriptコードを以下のように変更して名前ボックスを完成させます。

変更1

// 変更前のコード
// var resultStr = "任意のセルを選択してください。rangeToFormula メソッドの結果を表示します。";
// document.getElementById("result").textContent = resultStr;
// 変更後のコード
var resultStr = "A1";
document.getElementById("namebox").textContent = resultStr;

変更2

// 変更前のコード
// resultStr = "rangeToFormula()の実行結果：";
// resultStr += GCNS.CalcEngine.rangeToFormula(selectionArea, 0, 0, refType);
// document.getElementById("result").textContent = resultStr;
// 変更後のコード
resultStr = GCNS.CalcEngine.rangeToFormula(selectionArea, 0, 0, refType);
document.getElementById("namebox").textContent = resultStr;
実行サンプル

なお、この状態ではセルを複数選択した場合の表示が、Excelの名前ボックスと少し異なります。セルの複数選択時もExcelと同様の表示を行うようにするには、SelectionChangingイベント時の処理を以下のように変更します。この変更によって複数セル選択時における名前ボックスの表示が、”行数R x 列数C”の形式になります。

//選択セル変更時のイベント
spread.bind(GCNS.Events.SelectionChanging, function(sendar, args) {
var selectionArea = args.newSelections[0]; // 選択領域
var startRow = selectionArea.row + 1; // 選択領域の開始行
var startColumn = selectionArea.col + 1; // 選択領域の開始列
var rowCount = selectionArea.rowCount; // 選択行数
var columnCount = selectionArea.colCount; // 選択列数
var resultStr = ""; // 名前ボックスに可能する文字列
// 選択領域が単一セルの場合
if (selectionArea.rowCount === 1 && selectionArea.colCount === 1) {
// R1C1形式で文字列を取得
var refType = GCNS.CalcEngine.RangeReferenceRelative.allRelative;
resultStr = GCNS.CalcEngine.rangeToFormula(selectionArea, 0, 0, refType);
} else {
// 選択領域が複数セルの場合
if (rowCount < 0 && columnCount > 0) {
// 単一の列のみが選択されている場合
resultStr = columnCount + "C";
} else if (columnCount < 0 && rowCount > 0) {
// 単一の行のみが選択されている場合
resultStr = rowCount + "R";
} else if (rowCount < 0 && columnCount < 0) {
// 行・列とも選択されている場合
resultStr = sheet.getRowCount() + "R x " + sheet.getColumnCount() + "C";
} else {
resultStr = rowCount + "R x " + columnCount + "C";
}
}
document.getElementById("namebox").textContent = resultStr;
});
実行サンプル

シート以外もExcelらしく

いかがだったでしょうか。今回はSpread.Sheetsライブラリの機能を使って「名前ボックス」を作成する方法をご紹介しました。

ExcelライクなWeb画面の作成にあたり、同ライブラリにはスプレッドシートUI以外の部分でも活用できる便利な機能が多く備わっています。名前ボックスの追加に止まらず、アプリケーション画面をさらにExcelらしくしたい場合は、同じくSpread.Sheetsの機能を利用した数式テキストボックスの追加もおすすめです。以下に数式テキストボックスを使ったソース付きの実行サンプルを掲載していますので、こちらも併せてご確認いただけますと幸いです。

このデモでは、スプレッドシートの上部に数式テキストボックスにを配置しています。任意のセルに数式を入力すると数式テキストボックスにも数式が表示され、また数式を設定したセル（このデモではC2セルに数式が設定されています）を選択すると数式テキストボックスに数式が表示されます。

さいごに

弊社WebサイトにはSpreadJSを手軽に体験いただけるデモアプリケーションや無料のトライアル版がございます。今回の記事と併せてこちらも是非、ご確認ください。

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