Runno

🚀 Runno

Runnoは、サンドボックス内で様々な言語のコードを実行するためのJavaScriptパッケージのコレクションです。WASI（Web Assembly System Interface）を活用し、サンドボックス内でコードを安全に実行します。これにより、新規開発者は複雑なツールをインストールすることなく、ブラウザ上でコードを実行できます。

👨‍💻 Runnoを使用する 👉 Runno.dev

📖 ドキュメント 👉 Runno.dev

🚀 クイックスタート

@runno/runtimeの使用

まず、@runno/runtimeをパッケージに追加します。

npm install @runno/runtime

Runno要素を使用する場所で@runno/runtimeをインポートします。最も簡単なのはエントリーポイントファイル（例：main.tsやindex.ts）です。

import "@runno/runtime";

インポートしたら、ページ上でRunno要素を使用できます。

<runno-run runtime="python" editor controls> print('Hello, World!') </runno-run>

ただし、コードを実行するには、いくつかのHTTPヘッダーを設定する必要があります。

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

これらは、クロスオリジン分離コンテキストを作成し、STDINの実装に使用されるSharedArrayBufferの使用を可能にします。

@runno/sandboxの使用

npm install @runno/sandboxでサンドボックスをインストールし、以下のようにコードを実行できます。

import { runCode } from "@runno/sandbox";

const result = await runCode("ruby", "puts 'Hello, world!'");

if (result.resultType === "complete") {
  console.log(result.stdout);
} else {
  console.log("Oh no!");
}

また、runFSを使用して仮想ファイルシステムに対して実行することもできます。

function runFS(
  runtime: Runtime,
  entryPath: string,
  fs: WASIFS,
  options?: {
    stdin?: string;
    timeout?: number;
  },
): Promise<RunResult>;

@runno/wasiの使用

Runnoを始める最も簡単な方法は、WASI.startクラスメソッドを使用することです。これにより、必要なすべての設定が行われ、Wasmバイナリが直接実行されます。ただし、これはメインスレッドで実行されるため、完了するまでブラウザの対話的な使用が中断されます。

import { WASI } from "@runno/wasi";

//...

const result = WASI.start(fetch("/binary.wasm"), {
  args: ["binary-name", "--do-something", "some-file.txt"],
  env: { SOME_KEY: "some value" },
  stdout: (out) => console.log("stdout", out),
  stderr: (err) => console.error("stderr", err),
  stdin: () => prompt("stdin:"),
  fs: {
    "/some-file.txt": {
      path: "/some-file.txt",
      timestamps: {
        access: new Date(),
        change: new Date(),
        modification: new Date(),
      },
      mode: "string",
      content: "Some content for the file.",
    },
  },
});

より完全な例はsrc/main.tsで確認できます。

@runno/mcpの使用

MCPサーバーの設定に応じて、以下のようにRunnoを追加できます。

{
  "mcpServers": {
    "runno": {
      "command": "npx",
      "args": ["@runno/mcp"]
    }
  }
}

✨ 主な機能

• 多言語対応：Python、Ruby、JavaScript、SQLite、C、C++、PHPなど、複数の言語のコードを実行できます。
• ブラウザでの実行：新規開発者が複雑なツールをインストールすることなく、ブラウザ上でコードを実行できます。
• サンドボックス環境：コードを安全に実行するためのサンドボックス環境を提供します。
• 仮想ファイルシステム：サンドボックス内に仮想ファイルシステムを提供し、簡単なファイル操作をサポートします。

📦 インストール

各パッケージはnpmを使用してインストールできます。例えば、@runno/runtimeをインストールするには以下のコマンドを実行します。

npm install @runno/runtime

💻 使用例

基本的な使用法

@runno/runtimeを使用してブラウザ上でPythonコードを実行する例です。

<runno-run runtime="python" editor controls> print('Hello, World!') </runno-run>

高度な使用法

@runno/sandboxを使用して、仮想ファイルシステム上でRubyコードを実行する例です。

import { runCode } from "@runno/sandbox";

const result = await runCode("ruby", "puts 'Hello, world!'");

if (result.resultType === "complete") {
  console.log(result.stdout);
} else {
  console.log("Oh no!");
}

📚 ドキュメント

各パッケージの詳細なドキュメントは以下のリンクから参照できます。

• @runno/runtime
• @runno/sandbox
• @runno/wasi
• @runno/mcp

🔧 技術詳細

Runnoは、WASI（Web Assembly System Interface）を活用して、サンドボックス内でのコード実行を可能にしています。WASIは、プログラムがオペレーティングシステムと相互作用するための標準的な方法を提供します。これをエミュレートすることで、JavaScript内で仮想的なファイルシステムとオペレーティングシステムを提供できます。

サンドボックスは、主にWebAssemblyをV8内で実行することでコードを分離しています。WebAssemblyには、実行がすべて仮想化されている、コードとデータが分離されている、外部とのインターフェースがユーザーが提供する関数を介してのみ行われるなどの特性があります。

📄 ライセンス

RunnoはMITライセンスのオープンソースソフトウェアです。ライセンスの全文は以下の通りです。

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND

開発について

パッケージ

このリポジトリは、lernaを使用していくつかのパッケージに分割されています。

• website：Runnoのウェブサイトで、使い方やサンプルが含まれています。
• runtime：iframeを使用せずにRunnoを使用するためのWebコンポーネントとヘルパーを提供するライブラリです。
• wasi：ブラウザでWASIバイナリを実行するためのライブラリです。
• sandbox：任意のJavaScriptランタイムからプログラミング言語を実行するためのサンドボックスです。
• mcp：sandboxをベースに構築されたMCPサーバーの実装です。

ローカルでの実行

以下のコマンドを実行すると、すべてが正常に動作するはずです。

npm install
npm run bootstrap
npm run build  # 依存ライブラリがビルドされていることを確認
npm run dev

テスト

Runnoには、主にエンドツーエンドの統合テストに焦点を当てた小規模なテストスイートがあります。wasiパッケージには最も広範なテストスイートがあり、WASI preview1の実装を包括的にテストしています。他のパッケージは、主に動作を確認するためのいくつかのスモークテストがあります。

Runnoについて

制限事項

利用可能なプログラミング言語は、WASIを使用してWeb Assemblyにコンパイルされたものに制限されています。より多くの言語を利用可能にするためには、お気に入りのプログラミング言語ツールをWeb Assemblyにコンパイルし、WAPMにアップロードすることが有効です。

WASIは完全なLinux環境を提供しないため、ほとんどのシステムベースのインターフェースは機能しません。また、Runno環境内でパッケージやモジュールをインストールすることも困難です。コードをインポートする場合は、サンプルと一緒にそのコードを提供する必要があります。

Runnoは、STDINとSTDOUTを使用する小規模なコードサンプルに最適です。これは、大学のCS1コースで教えられるようなものが典型的です。ただし、これはシステムの本質的な制限ではありません。Runnoとそれが依存するツールのエコシステムにさらに努力が注がれるにつれて、より多くの機能が利用可能になるでしょう。

セキュリティ

RunnoはMITライセンスのオープンソースソフトウェアであり、ライセンスには以下のように明記されています。

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND

私はこの保証のなさを守ります。ただし、サンドボックスはかなり良いと思い、さらに良くしたいと考えています。これは楽しい作業です。

Runnoのサンドボックスがコードを分離する主な方法は、WebAssemblyをV8内で実行することです。WebAssemblyには、実行がすべて仮想化されている、コードとデータが分離されている、外部とのインターフェースがユーザーが提供する関数を介してのみ行われるなどの特性があります。

最後の点（3）が最も重要です。WebAssemblyバイナリを実行し、何も関数を提供しない場合、それは何もできません。まるで窓やドアのない箱のように、何も出入りできません。

ただし、何かを出入りさせたい場合もあります。それがWASIの役割です。WASIは、WebAssemblyバイナリがシステムコールのように呼び出すことができる標準的な関数セットを定義するインターフェース（WebAssembly System Interface）の仕様です。主に、ファイルの読み書きなどの操作を行います。

Runnoの核心は、WASI preview1の実装です。TypeScriptで実装された非常に軽量なオペレーティングシステムのようなものです。仮想ファイルシステムを持ち、基本的にはメモリ内に格納されたバイト配列で構成される仮想ファイルで構成されています。したがって、実際のファイルシステムにはアクセスしません。また、ネットワークアクセスなどもありません。

つまり、1）仮想マシンであり、2）仮想ファイルシステムを持ち、3）ネットワークアクセスがないということです。これはかなり良いと思います。

この仕組みには多くのレイヤーがあり、私はそれがかなり良いと思います。たまに、玉ねぎはセキュリティに良いと聞きます。もし私の玉ねぎに穴があると思ったら、教えてください。興味があります！メールでsecurity@taybenlor.comまで。

感謝の意

Runnoを可能にするために、多くのオープンソースプロジェクトと標準が使用されています。これらには以下のものが含まれます。

• WASIとWebAssembly：様々なワーキンググループの多くの人々、特にBytecode Allianceの皆さんが、WASMとWASIを今日のようにしてくれました。本当にありがとうございます！
• XTerm.js：ブラウザで実行できる完全な機能を備えたターミナルです。
• CodeMirror：統合が常に楽しい素晴らしいウェブベースのコードエディターです。
• Wasmer、WAPM、WebAssembly.sh：Wasmerチームは、Web Assemblyを実行するための多くの素晴らしいツールを構築しています。WebAssembly.shは素晴らしいインスピレーションと出発点でした。
• 多くのウェブ開発コミュニティの方々が、ネイティブコードとAPIをブラウザ内で正常に実行するために行った膨大な作業。

ウェブ用の互換性レイヤーを構築してくれた皆さんに感謝します。新しいソフトウェアをウェブ上で実行できるたびに、ウェブはより良いプラットフォームになります！

また、私がいつもWASMについて話し続けるのを我慢してくれた友人たちにも大きな感謝を送ります。特にKatie、Jesse、Jim、Odin、Hailey、Sam、そしてもう一人のSamに感謝します。