UNVELL Inc.UNVELL
ARTICLES

ReoGrid Web 1.5 リリース — 検索・置換、ドラッグ移動、ページヘッダー／フッター、ロケール指定のPDF出力

reogridreogrid-webspreadsheetreleasejavascript
2026年8月8日·UNVELL Inc.
ReoGrid Web 1.5 リリース — 検索・置換、ドラッグ移動、ページヘッダー／フッター、ロケール指定のPDF出力

UNVELL株式会社は、Webアプリ向けExcelライクスプレッドシートライブラリ ReoGrid Web の最新版 1.5 を2026年8月8日にリリースしました。今回は「Excelでできることが、まだできていなかった」領域をまとめて埋める機能リリースです。目玉は 検索・置換、ドラッグによる範囲・行・列の移動、ページヘッダー／フッター、そして ロケール指定のPDF出力 の4点。公開APIに破壊的変更はありません。

1.5 のハイライト

機能エディション
検索・置換（Ctrl/Cmd+F・Ctrl/Cmd+H）Lite／Pro
範囲・行・列のドラッグ移動Lite／Pro
ページヘッダー／フッターPro
ロケール指定のPDF出力（CJKフォント）Pro

検索・置換とドラッグ移動は「基本的な編集操作」と位置づけ、無償のLite版でもそのままご利用いただけます。

検索・置換 — Ctrl/Cmd+F と Ctrl/Cmd+H

グリッド上で Ctrl/Cmd+F（検索）または Ctrl/Cmd+H（置換）を押すと、内蔵の検索バーが開きます。一致したセルはすべてキャンバス上でハイライトされ、Enter / Shift+Enter で前後の一致へ移動します。

検索範囲は シート／選択範囲／ブック全体 の3スコープ。ブック全体を選ぶと、一致が見つかったシートへ自動的に切り替わり、2/4 · Sheet1 のように現在位置が表示されます。

オプションは Excel と同じ考え方で、大文字小文字の区別、セル内容の完全一致、そして 正規表現 に対応します。

同じ操作はすべてプログラムからも実行できます。

import { createReogrid } from '@reogrid/lite';

const grid = createReogrid({ workspace: '#app' });

// 検索バーを開く（Ctrl/Cmd+H と同じ）
grid.showFindBar('replace');

// UIを介さずに検索する
grid.find('東京', { scope: 'workbook', matchCase: true });
grid.findNext();

// 置換した件数が返る
const count = grid.replaceAll('東京', '京都', { wholeCell: true });

検索対象は既定でセルの生の入力値（数式セルなら =SUM(A1:A3) そのもの）です。画面に見えている表示値を検索したい場合は lookIn: 'value' を指定します。このとき、計算結果が一致しただけの数式セルが書き換わることはありません。

置換はまとめて1ステップでUndoでき、保護されたセルは対象から除外されます。

独自の検索UIを実装したい場合は、内蔵バーを無効化してAPIだけを使う構成も可能です。

const grid = createReogrid({ workspace: '#app', showFindBar: false });

範囲・行・列をドラッグで移動

選択範囲の 枠線 をつかんでドラッグすると、セルブロックをそのまま別の位置へ移動できます。値・数式・リッチテキスト・表示形式・スタイル・セル種別・罫線・コメント・ロック状態がまとめて移動し、移動先は Excel と同じく上書きされます。

一方、すでに選択されている行ヘッダー／列ヘッダー をドラッグした場合は、行・列単位の切り取り＆挿入による並べ替えになります。こちらは純粋な並び替えなので、何かが失われることはありません。

// B2:D10 を F2 を左上とする位置へ移動する
grid.worksheet.range('B2:D10').moveTo(1, 5);

結合セルを分断する移動、シート範囲外への移動、保護セルへの移動、遅延ロードのデータソース接続中の移動は拒否されます。

移動は キャンセル可能なイベント を発行します。ホスト側で独自の処理に差し替えたい場合は cancel を立ててください。

grid.onBeforeRangeMove((e) => {
  // 見出し行（1行目）の移動だけは禁止する
  if (e.kind === 'rows' && e.from.topRow === 0) {
    e.cancel = true;
  }
});

grid.onAfterRangeMove((e) => {
  console.log(e.kind, e.from, e.to); // 実際に完了した移動のみ
});

ドラッグ操作自体が不要なアプリケーションでは、APIはそのままに操作だけを無効化できます。

grid.worksheet.setRangeMoveEnabled(false);

ページヘッダー／フッター（Pro）

印刷・PDF出力の用紙余白に、ページ番号や日付、シート名を配置できるようになりました。設定は左・中央・右の3セクション×ヘッダー／フッターで、Excel の書式コードをそのまま保持 します。

grid.worksheet.setPrintSettings({
  headerFooter: {
    header: { center: '売上レポート', right: '&D' },
    footer: { right: 'ページ &P / &N' },
  },
});

&P（ページ番号）、&N（総ページ数）、&D / &T（日付・時刻）、&F（ファイル名）、&A（シート名）に対応し、&P+2 のようなオフセット指定も使えます。文字列は書式コードのまま保存されるため、xlsxを経由してExcelで開いても崩れません。奇数・偶数ページで出し分ける differentOddEven、1ページ目だけ変える differentFirst も利用できます。

バンドが余白に収まらない高さになった場合は、セルの上に重ねて描くのではなく本文領域を押し下げます。Excelと同じ挙動で、結果として1ページあたりの行数が減ります。ページ分割の計算・PDF出力・印刷用HTMLはいずれも同じ判定を共有するため、画面と出力がずれることはありません。

ロケール指定のPDF出力（Pro）

PDFはグリフの輪郭を埋め込む形式のため、出力には実際のフォントデータが必要です。1.4 までは同梱のローダーが日本語フォントのみで、簡体字中国語のシートを出力すると文字が豆腐（□）になり、回避手段がありませんでした。

1.5 では フォントレジストリ を導入し、ja / zh-CN / zh-TW / ko を標準登録しています。ロケール名を指定するだけで、対応するフォントが埋め込まれます。

import { preloadPdfFont } from '@reogrid/pro';

// 起動時に一度だけ（ここでダウンロードが発生する）
await preloadPdfFont('zh-CN');

// 以降はどこからでも同期的に出力できる
grid.saveAsPdf({ locale: 'zh-CN', filename: 'report.pdf' });

登録と読み込みを分けているのは、PDF出力を同期処理のまま保つ ためです。saveAsPdf は最終的にダウンロード用リンクのクリックで終わるため、その直前に await を挟むとユーザー操作のコンテキストが失われ、ポップアップブロックの対象になります。そこで、ネットワークアクセスは呼び出し側が制御できる非同期のタイミングに寄せています。

あわせて、サブセット化したCJKフォントをnpmパッケージとして公開しました。標準のフォント取得は公開CDN上のフルセットフォントを参照するため、環境によっては低速だったり到達できなかったりします（特に中国本土）。パッケージを使えばネットワークアクセスそのものが不要になり、社内の閉域ネットワークでも動作します。

npm install @reogrid/font-sc

import { registerPdfFont, preloadPdfFont } from '@reogrid/pro';
import { loadNotoSansSC } from '@reogrid/font-sc';

registerPdfFont('zh-CN', loadNotoSansSC);
await preloadPdfFont('zh-CN');

@reogrid/font-sc（zh-CN／GB 2312）のほか、@reogrid/font-tc（zh-TW／Big5）、@reogrid/font-jp（ja／JIS X 0208）、@reogrid/font-kr（ko／KS X 1001）を用意しています。

そのほかの追加と改善

  • instance.focus() — グリッドへキーボードフォーカスを戻します。ホスト側のツールバーのボタンを押した後などに呼ぶことで、続くショートカット（Undo・コピー／貼り付け・矢印移動）がブラウザではなくグリッドに届きます。
  • アウトラインの一括解除 — clearRowOutlines() / clearColumnOutlines() でグループをすべて解除し、折りたたみで隠れていた行・列を復帰させます。モデルからアウトラインを再構築する用途向けです。
  • 列幅の自動調整の走査上限 — autoFitMaxScanRows（既定1000）で、自動フィット時に測定する行数の上限を設定できます。巨大なシートでの測定コストを抑えられます。
  • 境界のダブルクリックで選択範囲すべてを自動調整 — A:D を選択して境界をダブルクリックすると、Excelと同様に選択中の全列が調整されます。
  • モニタ間移動時の再スケール — devicePixelRatio の変化を検知し、Retinaと通常ディスプレイの間でウィンドウを移動してもキャンバスがぼやけたままになりません。

主な不具合修正

  • セルからはみ出して表示されている長いテキストが、元のセルが画面外へスクロールすると消えてしまう問題を修正しました。
  • ウィンドウ下端付近のセルでドロップダウン（入力規則のリストやオートフィルタ）が画面外に開いてしまう問題を修正し、スペースが足りない場合は上方向に開くようにしました。
  • スクロールバーが領域を占有する環境（Windowsなど）で、最終行・最終列がスクロールバーの下に隠れて表示できない問題を修正しました。
  • ウィンドウ枠の固定後、スクロールバーの末尾に「動かない余白」が残る問題を修正しました。
  • readReoGridJson() が既存の内容にマージしてしまい、2つ目のドキュメントを読み込むと前のデータが下に残る問題を修正しました。読み込み前にワークシートをリセットするようになっています。
  • PDF出力が B4／B5／Tabloid／Executive の用紙指定を無視してA4で出力していた問題を修正しました。日本ではJIS B4／B5が日常的に使われるため、影響の大きい修正です。
  • PDF出力がシート側の罫線表示設定（setShowGridLines(false)）に従うようになりました。
  • ページ境界をまたぐ罫線が片方のページにしか印刷されない問題を修正しました。
  • 表示形式付きの数式セルが、並べ替えなどの一括再計算後に古い値を表示し続ける問題を修正しました。

このほかの変更点はCHANGELOGをご覧ください。

使い始める

Lite版はライセンスキー不要で、npmからすぐにお試しいただけます。検索・置換とドラッグ移動はLite版でも動作します。

npm install @reogrid/lite

Pro版では109関数の数式ライブラリ、xlsx／PDFエクスポート、ページヘッダー／フッター、フルセットのセル種別などが利用可能になります。30日間の評価版をご用意していますので、お気軽にお試しください。

記事一覧へ戻る