プリザンターのスクロール固定を使いやすくする方法

はじめに

プリザンターのVer.1.4.20.0で実装された一覧の右端での項目のスクロール固定機能。横スクロールが発生しやすい一覧項目で常に表示させておきたい項目がある場合には便利な機能です。
ただこの機能、Excelのウインド枠固定のように、指定位置から左にある列を全て固定するのではなく、項目単位での固定となるため、固定されている項目がわかりにくいという難点もあります。今回はこれを改善してみます。

実装をみてみる

このようなレイアウトを作成して「タイトル/内容」を固定してみます。HTMLコードをのぞいてみます。

固定されている項目に属性が追加されています。data-cell-sticky="1"ですね。
属性が分かったので、これを特定するCSSセレクタを書いてみます。

th[data-cell-sticky="1"] { }

これで対象の項目だけの抜き出しが可能です。

実装方法を考える

今回は単純に固定される項目が分かれば良いので、項目名の先頭に適当なアイコンを追加してみます。
プリザンターではGoogle Symbol & Iconsが使用可能なので、その中から選択します。
今回はkeepを使ってみます。

実装してみる

サーバスクリプトを作成してみました。実行条件は「画面表示の前」です。

if (['index', 'gridrows', 'newongrid', 'copyrow'].includes(context.Action))
{
    context.AddResponse(
        'Prepend', 
        `th[data-cell-sticky="1"] div:not(:has(.view-pin-icon))`,
        '<span class="view-pin-icon material-symbols-outlined" style="font-size: 1.5em;">keep</span>'
    );
}

こんな感じの表示になります。

動画で見てみるとこんな表示になります。

いい感じですね。
後はこれを拡張サーバスクリプトに入れてしまえば全てのサイトで動作します。

拡張サーバスクリプトにしてみる

全てのページで実行させるには拡張サーバスクリプトにするのが便利です。拡張サーバスクリプトにするなら下記の2ファイルを所定の場所に配置してください。

GridRowsHeaderViewPinIconShow.json

{
    "Actions": ["index", "gridrows", "newongrid", "copyrow"],
    "BeforeOpeningPage": true,
    "Body": "-- Write an arbitrary javascript."
}

GridRowsHeaderViewPinIconShow.json.js

context.AddResponse(
    'Prepend', 
    `th[data-cell-sticky="1"] div:not(:has(.view-pin-icon))`,
    '<span class="view-pin-icon material-symbols-outlined" style="font-size: 1.5em;">keep</span>'
);

まとめ

今回は新機能の固定機能をさらに使いやすく方法を紹介しました。是非試して見てください。