「Tabulator 5.0.6 → 4.2.7 → 4.9.3」乗り換え(ダウングレード)、兼「声優世代表のおとも」(Tabulator 5.0.6 の initialHeaderFilter がどうやら壊れているようなので)

これの続きではあるけれど、これをなかったことにする世界線でもある。

download が壊れている話に先に追記しておいたが、繰り返しておく:

探せば色々ありそうなのだが、少なくとももう一つ問題を見つけた。issue tracker に挙げるかは迷ってるとこ。Initial Header Filter Values も動作しなくなってる。声優世代表のおとも ver 10(?)で「リダイレクトで飛ばされるページを初期状態では除外」としたくて:

 1 <!-- ... -->
 2 <script>
 3 /* ... */
 4 var table = new Tabulator("#actor_basinf", {
 5     "height": "800px",
 6     "columnDefaults": {
 7         "tooltip": true,
 8         "headerSortTristate": true,
 9     },
10     "headerFilterLiveFilterDelay": 800,
11 
12     "initialHeaderFilter": [
13         {
14             "field": "redi",
15             "value": "^$",
16         },
17     ],
18     /* ... */
19     "columns": [
20         /* ... */
21         {
22             "field": "redi",
23             "headerFilter": "input",
24             "headerFilterFunc": "regex",
25             "formatter": function (cell, formatterParams, onRendered) {
26                 let pn = cell.getValue();
27                 return "<a href='https://ja.wikipedia.org/wiki/" +
28                     pn + "' target=_blank>" + pn + "</a>";
29             },
30             "headerTooltip": "転送された場合、転送先。"
31         },
32         /* ... */
33     ], 
34     "layout": "fitColumns",
35     "data": actor_basinf_data
36 });
37 /* ... */
38 </script>
39 <!-- ... -->

とすると、これがエラーで動かない。で、試しに Tabulator のバージョンを 4.2.7 に変えてみたところ、これは今のワタシのコードが使っている「cell.getRow().getCell(filed).getValue()」が 4.2 では動作しないのでこれを書き換えるる必要はあったものの、initialHeaderFilter はドキュメントに書かれている通りに動いた。

ワタシが挙げなくてもすぐに誰かが気付きそうな気がするので、ちょっとしばらく待ってみようかと思う。それよりもオレ的ネタとしては「「cell.getRow().getCell(filed).getValue()」が 4.2 では動作しない」との格闘をいったんネタにしたいと思う。これは別のネタとして後日。

ひとまずワタシ的にはまぁ「声優世代表のおとも」が使えればいいので「5.0.6 ねばならぬ」てことはないので、「使えるものならなるべく新しいバージョンを」で十分。結果的に今のところ「4.9.3 でいいかな」てことなのだが、こういうバージョンの行き来は今後もある程度繰り返すだろうから、「なるべくバージョン違いで使えなくなる箇所は減らしておきたい」と。3.x から 4.x の変更が大きいからさ、その大きな変更以外のインパクトは小さくしときたいでしょうよ。

コメントに全部書いたのでそれを引用しちゃえばいいよね、こういうことだ:

 1 <html>
 2 <head jang="ja">
 3 <meta charset="UTF-8">
 4 
 5 <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/tabulator_site.min.css" rel="stylesheet">
 6 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js"></script>
 7 <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
 8 
 9 
10 <!-- Tabulator ではなく csv parser として jquery-csv を使いたくて、のための jquery -->
11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
12 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.js"></script>
13 
14 <script type="text/javascript" src="actor_basinf_data.js"></script>
15 
16 <!-- ... -->
17 
18 </head>
19 <body>
20 <!-- ... -->
21 <div id="actor_basinf"></div>
22 <!-- ... -->
23 <script>
24 /* ... */
25 var table = new Tabulator("#actor_basinf", {
26     "height": "800px",
27 
28     /* --------------*/
29     /*
30      * 5.0 で各種デフォルトが columnDefaults の中に入ったが、5.0.6 時点では
31      * 「かつて columnDefaults の外にいたもの」がそのままになっていても
32      * deprecated 警告が出るだけでそのまま動く。4.x で columnDefaults を
33      * 書いてもこれも無視されるだけなので、ひとまず当面「両方書いておきゃいい」。
34      */
35     "tooltips": true,
36     "headerSortTristate": true,
37     "columnDefaults": {
38         /* 注意: 「tooltips」ではない。「tooltip」である。 */
39         "tooltip": true,
40 
41         /* これはいつから使えたのかな? かつては「columnDefaults」の外にいたやつ。 */
42         "headerSortTristate": true,
43     },
44     /* --------------*/
45 
46     "columns": [
47         /* ... */
48         {
49             "field": "wp",
50             "title": "wikipedia",
51             "formatter": function (cell, formatterParams, onRendered) {
52                 let pn = cell.getValue();
53                 if (!pn) {
54                     /* ---------------------------------------
55 Tabulator 5.0.6 の initialHeaderFilter がどうやら壊れているようで
56 動かないので Tabulator を 4.2.7 に乗り換えると、その場合は今度は
57     cell.getRow().getCell("dymd").getValue()
58 が動かない。(cell.getRow().getCell("dymd") が「false」を返している
59 らしい。なんで?) Tabulator を 4.9.3 にすれば initialHeaderFilter
60 も正しく動作しつつ cell.getRow().getCell("dymd").getValue() も
61 動くが、「4.2.7 でも 4.9.3 でも動き、5.0.6 でも initialHeaderFilter
62 を使わないなら問題ない」となる書き方を探ってみたが、以下が正解らしい:
63     cell.getRow().getData()["dymd"]
64 OO 的には getCell を介する方が良いのだとは思うけれど、動くバージョンの
65 広さは getData() で直接アクセスする版の方が広いと思う(4.0.5 でも使え
66 る)ので、たぶん当面こちらの書き方を優先したほうがよさそうだ。
67 ------------------- */
68                     let n0 = cell.getRow().getData()["nm"];
69                     n0 = n0.replace(new RegExp(", .*$"), "");
70                     pn = n0.replace(new RegExp("\\s+", "g"), "");
71                 }
72                 return "<a href='https://ja.wikipedia.org/wiki/" +
73                     pn + "' target=_blank>" + pn + "</a>";
74             },
75         },
76         {
77             "field": "redi",
78             "headerFilter": "input",
79             "headerFilterFunc": "regex",
80             "formatter": function (cell, formatterParams, onRendered) {
81                 let pn = cell.getValue();
82                 return "<a href='https://ja.wikipedia.org/wiki/" +
83                     pn + "' target=_blank>" + pn + "</a>";
84             },
85             "headerTooltip": "転送された場合、転送先。"
86         },
87         /* ... */
88     ], 
89     "initialHeaderFilter": [
90         {
91             "field": "redi",
92             "value": "^$",
93         },
94     ],
95     "layout": "fitColumns",
96     "data": actor_basinf_data
97 });
98 </script>
99 </html>

これで万事問題ないというわけでもなくて、非常に些細な問題が一つ。ヘッダフィルタの input フィールドのプロンプト文字列が、とても不適切な「filter colour」になる。この問題についてはすぐに解決出来る:

 1 /* ... */
 2 var table = new Tabulator("#actor_basinf", {
 3     "height": "800px",
 4 
 5     /* --------------*/
 6     /*
 7      * 5.0 で各種デフォルトが columnDefaults の中に入ったが、5.0.6 時点では
 8      * 「かつて columnDefaults の外にいたもの」がそのままになっていても
 9      * deprecated 警告が出るだけでそのまま動く。4.x で columnDefaults を
10      * 書いてもこれも無視されるだけなので、ひとまず当面「両方書いておきゃいい」。
11      */
12     "tooltips": true,
13     "headerSortTristate": true,
14     "headerFilterPlaceholder": "",  /* 4.x ではなぜかデフォルトが「filter colour」… */
15     "columnDefaults": {
16         /* 注意: 「tooltips」ではない。「tooltip」である。 */
17         "tooltip": true,
18 
19         /* これはいつから使えたのかな? かつては「columnDefaults」の外にいたやつ。 */
20         "headerSortTristate": true,
21 
22         /*
23          * 5.0 ではもとから "headerFilterPlaceholder": "" なのでほんとにブランクが
24          * 目的なら書かなくてもよい。
25          */
26         "headerFilterPlaceholder": "",
27     },
28     /* --------------*/
29 
30     "columns": [
31         {
32 /* ... */

二重化は気持ち悪いが、一時的にはやむを得ないか。

てなわけで「wikipedia をスクレイプして「声優世代表のおとも html」、な、きっと ver 11」:


2021-11-05追記:
5日前、つまりワタシがこのページを書いたその日にはもうリリースされていた 5.0.7 で initialHeaderFilter の問題は修正されてるみたい。

ので上で書いた情報は徒労だったことにはなる。ただ、こうしたバージョンの行き来は何度か繰り返すだろうと思うので、無駄だったとは思ってないよ、たぶん。



Related Posts