hogashi.*

日記から何から

Slackで検索結果のソート順を記憶する設定がある

 Slack では任意のキーワードでワークスペース内を検索ができ、その結果のソート順はデフォルトで Most relevant になっている。

Slack の検索画面

 しかし個人的にはもっとも最近のものから順番に見ることが多いので、 Newest になっていてほしい (検索するごとに変えるのは面倒)。

 これは設定を変えることで解決する。 Slack の設定画面の Advanced タブに、検索結果のソート順を記憶する設定がある ("Most relevant" を "Latest sort selection" に変える)。これで、最後に検索したときに使ったソート順が次回以降そのまま使われるので、 Newest のまま検索しまくることができる。

Slack の設定画面の Advanced タブに検索結果のソート順を記憶する設定がある

 ちょっと前までこういう仕様で、変わった途端に気づいて、困る〜と思って /feedback から元に戻せないか問い合わせたところ、設定できるよ! とすぐ教えてもらえた。問い合わせへの返答が早いのも、元の仕様に戻す余地も残しておいてくれるのもありがたい。

Bashでスラッシュ単位で削除できるようにするにはunix-filename-ruboutを使う

blog.3qe.us

 Bash で同じことをできないか見たけど、 $WORDCHARS はなかった*1。かわりに、 unix-filename-rubout という readline command があるので、それを好きな keyseq に設定すれば、スラッシュと空白を区切りとして削除ができるようになる*2

bind \\C-n:unix-filename-rubout

 unix-filename-rubout の説明を引用するとこう:

unix-word-rubout (C-w)
Kill the word behind point, using white space as a word boundary. The killed text is saved on the kill-ring.
unix-filename-rubout ()
Kill the word behind point, using white space and the slash character as the word boundaries. The killed text is saved on the kill-ring.
https://www.gnu.org/software/bash/manual/bash.html#Commands-For-Killing

 man bash を見ると色んなコマンドが準備されていることがわかる。 Killing And Yanking が文字の削除とコピペの章で、他にも色々ある。デフォルトでは bind されていないものが多いので、必要に応じて付け替えるとよさそう。 https://www.gnu.org/software/bash/manual/bash.html#Bindable-Readline-Commands

 ちゃんと知らなかったけど、 kill-ring というのが用意されていて、 unix-word-rubout したときなどにはそこに削除されたテキストが入る。最後に入ったものを貼り付けるには C-y の yank を使う。その後に M-y の yank-pop を使うと、 (ring という名前通り) 過去に kill-ring に入れたものを順繰りに貼り付け直すことができる。

3つ unix-filename-rubout してから yank して yank-pop してる様子

 ところで C-w をただ bind で上書きしようとしてもうまくいかない。これは stty というやつの設定があるためらしい。

stackoverflow.com

 見るとたしかに ^Wwerase にあたっている (word erase ということっぽい?)。これを undef に上書きすれば、あとは Bash 側で bind で上書きして動くようになる。

$ stty -a
speed 9600 baud; 32 rows; 150 columns;
lflags: icanon isig iexten echo echoe -echok echoke -echonl echoctl
        -echoprt -altwerase -noflsh -tostop -flusho pendin -nokerninfo
        -extproc
iflags: -istrip icrnl -inlcr -igncr ixon -ixoff ixany imaxbel iutf8
        -ignbrk brkint -inpck -ignpar -parmrk
oflags: opost onlcr -oxtabs -onocr -onlret
cflags: cread cs8 -parenb -parodd hupcl -clocal -cstopb -crtscts -dsrflow
        -dtrflow -mdmbuf
cchars: discard = ^O; dsusp = ^Y; eof = ^D; eol = <undef>;
        eol2 = <undef>; erase = ^?; intr = ^C; kill = ^U; lnext = ^V;
        min = 1; quit = ^\; reprint = ^R; start = ^Q; status = ^T;
        stop = ^S; susp = ^Z; time = 0; werase = ^W;
$ stty werase undef
$ stty -a
(略)
        stop = ^S; susp = ^Z; time = 0; werase = <undef>;
$ bind \\C-w:unix-filename-rubout

 stty は man stty によれば「set the options for a terminal device interface」 とのことで、(仮想)端末の入出力の設定ができる、というふんわりした理解だけしている (細かい設定が色々ありそうなんだけどあんまりわかってない)。 stty お前だったのか、いつも C-d で eof を送出してくれていたのは、という感じ。

*1:なので好きな文字を区切りに設定することはできなそう

*2:man bash の bind コマンドのところを参照 https://www.gnu.org/software/bash/manual/bash.html#index-bind

position: stickyで貼り付いたときだけ境界線を出す(JavaScriptを使わない)

貼り付く見出し

貼り付く見出し

 スクロールしてこの見出しが画面上部に貼り付いたときだけ、見出しの下に境界線を出したい。

 技として、境界線用の要素をいっこ用意して、それを見出しの裏に忍ばせておく方法がある。見出しが画面上部に貼り付いたときに、下に境界線が出てくる。

画面上部に貼り付いたときに境界線が下に出る

貼り付く見出し

貼り付く見出し

 どうなってるかというと、背景色を透明にするとこう。

  • 見出しの要素に margin-top: -1px; をつけることで、境界線の要素を覆い隠して見えなくしておく
  • sticky の top の値を、見出しの縦幅 + 1px 分にして、 1px 下に貼り付くようにする
  • 境界線が躍り出る空間を得るために、外側の包む要素の縦幅は、見出しの縦幅 + 1px 分にしておく

 むずいけど、これで、見出しが貼り付いたときに、境界線がちょうど背景色のすぐ下に躍り出る。

こういう感じで、背景色の裏で境界線が動いている
<div class="sticky-with-border">
  <h3 class="border" inert>貼り付く見出し</h3>
  <h3 class="title">貼り付く見出し</h3>
</div>

<style>
.sticky-with-border {
  position: sticky;
  top: 10px;
  margin: 33px 0;
  height: 51px;
}
.entry .entry-inner .sticky-with-border h3.border {
  position: sticky;
  top: 61px;
  margin: 0;
  padding: 0 10px;
  width: fit-content;
  height: 1px;
  background-color: black;
  color: transparent;
}
.entry .entry-inner .sticky-with-border h3.title {
  position: sticky;
  top: 0;
  margin: -1px 0 0;
  padding: 0 10px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  width: fit-content;
  height: 50px;
  background-color: #eee;
}
</style>

 境界線の要素を h3 にしてるのは、横幅を合わせるため (なので文字も同じものを入れつつ文字色を透明にしている)。 width: 100% とかにしたら、空の div とかでも良い。

 ちなみに、他の技として animation-timeline: scroll() とかはあって % 指定で border を出したりはできるけど、張り付いたらすぐに、というのは % の数字を調整しないといけなくてむずい。 scroll() - CSS: カスケーディングスタイルシート | MDN

 追記(2024/1/17): id:susisu から inert 属性をつけておくとよさそうと指摘をもらったのでつけてあります(感謝) HTMLElement: inert プロパティ - Web API | MDN。最初は落書きのつもりで雑に書いてたのであんまり気にしてなかったけど、そういえば属性つけるだけで重複回避できるのだった、と思い出せて助かった。

 追記(2024/1/17): 擬似クラスとかないんだろうか……とか思っていたけど、 :stuck という提案はあったっぽいけど設計規則とそぐわないので却下されてそうと id:mizdra に教えてもらった(感謝) [css-selectors] :stuck pseudo-class feature suggestion · Issue #1656 · w3c/csswg-drafts · GitHubCSS で変えられるものを擬似クラスにしてしまうと無限ループになりうるのはたしかにで面白い。あと position: sticky もうちょっとなんとかならないかという議論自体は続いていて、その中に今回の記事のような場合も議題としてあるとのことだった [css-position] Meta-issue: Unresolved `sticky` positioning use cases · Issue #11145 · w3c/csswg-drafts · GitHub