概要
LisaGUI は、Apple Lisa Office System風のWeb OS。 Vanilla JS のみでUIを完全再現し、全てCanvas上で描画。 DOMやCSS を使わず、独自の型式・描画エンジンを実装。 PWA対応、ただしスマホ利用には制約とバグあり。 今後の 機能追加 予定、フィードバック歓迎。
LisaGUI: Apple Lisa Office System風Web OSの技術解説
- LisaGUI は、Apple Lisa Office System(1983-85)を模したWebベースのOS再現プロジェクト
- Vanilla JS のみを使用し、UIをゼロから構築
- 現代的なCSSテーマや移植エミュレータ ではなく、独自実装
- 全UI要素(メニュー、ウィンドウ、コントロール、フォント) をDOM外のJSオブジェクトで定義
- 描画は全て単一のCanvas要素 上で完結
- Appleのコードは一切使用せず、完全自作のUI再現
- フォントファイル未使用、独自の組版システムを開発
- 複数のテキストスタイルの組み合わせ対応
- 新規グリフ生成機能
- 全ブラウザで同一表示 を目指し、DOMやCSS依存を排除
- Gulp toolkit をビルド・ミニファイ用に採用
- vibe coding (雰囲気コーディング)は行っていない堅実な実装方針
LisaGUIの特徴と注意点
- デスクトップメタファー に忠実な設計
- モダンGUIとの違いはREADMEに一部記載
- スマートフォン利用には非対応
- タッチスクリーン設定の「trackpad mode」推奨
- Androidではキーボードやウィンドウドラッグ時のカーソル不具合あり
- PWA(Progressive Web App) としてインストール推奨
- アルファ版 であり、バグや未実装機能多数
- 現時点で使える機能は限定的
- 今後のアップデートで機能・アプリ追加予定
- ユーザーからのフィードバックと質問歓迎
技術的な工夫と意図
- 全UIロジックをJSで管理、DOM・CSSの差異を排除
- 再現性・一貫性重視 のデザイン方針
- 80年代UIの体験を現代ブラウザで再現 することを目的
- 型式や描画エンジンの自作 による柔軟な拡張性確保
- 開発効率よりも正確な再現性を優先
今後の展望
- 新機能やアプリの追加開発 を継続予定
- ユーザー体験の向上 とバグ修正
- LisaGUIコミュニティ形成 やフィードバック活用
まとめ
- LisaGUI は、Apple Lisa Office System風のWeb OSを Vanilla JS とCanvasのみで再現する意欲的なプロジェクト
- 独自の組版・UIエンジン、 PWA対応、 高い再現性 が特徴
- 今後のアップデート やユーザーの意見がプロジェクトの成長を後押し