Tabulator で Persistent Configuration が壊れてる、兼「声優世代表のおとも」

壊れてる系の話を結構してるんで心象悪くしちゃう人もいそうね。

少なくともワタシは Tabulator は「とても良いもの」と認識している。ただ、すぐわかる不都合が紛れ込む率が結構高めなのは確かで、なんというか「この OSS に参加する」くらいの気がなく他力本願で利用したいだけの向きにはちょっとキツいのかもしらんなぁ。

もう「兼「声優世代表のおとも」」ネタからは Tabulator についてのネタは捻出できない」と言ったけれど、「ヘッダソートや列の表示非表示を毎回指示するのは馬鹿げている、覚えとけやヲラ」ちぅ当然のニーズのために「Persistent Configuration」してみたら…、てのが今回の話。

本題部分は大した情報量ではなくて、以下抜粋(コメント)で伝わる、よね?:

 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 
 8 <!-- ... -->
 9 </head>
10 <body>
11 <!-- ... -->
12 <div id="actor_basinf"></div>
13 <!-- ... -->
14 <script>
15 /* ... */
16 var table = new Tabulator("#actor_basinf", {
17     /* ... */
18 
19     /*
20      * persistence のコントロールは 4.2 でも 4.9 でも 5.0 でもほぼ同じノリで
21      * 出来る。独自 function は 4.2 では使えないようだが、それ以外はバージョンに
22      * よる差異はあまりなさそう。ただ、正しく動作するかについてはバージョンによって
23      * 違うみたい。少なくとも 4.9 での columns: true はおかしい。(下のほうの
24      * コメント参照。)
25      *
26      * Tabulator に罪があるのか微妙だがオカシイことになるパターンもある。
27      * オブジェクトの一つのフィールドからテーブルの複数列を表示することは、
28      * columns 内で field での参照が同じものを指すことで「出来る」。たとえば
29      * 生年月日(bymd)フィールドについて、値そのものを表示する列とともに、
30      * カスタムフォーマッタで年齢を表示する列を表示する、など。カスタムフォー
31      * マッタを使う場合でも「field」指示を省略することは出来ないので、これを
32      * する場合必ず bymd を指す列が2つ書かれることになる。このケースで、
33      * persistence は案の定解釈を間違う。まぁこれはそりゃそうか、という気はする。
34      * (仕方がないのでワタシは表示列を、フォーマッタを書き換えることで一つに統合
35      * した。)
36      *
37      * ワタシがこの設定永続化で一番欲しいのは Header Filter の永続化なのだが、
38      * 5.0 でも:
39      *     Note: Header filters are not currently stored persistently,
40      *     this feature will be coming in a future release.
41      * と。残念。
42      *
43      * この永続化が「どこに」記憶するものかというのは二択で選べる。cookie もしくは
44      * HTML5 Web LocalStrage。http://tabulator.info/docs/5.0/persist#mode
45      * 参照。(Chrome であれば F12 して DevTools を開き、「Application」タブで
46      * 内容の確認・編集を行える。)LocalStrage もしくは cookie なのでこれは
47      * いわゆる per origin 単位、ゆえに、http://www.my.host/ というサイトに
48      * 構築する際は LocalStrage (or cookie) は http://www.my.host/ 内で一枚岩。
49      * key-value ストアなので、このドメイン内で key の衝突には注意しなければ
50      * ならない。そしてその key は、Tabulator では、デフォルトでコンテナの id
51      * (今のワタシのこのケースの場合は "actor_basinf") が使われる。変更したい場合
52      * の件は http://tabulator.info/docs/5.0/persist#id 参照。
53      *
54      */
55     "persistence": {
56         "sort": true,
57         /*"filter": true,*/ /* ワタシのでは意味ない、現 Tabulator では。*/
58         /*"group": true,*/ /* Row Grouping に関するもの。使ってない。*/
59         /*"page": true,*/ /* Paging に関するもの。*/
60 
61         /*
62          * columns: true とするかもしくは columns: [...] 内に "width" を加えた
63          * 場合の振る舞いが壊れてる。(Column Group を使っている場合。おそらく
64          * 対応付けを列配列インデクスで取ろうとして間違ってるんだと思う。)
65          */
66         "columns": ["visible"],
67     },
68 
69     "columns": [
70         /* ... */
71     ],
72     /* ... */
73 });


5.0.7 までの 5.0 はまだ安定しないので 4.9.3 を使っていて、その状態で確認できたのは「columns の width が壊れてる」ことと、「”filter”: true でも Header Filter には関知してくれない、まだ」の二点。sort の永続化は効くので、まぁこれは有効にしとくとハッピーよね。group と page がワタシの今作ってる「声優世代表のおとも」が使ってないので確認してない。

HTML5 Web LocalStrage については以前書いたことがあるので、なんのことかわからない人はそちらをどーぞ

というわけで「声優世代表のおとも」ver 18:

一つ前でも言ったけれど Python スクリプトはかなり雑で汚いので、どうしても読みたい場合は覚悟して読むべし。動かしたい場合もね。とても時間がかかる。スクレイパだからね。

なお、persistence の追加以外の変更も少ししてる。「兼「声優世代表のおとも」(5)」をもう少し改善して、展開の結果「未使用変数」となった場合に変数表のほうをブランクに置き換える、なんてことをしてる(もちろんテキストサイズ削減には少し効く)。あと「声優世代表のおとも」としての機能追加としては、MAL リンクと同じノリの aniDB リンクを追加したりとチマチマ改善。



Related Posts