WebContainerAPI
public.icon
@__cp20__: WebContainerAPIすごそうだなぁ 夢が広がリングだ
えっ?Browser内でNode.jsアプリが動く?? WebContainerAPIをTypeScriptで動かしてみた|yukimura1227 https://t.co/wEbbOuvwUN #zenn
https://i.gyazo.com/f539717ab275b43fd0a85a743ac43625.gif
概念
Webブラウザ上で実現されるWebAssemblyベースのNode.js環境
ブラウザ内でNode.jsを動かしているようなことができるAPI
StackBlitzはこれまで埋め込みでサポートしていたけど、それをもっと柔軟にカスタマイズして使うことができる
これでLINEbot専用開発環境みたいなのが作れそう
WebContainerAPIでLINEBot Emulator
入門
✅公式チュートリアル
✅えっ?Browser内でNode.jsアプリが動く?? WebContainerAPIをTypeScriptで動かしてみた
TypeScript + Vite + Fastify
🚨注意
stackBiltzの3rd-party-cookiesの有効化
これで一瞬はまった
プレス
@stackblitz: Today, after years of battle testing by millions of developers, in collaboration with browser vendors:
WebContainer API is now available to everyone.
Start building the next generation of interactive coding experiences at https://t.co/l7QZKdW6ll ❤️🧵 https://t.co/TCh0grOgRJ
https://blog.stackblitz.com/posts/webcontainer-api-is-here/
ニュース
Webブラウザ上でWebAssemblyベースのNode.js環境を実現する「WebContainer」がAPI提供開始。ブラウザ内ファイルシステム、HTTPサーバ、Node.js CLIなど
Dockerなどのコンテナ技術とは関係ありません
Node.jsが備えるJavaScriptランタイムの機能とHTTPサーバの機能などがWebブラウザ上で提供されるため、WebContainerの環境上でNode.jsベースのツールチェーンの実行や、Webアプリケーションの開発、テスト、実行などを外部のサーバに依存することなく、すべてWebブラウザ上で完結できるようになります。
StackBlitzは、例えばサーバサイドレンダリングのためのフレームワークであるNext.jsの実行や、GraphQLの実装などがWebブラウザ上で可能だとしています。
そしてStackBlitzはこのWebContainerをWebブラウザ上の高度なフレームワークとして位置づけ、同社自身がWebContainer上でVisual Studio Codeのような高度な機能を備えたコードエディタの「Codeflow IDE」や、記事執筆者向けにリアルタイムのプレビュー機能を備えた「Web Publisher」などを開発、提供しています。
APIが提供されたことで、WebContainerをプラットフォームにしたさまざまなアプリケーションの構築が可能になります。StackBlitzによると、SvelteのインタラクティブなチュートリアルはWebContainerを用いて開発されているとしており、ほかにもWebブラウザ内で実行されるChatGPTのようなAIアプリケーション、リッチな機能と表現を提供するローコード/ノーコード開発環境などが例に挙がっていました。
WebContainer APIや、その開発のためのCodeflowエディタなどはオープンソースではなくStackBlitzのプロダクトとして提供されていますが、個人利用やGitHub上でのパブリックリポジトリを利用した開発は無料となっています。
WebContainer API登場、WebAssemblyベースのOS「WebContainers」上で独自アプリケーションの構築が可能に
WebContainer APIは、WebContainersへのヘッドレスでのアクセスを実現するもので、開発者はWebContainers上に独自のユーザーアプリケーションを構築できるようになる。オープンソースで使用する場合は無料で、エンタープライズで使用する場合はサポートとライセンス提供するとしている。
同社は、WebContainer APIを使用してWebContainers上に「Codeflow IDE」を構築した。同IDEは、gitコマンド、デスクトップ拡張機能、ターミナルを備えたNode.js開発サーバをサポートする、Visual Studio Code IDEのフル機能バージョンとなっている。
WebContainer APIにはOpenAIが統合されており、Webブラウザ内で実行できるAIを活用したライブアプリケーションの開発も可能になる。
stackblitz