GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の、製品のTIPSや発売などに関する最新情報をお届けします。

GrapeCity

SpreadJSの入力にInputManJSセルを使う

SpreadJS(スプレッドJS)」には、InputManJSを統合するInputManJSセルという機能があります。バージョンV13.2Jでは、このInputManJSセルに、新しくGcComboBox型セルが追加されました。

今回は、このGcComboBox型セルに従来からのGcMask、GcNumber、GcDateTimeの各セル型を加えた4つのInputManJSセルの豊富な機能と使い方をご紹介します。

注意
InputManJSセルの使用には、SpreadJSInputManJSのライセンスが必要です。


  1. InputManJSセルとは?
  2. GcMask型セル
  3. GcDateTime型セル
  4. GcNumber型セル
  5. GcComboBox型セル
  6. 実行サンプル
  7. おわりに

1. InputManJSセルとは?

InputManJSセルは、セルの編集モードでInputManJSのコントロールと統合することで、入力書式や表示書式を指定して、簡単にそして効率的に値を入力できるようにします。

InputManJSセルではInputManJSのコントロールに備わっている汎用的な機能をはじめ、各コントロール独自の機能を利用できます。


InputManJSセルの汎用的な機能

項目説明
書式設定データに応じた書式と文字種の指定
入力制御リテラル文字や改行コードの扱い方/入力可能範囲の指定
フォーカス移動自動フォーカス移動/フィールド間の移動
未入力時の表示未入力時の代替文字表示
スピン機能値の増減/選択項目の移動
クリアボタン入力値を一括クリアするボタンの表示
長体表示長い文字列をセル内に収める縮小表示
スタイル設定状態に応じた各部位のスタイル設定


InputManJSセルの汎用機能や各セル型専用機能の詳しい内容については、対応するInputManJSコントロールのデモでご確認ください。


セル型に対応したInputManJSコントロール

セル型コントロール
GcMask型セルマスクコントロール(GcMask)
GcDateTime型セル日付時刻コントロール(GcDateTime)
GcNumber型セル数値コントロール(GcNumber)
GcComboBox型セルコンボコントロール(GcComboBox)

参考:コントロールのリンクをクリックすると対応するデモのページが表示されます。

InputManJSセルを使う準備

InputManJSセルを使用するには、InputManJSモジュールに加えて専用の間接モジュールも参照します。

  • gc.inputman-js.ja.js(InputManJSモジュール)
  • gc.inputman-js.css(InputManJSモジュール)
  • gc.spread.sheets.inputmancelltype.js(間接モジュール)

SpreadJSモジュールとこれらのモジュールを参照するには、npmパッケージをインストールします。npmパッケージの利用方法は、こちらの記事を参考にしてください。

本稿では、下記の方法で各モジュールをインポートしています。

// Spread.Sheets関連モジュールのインポート
import * as GCSS from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-resources-ja';
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white';

// InputManJS関連モジュールのインポート
import '@grapecity/inputman/CSS/gc.inputman-js.css';
import * as GCIMCellType from '@grapecity/spread-sheets-inputmancelltype';

2. GcMask型セル

GcMask型セル

GcMask型セルは、電話番号や郵便番号などの入力マスクを正規表現で定義して、入力可能な文字種と書式を制限することができます。 また、特殊な用途向けとして、書式に設定した列挙体の項目を順次表示するスピン機能も備えられています。

主な機能

GcMask型セルには次のような機能があります。

プロパティ設定値機能
formatPatternString入力マスクの書式
displayTypeBooleanセルの値にリテラル文字列を含めるかどうかの指定
autoConvertBooleanformatPatternで指定した文字種への自動変換
showSpinButtonBooleanスピンボタンの表示
watermarkNullTextString未入力時の代替テキストを設定
exitOnLastCharBoolean入力完了時の自動フォーカス移動

詳細情報:SpreadJSデモInputManJSヘルプInputManJSデモ

メモ
入力マスクの詳しい仕様をInputManJSデモに記載しています。


サンプルスクリプト

文字種を自動的に半角数字に変換して郵便番号を入力する例を以下に示します。

この例では、表示モードでもリテラル文字が表示されます。また、編集開始時に適切な入力を促す文字列が表示され、文字列全体が選択状態になります。

function setGcMaskCellType(sheet){
  var gcMaskCellType = new GCIMCellType.GcMaskCellType({
    autoConvert: true,
    displayType: 'text',
    exitOnLastChar: true,
    formatPattern: '〒\\D{3}-\\D{4}',
    showClearButton: true,
    showSpinButon: false,
    watermarkNullText: '郵便番号の入力'
  });
  sheet.setCellType(1, 1, gcMaskCellType);
};

3. GcDateTime型セル

GcComboBox型セル

GcDateTime型セルは、和暦表示や入力可能な日付範囲の指定ができるほか、ドロップダウンカレンダーやスピン機能を使ってマウス操作だけで日付を入力することも可能です。また、ドロップダウンカレンダーには、日曜日や休日のスタイル設定などの豊富な機能が搭載されています。

主な機能

GcDateTime型セルの主要な機能を以下に示します。

プロパティ設定値機能
formatPatternString日付時刻の入力書式
displayTypeStringセルの値に設定する書式(入力書式/セルのフォーマッタ)
showDropDownButtonBooleanドロップダウンボタンの表示
dropDownConfig.dropDownTypeDateDropDownTypeドロップダウンの種類
dropDownConfig.typePickerType日付時刻ピッカーの種類
showSpinButtonBooleanスピンボタンの表示
minDateDate/String入力可能な日付の最小値
minDateDate/String入力可能な日付の最大値
watermarkNullTextString未入力時の代替テキストを設定
exitOnLastCharBoolean入力完了時の自動フォーカス移動

詳細情報:SpreadJSデモInputManJSヘルプInputManJSデモ

メモ
ドロップダウンカレンダーの機能や設定方法はInputManJSデモのドロップダウンカレンダーカレンダーコントロールで解説しています。


サンプルスクリプト

この例では、和暦の日付を入力して表示します。

入力書式がそのまま表示書式としても使用されます。また、編集開始時に適切な入力を促す文字列が表示され、文字列全体が選択状態になります。さらに、入力可能な日付範囲を限定しているほか、ドロップダウンカレンダーを使った日付入力も可能です。

function setGcDateTimeCellType(sheet){
  var gcDateTimeCellType = new GCIMCellType.GcDateTimeCellType({
    displayType: 'text',
    dropDownConfig: {
      dropDownType: GC.InputMan.DateDropDownType.Calendar,
      showWeekNumber: false,
      type: GC.InputMan.PickerType.DateTime,
    },
    exitOnLastChar: true,
    formatPattern: 'gggee年MM月dd日',
    maxDate: '2099/12/31',
    minDate: '2000/1/1',
    showClearButton: true,
    showDropDownButton: true,
    showSpinButon: false,
    watermarkNullText: '和暦日付の入力'    
  });
  sheet.setCellType(3, 1, gcDateTimeCellType);
};

また、CSSに次の記述を追加して今日の日付ボタンのスタイルを設定しています。

.gcim-calendar__today-button{
    color: red;
}

4. GcNumber型セル

GcComboBox型セル

GcNumber型セルは、3桁区切りや小数点、通貨記号、負号を入力書式と表示書式に設定できます。また、負号のカスタイズや漢数字の表示も可能です。さらに、ドロップダウン数値パッドとスピン機能を使うことでマウス操作だけで数値を入力することができます。

主な機能

GcNumber型セルの主要な機能は次のとおりです。

プロパティ設定値機能
formatDigitString数値の入力書式(桁数、小数点、桁区切り)
positivePrefixString正数の前のリテラル文字(通貨記号など)
positiveSuffixString正数の後のリテラル文字
negativePrefixString負数の前のリテラル文字(通貨記号や負号)
negativeSuffixString負数の後のリテラル文字
displayTypeString表示書式(入力書式/セルのフォーマッタ)の切り替え
showSpinButtonBooleanスピンボタンの表示
spinOnKeysBoolean上下キーによるスピン動作の許可
spinWrapBoolean スピン時の上下限でのラップ動作の許可
showNumericPadBoolean数値パッドのドロップダウン表示
minValueNumber/String入力可能な数値の最小値
maxValueNumber/String入力可能な数値の最大値
watermarkNullTextString未入力時の代替テキストを設定

詳細情報:SpreadJSデモInputManJSヘルプInputManJSデモ

サンプルスクリプト

最大5桁の数値を円記号と桁区切り記号を付けて入力/表示する例です。

負数と正数の接頭辞を設定するほか、マウスによる数値入力を可能にする簡易キーパッドの使用を可能にしています。また、スピンボタンを使った数値の増減を許可する一方で、マウスホイールによるスピン操作は禁止しています。

function setGcNumberCellType(sheet){
  var gcNumberCellType = new GCIMCellType.GcNumberCellType({
    displayType: 'text',
    formatDigit: '##,##0',
    maxValue: Number(99999),
    minValue: Number(-99999),
    negativePrefix: '-$',
    negativeSuffix: '',
    positivePrefix: '$',
    positiveSuffix: '',
    showClearButton: true,
    showNumericPad: true,
    showSpinButton: true,
    spinWheel:false,
    watermarkNullText: '数値の入力'  
  });
  sheet.setCellType(5, 1, gcNumberCellType);
};

5. GcComboBox型セル

GcComboBox型セル

複数列やグラフィカルでリッチなリストを実現するテンプレートを使ったドロップダウンリストを表示できます。また、入力された値に合致する項目を自動的に表示するオートフィルタ機能 を備えているほか、スピン機能を使って選択値を変更したり、任意の文字列を直接入力することも可能です。

主な機能

GcComboBox型セルの主要な機能は次のとおりです。

プロパティ設定値機能
itemsObjectドロップダウンリストのデータソース
columnsObjectドロップダウンリストの各列の定義
displayMemberPathString選択項目の表示用に使用するフィールド名
valueMemberPathString選択項目の値として使用するフィールド名
isEditableBoolean任意の文字列入力の可否
autoFilterAutoFilter列挙型入力時のフィルタリング方法
dropDownHeightNumber/Stringドロップダウンリストの高さ
dropDownWidthNumber/Stringドロップダウンリストの幅
itemHeightNumber/Stringドロップダウンリスト内の項目の高さ
showSpinButtonBooleanスピンボタンの表示
watermarkNullTextString未入力時の代替テキストを設定

詳細情報:SpreadJSデモInputManJSヘルプInputManJSデモ

サンプルスクリプト

ドロップダウンリストに2列のデータを表示し、交互行スタイルを設定しています。

ドロップダウンリストにはJSON形式のデータを設定し、オートフィルタ機能を有効にして表示するリスト項目を絞り込めるようにしています。また、ドロップダウンリストのサイズと項目の高さを設定し、列ヘッダを非表示にしています。

function setGcComboBoxCellType(sheet){
  var gcComboBoxCellType = new GCIMCellType.GcComboBoxCellType({
    items: [
    { id: 15, product: 'ピュアデミグラスソース' },
    { id: 17, product: 'だしこんぶ' },
    { id: 18, product: 'ピリカラタバスコ' },
    { id: 84, product: 'なまわさび' },
    { id: 85, product: 'なまからし' },
    { id: 86, product: 'なましょうが' },
    ],
    columns: [
      { name: 'id', label: 'コード', width: 70 },
      { name: 'product', label: '品名', width: 180 },
    ],
    displayMemberPath: 'product',
    valueMemberPath: 'id',
    autoFilter: GC.InputMan.AutoFilter.StartWith,
    dropDownHeight: 300,
    dropDownWidth: 'auto',
    generatingItem: (args) => {
      args.item.classList.add(args.index % 2 ? 'odd' : 'even');
    },
    isEditable: true,
    itemHeight: 25,
    showHeader: false,
    showSpinButton: true,
    watermarkNullText: '項目を選択してください',
  });
  sheet.setCellType(7, 1, gcComboBoxCellType);
};

また、CSSに次の記述を追加して交互行のスタイルを設定しています。

.odd {
  background: aliceblue;
}
.even {
  background: white;
}

6. 実行サンプル

上記のサンプルスクリプトで紹介した各セル型を実装した実行サンプルです。セル型名の横のセルをクリックすると、各種入力をお試しいただけます。


7. おわりに

以上のように、InputManJSセルを使うことでSpreadJSのシートにInputManJSのコントロールの高度な入力機能を付与できます。SpreadJSには、今回ご紹介したInputManJSセルをはじめとする豊富な機能が満載です。また、InputManJSには、その他にも快適なユーザーインタフェースの構築に欠かせない各種コントロールをご用意しています。

弊社ウェブサイトで公開中のオンラインデモでは、これらの製品が提供する様々な機能をお試しいただけるようになっていますので、是非チェックしてみてください。

  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品・技術資料をご覧ください。
  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品のデモアプリケーションをお試しください。