Windows + Visual Studio で Siv3D for Web プログラミングを始める¶

Web 版 Siv3D を試験的な機能として提供しています。Web 版はいくつか注意点があるため、Siv3D の使用に慣れた中級者以上を対象としています。利用にあたって困ったことがあれば Siv3D Discord サーバの #web チャンネルで質問してください。

1. システム要件¶

1.1 開発者システム要件¶

Visual Studio で OpenSiv3D v0.6.9 プログラミングをするのに必要な開発環境です。


OS	Windows 10 (64-bit) / Windows 11
CPU	Intel または AMD 製の CPU
映像出力	モニタなど、何らかの映像出力装置があること
音声出力	何らかの音声出力装置があること
開発環境	emscripten compiler frontend 3.1.20
ブラウザ	Google Chrome 85.0 以降 Microsoft Edge 85.0 以降 Google Chrome 85.0 以降 Mozilla FireFox 78.0 以降 Safari 15.1 以降

Visual Studio のエディションについて

Windows 10, Windows 11 のパソコンで Siv3D プログラミングをする場合は「Visual Studio Community 2022（ビジュアル・スタジオ・コミュニティ 2022）」を使うのが便利です。これは世界中のプロフェッショナルのソフトウェア開発者が使う「Visual Studio」という統合開発環境の無料版です。学生、個人、少規模の開発であれば、Visual Studio の有料版と同じ機能を無料で使えます。

Visual Studio のインストール手順について

Visual Studio ダウンロードページから「Visual Studio 2022 コミュニティ」のインストーラをダウンロードし実行します。インストーラを実行すると、インストールするプログラミング言語や開発ツールを選択する次のような画面が出てきます。インストール項目の選択画面から「C++ によるデスクトップ開発」を選択します（右側の「インストールの詳細」に表示される項目は Visual Studio のバージョンによって異なるため、気にする必要はありません）。そのまま右下の「インストール」ボタンを押せば、C++ プログラミングに必要なツールのインストールがはじまります。

1.2 アプリ動作システム要件¶

OpenSiv3D v0.6.6 Web 版を使って開発されたアプリケーションを実行するのに必要な環境です。ゲームやアプリを配布するときの説明書に記載すると良いでしょう。


OS	Windows 7 SP1 (64-bit) / Windows 8.1 (64-bit) / Windows 10 (64-bit) / macOS Monterey 以降 / Ubuntu 20.04 LTS / Ubuntu 22.04 LTS
CPU	Intel または AMD 製の CPU
映像出力	モニタなど、何らかの映像出力装置があること
音声出力	何らかの音声出力装置があること
ブラウザ	Google Chrome 85.0 以降 Microsoft Edge 85.0 以降 Mozilla FireFox 78.0 以降 Safari 15.1 以降

2. 開発環境のセットアップ¶

2.1 コンパイラのインストール¶

emscripten 3.1.20 Installer をダウンロードして実行します

2.2 Visual Studio 拡張機能のインストール¶

Visual Studio MarkerPlace から .vsix パッケージをダウンロードして実行します

2.3 SDK のインストール¶

OpenSiv3D v0.6.6 Installer for Web をダウンロードして実行します
実行時に「Windows によって PC が保護されました」と表示された場合は、詳細情報を押して実行を押します

インストーラが自動的に行うこと

SDK の配置（デフォルトではドキュメントフォルダ）
SDK を配置したパスへのユーザ環境変数の設定
Siv3D プロジェクト用の Visual Studio プロジェクトテンプレートのコピー (通常は ドキュメント/Visual Studio 2022/Templates/ProjectTemplates/)
アンインストーラの登録

インストールした OpenSiv3D SDK を削除するには

OpenSiv3D SDK は、通常のアプリケーションと同様、Windows の「設定」からアンインストールします。

3. Siv3D プロジェクトの作成¶

Visual Studio のスタート画面で 新しいプロジェクトの作成 をクリックします
プロジェクトテンプレートの項目から OpenSiv3D(0.6.6)Web を選択し、次へを押します
プロジェクト名と保存場所を入力し（任意）、作成を押します

4. Siv3D アプリのビルド¶

プロジェクトを作成すると、サンプルプログラム (Main.cpp) が最初から用意されています
ビルド メニューからプロジェクトをビルドします。初回のビルドではエラーメッセージが表示されることがありますが、もう一度ビルドすると正常にビルドできます。
デバッグ メニューの デバッグの開始 でビルドしたプログラムを実行します
実行中のプログラムは、Esc を押すか、ブラウザタブを閉じると終了します

5. その他の注意事項¶

Web 版のシーンのリサイズモードはデフォルトで ResizeMode::Virtual であるため、ブラウザの拡大縮小に応じてシーンのサイズが変化します。これを防ぐには Scene::SetResizeMode(ResizeMode::Keep); と Scene::Resize(width, height); でシーンサイズを固定します