ほんとは jquery: Tabulator 出来てみたに混ぜてしまいたいんだけど、「data uri の形で iframe 内に突っ込む」なんてことをやってるもんで、Wordpress での編集が耐えられないほどに重いのよね、なので独立したネタとして。

Contents

1 jquery: Tabulator 出来てみた2
- 1.1 youtube のプレイリストのようなシロモノ
  - 1.1.1 これでやったこと ⇒ initialSort, rowClick, groupBy
- 1.2 2022-04-26: 続：youtube のプレイリストのようなシロモノ
  - 1.2.1 2022-04-28: 「の、ジェネレータ」
  - 1.2.2 2022-04-29追記: 「再生速度/画質を引き継げない」問題と「プレイヤーのフルスペックを使い倒す」問題の根本が同じ話

jquery: Tabulator 出来てみた²

youtube のプレイリストのようなシロモノ

プレイリストが欲しいだけなら youtube そのものの機能を使えばよろしい。あくまでも例である。これ:

例によって「フレームのソースを表示」しとくれ。

これでやったこと ⇒ initialSort, rowClick, groupBy

jquery: Tabulator 出来てみたでやったこと以上のことは:

Sort Data on Load – データロード時に並べ替え
Selection With Row Components
– 行クリック時に反応するつぅことだ
Grouping Data
– 今回の例の場合は、タイトルでまとめあげたいてことだ。

あと細かいところでは、セルのテキストに改行コードを含む場合の振る舞いも見ておきたかった。

ちなみに今回のは隅々まで html をテキストエディタで手書きした。何の助けも借りてない。

2022-04-26: 続：youtube のプレイリストのようなシロモノ

プレイリストが欲しいだけなら youtube そのものの機能を使えばよろしい。あくまでも例である。

2017年に Tabulator を使い始め、「時々使い続けている」。とても良いものだ、と思っているけれど、流行ってるのかしらん、それはよくわからんね。2017年時点と較べると、一番進化したのはドキュメントかな。もとから読みやすい大作だったけれど、階層化が綺麗になって参照しやすくなったと思う。そして「youtube のプレイリストのようなシロモノ」というネタそのものも、ワタシの場合は「いろんな邪魔をされたくない」というマインドでもって、集中して視聴したいコンテンツを見つけると結構頻繁にやるのね、だので「Tabulator ネタ」としても新しいものに追従しちゃろうというモチベーションも高くなるの。

というわけで、「まずは、3.3.2 からほとんど完全にストレートに移行可能な 3.5.3」で本日のワタシの用事:

2017年でのネタと変えているのは「rowSelected」と「selectRow」、それと「selectable=1」を使ったこと。

ここから4系列への移行は手間がかかる、というネタはここらあたりからの一連で書いた。4.0.5 に乗り換えたのがこれ:

フォーマッタ・エディタの戻り値の変更についてもちゃんと Upgrade Guide に書かれてるよ。この対応を済ませると、このケースでは一気に 4.9.3 にアップグレード出来る:

本日時点だと最新は 5.2 系列。5.0 にするのにまたひと手間:

columnDefaults の件がコンソールに警告が出るのですぐにわかる変更点なのだが、イベントまわりの変更が地味に厄介で、「setData と selectRow が動かない」ように見えてしまうのが罠。セットアップ手順の整備の影響なんだよね、「tableBuilt」イベント(など)で処理しないといけない、みたいなことだった。5.0 へのアップグレードガイドだけに頼ろうとすると伝わりにくいんだよねこれ。

5.2 系列へは、ワタシのケースだとこれですぐさま:

2022-04-27追記:
すまん、「fitColumns」も変更になってたの忘れてた。「fitData」(等)になった。とともに、これと formatter_thumbimg の組み合わせがダメだった。formatter_thumbimg はワタシが Tabulator を使い始めた 2017 年には必要なものだったんだけれど、今は組み込み済みのフォーマッタで済む。ので、組み込みフォーマットに乗り換えつつ「fitData」に直した 5.2.2 版:

ついでなので、「paginationButtonCount」も使ってみる:

「paginationButtonCount」はいつから使えたのかな? 4系列にはなかったような気がする。

2022-04-28: 「の、ジェネレータ」

こういうの、ほんとは node.js で作るほうが発展性がありそうな気がするけどサボりたくて python で。
「/embed は配信側が拒めば禁止出来、そのモチベーションは広告収入である可能性が高い」という関係に注意。

/embed そのものは Youtube が公式に認めていることなので、配信者が禁止してない限りは規約違反ではない、てことなんだけれど、禁止されてない場合も、「応援したいコンテンツ」相手にはほんとは youtube.com に出向いて視聴してあげるのがいいのかもしれんなぁ、とはちょっと思う。Like だのコメントだの、chat だのは youtube.com に行かないと出来ないことだから、ね。でもワタシにはそれがノイズだったりするんよね。(ただし、一番ノイズなのは youtube による「おすすめ」ね。気が散る。)

2022-04-29追記: 「再生速度/画質を引き継げない」問題と「プレイヤーのフルスペックを使い倒す」問題の根本が同じ話

もう Tabulator ネタそのものではないのだけれども。上で貼り付けた実例の全ては「再生速度/画質を引き継げない」問題を抱えてた。リストでアイテムを選択しなおすと、プレイヤーのコントロールで設定した Playback speed と Quality が綺麗さっぱり忘れ去られちゃうのよね、倍速再生固定で視聴したいときに不快、リスト選択を変えるたびにやらねばならん。再生速度は引き継げてる例:

gist に貼り付けたジェネレータはもうこのタイプの形で吐き出すように書き換えてある。Rev15の変更ね。

google のドキュメントでいうところの「代わりに、<iframe> タグを自分で作成できます」の形で構築していたのがもとのやり方。iframe の src を丸ごと差し替えることで「ドキュメントのロード」からのセットアップが「ゼロから」行われてしまうので、cookie のような永続化がなされてないものなら全部「まっさらになる」のはこれは当然。ので「画質・再生速度」が都度クリアされるのは必然。とともに、プレイヤーそのものへのインスタンスへの参照が取れず(後述)、なのでたとえばイベントのコールバックを書きたくても出来ない、という発展性の問題も抱える。

「プレイヤーそのものへのインスタンスへの参照が取れない」は厳密には嘘。iframe の中身をほじくれるなら player のインスタンスに辿り着ける。iframe.contentWindow.document でね。けれどもこれは例の「クロスドメイン問題(CORS)」であえなく果てる。ので結局 player に辿り着けない。のでここに書かれてるめんどっちい方で API を使うやり方にせねばならぬ、てハナシね。今貼り付けたやつはそれをやってあるので、リストアイテムの変更をしても「画質・再生速度」が引き継がれる。(というか「player.loadVideoById」を使うと相変わらずクリアされてしまうが、「player.cueVideoById」を使うなら維持される。)

なおこの措置をしたとて、画質については「自動」が取れない。たとえば「自動144」になったのを「480」に変えた上で別のビデオを選択すると、「自動480」で開始する。これは通信状況がよくない時間帯だと結構不愉快ではあるんだけれど、そこまではやってない。たぶんこれをするのは結構厄介。