GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

「タグ」の活用によるスマートなスプレッドシート処理

こんにちは。今回は「SpreadJS」に収録のスプレッドシートライブラリ「Spread.Sheets」に搭載されている便利な機能「タグ」をご紹介したいと思います。

お客様が業務をシステム化されるということでSpread.Sheetsをご利用になる場合に、以下の様なスプレッドシート設定をお見かけすることがあります。

システム利用者が必要とする表示データ以外に、プログラムからの検索処理用としてID情報などをスプレッドシートに設定し、その列を非表示にして隠す、という使い方です。みなさんもご経験、あるのではないでしょうか。

この方法は直感的ですが、本来表示する必要がないデータをスプレッドシートに設定しなければならず、検索用の列を意識しながらアプリケーション処理を実装する必要があるなど、開発上のデメリットがあります。

Excelを使ったデータ表示とマクロ処理の組み合わせでは、これ以外の方法をとることがなかなか困難ですが、Spread.Sheetsライブラリをご利用の場合は「タグ」機能を活用することで、この問題をスマートに解決できます。

セル、行、列に任意の情報を紐づける「タグ」

Spread.Sheetsに搭載されている「タグ」機能は、任意の型のデータをセルや行、列に関連づけてシートに設定できる機能です。

例えば次のコードでは、B2セルにタグとして文字列"test"という情報を設定しています。

// Spread.Sheetsを初期化します
var ssDom = document.getElementById("ss");
var spread = new GC.Spread.Sheets.Workbook(ssDom);
// シートオブジェクトを取得します
var sheet = spread.getActiveSheet();
pp// シートにタグを設定します
sheet.setTag(1,1,"test");

以下は上記コードの実行結果ですが、ご覧のようにB2セルのタグはスプレッドシートには表示されず、プログラムからのみ取り扱える情報になっています。


設定したタグは、Spread.Sheetsのsearchメソッドによる検索が可能です。この特徴を活用することで、冒頭でご紹介した「隠し列に設定した値を検索する」という方法と取らずとも、任意のデータに紐づく特定の情報を検索することが可能となります。

具体的には、searchメソッドを次のように活用することで、タグの検索ができます。

// 検索条件を作成します
var sc = new GC.Spread.Sheets.Search.SearchCondition();
// 検索対象の種類をタグに設定します
sc.searchTarget = GC.Spread.Sheets.Search.SearchFoundFlags.cellTag 
// 検索する値を設定します
sc.searchString = "test";
// 検索を実行し、結果を取得します
var sr= sheet.search(sc);

以下のサンプルはこの検索機能を活用した例です。ボタン押下に応じて、タグ"test"を検索し、該当セル(B2)にカーソル移動します。


いかがだったでしょうか。「Excel以上!Spread.Sheetsによる複雑にならない入力フォーム」でもご紹介したように、Spread.Sheetsの独自機能で活用すると、ExcelライクなUIを実現しながら、Excelよりも使い勝手が良く、開発効率にも優れたアプリケーションを開発することが可能です。

今回のご紹介したタグ以外にも、Spread.Sheetsには様々な機能が搭載されています。いずれも弊社Webサイトのオンラインデモで公開中となっておりますので、是非お試しください。

SpreadJSデモ
Spread.Sheets デモ


2018年8月29日に新バージョン「V11J」をリリースしました!