00:00:00これはElectroBunです。クロスプラットフォームのデスクトップアプリ用フレームワークで
00:00:05Electronよりもバンドルサイズが格段に小さく、TauriのようにRustを書く必要もありません
00:00:11Bunのパワーと独自のC++ラッパーにより、ネイティブ性能を実現しています。Node.jsもV8も使いません
00:00:18しかし、全OSでChromiumを使う代わりに、システムのネイティブWebViewを使うという点は
00:00:22真のクロスプラットフォームアプリを構築する上で、障壁にはならないのでしょうか?
00:00:27チャンネル登録をして、さっそく詳しく見ていきましょう
00:00:32昨年、Bunがフルスタックの実行ファイルを発表して以来
00:00:36Electronに代わる優れた選択肢が登場することに、私はとても期待していました
00:00:40しかし、Anthropicによる買収後(これについては動画の後半で触れますが)
00:00:44Bunチームがその方向に進む可能性は低くなってしまったようです
00:00:49そこでBlackboardのYoav氏が、Bun版Electronに最も近い「ElectroBun」を開発しました
00:00:55彼はすでに、ブラウザ・端末・エディタを統合した「Colab」や
00:01:01Qwen搭載の読み上げアプリ、さらにはWebGPUでDoomを動かすなど、面白いものを制作しています
00:01:07では、シンプルなプロジェクトでの使い方を確認していきましょう
00:01:12ElectroBunを初期化すると、アプリの仕組みを理解するための
00:01:17様々なテンプレートを利用できます。基本的なメモ帳アプリや、マルチウィンドウアプリ
00:01:22さらにはブラウザでドキュメントを開くトレイアプリなどがあります
00:01:26ElectroBunはWeb技術をサポートしているため、お好みのJSフレームワークを使用可能です
00:01:31Svelte、Vue、Solid.js、さらにはAngularまで対応しています
00:01:35今回は理解を深めるために、基本的なプロジェクトをゼロから作ってみましょう
00:01:40ここに、ElectroBunを使ってネイティブなMacアプリに変換する
00:01:45シンプルなBun Reactアプリがあります。ElectroBunはインストール済みで
00:01:49開発用ビルドを開始するためのスクリプトと
00:01:53アプリをビルドするためのスクリプトも用意してあります
00:01:55実際、この "type": "module" は使わないので削除してしまいましょう
00:01:59プロジェクトのルートに、ElectroBunの設定ファイルを作成しました
00:02:03現在はアプリ名、識別子、そしてBunビルドのエントリポイントが記述されています
00:02:09まだエントリポイントを作成していないので、今から作っていきます
00:02:12sourceディレクトリ内にBunフォルダを作り、index.tsファイルを作成します
00:02:17ここでBrowserWindowクラスをインスタンス化し、引数にタイトル(タイトルバーのテキスト)と
00:02:22URL(アプリの初回ロード時に遷移する場所)を指定します
00:02:28「bun start」を実行するとアプリが起動し、正しいタイトルが表示されるはずですが
00:02:32今は何も表示されません。これはBunがアプリをビルド(TypeScriptからJSへ変換、
00:02:36ツリーシェイキングなど)した後、ファイルが別のディレクトリに配置されるためで
00:02:41エントリポイントからそこを正しく参照する必要があるからです
00:02:46現状では、その指定がうまくできていません
00:02:48修正するには、ElectroBun設定ファイルを開き、まず "views" オブジェクトを追加して
00:02:53ElectroBunがアクセスする新しいビューを定義します
00:02:57ビューの名前を "main" とし、エントリポイントを index.html に設定します
00:03:02このHTMLは、アプリの実行に必要なすべてのJavaScriptとCSSを
00:03:06保持しているフロントエンドJSを参照しています
00:03:09ビルド設定の詳細は、ElectroBunのドキュメントで確認できます
00:03:13メインビューの設定が完了したので、source/bun/index.tsを開き
00:03:17URLを修正して、views内のmainディレクトリを参照するように更新します
00:03:23これでアプリをビルドすると、期待通りにすべて動作するはずです
00:03:28さらに、タイトルバーを非表示にするプロパティを追加すれば、よりアプリらしくなります
00:03:34また、ApplicationMenuオブジェクトを使って独自のカスタムメニューを作成することも可能です
00:03:39準備ができたら本番用にビルドします。17MBのDMGファイルが作成され
00:03:44アプリ本体は65MBになります。Hello WorldレベルのElectronアプリと比較すると
00:03:50Electronは271MBもあり、ElectroBunの4倍以上のサイズであることがわかります
00:03:56ElectroBunはOSネイティブのWebView(MacならWebKit、Windowsなら
00:04:01Edge WebView2、LinuxならWebKitGTK)を利用してビルドされるため
00:04:08クロスプラットフォーム開発時には、WebViewがサポートしていない機能を考慮する必要があります
00:04:11一応、Chromium Embedded Framework(CEF)もサポートしており
00:04:16各プラットフォームでの一貫性を保てますが、これだとChromiumが丸ごと含まれるため
00:04:22サイズや性能に影響し、Bunを使っている点を除けばElectronとほぼ同じになってしまいます
00:04:27他にも、まだ紹介していないクールな機能がいくつかあります
00:04:32各WebViewを独立したプロセスで動かすアウトオブプロセスiframeアーキテクチャや
00:04:38シームレスなIPCを実現する型付きRPC、ZSTD圧縮、配布サイズを抑える
00:04:44自己解凍ラッパー、コード署名など、盛りだくさんです
00:04:48ただ、先ほどのデモアプリを作成中にいくつか課題にも直面しました
00:04:54特にエントリファイル周りのドキュメントが不足していたり
00:04:58ページリロード時に画面がちらついたり、インスペクタを使うとレイアウトが崩れたりしました
00:05:03ElectroBunは非常に新しく、最初のコミットは今年2月頃のようです
00:05:09これらの問題は、将来的に修正されていくはずです
00:05:13むしろ修正されることを切に願っています。というのも、Bunチームは
00:05:19Anthropicによる買収以降、Electronの代替を作る方向ではなく
00:05:25CLIや実行ファイルの改善に注力しているからです。現状、Bunベースの
00:05:31デスクトップツールとしては、ElectroBunが最も有力な選択肢と言えるでしょう
00:05:37もし買収の件や、Bunチームの今後の方向性について詳しく知りたい方は
00:05:42その詳細を解説しているJamesの動画をぜひチェックしてみてください