Chapter 47

Web 向けの開発

このチャプターの目次

Siv3D Web 版 (experimental) を利用すると、Web ブラウザで動作可能な Siv3D アプリケーションを C++ だけで開発できます。

1. Visual Studio で Web 向け開発を始める (Windows)


OS	Windows 10 (64-bit) Windows 11
CPU	Intel もしくは AMD 製の CPU
映像出力	モニタなど、何らかの映像出力装置があること
音声出力	何らかの音声出力装置があること
開発環境	Microsoft Visual C++ 2022 17.2 (インストーラ内で「C++ によるデスクトップ開発」を追加インストール)

https://github.com/nokotan/EmscriptenInstaller/releases/tag/v0.0.3 から Emscripten.exe をダウンロードして実行します
実行時に「Windows によって PC が保護されました」と表示された場合は、詳細情報 を押して実行を押します

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

インストールした Emscripten 関連ツールを削除するには

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

Visual Studio Market Place から Emscripten Extension Pack for Visual Studio をダウンロードして実行します
インストールする項目のすべてにチェックを付け、Modify を押します
一部の項目のインストールでエラーが表示されることがありますが、無視して構いません

デフォルトでは、engine\ と example\ のすべてのファイルが最終出力に同梱されるため、Web アプリケーションに関連するファイルのサイズは Release ビルドで合計数十 MB 程度になります。そうした状態のアプリケーションを Web で公開すると、アクセスした利用者がファイルのダウンロードに時間がかかってしまいます。実際にアプリケーションを公開する際は、不要なファイルを削除する必要があります（参考: チュートリアル 41 | アプリの公開)。Web 版の出力ファイルのサイズは、最小で数 MB 程度 まで削減することができます
engine\ と example\ 以外のフォルダを同梱対象にする方法は OpenSiv3D for Web「Web 固有の注意点」を参照してください
シーンのリサイズモードはデフォルトで ResizeMode::Virtual であるため、ブラウザの拡大縮小に応じてシーンのサイズが変化します。これを防ぐには Scene::SetResizeMode(ResizeMode::Keep); でシーンサイズを固定します
通常の Siv3D と Web 版の差異については OpenSiv3D for Web「Web 固有の注意点」を参照してください

OpenSiv3D for Web の「はじめる - Visual Studio Code」を参照してください。