マークダウンのプレビューを表示するアプリケーション。AI コーディングをする際にマークダウン出力することが多くなったので、扱いやすいアプリケーションを探していた。昔使っていたのを思い出して Shiba を使ってみたら必要十分だったので使うことにした。
ただ、キーバインディングとか気になるところがあったので良い機会と思って AI コーディングで追加してみた。
aeec48d で分岐してそれなりに変更しているし、直近でも本家がアクティブに活動しているので PR を出して本家に取り込んでもうとかはしない。
追加した機能を説明用に書く。
スクロール量の設定
キーボード操作のスクロール量を設定ファイルで変えられるようにした。
scroll.step は j / k などの通常スクロール量、scroll.pageStep は ctrl+d / ctrl+u や PageUp / PageDown などのページスクロール量として使っている。
scroll: step: 50 pageStep: 400
画面サイズに依存せず、好みの移動量で安定してスクロールできるようにしている。
Markdown ファイルの「このアプリで開く」対応
OS の「このアプリで開く」から Markdown ファイルを渡したときに、そのまま Shiba で開けるようにした。
アプリ起動中にファイルを開いた場合だけでなく、アプリ初期化前に渡されたファイルも保持して、画面の準備ができたあとに表示する。
ファイル切り替え時のスクロール位置リセット
Markdown ファイルを切り替えたときは、プレビューのスクロール位置を先頭に戻すようにした。
前のファイルで下までスクロールしていた状態が次のファイルに引き継がれないので、ファイルを開いた直後に内容の先頭から確認できる。
サイドバーの右側配置
見出し一覧のサイドバーは本文の右側に置くようにした。
本文を左側、見出しナビゲーションを右側に置くことで、Markdown 本文を読み進めながら現在位置や構成を確認しやすくしている。
サイドバー表示の整理
サイドバーの見出し表示も少し整理した。
h1見出しはサイドバーに表示しない- 見出しレベルごとのインデントを小さくする
- サイドバーの最小幅を
150pxにする - 長い見出しは横に広げず、省略表示する
サイドバーが必要以上に広くならず、本文の表示領域を確保しやすくなっている。
macOS ウィンドウボタンの右上配置
macOS のウィンドウ操作ボタンは右上に出すようにした。
ウィンドウのリサイズ時や最小化解除時にもボタン位置を再調整するので、ウィンドウサイズを変えたあとも配置が維持される。
Vim 風スクロールキーの追加
Vim 風の移動操作も追加した。
G: ページ最下部へ移動g g: ページ最上部へ移動ctrl+n: 次のセクションへ移動ctrl+p: 前のセクションへ移動
次のセクションへ移動するとき、末尾まで到達しても先頭へ戻らないようにもした。文書の最後付近で現在位置を見失いにくくするため。
現在見出しの更新改善
スクロール中にサイドバー上の現在見出しを更新する処理も見直した。
更新タイミングをフレーム単位に合わせることで、スクロール時の追従がより自然になるようにしている。
F12 による DevTools 表示
F12 キーで DevTools を開けるようにした。
UI の状態確認やデバッグを、アプリ起動後にキーボードからすぐ行える。
/ キーによる検索開始
/ キーで検索を開けるようにした。
Markdown プレビュー上で素早く検索に入れるので、文書内のキーワード確認がしやすくなっている。
ctrl+l によるサイドバー開閉
ctrl+l キーで右側のサイドバーを開閉できるようにした。
サイドバーを一時的に隠して本文領域を広く使えるので、長い Markdown 文書や横幅のある内容を読むときに表示を切り替えやすい。
サイドバーは非表示にしてもリサイズ済みの幅を保持するので、再表示したときに以前の幅で復元される。
