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

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

概要

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と同じ実装ではないけど、かなり近い感じだね。

すごくクールだね。モバイルのマウスカーソルについておすすめしたいのは、iOSのMicrosoftのリモートデスクトップみたいにすることだよ(多分Androidでもできるけど、iPhoneユーザーだから確かではない)。カーソルは画面をタップした場所にはなくて、画面のどこでもパンする感じで、指の下にないカーソルが比例して動くんだ。ちょっと説明が難しいけど、Microsoftの無料WindowsアプリでRDPを使ってみればわかるよ。

ありがとう!それやったよ!設定の中のタッチスクリーンオプションパネルに行って、トラックパッドモードを有効にしてね!

著者のメモ:GUIの文字は別々に発音してる。なんで「グーイ」って発音するの?やめてほしいな。ほんとに。団結しよう!

…くだらないことをお互いに突っつき合うのは、今の時代に政治みたいなことを争うよりずっと楽しいからね… vi対emacs、vi対vim、(guh音)IF対(j音)IF、m68k対x86、Mac対Amiga、BSD対Linux、などなど。

誰かが俺と同じ意見で嬉しい!

すべての略語はちゃんと発音すべきだよね。 TUI = トゥイ CLI = クリ TCP/IP = ティキピピ GPT = ギピティ DNS = ダンス HTTP = ヒットアップ USB = ウスブ USB-C = ウスブシー

それで、このLisaでパズルゲームをプレイしたんだけど、どうやら解けないみたいで、ちょっと驚いたよ。他に挑戦した人いる?ここまで進んだ時の写真だよ: https://imgur.com/a/QhnnC4X

うん、解けたよ!

おお、全然解けるけど、ちょっと難しいよね!文字をうまく「蛇行」させながら、順番に正しい場所に置いていく必要があるんだ。タイルを置くにつれて、どんどんスペースが狭くなっていくよ。

もしランダム生成なら、半分のパズルは解けないよ。

これ、すごく面白いし、モバイルでこんなにうまく動くのは驚きだね。シャッフルパズルゲームには、解けないパズルを生成するバグがあると思う。パリティの問題に遭遇したんだ。空白を左上に置いて解いたけど、ゲームから反応がなかったから、それが意図された解法だとは思えない。オンラインソルバーでも確認したけど、解がないって言われたよ。

パズルが解けるかどうかを確認するところまでは行ってないんだ。今はパズルの状態が有効かどうかだけを確認してる。将来的にはやるかもね。今のところは、ソリティアみたいに解けなかったらシャッフルし直す感じかな。ちなみに、次のゲームとしてソリティアを追加する予定だよ!

こういう「show hn」が大好きなんだ。美味しいバニラJSと、俺の時代より前の「Lisa GUI」について学べるなんて。素晴らしい!デモやサンプルにブレイクアウトスタイルのゲームとかあったらいいな、ってのは俺の子供心が言ってるけどね。

ありがとう。それ、すごく嬉しい!いいゲームアイデアだね。次に作るのはソリティアにするつもりだよ。あと、Xeroxに敬意を表して、Xerox Altoのmazewarゲームみたいなものを作ってみたいとも考えてるけど、ネットワーク機能を追加するのは大変だろうな…