完全ローカル環境で動作#

Notyraは外部と接続せず完全ローカル環境で動作します。クラウドへの同期機能もNotyraには備わっていません。
ノートのバックアップが必要な場合はルートフォルダをご自身で契約頂いているOneDriveやGoogle Driveの同期対象に設定いただくことで自動バックアップが可能です。

リアルタイムプレビュー#

Notyraは3種類のモードでビュアーを切り替えることが出来ます。
その中でもエディタとプレビューの分割表示に関しては入力した内容がプレビューにリアルタイムで表示されるようになっています。 また、スクロールもエディタとプレビューで同期するようになっています。
さらに、対象のノートをダブルクリックすることで別ウィンドウで表示・編集することが可能です。

PDF・HTMLエクスポート#

ノートはPDF・HTML形式でエクスポートすることも可能です。

アプリテーマのカスタマイズ#

この辺りは、おまけ機能のようなものですが、アプリの見た目を変えられる機能も提供しています。 ライトモード・ダークモードの切り替えはもちろんのこと、色合いも変更することが出来ます。
公式としていくつかのテーマを提供していますが、ご自身でテーマを作成して適用させることも出来ます。

パンくずリスト#

Notyraのこだわりポイントですが、サイドバーのフォルダリストで対象の子フォルダや孫フォルダをダブルクリックすると、そのフォルダをトップに持ってくることが可能です。

新しいウィンドウでノートを開く#

ノートリストで対象のノートをダブルクリックすると新しいウィンドウでエディタを開くことが出来ます。
複数のノートを行き来する時に便利です。

アプリテーマ#

まず、テーマ切り替えとしてライトモード・ダークモードを提供しています。

さらに、デフォルトテーマとして「グレー」と「パープル」の2種類を提供しています。

カスタムテーマ#

デフォルトテーマ以外に、公式テーマとして4種類のカスタムテーマを提供しています。 詳しくは以下のNotyraドキュメントページをご覧ください。

カスタムテーマを利用する | Notyra

Notyraではデフォルトのテーマに加えて、任意で利用できるカスタムテーマも提供しています。ユーザーは、Notyraの外観をさらに個性的にカスタマイズすることができます。

notyra.y-shin.net

フレームワーク#

元々v1ではElectronで開発していましたが、アプリ自体の容量が大きく起動も遅いためv2からはフレームワークをTauriに変更しました。
ElectronからTauriに変更したことでCPU使用率も低く、メモリ消費も40MB程度で抑えることが出来ました。
アプリ容量も数百MBから15MB程度まで減らすことが出来、個人的には満足しています。

Tauri とは？

The cross-platform app building toolkit

v2.tauri.app

画像の扱い方#

Notyraでは画像の描画もサポートしています。 画像の挿入方法は以下の3種類をサポートしています。

1. ドラッグ&ドロップ (複数可)
2. クリップボードから (コピペ)
3. 画像挿入ボタンからの挿入 (複数可)

画像の扱い方はかなり悩みました。ローカルで動作させるにはルートディレクトリ内で画像を管理する必要があるためです。
チャッピー(Chat GPT)と壁打ちしながら方法を考えた結果、ルートディレクトリ内に画像専用のディレクトリ(image)を作成し、Markdownファイルの中で利用されている画像のみをimageディレクトリの中に保存することにしました。 Ctrl + Zで変更を戻す、貼り付け場所を誤る、間違った画像をアップロードするといった動作も多いと思うので、アプリの終了操作をしたタイミングで画像ファイルのクリーンアッププロセスを走らせ、Markdownファイル内で使用されていない画像を削除することにしました。

レンダリング速度#

ノートリストには仮想スクロール(react-virtual)を導入しています。 1万を超えるノートもスムーズに描画することが出来ます。

GitHub - TanStack/virtual: 🤖 Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte

🤖 Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte - TanStack/virtual

github.com