概要
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の日本語入力を改善すると一緒に使用できるようにコードを見直し