handsontableのテーブルをスマホで編集するときにしたほうが良いこと

投稿者: | 2020年9月14日

handsontableの作った表は、最近のスマホであれば十分編集することができます。しかし、とある設定をしていないばかりに、なかなか操作性が悪かったのでその点を解消させました。

とはいえ、たいしたことではありません。結論から言うと、

  • 「viewport」のmetaタグを書くこと
  • handsontableの横幅はデバイスの横幅に収まる程度にすること。

この2点です。

まずは下記のテーブルをスマホで編集してみてください。結構うっとうしいことになると思います。編集するためにダブルクリックなどをすると、拡大、縮小がせわしなく行われます。

https://itdkt.info/wp-content/uploads/2020/09/test1.html

エミュレータで見るとこんな感じのイメージです。

対して下記はmetaタグ内でviewportを書き、jqueryでwindowのwidthを取り、あらかじめ想定していた幅よりも小さいサイズだった時にはその幅に収めるようにしてあります。

https://itdkt.info/wp-content/uploads/2020/09/test2.html

私が試してみた限りだと、スマホの幅を超えてしまいhandsontableの全体をスクロールしなくてはならない状況よりも、handsontableの枠の中でスクロールがある分ほうが良い感じです。挙動がだいぶ安定しました。

(参考)違和感のあるバージョンのソース
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@6.2.2/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@6.2.2/dist/handsontable.full.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="">
  var data = [
    {id:'1',name:'名前1',age:'14',email:'example001@example.com',address:'東京都XX区YY ZZ丁目1-1'},
    {id:'2',name:'名前2',age:'18',email:'example002@example.com',address:'東京都XX区YY ZZ丁目2-2'}
  ];
  var grid = document.getElementById('test');
  var hot  = new Handsontable(grid, {
    data: data,
    colHeaders:['id', '名前', '年齢', 'email', '住所'],
    colWidths:[40,200,100, 250, 300],
    height: 255,
    width: 600,
    rowHeaders: true,
    wordWrap: false
  });
</script>
</body>
</html>
(参考)動作改善したソースコード
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@6.2.2/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@6.2.2/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script></head>
<body>
<div id="test"></div>
<script type="">
  var data = [
    {id:'1',name:'名前1',age:'14',email:'example001@example.com',address:'東京都XX区YY ZZ丁目1-1'},
    {id:'2',name:'名前2',age:'18',email:'example002@example.com',address:'東京都XX区YY ZZ丁目2-2'}
  ];
  var grid = document.getElementById('test');
  var hot  = new Handsontable(grid, {
    data: data,
    colHeaders:['id', '名前', '年齢', 'email', '住所'],
    colWidths:[40,200,100, 250, 300],
    height: 255,
    width: getWidth(600),
    rowHeaders: true,
    wordWrap: false
  });
  function getWidth( widthSize ){
    var winWidth = $(window).width();
    if( winWidth < widthSize ){
      return winWidth - 40;
    }else{
      return widthSize;
    }
  }
</script>
</body>
</html>