こんにちは。今回は「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サイトのオンラインデモで公開中となっておりますので、是非お試しください。
2018年8月29日に新バージョン「V11J」をリリースしました！