ハクソク

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

Show HN: DaedalOS – ブラウザ内のデスクトップ環境

365日前原文(github.com)

概要

daedalOS は、ブラウザ上で動作する先進的なデスクトップ環境。 豊富な ファイル操作機能 と多様なアプリケーションが統合。 AIチャット、エミュレータ、エディタ など多彩なツールを搭載。 Node.js/Yarn/Docker による簡単な開発・運用環境。 4年以上にわたる情熱的な開発プロジェクト。

daedalOS 機能概要

  • ブラウザ上で動作するデスクトップ環境 の提供
  • ファイルシステム と エクスプローラ 機能
    • 戻る・進む・履歴・上層移動・アドレスバー・検索機能
    • サムネイル／詳細表示切替
    • 内部・外部ドラッグ＆ドロップ対応
    • 読み込み進捗ダイアログ
    • ZIP書き込み、ZIP/ISO読み込み、7Z/GZ/RAR/TAR等の展開
    • IndexedDbへの書き込み
    • グループ選択・並べ替え・ドラッグでの配置変更
    • 音楽・画像・動画・エミュレータの状態アイコンの自動キャッシュ
  • コンテキストメニュー
    • 切り取り・コピー・ショートカット作成・削除・リネーム
    • ファイル追加・ディレクトリマッピング
    • 「開く」オプション、場所を開く、新規ウィンドウ、ターミナルで開く
    • ダウンロード、アーカイブ追加、ここで展開、壁紙設定、各種変換、プロパティ表示
    • 並べ替え、新規フォルダ・テキスト作成、スクリーンショット
  • キーボードショートカット
    • CTRL+C/V/X/A、Delete、F2、F5、Backspace、矢印、Enter
    • SHIFT+CTRL+R、SHIFT+F10、SHIFT+F12
    • フルスクリーン時：Windowsキー、Windows+R
  • ファイル情報ツールチップ、並べ替え、アイコン位置保持
  • ウィンドウ機能
    • サイズ変更・ドラッグ・最小化・最大化・閉じる
    • サイズ・位置・最大化状態の保持
    • 開閉アニメーション
  • スタートメニュー
    • 展開可能サイドバー
    • アプリリスト、ドキュメント/ピクチャ/ビデオショートカット、電源（セッション消去）
    • スポットライト効果、フォルダ対応、キーボードショートカット（SHIFT+ESCまたはフルスクリーン時Windowsキー）
  • タスクバー
    • ウィンドウプレビュー、フォーカス表示
    • 検索メニュー（最近のファイル表示）
    • AIチャットエージェント（Prompt API & WebLLM、要約・画像生成）
  • 時計
    • Web Workerで動作、OffscreenCanvas描画
    • NTPサーバー同期、システムクロック連携
    • 日付ツールチップ、カレンダーポップアップ
  • 壁紙＆スクリーンセーバー
    • 動的アニメ壁紙（OffscreenCanvas/Web Worker）
      • Waves、Hexells、Matrix、Coastal Landscape
      • 画像・動画から設定（フィル・フィット・ストレッチ・タイル・中央）
      • スライドショー、Astronomy Picture of the Day、AI生成壁紙（Stable Diffusion）
      • カスタムスクリーンセーバー、3D FlowerBox、3D Maze、Pipes
    • URLクエリパラメータでのロード例：/?url=/CREDITS.md、/?app=Browser

アプリケーション一覧

  • BoxedWine ：16/32bit Windowsアプリ実行
  • Browser ：HTMLサイト表示、CORS対応、ブックマークバー、favicon、Google検索、IPFS、chrome://dino
  • DevTools ：コンソール、Elements、Network、Resources、Sources、DOM
  • EmulatorJS ：多機種対応ゲームROM再生
  • IRC ：WebSocket経由IRCクライアント
  • js-dos ：DOSエミュレータ、自動セーブ、ウィンドウ自動リサイズ
  • Marked ：Markdownビューア
  • Messenger ：暗号化DMクライアント（Nostr Protocol NIP-04対応）
  • Monaco Editor ：コード/テキストエディタ、全ファイル形式、保存、Prettier整形
  • Paint ：画像作成・編集（bmp, gif, ico, jpg, png, tiff, webp）
  • PDF ：PDF表示・印刷、ページ送り・ズーム
  • Photos ：HEIF, JPEG XL, QOI, TIFF対応、フルスクリーン・ズーム
  • Ruffle ：Flash Playerエミュレータ
  • Stable Diffusion ：AIによる画像生成（ローカル実行）
  • Terminal ：ファイルシステム、オートコンプリート・履歴・パイプ、コマンド一覧、Git/Python/WebAssemblyサポート
  • Weather情報
  • eSheep ：アニメーション
  • Neofetch ：システム情報表示
  • TinyMCE ：WYSIWYGエディタ、rtf/whtml対応
  • Virtual x86 ：x86エミュレータ（img/iso）、自動セーブ、ウィンドウ自動リサイズ
  • Video Player ：YouTube再生、ショートカット（音量・シーク・スケール・全画面）
  • Vim ：テキストエディタ
  • Webamp ：Winamp互換オーディオプレーヤー、スキン・プレイリスト・ストリーミング・ビジュアライザー
  • ゲーム ：ClassiCube（Minecraft Classic互換）、DX-Ball（ブロック崩し）、Space Cadet Pinball（3Dピンボール）、Quake III Arena

開発・運用要件

  • Node.js、 Yarn 必須
  • 開発手順
    • yarn install
    • yarn build:prebuild
    • yarn dev
  • 本番運用手順
    • yarn install
    • yarn build
    • yarn serve
  • Docker対応
    • docker build -t daedalos .
    • docker run -dp 3000:3000 --rm --name daedalos daedalos
  • 注意点
    • yarn install時にdigital envelope routines::unsupportedエラー発生時は、NODE_OPTIONSに--openssl-legacy-providerを指定

補足・開発背景

  • デモサイト ：https://dustinbrett.com
  • 開発歴4年以上、個人の情熱プロジェクト
  • 目標 ：自分のPCにリモート接続したかのような体験をWeb上で再現
  • 今後も継続的な進化を目指す

Hackerたちの意見

すごく深いし、今まで見た中でこれよりも良く動いてる。しかも、これはスマホからの話だけどね。よくできてる！クエイクも動かせたし、まだキーボードを繋げてないけど。

└

そう言ってくれてありがとう！機能的に「深い」ものを作ろうと頑張ったんだ。いくつかのゲームやデモはデスクトップでの方が動作が良いけど、できるだけ多くのデバイスで動くようにしたよ。

これ、めっちゃ印象的だし、特にフォントのレンダリングやボタンのホバーエフェクトがExplorerにかなり近い！アニメーション壁紙の作り方も気になってちょっと探ってみたけど、カスタム開発ツールもいいサプライズだった。マイクロソフトがWindowsのアイコンを盗まれることをどれだけ気にしてるかは分からないけど、Facebook MessengerやVLC、VSCode、Chromiumから直接アイコンを使うのは、もっと注目されると問題になるかもね。

これ、すごい！よくできてるし、モバイルでもめっちゃスムーズに動く！ただ、ブラウザはちょっと制限があって、ほとんどのサイトが「埋め込み」を防ごうとしてるみたい。でも、ウェブコンテンツをプロキシして埋め込める方法があるよ：https://www.webfuse.com/use-case/embed-unembeddable-content これを試してみたいなら教えてくれれば、設定手伝うよ。

└

20ユーザーで月€529になるけど、もっとたくさんのユーザーをサポートする必要があるんじゃないかな？クライアントサイドのソリューションがあれば、無限にスケールできるのに、みんなが自分のnode.jsプロキシを運用する必要がなくなるのに。

└

ありがとう！実は、アドレスバーの右側に「プロキシ設定」ボタンを追加したんだ。これでいくつかの無料プロキシを選べるようになってる。プロトタイプのブラウザではこれで大丈夫だったけど、もし本格的なプロキシが必要なら、君が言ったようなものを考えるかも。

まさに魔法みたい！リアルすぎて、これがウェブサイトだってことを思い出すのが大変だった！こんなに多様なインターフェースのニュアンスを捉えるのに、かなりの時間がかかったんだろうね！

└

リアルだと言ってくれて嬉しい！今のレベルのディテールに達するまでに、確かに何年もかかったよ。毎日何かを追加したり調整したりしているところだ。

UIの正確さと細部へのこだわりがすごい！小さなウィンドウの境界線までちゃんと再現してる。いい仕事だね！

└

ありがとう！詳細にこだわってくれたことを嬉しく思うよ。小さな部分を正確にするのにかなりの時間をかけたからね。ちょっとしたことが気になるタイプだから、こういうプロジェクトで「正しい」感じを追求できるのは少し安心するんだ。

これ、めちゃくちゃクールだね！Vimみたいなプログラムがどう動いてるのか知りたい。エミュレーションなのかな？どちらにしても、素晴らしい楽しいプロジェクトにおめでとう！

└

ありがとう！Vim.jsや他の多くのアプリは、Emscriptenを使ってネイティブのソースコードをWebAssemblyで動かせるように移植したものなんだ。

これ、数年前に似たようなの作ったことあるけど、もっと洗練されてなかったけどね。そういう意味では、挫けずに頑張ったのは素晴らしいよ。俺がもらったフィードバックはほとんどネガティブだったし、特に実装に関するものじゃなくて、やらない方がいいって言われたのが一番ひどかった。もしこのプロジェクトを一生続けるつもりなら、応援するよ。クライアント専用バージョン（データはクライアント側のみ）、ファイルストレージサーバー（全ての処理はクライアント側だけど、永続データはサーバーに）、それとも直接Linuxログイン（ブラウザで実際のシェルを開く。Linuxの実行ファイルがソケットに接続してブラウザ上にウィンドウを開いて、X11のようにUIを提供するけど、もっと賢いUIホストで）を作るかで迷ってた。最近は、難しかった部分に取り組む実験をいくつかやってる。始めた頃からブラウザに追加されたことがたくさんあって、どれくらい前か正確には思い出せないけど、boot2geckoが必要な機能を追加してたのは覚えてる。最近は、APIを要求するウェブワーカーを立ち上げる実験をしてて、MessagePortをもらって関数を構築するコードを渡される仕組み。これで、デスクトップ機能を権限として提供できるように理論的には（でも実装はされてない）なってる。

└

すごいね、確かに。2012年にこれに似たものを作ったみたいだね。印象的だ！https://github.com/Lerc/notanos それからもう13年以上経ってるし、ウェブソケットが一般的に使えるようになる直前だったんだ。すごいね！何をすべきか、すべきでないかを議論する人に挫けないでね。世の中には自分の agenda を持ってる人や、自分の世界がどうあるべきかを狭く考えてる人がたくさんいるから。

└

みんなへ：否定的な意見は無視して。君たちは彼らが試みた以上のことをやってるよ。言うのは簡単だけど、ネガティブなフィードバックは強い感情反応を引き起こしがちだからね。応援してくれる人からフィードバックを求めてみて。俺は趣味でギターを弾いてるんだけど、一度録音を投稿したことがあって、誰かがひどいことを言ったんだ。それがすごく傷ついて、15年間何も録音しなかった。最近、妹とたくさん話してて、二人とも好きな曲があったからカバーを録音することにしたんだ。今、何晩もそれに取り組んでる。建設的なフィードバックをくれる人にデモをシェアしてるよ。続けてるけど、思ったより大変だ！でも、すごく楽しい。夢をあきらめないで。

└

Notanos、めっちゃかっこいいね、チェックしてみるよ。プロジェクトにはいくつかのマイルストーンがあって、そのたびに書き直しが必要になるかもしれないけど、続けて学んでいけたらいいな。AIの進歩で、10年から20年後にはこのプロジェクトがすごいものになるかもしれないけど、その頃には今の基準で全部がすごいものになってるかもね。

昔のサンのネットワークコンピュータ（JavaStation）を思い出すな。JavaOSベースで、Javaを広めるためのアイデアだったけど、明らかに問題があった。覚えてるのは…す…ご…く…遅かったこと。あと、クールなハードウェアがあったのも印象的。サンは、アップルがクールになる前のクールな存在だったし、SGIとも一緒にいたよね。でも、今のコンピュータは昔とは全然違うよね。

すごい仕事をしてるなって感心する一方で、実用的なシナリオが足りない気もする。例えば、自分のサーバーファイルを扱うためにサーバーにインストールしたいけど、OSからアクセスするためのフォルダをマウントする機能がないんだよね。SSHクライアントや、サーバー上で実行されるターミナルがあれば、自分のnode.jsアプリを動かせるのに。URLにアクセスされたときのために、ログイン・パスワードの機能もあったら助かるけど、それもない。ブラウザで何ができるかを見るのが目的だったのは分かるけど、もっと人に魅力的にするためには、実際のユースケースを見せてほしいな。よろしく！

└

自分のウェブサイトの利用ケースを超えて、役立つ機能を追加したいなら、まだまだ道のりは長いね。ローカルドライブを「マップ」する方法はいくつかあって、デスクトップの右クリックメニューの「ディレクトリをマップ」からできるし、ローカルでビルドすれば「public」フォルダに入れることもできるけど、君が言ってるのとは違うし、ブラウザの制限を回避するためにはサーバーコンポーネントが必要になると思う。君が挙げたユースケースに対する答えが最終的に出せるようになりたいけど、これはサイドプロジェクトだから、メインの目標はクライアントサイドのパーソナルウェブサイトなんだ。だから、2020年代にはその機能は期待できないかな、2030年代かもね。:-)

各ウィンドウのタイトルバーのアイコンボタンをダブルクリックすると閉じるのがすごくありがたい！いい細かいところだよね！Windows 3.11の時にこれに慣れて、それ以降のバージョンでもずっとそうだったけど、右に専用の閉じるボタンがあるのにね。最近のWindowsではこの動作はなくなったみたい。

└

今は、閉じるボタンをクリックするよりも、最大化ボタンをクリックする感じだと思う。個人的には同じくらい便利だけど、ずっと安全だね。もちろん、アプリはその動作をオーバーライドできるけど。

└

その小さなディテールを気に入ってくれて嬉しいよ！自分がWindowsで使っているものをできるだけ再現しようと頑張ったんだ。まだ知らなかったWindowsの機能を発見することもあって、それをプロジェクトに追加するのが楽しみなんだ。