伝説のApple Lisa UIをバニラJSでWeb再現 UIもフォントも手作りで1ビット描画！
引用元：https://news.ycombinator.com/item?id=44482965
これが俺がVanilla JSで作ったWeb OS、https://lisagui.com/info.html だよ。Apple Lisa Office Systemっぽく見せてる。まだα版でバグだらけだけど、やっと見せられるレベルになったんだ。Lisaは最近のGUIよりデスクトップメタファーに忠実だよ。
UIは全部JSでCanvasに描画してる。CSSテーマでもエミュレーターでもない。Appleのコードは一切使ってないよ。UI要素やフォントまで全部ゼロから作った。Fontファイルも使ってない、独自の組版システムだよ。
どのブラウザでも同じに見せたかったから、DOMやCSSじゃなくJSでロジックを組んだんだ。Gulp以外はVanilla JSと標準Web APIだけ。スマホには向かないけど、PWAとしてインストールするのがベスト。Androidにはいくつかバグもあるね。
今はできること少ないけど、これから機能やアプリを追加する予定だよ。フィードバックや質問歓迎！
Lisaは正方形ピクセルじゃないから、Canvasは幅の1.5倍の高さにしてるんだ。高DPIだと綺麗に見えるけど、低解像度だと歪むかも。これは妥協ね。
でも、十分大きい低DPIディスプレイなら、自動で整数スケーリングが効いてピクセルが大きくなるよ。設定アプリで強制もできる。失敗したらShiftキー押しながら再起動でリセット！
iOS PWAのバグは画面回転で直るけど、めんどいね。
ウィンドウはタイトルバーのアイコンをダブルクリックで閉じるんだよ！
ブラウザのサイズに関わらず、ウィンドウとかフォントのスケーリングってどうやってんの？ HTMLだとほぼ勝手にやってくれるのにさ。
整数スケーリングだよ。Canvasのwidth, height, style属性を動的に変えてる。専用のクラスがあるんだけど、これ動かすの大変だったね。DPIとかborder widthとかpixel aspect ratioとか色んなパラメータをいじってる。ResizeObserverでDOMのbody要素のサイズ変更を検知してるよ。
Canvasを滑らかに見せるために、CSS filterでコントラストつけて、image-renderingをpixelatedにしてる。
ターゲット解像度よりかなり大きく、ニアレストネイバーでアップスケールしてから、バイリニアとかでビューポートにダウンスケールするといいかもね。これやると、行/列の重複とかモアレパターンが減るし、見た目のピクセルもシャープに保てるよ。
俺はDOSゲームのスクショ（320x200だけど4:3表示用）で似たことやってる。1600x1200にニアレストネイバーで上げてから、バイリニアでターゲット解像度に下げるのがすごくうまくいくんだ。
ニアレストネイバーでアップスケールしてバイリニアでダウンスケールするだけじゃなく、ダウンサンプリングに正しい色空間を使うのも大事だよ。よくある間違いは、sRGBを線形色空間として扱うこと。
sRGB値をLinear RGBに変換するには2.2乗して、計算してから1/2.2乗でsRGBに戻すんだ。Graphics APIによっては自動でやってくれるけど、リクエストする必要があるよ。
結論から言うと、Pixel PerfectなレンダリングはWeb APIじゃ無理だよ。devicePixelRatio (dpr) の問題とか（特に俺のWindows PCの1.25dprだとひどい）、Zoomの挙動の違い（Safari除く）、Pixel Snapping、ResizeObserverのdevicePixelContentBoxSizeがSafariにないこと、Pinch to Zoomの情報がないこととか、色々Web APIが邪魔してくるんだ。
要するに、できない。一部はSafariのせい、一部はWebに機能が足りないせいだね。
device pixel ratioのAPIコール、実際使ってないってこと、はっきりさせとくね。1年くらい前のコードだから忘れてたけど、結局独自コードでやったから必要なかったんだ、笑
こういうShow HN（ハッカーニュースの「見せて！」スレッド）大好き！美味いVanilla JSに、俺よりずっと前の珍しいLisa GUIについて学べるなんて。ブラボー！
Demo/ExamplesでBreakoutみたいなゲームが見たいな、これは俺の子供心だけどね。
ありがとう、それはすごく嬉しいね！ゲームのアイデアいいね。次はSolitaireを作る予定だよ。将来はXerox AltoのMazewarみたいなゲームも考えてるけど、ネット対応とか大変そうだな…
フォントの幅が不均一に見えるっていうコメントがいくつか来たんだ。フォントは文字通りビットマップで、いつも同じように描画されるよ。スタイルが適用されても一貫してる。
Lisaのシステムフォントは独特で、2:3のアスペクト比を補うために縦線が横線より少し太いんだ。
もし uneven に見えるなら、低DPIディスプレイで1xスケール表示してるせいかもね。別のコメントでも書いた通りだよ。
この問題をデバッグするには、スクリーンショットが必要なんだ。Windowsなら Windows + PrintScreen、Macなら Command + Shift + 3 で撮れるよ。
撮ったやつは、yaros.ae の下にあるメールリンクか、Bluesky（https://bsky.app/profile/lisagui.com）のメッセージで送ってくれると嬉しいな。
あと、Blueskyアカウントでプロジェクトの更新情報を投稿してるから、興味ある人はフォローしてね。古風な人のために、ウェブサイトにはRSSリンクもあるよ。
環境設定アプリの Shadow text style や fatbits editor、本当に懐かしかったよ。ウィンドウに閉じるボタンがない点を除けば、40年間の UX 「革新」を剥ぎ取っても、結果が生産的で直感的なのは驚きだね。（追記：メニューがワンクリックで開きっぱなしになるのは、ずっと後に来た改善だと思うけど、あれは良かったね。）
そう、Sticky menus はずっと後に登場したんだ。今みんな慣れてるから、あえてここに実装したよ。ワンクリックでメニューを開きっぱなしにするか、マウスを押しっぱなしにしてドラッグして、離すと閉じるか、両方使えるよ。
確か System 6 みたいな古い Mac OS にも Sticky menus を使えるようにする拡張機能が少なくとも1つあったはず。いわば、その機能をちょっと過去に移植した感じだね…
追記：あと、返信で言い忘れたけど、ウィンドウを閉じるにはタイトルバーのアイコンをダブルクリックだよ。
ウィンドウの左上にあるアイコンをダブルクリックすると閉じられるよ。（それは多分、File ＞ Set Aside のショートカットだね。）
うん。Set Aside は具体的に何かをデスクトップに置くこと。保存できる書類には「保存して片付ける（save and put away）」オプションがあって、これはデスクトップじゃなく元のフォルダに「再ファイリング」するんだ。
これで気づいたけど、すべてのウィンドウに別の「片付ける（put away）」オプションも追加する必要があるな。そうすれば、何かを再ファイリングするためのメニューコマンドがいつでも使えるようになる。
デスクトップは普通のディレクトリじゃないんだ。これについては readme で少し説明してるよ。
Lisa はそんなに長く使ったことないんだけど、90年代初頭に Mac の修理技師として何度か触る機会があったんだ。Lisa を修理したり、Mac XL に改造したりもしたよ。UI の再現がすごく良いね、クリックして回るのが楽しかったよ。良い仕事だ！
楽しんでもらえて本当に嬉しいよ！Lisa は本当にクールなマシンなんだ。Apple の他のデザインに比べて、間違いなく扱いやすいし、サービスも楽なんだよね…
すごくクールだね。
モバイルでのマウスカーソルで推奨したいんだけど、Microsoft の Remote Desktop on iOS（Android も多分だけど、iPhone ユーザーだから分からない）みたいに、カーソルがタップした場所じゃなくて、画面上のどこかをパンすることで、指の下ではない位置にあるカーソルを比例して動かすっていう方法だよ。説明するのがちょっと難しいんだけど、Microsoft の無料 Windows App の RDP をモバイルデバイスで使ってみる必要があるね。
ありがとう。うん、それやったよ！環境設定（Preferences）のタッチスクリーンオプションパネルを見て、「トラックパッドモード」を有効にしてみて！
それは実際に使ってみると、驚くほど快適だね！
横画面で両手使うのは良いね。UIフィードバックはCSSで楽に追加できそうだよ。
マルチタップ機能って検討中？まだちょっとしか触ってないけど（すごい出来だよ！）、3本指タップでTrackpad Mode切り替えられたらナイスな_touch_だと思うな。
これ超クールでMobileでよく動くのに驚いたよ。Shuffle Puzzle Gameで解けないバグあると思う。Parity Issueになった。左上にBlankでClearしたのに反応なくて、Online Solverでも確認したら解なしだったよ。
PuzzleがSolvableかのCheckはまだで、今はValidな状態かだけだよ。そのうちやるかも。今はSolitaireみたいに、解けなきゃShuffleし直してね。ちなみに次はSolitaire追加する予定だよ！
お、いいね。Solitaireは知らないけど、MicrosoftはRandom生成で解けるやつを保存してたって聞いたよ（解けないのも2つあったらしいけどTypoか間違いかな）。Solvableか判定する方法もGeeksforGeeksで見つけた。https://www.geeksforgeeks.org/dsa/check-instance-15-puzzle-s… 他だと、Blankが右下か左上にある両方のConfigurationを検出して表示する方法も考えられるかな。
C++でそのPuzzle作ったの思い出したよ。Randomに作ると半分は解けて半分は解けないんだ。俺はSolvableかCheckするんじゃなくて（数学難しそうだから）、解けた状態から決まった回数Randomに動かす方法にしたんだよね。
それ、良いアイデアだね。
すごい出来だよ、Lisaの思い出が蘇る。でもさぁ！生まれて初めてPCでこのNumbers Puzzleやって、30年ぶりにやって、解けないように2つPieceをひっくり返したJokerがいるなんて？！Diabolicalだ！
Puzzle Gameで最後の2枚を入れ替えようと長いこと頑張ってたのに、解けないって分かってガックリだよ。でもCoolなものだね！
俺も同じ、ずーっとやってたよ :(
もっとコメントを表示（1）
適当にクリックしてたら背景かなんかがハイライトされて、ページ全体が青くなっちゃったんだ。
何クリックしても元に戻らなくて、体験が台無しってわけじゃないけど、ちょっと気になったよ。
SafariとGoogle Chromeで試した結果だよ。
私も同じ経験したけど、あれは意図的なんだよ。
設定アプリを開いて、デスクトップを装飾するって項目にチェック入れてごらん。
そしたら、パステルブルーって色以外を選べば大丈夫だよ。
キャンバス要素自体が選択されてるんでなければ、それは僕の大きな見落としだけど、あの青はLisaのCRTを再現したデフォルトのカラーパレットなんだ。
今は設定が読み込まれるまで適用されないんだけどね。
もしこれで混乱するなら、ページ読み込み時にすぐ適用されるように設定保存を優先するかも。
あなたや他の人の言う通りだね、あれはテーマだったんだ。
起動時に青くなるのは避けられないみたいだけど、他の人が言ってるようにテーマを変えたら元に戻ったよ。
最初はモノクロなのに突然青くなるし、その青がテキスト選択の色とほぼ同じだったから混乱したんだよね。
あはは、なんか恥ずかしいな。
うん。これが最終的にHNみたいな場所に出したかった理由の一部なんだよね。
これは貴重なユーザーフィードバックだよ！
長い間このプロジェクトを完全に秘密にしてたんだ。
おそらく設定データをlocalStorageに保存して、システム起動してIndexedDBから読み込む前に利用できるようにするかな。
追記：これ、もう完了したよ！
iPhoneでも同じだったよ。
なんかスワイプとかしたらページ全体が青くなったのかも。
追記：何もしてなくても自動選択されるみたいだ。変なの。
あの色合いは、LisaのCRTの見た目を真似るためのものだと思うよ。
そうそう、その通り！
設定には色々パレットがあるから選んでみてね！
iPhoneのFirefoxで試してたら、ちょっと気になったこと。
スマホの画面回転を縦向き固定にしてると（普段そうしてるんだ）、インストールとか試すとかのボタンが見えないんだよね。
縦固定をオフにしたら大丈夫だった。
回転ロックしてると解像度の読み込み方が違うのかな？
上のメニューバーにも何も表示されなくて、何も操作できなかった。
でも、ほんとすごい努力だよね！これで実際に使えるようになったよ！
マジで感動した。
ページズームで縮小したらボタンが見えたよ。その後は完璧！いや、完璧どころか、めっちゃ感動したよ！これ本当に好き…使ってて思わず笑顔になっちゃった。それに、信じられないくらい速いね！
インストーラーでメニューバーが隠れてるのは、元のLisaがそうだったからなんだ。レスポンシブ対応は必要だけど、Lisaに無かったスクロールペーンは入れたくない。歴史の再現と今の制約のバランスを取ってるから、妥協は避けられないんだ。
デスクトップのGoogle Chromeだと完璧に動くよ。13年前のPCでJavaScriptなのに超速い！ソフトウェアって軽量にできるんだな、デスクトップ環境ってこうあるべきだって思う。Lisaは使ったことないけど、Mac 512Kは使ったことあるよ。
スマホからだから少ししか試せなかったんだけど、レスポンシブなのに感動したよ！シェアしてくれてありがとうね。
FPS表示を消せるようにしてほしいな。僕のiPhoneだと、値がチカチカしてすっごく邪魔なんだよね。UIはカッコいいのに、あれがあると気が散っちゃうよ。
これは将来オプションにする予定だよ。メニューバーのモジュールシステムをちゃんと決める必要があるんだ。他にもメニューバーに追加する、切り替えられるものがいくつかあるからね。
LisaのGUIは今のより洗練されてる点があるよね。アプリがステーショナリーになって、それをダブルクリックするだけで新しい書類が作れる仕組みが好きだったな。Excelとかを開く手間が省けるんだ。Windows 95にも似たような機能があったけど、後には残らなかったみたい。
macOSは今でもファイルからテンプレートを作る機能をサポートしてるんだ。System 7で1991年に始まった機能だよ。Finderで「情報を見る」を開いて、”Stationary pad”にチェックを入れるだけでできるんだ。
これ、今まで知らなかったなんて信じられない！いくつかのワークフローに役立ちそうだよ。今調べたら、Appleの公式ヘルプページが見つかったよ。URLはこちら: https://support.apple.com/en-tm/guide/mac-help/mchlp1341/mac
わー！これすごいね！まだ残ってたなんて知らなかったよ。
ドキュメント作成方法、クールだけどテンプレート必須で実用的じゃないかもね。どこに保存したか覚えてないとだし。
ファイルメニューから新規作成できたらいいかもだけど、アプリ増えたら大変そう。
でも洗練されてて、このUIが生き残ってたらどう問題解決されたか見たかったな。
テンプレートの仕組みはOS/2 Presentation Managerにもあったし、WindowsでもXPくらいまでは残ってたと思う。Explorerの”新規作成…”メニューで使う感じだね。
知らなかったけど、エミュレートされたLisa使うの今日が初めてだったよ！古い環境に命吹き込んで、GUIの始まりの考え方を追体験させてくれてありがとうね。
どういたしまして。これでノスタルジー感じてもらえたなら嬉しいな！
めっちゃクール！デザインとか機能のヒントがたくさんあってインスピレーション湧くわ。
GUIの限界超えようとしてる、書道っぽいエイリアスされた文字の感じが好きだなぁ。これ、マジでノスタルジーが来るね…。
うん。テキストスタイル作るの楽しかったよ。QuickDrawと同じやり方じゃないけど、十分近くはできてるかな。
残念ながら、画面が小さくて俺のiPhone SEじゃ動かなかったよ。最新のOS使うにはハードウェア買い替えなきゃダメかな :)
それは確かに小さすぎるね！デスクトップかラップトップで試してみてよ。
現代のPCでApple Lisaみたいなシステムを使うと、どれだけ作業が進むのかな？君の作品は色々な想像を掻き立てるよ。すごい成果だね。
このApple Lisaのパズルゲームに挑戦したけど、どうやっても解けないみたいでびっくり！他の人試した？どこまでできたか画像貼っとくね：https://imgur.com/a/QhnnC4X
もっとコメントを表示（2）
ランダムに作られてるなら、パズルの半分は解けないはずだよ。
あー、あれはちゃんと解けるんだよ。でもちょっと難しいかな！文字をヘビみたいに上手く動かして、順番に正しい場所に置いていく感じ。タイルを置くにつれて、動かせるスペースが狭くなるんだ。
残念だけど、あれは解けないよ。プログラムで解けるかチェックする方法については、この記事を読んでみて：https://datawookie.dev/blog/2019/04/sliding-puzzle-solvable/
うん、俺は解けたよ。
これどうやって調べたの？もしかしてApple Lisa本体持ってる？
うん、Apple Lisa 2/10を持ってるよ！LisaEmもすごく助かった。それに、古いPCとかUI全般に対する並々ならぬこだわりもかなり役に立ったね！
Apple Lisaのエミュレーターならいくつかあるよ：https://emulation.gametechwiki.com/index.php/Apple_Lisa_emul…. ROMはmacintoshrepository.orgで見つかるよ。
これ見て昔を思い出したな〜。最初のPCはApple ][/eか/cのクローン（ブルガリアのПравец 8Ц）で、その後286、Herculesモニター付きの386 PCも使ったよ！だから、こういうクールなもの見ると本当に嬉しいんだ。Think-Pascalとか思い出すな。
LisaGUIにはね、例のWeb OSの色を参考にした”Windows 93™”テーマがあって、ブルーとピンクのCGA風なんだ。あと”Through the Looking Glass”っていうアイコンテーマは文字通りWindows 1.x/2.xのアイコンを使ってるよ。（Win95のごみ箱アイコンは自分で作ったけどね）
ウィンドウの閉じ方を理解するのにちょっと時間かかったな。（Win 3.1と同じ方法だって思い出す必要があった）ヘルプ文書 scrolled throughしても見当たらなかったんだ。
ごめんね！「Tips」ドキュメントにちょっと buriedされてるんだ。これはもっと emphasizeしないとね！
これ、今でもWin 10で動くと思うよ。Win 11は分からないけどね。
ちょっと edge caseなんだけど、1-bit palettes作るのが大好きで、古いApple UIsでテストしてるんだ。これは perfectだよ。color editableにできるといいな :)
custom color palette valuesを追加、編集、削除するUIを eventually追加する計画はあるんだ… RGB valuesと user-defined presetの labelを typingできる dialogを codingするだけなんだよね。まだ手が回ってないんだけど。
MBPの external retina displayで maximized windowで見ると goodだよ。
ただ一つ、15 secondsかそこらごとに”stutters”するんだ。つまり、数百 msくらい noticeableな時間 pauseする感じ。この時もUIはconsistentな119-120 FPSを表示してるんだけどね。
faultがFirefoxの可能性もあるけど、pageではないかも。64 GBのRAMはあるけど、zillion tabs openしてるし。
page loadsしてから数 seconds後に画面が highlighted textみたいに light blueになるのはなんで？ Firefox on Mac OSで試したよ。
Ditto、Firefox on Win 11でも同じ現象だよ。
これにFrotzを追加して、text adventuresを遊べるようにしてよ。 amazingly、well doneだね！
どうも何か間違ってるのかもしれないけど、文字の線の太さがかなりinconsistentだね。「install」の2つのlの幅が違ったりするんだ。これはせっかく素晴らしいものが少し残念に見えちゃうな。（デスクトップのFirefoxとChromeで試したよ。）
これ詳しく見てみるね。kerningの問題かもしれない。EDIT: 正直これが何の問題か分からないな…。もしスクリーンショット送ってくれるなら、https://yaros.ae/の下にメールリンクがあるよ。
trackpad modeをdisabledにするとmouseがかなりうまく動くよ。iPhone Miniを使ってるんだけどね。trickが一つ: menu optionを選択するには、menu titleをtap-and-holdして、optionにdragしてからlet goするとselectできるんだ。Really cool！
オリジナルのMacでは、menu barのdrop downはtitleをクリックしただけじゃstay openしなかったんだ。mouse buttonをdownしたまま、menu itemをhighlightして、それからlet goしてactivateする必要があったんだよ。Not sure if that is how the Lisa worked.
Love both the project and the landing page design. Thank you for creating this!!
Thanks！You might also appreciate the 404 page on the alpha subdomain！And whatever you do, do NOT try to open this with MS Internet Explorer！I can’t imagine what might happen if you do that！
The font looks weird and uneven horizontally (some characters are “fatter” like if they were randomly bold). Is it supposed to look like that？ Firefox + Windows.
It treats any of my clicks as an attempt to select text, and draws everything with blue selection overlay (Firefox on Windows).
Otherwise, looks cool！
I thought the same, but it’s actually just the default Color Palette being applied. You can change it in the preferences.
This is amazing！Thanks for the excellent memories！
