概要

Jspreadsheet CEはタッチ操作にいくつか課題がある。

行全体、列全体を除いて、複数のセルを自由に選択できない
Mobile Safariでコンテキストメニューが表示されず行追加、行削除、コピー、ペーストなどの操作ができない
行高さ、列幅を変更できない

この記事ではJspreadsheet CEを拡張してこの問題を解決する。

動作環境

Windows 11 Pro 23H2
Jspreadsheet CE v.4.3.0
Google Chrome バージョン: 131.0.6778.86（Official Build）（64 ビット）
Microsoft Edge 131.0.2903.86（64 ビット）
Firefox 128.5.1esr（64 ビット）
Mobile Safari 18.2.1

実装

モバイル版Excelのようにセルの左上、右下にハンドルを表示し、それによってセル範囲を自由に変更可能とする
セル範囲を選択後にコンテキストメニューを表示するためのボタンを表示し、それを押下することでコンテキストメニューが表示されるようにする
行ヘッダ、列ヘッダを選択した際にリサイズアイコンを表示し、それをスライドさせることで行高さ、列幅を変更できるようにする

動作イメージ

セル選択＆コンテキストメニュー表示



列幅変更


行高さ変更

終わりに

バグは随時修正していきます。

(2025/1/25)

列幅、行幅を変更できるように機能追加

(2025/1/30)

Jspreadsheet CEの日本語入力を改善すると一緒に使用できるようにコードを見直し