ハクソク

世界を動かす技術を、日本語で。

HNに表示: Apple LisaのUIを基にした「ウェブOS」を1ビットグラフィックスで作成しました

2025年7月7日原文(alpha.lisagui.com)

概要

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対応、 高い再現性 が特徴
  • 今後のアップデート やユーザーの意見がプロジェクトの成長を後押し

Hackerたちの意見

モバイルでやってるから、いくつかしか試せないけど、反応がすごく良くてびっくりした！シェアしてくれてありがとう！

└

見てくれてありがとう！

プリファレンスアプリのシャドウテキストスタイルとファットビッツエディタには懐かしさを感じたな。ウィンドウに閉じるボタンがないのを除けば、40年分のUXの「革新」を取り除いても、まだ生産的で直感的だってのはすごいよね。（追記：クリック後にメニューが開いたままになるのは、ずっと後に改善された嬉しいポイントだと思う。）

└

ウィンドウの左上隅にあるアイコンをダブルクリックすると、ウィンドウが閉じられるよ。（要するに、ファイル > 脇に置くのショートカットみたいなもんだね。）

└

そうそう、スティッキーメニューはかなり後になってから来たんだ。みんなに慣れてもらうために、ここに追加するのにちょっと手間をかけたよ。どちらのオプションも使えるよ。メニューを開いたままにするにはシングルクリック、マウスを押し続けてドラッグするとメニューが開いて、マウスを離すと閉じるんだ。古いMac OS、例えばSystem 6でもスティッキーメニューを使えるMacの拡張機能を知ってるよ。もう少しその機能をバックポートしようかなって思ったんだ… 編集：あと、この返信で言い忘れたけど、ウィンドウを閉じるにはタイトルバーのアイコンをダブルクリックしてね。

どうやってこれを調べたの？リサ持ってるの？

└

リサのエミュレーターがいくつかあるよ： https://emulation.gametechwiki.com/index.php/Apple_Lisa_emul.... ROMはmacintoshrepository.orgで見つけられるよ。

└

もちろん、リサ2/10を持ってるよ！LisaEmもめっちゃ役立った。あと、ヴィンテージコンピュータやUIに対する一般的な obsession もかなり助けになったよ！

リサは正方形のピクセルじゃないから、キャンバスは幅の1.5倍の高さにスケールされてる。高dpiディスプレイだと、技術的には描画するスペースが2倍あるから、見た目は悪くないんだ。ただ、低解像度のディスプレイだと、ピクセルが1px幅で1.5px高さだから、歪んで見える。これがデザイン時に妥協した部分だね。いいニュースは、十分大きな低dpiディスプレイがあって、ウィンドウを大きくすれば、自動整数スケーリング設定が働いて、ピクセルが大きく表示されること。これはプリファレンスアプリの表示オプションから強制できるよ。もしこれを間違えたら、シフトキーを押しながらLisaGUIを再起動してスケーリング設定をリセットしてね。追記：これとは関係ないけど、iOSのPWAにキャンバスの位置に関する小さなバグがいくつかある。デバイスを別の向きに回転させてから元の位置に戻すと解決できるけど、ちょっと面倒だね。追記2：ウィンドウを閉じるには、タイトルバーのアイコンをダブルクリックするだけ！これで「ウィンドウがアイコンに戻る」よ。

└

ブラウザのサイズに関係なく、動的なウィンドウやフォントのスケーリングをどうやって扱ってる？（HTMLだとほとんど無料でもらえるけどね）

すごくクールだし、デザインや機能のヒントがたくさんあってインスピレーションをもらえるね。あのアンチエイリアスされたフォントの見た目が好きで、GUIの表示能力をちょっと超えたカリグラフィックな感じがたまらない。これ、懐かしさが味覚を刺激してくるわ…

└

そうだね。テキストスタイルを作るのは楽しかったよ。QuickDrawと同じ実装ではないけど、かなり近い感じだね。

Hacker Newsで議論の続きを見る