Webエンジンなしで本物のガラス効果を描画する検索カード

検索はエディタでよく使う機能です。ところが、きちんと動いているという理由で長い間手を加えていませんでした。

moteの検索ウィンドウもそうでした。常に2行で、文書内の単語を選択してから開いても、検索語の欄は空のままでした。

3つのアプリが同じ答えを出していました

直す前に、Typora、MarkText、Obsidianで同じ文書に検索と置換を表示してキャプチャしました。Notionは公開されているヘルプで確認しました。表にまとめると、共通点がはっきりしました。

検索は1行から始まりました。置換は必要なときだけ展開されました。選択した単語は検索語の欄にそのまま入りました。一致件数を入力欄の中に置くことも、矢印で一致箇所の間を移動することも、ほとんど同じでした。

moteもこの流れに従うことにしました。

基本画面は1行に減らしました。置換は左側のボタンかCtrl+Hで開けます。選択した文が1行で200文字以下なら、検索語として自動的に入力します。

一致する結果がないときは、数字の0ではなく「結果なし」と知らせます。入力欄には赤い枠線が表示されます。入力ミスなのか、本当に文書内にない言葉なのかをすぐ確認できるようにするためです。

1行減らしただけで、本文がより多く見えるようになりました。最初の検索結果がカードに隠れることも減りました。

置換よりも検索のほうをはるかによく使います。たまに使う機能を常に展開しておくと、頻繁に行う作業のたびにコストを支払うことになります。

すべてをほかのエディタと同じように変えたわけではありません。右上に浮かぶカードとオプションボタンはそのまま残しました。ほかの製品を調べたのは、まねをするためではありませんでした。慣れ親しんだ方式とmote独自の選択を区別するためでした。

カードの下の文字が実際にぼやけます

検索カードはガラスのように見えます。単なるエフェクトではありません。カードの下にある本文を実際にぼかして描画します。

当初は、Linuxではぼかし効果を完全に省くことに決めていました。GTKのレンダラーには、兄弟ウィジェットの背後にあるサーフェスをサンプリングする機能がありません。しかも、文書をスクロールするたびに背景が変わるため、フレームごとに再計算する必要がありました。きれいな画面よりも速い画面のほうが重要だと判断しました。

解決策は、カードをぼかす代わりに、エディタがぼかした画面を直接描画することでした。

エディタは文書を描画するとき、カードが覆う部分だけをもう一度描画します。2回目の描画では18 pxのぼかしをかけ、カードはその上に薄いティントだけを重ねます。

再描画するのはカードの下に実際に見えている行だけで、この処理はどのみち描画されるフレーム内で行われます。アイドル状態で予約されるフレームは変わらず0です。

ヘッダーも同じ方式です。文書をスクロールすると、タイトルがヘッダーの下に入りながら自然にぼやけます。鮮明な画面とぼかした画面を同じ瞬間に描画するため、互いにずれることがありません。

ガラスの境界には、影の代わりに1 pxの枠線を入れました。白い文書の上では、影だけでは縁を見分けにくかったためです。カードとウィンドウの右端の間には、影が見えるように24 pxの余白を設けました。

登場アニメーションは入れませんでした。Ctrl+Fを押した人には、すでに探したい言葉があります。短い演出であっても、このときは待ち時間になります。カードは押した瞬間に開き、最初の画面からガラスのように見えます。

見落としていた検索結果も再び見つけました

画面を減らしてみると、検索結果が正しく表示されていない場所が見えてきました。

表の中の結果には色が付きませんでした。閲覧モードでは強調表示の位置がずれていました。インラインコードと蛍光ペンの中では、既存の背景色が検索表示を覆っていました。

問題ごとに原因は異なりました。

表の中では、セルごとに位置を個別に計算する必要がありました。閲覧モードでは、非表示にした記号の位置に合わせ直す必要がありました。背景色のある文字では、検索表示を先に描画する必要がありました。

位置の計算方法と色を描画する順序を正し、3つの問題をすべて解決しました。

検索結果は黄色で表示します。現在見ている結果だけをオレンジ色で表示します。画面、PDF、HTMLでも同じ色を使います。

文字色は変えませんでした。蛍光ペンは文字の上に塗るものではなく、紙と文字の間に置かれる色だからです。

ガラスにはコストがかかります

検索カードを開いたままスクロールすると、画面ごとにぼかし効果を再計算します。カードの下だけを再描画しますが、コストがなくなるわけではありません。

そのため、ガラスを何層も重ねることはしません。ヘッダーとサイドバー、そして現在開いているカード1つだけに使います。

ガラスは装飾のための素材ではなく、パフォーマンスの範囲内で配分すべき予算です。

検索ウィンドウをより美しくすることと、より軽くすることは、相反するように見えました。しかし最後に残った問いは1つでした。

この画面は、いつ再描画すべきでしょうか。