# 📰Impression
仕事に時間を使った1週間だったのでインプット/アウトプットの量は少ないものの、それぞれのクオリティは満足できるレベルだったと思う。
## [[🦉Another Quick Switcher]] プレビュー機能 圧倒的改善
[[🦉Another Quick Switcher]]のv8.5.0をリリースした。
<div class="link-card">
<div class="link-card-header">
<img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/>
<span class="link-card-site-name">GitHub</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">Release 8.5.0 · tadashi-aikawa/obsidian-another-quick-switcher</p>
</div>
<div class="link-card-description">
🎇 Shiny New ThingsSignificantly improvements in the preview featureThis release includes the foll...
</div>
</div>
<img src="https://opengraph.githubassets.com/5f02d787d05e83c40c8217f8645351b52b06b34da4ac9f86d2246833257b8e0a/tadashi-aikawa/obsidian-another-quick-switcher/releases/tag/8.5.0" class="link-card-image" />
</div>
<a href="https://github.com/tadashi-aikawa/obsidian-another-quick-switcher/releases/tag/8.5.0"></a>
</div>
マイナーバージョンアップではあるが、メジャーバージョンアップに近い熱量で開発を行い、プレビュー機能に関する圧倒的改善を実現した。
### プレビュー時のダイアログ表示位置最適化
プレビュー機能とは、[[Windows]]のデフォルトだと、`Ctrl+,`ボタンを押すことで、選択中のファイルをダイアログを開いたままアクティブリーフに表示する機能だ。
だが、ダイアログを表示したままにしていると、せっかくプレビュー表示しても内容が隠れてしまうという問題があった。それを解決したのが以下の対応だ。
> Show the floating view where that doesn't distract the contents
> (コンテンツを邪魔しない場所にフローティングViewを表示する)
### ナビゲーション履歴にプレビューしたファイルを残さない
もう1つの課題は、プレビュー表示したあとにダイアログを閉じると、プレビュー表示したファイルもナビゲーション履歴に残ってしまうということだ。
たとえば、ファイルAを開いた状態で[[🦉Another Quick Switcher]]を起動し、ファイルBとファイルCをプレビュー表示して、最終的に何も選択せずダイアログを閉じるケースを考える。このとき、ファイルBとファイルCは履歴に残さず、ファイルAを表示してほしいというのが期待結果となる。少なくとも **プレビュー機能** として使っているならば。
この問題を解決したのが以下の対応だ。
> Make the editor state clean after previewing files and closing the dialog
> (プレビュー後にダイアログを閉じた後、エディタの状態をクリーンする)
### デモ
上記2つの改善対応したv8.5.0の挙動は以下動画の通りだ。ユーザーの操作を妨げないかなり直感的な動作になったと思う。
<video autoplay muted controls src="https://user-images.githubusercontent.com/9500018/216806330-daf57b52-d8a4-42e3-9803-ba7d76a93319.mp4"></video>
### 苦労したこと
今回の対応は見た目以上に苦労した。[[#プレビュー時のダイアログ表示位置最適化]]は様々なウィンドウサイズや[[Obsidian]]の状態に対応できるよう、[[DOM]]を直接解析して座標を計算している。以下のコードはそのコアロジックを切り取ったものだ。
```ts
const windowWidth = activeWindow.innerWidth;
const windowHeight = activeWindow.innerHeight;
const modalEl = activeWindow.activeDocument.querySelector(
".another-quick-switcher__floating-prompt"
);
if (!modalEl) {
console.error("Unexpected error.");
return;
}
const selector =
fileView.getState().mode === "preview"
? ".markdown-preview-sizer"
: ".cm-sizer";
const editorContentEl = fileView.contentEl.querySelector(selector);
if (!editorContentEl) {
console.error("Unexpected error.");
return;
}
const { width: modalWidth, height: modalHeight } =
modalEl.getBoundingClientRect();
const { x: contentX, width: contentWidth } =
editorContentEl.getBoundingClientRect();
const { y: leafY } = fileView.containerEl.getBoundingClientRect();
const { y: promptY } = promptEl!.getBoundingClientRect();
const contentXEnd = contentX + contentWidth;
const left =
windowWidth - contentXEnd - 30 > modalWidth
? contentXEnd - 30
: contentX - modalWidth - 30 > 0
? contentX - modalWidth
: windowWidth - modalWidth - 30;
const top = Math.min(windowHeight - modalHeight - 10, leafY + promptY);
promptEl?.setAttribute("style", `left: ${left}px; top: ${top}px`);
```
また、[[#ナビゲーション履歴にプレビューしたファイルを残さない]]対応は、[[Obsidian API]]が用意されていなかったため、非公開のインターフェースを使用し、強引に履歴データを置き換えるような処理をしている。私が開発する[[Obsidianプラグイン]]で非公開インターフェースを使うことは珍しくないが、今回の対応ほどhackyな使い方はしたことがない。今まではせいぜい、非公開のメソッドを呼び出して便利に使わせてもらう程度に過ぎなかったが、今回はそうではない。
以下は殴り書きのメモだ。今となっては正しい情報ではないが、どんな感じで開発したかが生々しく感じ取れる内容になっていると思う。
<div class="link-card">
<div class="link-card-header">
<img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" class="link-card-site-icon"/>
<span class="link-card-site-name">minerva.mamansoft.net</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">📜Another Quick Switcherでプレビューの履歴を保持しないようにする</p>
</div>
<div class="link-card-description">
</div>
</div>
<img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/minerva-image.webp" class="link-card-image" />
</div>
<a
class="internal-link"
data-href="📜Another Quick Switcherでプレビューの履歴を保持しないようにする"
></a>
</div>
## [[🦉Silhouette]]のカレンダーをコンパクトに
[[🦉Silhouette]]のカレンダーが大きすぎて、FullHD以下のモニタやモバイルで非常に見にくかったためコンパクトにした。
上記はPCの画面だが、スマホでもご覧の通り。快適に操作/表示できるようになった。
今週はタイマー測定機能を実装してリリースする予定だ。
# 🎇Shiny Outputs
## 🦉My products
- [[🦉Another Quick Switcher]]
- [Another Quick Switcher v8.5.0リリース](https://github.com/tadashi-aikawa/obsidian-another-quick-switcher/releases/tag/8.5.0)
- [[🦉Silhouette]]
- [Silhouette v0.8.2リリース](https://github.com/tadashi-aikawa/silhouette/releases/tag/0.8.2)
## 📖Publish
- [[📜2023-02-05 Silhouetteに時間計測機能をつける]]
- [[📜Zodの記事を書くためにまとめたメモ]]
- [[📝Element Plusでslotが反映されない]]
- [[📰2023年4週 Weekly Report]]
- [[📰faviconの取得ロジック]]
# 👀Medias
## Pythonで文字列の類似度を120倍高速に計算するRapidFuzzを勧めたい
[[levenshtein]]ライブラリにお世話になることが多いので、それよりも120倍高速と言われる[[RapidFuzz]]は気になった。
<div class="link-card">
<div class="link-card-header">
<img src="https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">Qiita</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">Pythonで文字列の類似度を120倍高速に計算するRapidFuzzを勧めたい - Qiita</p>
</div>
<div class="link-card-description">
はじめにみずほリサーチ&テクノロジーズ株式会社の@fujineです。本記事では、文字列同士の類似度を計算する「レーベンシュタイン距離」をRapidFuzzで超高速に処理する方法を解説いた...
</div>
</div>
<img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9UHl0aG9uJUUzJTgxJUE3JUU2JTk2JTg3JUU1JUFEJTk3JUU1JTg4JTk3JUUzJTgxJUFFJUU5JUExJTlFJUU0JUJDJUJDJUU1JUJBJUE2JUUzJTgyJTkyMTIwJUU1JTgwJThEJUU5JUFCJTk4JUU5JTgwJTlGJUUzJTgxJUFCJUU4JUE4JTg4JUU3JUFFJTk3JUUzJTgxJTk5JUUzJTgyJThCUmFwaWRGdXp6JUUzJTgyJTkyJUU1JThCJUE3JUUzJTgyJTgxJUUzJTgxJTlGJUUzJTgxJTg0JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05NzJiYmEzNTgyOWY2YjQ0ZDQzYmUzOGRjMjQ0ODc3Nw&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZnVqaW5lJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jYjY1ZGI2OWQ1ODMxM2ZiYjNkZDRjNjg5M2YwMmRiMg&blend-x=142&blend-y=491&blend-mode=normal&s=6f120434ed08431a2a2597d54be643a5" class="link-card-image" />
</div>
<a href="https://qiita.com/fujine/items/b7189c4a55da33f821e3"></a>
</div>
最近は[[Python]]を使う機会が減ったが、次に使う必要が出てきたら試したみたい。そんな時は案外すぐ来るかもしれない。。。
## Make.md: The Most Useful Plugin for Obsidian Beginners
2022年度の[[Obsidianプラグイン]]投票で2番目に票を集めている [[makemd|Make.md]] について説明された記事。
<div class="link-card">
<div class="link-card-header">
<img src="https://miro.medium.com/1*m-R_BkNf1Qjr1YbyOIJY2w.png" class="link-card-site-icon"/>
<span class="link-card-site-name">Medium</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">Make.md: The Most Useful Plugin for Obsidian Beginners</p>
</div>
<div class="link-card-description">
Make.md is a new plugin released in the community plugin and its already making waves. The download ...
</div>
</div>
<img src="https://miro.medium.com/max/1200/1*rcsf8Mg0wMXo8yOELBghHQ.jpeg" class="link-card-image" />
</div>
<a href="https://beingpax.medium.com/make-md-the-most-beginner-friendly-plugin-for-obsidian-6e521769d6e0"></a>
</div>
[[Vim]]寄りの思想である自分にはfitしなかったが、そうでない[[Obsidian]]ユーザーでこのプラグインに救われそうな人は多そうだと感じた。
## [[Imba]]
Webに特化したフルスタックプログラミング言語。
<div class="link-card">
<div class="link-card-header">
<img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/>
<span class="link-card-site-name">GitHub</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">GitHub - imba/imba: 🐤 The friendly full-stack language</p>
</div>
<div class="link-card-description">
🐤 The friendly full-stack language. Contribute to imba/imba development by creating an account on G...
</div>
</div>
<img src="https://opengraph.githubassets.com/65ef0d3b877198444398720f1e69c6713e22cdf3ffc36f67c5559cd667ec1b3e/imba/imba" class="link-card-image" />
</div>
<a href="https://github.com/imba/imba"></a>
</div>
クライアントもサーバーも、[[HTML]]も[[CSS]]も[[JavaScript]]も、すべてを悪魔合体してしまった感が凄い。コード量を減らすことに関してのこだわりも感じ、慣れるとプロトタイプを高速で作成するのに使えそうな気もする。
[[React]]が誕生したときも、キモイ扱いされていたのを考えると、5年後や10年後に[[Imba]]の時代が来る可能性も、少なからずあるのかもしれない...?
# 📚Inputs
- [[Vue3でトランジション・アニメーション]]
- [[🦉SlimBlade Pro Trackballの設定]]
- [[🦉SlimBlade Trackballの設定]]
- [[CSSのaタグで文字色や下線を無効]]
- [[📕JSONからTypeScriptの型定義を生成]]
- [[Microsoft Edge]]
- [[noUncheckedIndexed]]
- [[日付の文字列からデイリーノート(Daily Note)のファイルを取得 (Obsidian)]]
- [[TypeScriptの型定義をZodのスキーマに変換]]
- [[Vue3でリストのトランジション・アニメーション]]
- [[アンビエントモジュール]]
- [[デコレーター (JavaScript)]]
- [[メソッドチェーン]]
- [[モダンブラウザ]]