lognal

このプロジェクトについて

lognal は、自分の画面にログを表示したいアプリケーションのためのログビューアーです。Web ページの中のコンソールパネル、Flutter アプリのデバッグ画面、ログファイルを読む画面がその居場所です。エントリーはただのデータとして持ち、キャンバスには見えている行だけを描くので、1 フレームのコストは履歴の長さではなく画面に映る量で決まります。その下のコア、つまりストア、フィルター、文字の整形、レイアウトは TypeScript と Dart でファイル単位まで揃えて二度書かれています。そのため行の折り返し位置も幅も検索の当たり方も、ブラウザーとアプリで同じです。

ランタイムがもともと出力しているものをそのまま映します。ブラウザーでは console.log、console.table、console.group を、Flutter では print と debugPrint を取り込み、元の出力も動き続けます。ログファイルはエンコーディングを判別して読み、ANSI エスケープコードを色に変え、伸び続けるファイルを追いかけることもできます。オブジェクト、リスト、マップ、エラーは記録された時点の値で捕まえ、その場で開いたり閉じたりできます。ツールバーは新しいログを追い、テキストとレベルで絞り込み、検索では残りを隠さずに一致箇所をすべて強調します。入力行を有効にすれば、コマンドをハンドラーに渡して返答を出力します。韓国語などの幅の広い文字は 2 マスを占めてグリッドを崩さず、折り返しでハングルの単語が分かれることはなく、入力行は IME の変換が終わるまで待ちます。操作部はアクセシブルな名前を持つ本物のボタンで、見えているエントリーは隠しリストにも写され、スクリーンリーダーで読めます。

npm パッケージにランタイム依存はありません。React は lognal/react のコンポーネントを使うときだけ必要な任意のピア依存で、スタイルシートは一度読み込むだけです。Flutter パッケージは Flutter SDK にしか依存せず、Material も Cupertino も使わずにウィジェット層の上に作られているので、どのアプリに入れても二つ目のデザインシステムを持ち込みません。パレットは 6 種類が組み込まれ、auto はシステムのライト・ダーク設定に従い、独自のテーマは CSS カスタムプロパティひとまとまりか buildTheme の呼び出し一回で作れます。JavaScript パッケージは ESM で TypeScript の型定義付きです。二つのパッケージはバージョンと変更履歴をそれぞれ別に持ちます。

機能

• ドキュメントサイトあり

• TypeScript 型定義

• 多言語対応

• テストで検証済み

• クロスプラットフォーム対応

• アクセシビリティ対応

• ダークモード

• ツリーシェイキング対応

• 依存関係なし