はじめに
テスト環境
- Windows 11（x64）
- Rojo 7.5.1（Roblox Studio）
- Rojo v2.1.2（Visual Studio Code）
前提条件
- Roblox Studio をインストールして Place を作成してある事
手順
Windsurf のインストール
手順1
Windsurf の公式ページにアクセスし、「Download the Windsurf Editor」を押す。
手順2
「Download for x64」を押して EXE ファイルをダウンロードする。
手順3
ダウンロードした EXE ファイルを実行して特に設定を変更する事なく「次へ」を押して進み、Windsurf をインストールして「完了(F)」を押す。
Windsurf の初期設定
手順4
インストールした Windsurf を実行して「Get started」を押す。
手順5
「Import from VS Code」を押す。
（今回は Visual Studio Code の設定を引き継ぎますが、Visual Studio Code がインストールされていない場合や、ゼロから初期設定を進めたい場合は「Start fresh」を押してください）
手順6
Visual Studio Code の設定をインポートしたい場合は「Import settings」に、Visual Studio Code の拡張機能をインポートしたい場合は「Import extensions」にチェックを入れて「Next」を押す。
手順7
好みのテーマを選択して「Next」を押す。
手順8
Windsurf のアカウントをまだ作成していない場合は「Sign up」を押してアカウントを作成し、既に作成してある場合は「Log in」を押して既存のアカウントにログインする。
Aftman のインストール
手順9
Windsurf へのログイン後、Aftman の GitHub のリリースページに行き、最新版の「aftman-{バージョン番号}-windows-x86_64.zip」をクリックしてダウンロードし、ダウンロード後にその ZIP ファイルを展開する。
（Aftman はコマンドラインツールをプロジェクト毎にインストールしたり、それらを切り替えたりする事の出来るツールチェーンマネージャーです）
手順10
スタートメニューを右クリックして「ターミナル」を押し、ターミナルを起動する。
手順11
「cd “{aftman.exe へのパス}”」を実行して aftman.exe のあるディレクトリに移動する。
そのディレクトリで「ls」を実行して aftman.exe が表示されれば OK。
手順12
「.\aftman.exe self-install」を実行して aftman をインストールする。
Rojo のインストール
手順13
ローカルで編集したい Roblox Studio の Place 用のフォルダを作成し、ターミナルを再起動してから「cd “{ローカルで編集したい Roblox Studio の Place 用のフォルダへのパス}”」を実行してそのディレクトリに移動する。
手順14
「aftman init」を実行してそのディレクトリに aftman.toml を作成する。
手順15
「aftman add rojo-rbx/rojo」を実行して Rojo をインストールする。
手順16
「aftman install」を実行して Rojo のインストールを完了する。
Rojo の拡張機能を Windsurf にインストールする
手順17
Windsurf に戻り、「Open Folder」を押して、ローカルで編集したい Roblox Studio の Place 用のフォルダを開く。
手順18
「Trust the authors of all files in the parent folder ‘○○’」にチェックを入れて「Yes, I trust the authors」を押す。
手順19
Windsurf の拡張機能のメニューで「rojo」と検索して「Rojo – Roblox Studio Sync」の「Install」を押す。
手順20
「Trust Publisher & Install」を押す。
既存の Place をローカルで再現する
手順21
ローカルで編集したい Place を Roblox Studio で開き、「FILE ＞ Download a Copy…」でその Place の RBXL ファイルをダウンロードする。
「Download a Copy…」が無い場合（その Place を Roblox のサーバーに保存していない場合）は「Save to File」か「Save to File As…」でその Place の RBXL ファイルをダウンロードする。
手順22
rbxlx-to-rojo の GitHub のリリースページに行き、最新版の「rbxlx-to-rojo.exe」をクリックしてダウンロードする。
手順23
ダウンロードした rbxlx-to-rojo.exe をダブルクリックして実行し、「手順21」でダウンロードした RBXL ファイルを選択して「開く(O)」を押す。
手順24
任意のフォルダを選択して「フォルダーの選択」を押し、src フォルダや default.project.json を生成する。
src フォルダや default.project.json が aftman.toml とは異なるディレクトリに生成された場合は、それらを aftman.toml と同じディレクトリに移動する。
Roblox Studio と Windsurf を同期する
手順25
Windsurf で「Ctrl + Shift + P」を押してコマンドパレットを開き、「rojo」と検索して「Rojo: Open Menu」を押す。
手順26
Rojo のメニューを開いた時に「Rojo Not installed」となっている場合は「Install Rojo now」を押す。
下の画像の状態になれば OK。
手順27
再び Rojo のメニューを開き、「▶ default.project.json」を押してローカルサーバーを起動する。
手順28
まだ Rojo を Roblox Studio にインストールしていない場合はクリエイターハブのストアからインストールするか、Windsurf 内の Rojo のメニューの「Install Roblox Studio Plugin」を押してインストールする。
手順29
Roblox Studio に戻り、「PLUGINS ＞ Rojo」で Rojo のメニューを開き、「Connect」を押す。
手順30
Roblox Studio 側と Windsurf 側で差分がある場合はそれらを確認して「Accept」を押す。
これで Windsurf でスクリプトに編集を加えると Roblox Studio にも反映されるようになりました。
