- 個人開発者が Apple Lisaのユーザーインターフェース を再現した Webベースのオペレーティングシステム を制作
- このプロジェクトは 1ビットの白黒グラフィック を特徴としており、レトロコンピューティング愛好家にとって興味深い内容
- デスクトップ、アイコン、ファイルウィンドウなど 1980年代のApple Lisa のデザインを忠実に模倣
- Webブラウザー上ですぐに実行でき、特別なインストール作業は不要
- オープンソースとして公開されており、ほかの開発者による カスタマイズ や拡張が容易
プロジェクト紹介
- このプロジェクトは Apple Lisa初期のデスクトップOS UI をWeb環境で直接体験できるようにしたWeb OSの開発
- 1ビット(pure black & white)グラフィック を使い、レトロなユーザー体験を提供
- デスクトップ、アイコン、ウィンドウ、アプリ起動など、伝統的なデスクトップ環境を再構成
- 実際のOS機能全体を実装しているわけではないが、UIの動作と視覚要素 の再現に注力
- 現代的なブラウザーさえあればすぐにアクセスでき、技術的な参入障壁が非常に低い
主な特徴
- 1983年に発売された Apple Lisa のUIデザインを忠実に模倣
- ドラッグ&ドロップ、ウィンドウの移動やサイズ変更など、主要なUIの反応をリアルに再現
- シンプルだが精巧な1ビットグラフィック スタイルにより、独特の視覚的な感覚を提供
- アプリ一覧やファイル閲覧、簡単なアプリ実行など、デスクトップOSの基本要素を含む
活用と意味
- レトロコンピューティングや UI/UXデザイン研究 のための優れたデモ資料
- 初心者開発者でもソースコードを分析しながら Web UIの仕組みやレイアウト構造 を理解可能
- オープンソースで配布されており、コミュニティがさまざまな形で 機能追加 や テーマ変更 を試みられる
その他の参考事項
- 複雑なインストール作業なしに、リンクからすぐWeb上で動作可能
- ソースコードはGitHubなどの公開リポジトリーで提供
- 本プロジェクトは営利目的ではなく、実験的な試み と 教育的目的 に重点を置いている
1件のコメント
Hacker Newsのコメント
Lisaは正方形ピクセルではないため、キャンバス比率を横に対して縦1.5倍に設定している。高解像度ディスプレイではピクセル自体が幅2ピクセル × 高さ3ピクセルになるのでかなりそれっぽく見えるが、低解像度ディスプレイでは幅1ピクセル × 高さ1.5ピクセルとして表現されるため歪みが発生する。これは設計上織り込み済み。ただし十分に大きい低解像度ディスプレイでウィンドウ幅を広げると、自動整数スケーリングが動作してピクセル自体がより大きく表示される。環境設定アプリのディスプレイオプションから強制設定も可能。もしスケーリング設定をおかしくしてしまった場合は、LisaGUIの再起動時にshiftキーを押し続ければリセットできる。それとiOSではPWAまわりのキャンバス位置バグが少しあり、端末を回転させて戻せば直るが、かなり面倒でもある。ウィンドウを閉じるときは、タイトルバーにあるアイコンをダブルクリックするとウィンドウがアイコン状態にたたまれる
Apple ][/e や /c のクローン機(ブルガリア製のPravetz 8Ц)が自分の最初のコンピューターで、その後はHerculesモノクロモニター付きの286、386 PCも使っていたので、このプロジェクトの素敵なレトロUIを見ているとThink-Pascal時代の感覚を思い出す
こういうユニークなLisa GUIプロジェクトこそ、自分がHacker Newsを好きな理由。純粋なバニラJSと時代を先取りしていたUIから学べることが多い。デモやサンプルに、Breakout風ゲームのようにすぐ遊べるゲームが追加されたらさらにうれしい
Preferencesアプリにあるシャドウテキストスタイルとfatbitsエディタを見て、40年前のUXから表面的な古さを取り除けば今でも十分に生産的で直感的だということにとても感心した。ただ、ウィンドウを閉じるボタンがない点は惜しい。ワンクリックでメニューを開いたままにできる機能は、この種のUXの発展においてかなり後年に入ってきた良い変化だと思う
sticky(固定)メニューはずっと後になって導入された機能。今回の実装では、現代のユーザーが慣れているのであえて含めている。ワンクリックでメニューを開いたままにしたり、マウスボタンを押したままドラッグして開き、ボタンを離すと閉じたりする方式。昔のMac OS(System 6)でもstickyメニューを使えるようにする拡張機能があるが、ここではその機能をさらに古い時代までさかのぼって入れてみたという説明。あわせて、ウィンドウを閉じるにはタイトルバーのアイコンをダブルクリックすればよいことも補足
ウィンドウ左上のアイコンをダブルクリックするとウィンドウが閉じる動作がある。File > Set Asideのショートカットのようなもの
Lisaを長く使い込んだ経験はないが、90年代初頭に技術者として何台ものLisaを使い、Mac XLに改造した思い出がある。今回のプロジェクトはUIの再現度が非常に高く、実際にクリックして試す楽しさもあって良い体験を提供している
以前はLisaエミュレーターを使ったことすらなかったが、今回のおかげで初めて触れることができた貴重な体験。GUIの根本的な考え方を久しぶりに見直すきっかけをくれてありがとうという感想
GUIという言葉は音を一つずつ区切って発音していて、わざわざ「グーイー(gooey)」のようにまとめて読む必要はないと思う。半分冗談、半分本気の同志感
略語やイニシャリズムは全部発音して読むべきという流儀。TUIは「トゥイ」、CLIは「クリ」、TCP/IPは「ティキピピ」、GPTは「ギピティ」、DNSは「ダンス」、HTTPは「ヒタップ」、USBは「ウズバー」、USB-Cは「ウズバーク」みたいに愉快な提案
こういう些細な発音論争のほうが、最近の政治みたいな深刻な話よりずっと面白くて楽しい議論のネタになる。たとえば vi vs emacs、vi vs vim、IFの発音、m68k vs x86、Mac vs Amiga、BSD vs Linux など
同じ考えの人がいるのがうれしいという連帯感
モバイルでマウスカーソルを使うなら、Microsoft Remote Desktopの方式が便利。指そのものではなく、画面上のどこでも動かしてカーソルを別に移動させる方式で、実際に使うと感覚がつかめる。これについての改善提案
モバイルで試してみたが、レスポンスの良さがとても印象的
小さな画面のiPhone SEではちゃんと動かなかったので、次はハードウェアをアップグレードしてもっと良いOS体験をしたいと思った