Udonarium Axe を Cloudflare 上に設置する

Sat, 12 Sep 2026 17:00:00 +0900

はじめに

「Udonarium（ユドナリウム）」の新しい拡張版「Udonarium Axe（ユドナリウムアックス）」が登場し、これまでになかった機能や気の利いた機能拡張で、SNSでもたちまち話題になりました。

早速ユドナリウムアックス触ってみた！めっちゃ色々機能あって楽しい！
地形で作ったウォール+暗闇+照明追従で、移動に合わせてマスクを剥がせてとても良い！
ちゃんと光源の範囲指定（薄暗いと明るいも）も細かくできて大満足〜！٩(´꒳`)۶#TRPG #ユドナリウムアックス #dndj #ダンドラ https://t.co/8Fl5g1vGr5 pic.twitter.com/2XSjkIOmop
— Ange ໒꒱.* (@Ange_trpg) August 22, 2026

ぜひ自分の卓でも使ってみたい！という方は多いかと思いますが、公式サイトで公開されているデモ版はあくまで動作確認用で、ここで部屋を立てて遊ぶのは推奨されていません。各自でサーバーを準備して、インストールする必要があります。

僕はこの Blog の設置に元々使っていた Cloudflare のアカウントがあったので、こちらに Udonarium Axe をインストールしてみました。また、URL を覚えやすい短いものにするために、独自ドメイン上で運用をしています。

僕自身の備忘録と、どなたかのお役に立てればと思い、導入手順をメモしておくことにしました。

必要なもの

SkyWayのアカウント
Cloudflareのアカウント
- ※他のサービスでもインストールできますが、今回は Cloudflare を使用します。

簡単に説明すると、以下の3つの作業が必要です。

SkyWay の設定（プレイヤー同士が通信を行うのに必要）
Udonarium Backend のインストール（Udonarium Axe が内部的に SkyWay を使うのに必要）
Udonarium Axe 本体のインストール

SkyWay って何？

「SkyWay（スカイウェイ）」は、ブラウザ同士で映像・音声やデータをリアルタイムにやり取りするための通信サービスです。Udonarium Axeでは、参加者同士でコマやチャットなどのゲーム情報を同期するために利用します。ゲームデータは基本的に参加者のブラウザ間で直接やり取りされ、SkyWayは主にその接続を仲介します。

Cloudflare って何？

「Cloudflare」は、Webサイトの公開やプログラムの実行、通信の高速化、セキュリティ対策などを提供するクラウドサービスです。Udonarium Axe を実際にインストールする場所となります。

同様のサービスであれば Cloudflare でなくても Udonarium Axe のインストールは可能です。設定手順や画面の表示は違うかもしれませんが、基本的に行うべきことは同じなので、この記事も参考になるかもしれません。

使用料金は？

どちらのアカウントも無料で作成することができ、仲間内で使用する分には十分な無料枠があります。また、今回の用途では自動的に課金されることはありません。（2026年9月現在）

ただし、商用サービスとして Udonarium Axe のサーバー運用をする場合は、SkyWayを商用プランに切り替える必要があります。また、アクセス数が増えてくると Cloudflare のプランの見直しも必要になるでしょう。

SkyWay: 料金: https://skyway.ntt.com/ja/pricing/

Cloudflare: 料金プラン: https://www.cloudflare.com/ja-jp/plans/

詳しい人向けの追加情報

Udonarium Axe 本体（フロントエンド）は静的ファイルなので Cloudflare Pages に置き、SkyWay の認証トークンを発行するバックエンドには Cloudflare Workers を使っています。

Fork した Git リポジトリからデプロイをしたい場合は手順が異なります。（この記述の意味が分かる方には不要だと思われますので、割愛しています。）一度 Pages に置いて運用を始めた場合、Git に切り替えるには別のプロジェクトを作成する必要があります。今回は毎回静的ファイルを差し替える形でバージョンアップを行う運用です。

記事内では独自ドメインの設定をしていますが、すでに Cloudflare の DNS で独自ドメインを管理している場合は、DNS レコードを事前に手動作成する必要はありません。後ほど Pages / Workers 側から Custom Domain を追加すると、Cloudflare が必要な DNS レコードと HTTPS 証明書を作成してくれます。逆に、CNAME を先に手動で作っておかない方が安全です。Worker の Custom Domain は、既存 CNAME があるホスト名は追加できないようです。

SkyWay の設定

Udonarium Axe は参加者間の通信に SkyWay を利用します。アカウントをお持ちでない場合は、こちらから作成してログインします。

SkyWay Console: https://console.skyway.ntt.com/

SkyWay のプロジェクトを作成

新しいプロジェクトを作成します。アカウントの作成直後であれば、自動的にプロジェクトの作成へと進みます。画面の左上の「プロジェクトを作成」からでも作成できます。

今回は分かりやすく、udonarium-axe という名前にしました。

SkyWay のアプリケーションを作成

作成したプロジェクト内で「アプリケーションを作成」を選びます。

こちらも分かりやすくudonarium-axe という名前にしました。

SkyWay のプロジェクト名・アプリケーション名は管理用の名前なので、どんな名前でも問題ありません。また、後から変更することもできます。

作成後、以下の2つを確認します。

アプリケーションID
シークレットキー

この2つは後ほど Cloudflare で設定します。必要になったら、コピーボタンでコピーすると入力が楽です。

重要: シークレットキーは秘密情報です。誰にも（AIにも）教えないようにしてください。

Cloundflare のアカウント作成

Cloudflare のサインアップの画面から新たにアカウントを作成します。今回はアカウントがあれば作業を進められますが、セキュリティ対策やアナリティクスなど他にもできる機能や設定は色々とありますので、興味のある方は調べてみてくださいね。

また、この記事では英語版の画像を使用して説明をしていますが、表示言語を日本語にすることも可能です。画面右上のアカウントのメニューから設定します。

Udonarium Backend のインストール

Udonarium Axe の本体だけを設置しても動きません。SkyWay を使用するための機能も Cloudflare にインストールする必要があります。

今回は公式で案内されている udonarium-backend を使用します。

Cloudflare Worker を作成する

Cloudflare Workers は、自分でサーバーを用意・管理することなく、インターネット上で小さなプログラムを実行できるサービスです。

Cloudflare にログインして、Workers & Pages を開きます。場所が分からなければ、こちらのURLをお試しください。

Cloudflare Workers & Pages

「Create application」から Worker を作成します。

どんな風に Worker を作成するのか聞かれるので、今回は「Start with Hello World!」を選択します。

この Worker の名前をつけます。今回は、udonarium-axe-api という名前にしました。この名前は Udonarium Axe が内部的に使用する名前で、最終的な URL には出てこないので、管理しやすい名前をつけておけば大丈夫です。

udonarium-axe-api 以下の URL は Cloudflare のアカウントを作成した際に設定したものが表示されているはずです。（この時点では変更できません）

名前をつけたら右下の「Deploy」ボタンを押して一旦 Worker を作成します。

Udonarium Backend のコードに置き換える

先ほど作成した Worker は、呼び出されると「Hello World!」と返事をする機能しかありません。なので、これを Udonarium Backend の機能と差し替えます。

作成した Worker の画面の右上の「Edit code」ボタンを押します。

最初から入っている Hello World のコードをすべて削除し、先ほど開いておいた cloudflare-workers/index.js の内容をそのまま貼り付け、「Deploy」ボタンを押します。

Worker に SkyWay の ID などを設定する

先ほど SkyWay でプロジェクトを作成したときに取得した ID などを、このプログラムで使えるように設定します。 Worker の Settings を開き、「Runtime variables and Secrets」の項目の横の「+ Add variables」ボタンをクリックします。

以下の3つの値を追加します。

名前	種類	値
`SKYWAY_APP_ID`	Text	SkyWay のアプリケーションID
`SKYWAY_SECRET`	⚠️ Secret	SkyWay のシークレットキー
`ACCESS_CONTROL_ALLOW_ORIGIN`	Text	最終的な Udonarium Axe のURL

⚠️ 重要

※ SKYWAY_SECRET は必ず「Secret」のチェックをつけて登録してください。

※ ACCESS_CONTROL_ALLOW_ORIGIN は、すでに Udonarium Axe の URL を決めている場合はこの時点で入力できますが、そうでなければこの後 URL を取得するので、空欄にしておいてください。

Worker に独自ドメインを設定する（オプション）

独自ドメインを使用したい人だけが必要な設定です。設定しなくても Udonarium Axe は動きます。

Worker のページから「Domains」を選択します。

独自ドメインが Cloudflare に設定済みであれば、このように選択可能なドメイン名として表示されます。また、このタイミングで新しい独自ドメインを購入することもできます。（有料）

このドメインで使用するホスト名（今回は axe-api としてみました）を入力し、「Add domain」ボタンを押します。

Udonarium Backend の動作確認

作成した Worker（Udonarium Backend）の動作確認をします。

Worker のページの上部に表示されている URL を確認し、その URL に /v1/status を追加したものをブラウザで開きます。

僕の場合は独自ドメインを設定したので、以下の通りになります。

https://axe-api.catmans.house/v1/status

※ axe-api.catmans.house の部分を、みなさんの URL に差し替えてお試しください。画面に、OK と表示されれば、正常に動作しています。

Udonarium Axe 本体のインストール

ここまでで Udonarium Axe を動かすための前準備が完了したので、いよいよ本体をインストールします。

Udonarium Axe を Cloudflare にアップロード

再び Cloudflare の Workers & Pages を開きます。

Cloudflare Workers & Pages

「Create application」ボタンを押して新しいアプリケーションを作成します。

今回は「Upload your static files」を選択します。

この後表示されるウィンドウ内に、先ほど開いて（解凍して）修正した zip ファイルの中身を全てドラッグ&ドロップします。

例えば、ダウンロードした zip ファイル名が axe_1.47.0.zip の場合、これを開くと axe_1.47.0 という名前のフォルダができると思います。（これまでの手順でこの中の assets/config.json を修正しているはずです。）このフォルダを丸ごとドラッグ&ドラッグしてください。

ファイルをアップロードしている間に、名前の設定を行います。独自ドメインを使用しない場合、ここで設定したものが実際にアクセスする URL の一部となるのでご注意ください。

Udonarium Backend の設定を更新

この時点で Udonarium Axe 本体を実行するための URL が発行されています。今度は、この URL から Udonarium Backend への接続が可能になるように、先ほど空欄にしておいた ACCESS_CONTROL_ALLOW_ORIGIN を更新します。

Udonarium Axe 本体の URL は、ページの上部に表示されています。（※独自ドメインを使用したい場合は、先に 3-4. の設定を済ませてください。）

Cloudflare の Workers & Pages を開き、作成済みの Udonarium Backend を開きます。

Cloudflare Workers & Pages

「Settings」を開き、ACCESS_CONTROL_ALLOW_ORIGIN に先ほど取得した Udonarium Axe 本体の URL を入力します。

Udonarium Axe に独自ドメインを設定する（オプション）

独自ドメインを使用したい人だけが必要な設定です。設定しなくても Udonarium Axe は動きます。

先ほどと同様に、Udonarium Axe 本体の「Domains」から独自ドメインの設定をします。

設定後、ページの上部に表示された新しい URL を使用してUdonarium Backend の設定を更新をしてください。僕の場合は https://axe.catmans.house という短い URL でアクセスできるようになりました。

接続テスト

画面が表示されただけではなく、実際に通信できるかも確認しておくと安心です。

Udonarium Axe 本体の URL をブラウザで開く
部屋を作成する
別のブラウザ、シークレットウィンドウ、または別PCから同じ部屋へ参加する
コマやチャットなどが同期することを確認する

ここまで動けば、全ての設定が正常に完了しています。良い冒険を！⸜(๑’ᵕ’๑)⸝

バージョンアップの方法

Udonarium Axe は非常に活発に開発が進められており、バージョンアップが頻繁に行われています。ここでは新バージョンをインストールする手順を記載しておきます。

基本的には Udonarium Axe 本体だけのバージョンアップで大丈夫だと思いますが、更新履歴に Udonarium Backend のバージョンアップが必要と書かれていた場合は、こちらも別途バージョンアップする必要があります。

Udonarium Axe 本体のバージョンアップ

Udonarium Axe 本体の新しいバージョンが公開された場合は、以下の手順で更新できます。基本的にインストール時の手順と同じですが、今回は新しいアプリケーションを作成するのではなく、既存の Udonarium Axe 本体の更新を行います。

大まかな作業手順は以下の通りになります:

新しいバージョンの zip ファイルをダウンロード（リリースノートはこちら）
assets/config.json の backend.url を自分の Udonarium Backend の URL に変更
Cloudflare の Udonarium Axe を開いて内容を新しいファイルで書き換え

3.の手順の詳細説明

Cloudflare の Workers & Pages を開き、作成済みの Udonarium Backend を開きます。

Cloudflare Workers & Pages

画面右上の「New Deployment」ボタンを押すと、新しいファイルをアップロードするためのウィンドウが開きます。

1〜2の手順で開いて（解凍して）修正した zip ファイルの中身を全てドラッグ&ドロップします。

例えば、ダウンロードした zip ファイル名が axe_1.53.0.zip の場合、これを開くと axe_1.53.0 という名前のフォルダができると思います。（2の手順でこの中の assets/config.json を修正しているはずです。）このフォルダを丸ごとドラッグ&ドラッグしてください。

右下の「Deploy」ボタンを押してファイルのアップロードが完了すれば作業終了です。

Udonarium Backend のバージョンアップ

通常の Udonarium Axe のアップデートであれば、毎回 Udonarium Backend を更新する必要はありません。

ただし、Udonarium Axe のリリースノートなどに、

Backend の更新が必要
API の仕様変更
SkyWay 関連の変更

などが書かれている場合は、udonarium-backend 側の更新も確認してみてください。

大まかな作業手順は以下の通りになります:

新しいバージョンの zip ファイルをダウンロード
cloudflare-workers/index.js を開いて中身をコピー
Cloudflare の Udonarium Backend のコードを上書き（インストール時と同じ手順でできます。）

前のバージョンに戻したい場合は？

Cloudflare は以前公開されたバージョンを全て保持しています。新バージョンで動作不良などがあった場合は、すぐに安定している以前のバージョンに戻せます。udonarium-backend も Udonarium Axe 本体も、簡単に前のバージョンに戻せます。

大まかな作業手順は以下の通りになります:

Cloudflare Workers & Pages からバージョンを戻したいプロジェクトを開く
「Deployment」をクリック
「Version History」の一覧から戻したいバージョンを選択（一番上が最新のバージョンです）
「…」をクリックすると出てくるサブメニューから「Rollback」を選択
確認画面が出るので、右下の「Rollback」ボタンを押す

Udonarium-Axe on 猫男の家

Udonarium Axe を Cloudflare 上に設置する

はじめに

必要なもの

SkyWay って何？

Cloudflare って何？

使用料金は？

詳しい人向けの追加情報

SkyWay の設定

SkyWay のプロジェクトを作成

SkyWay のアプリケーションを作成

Cloundflare のアカウント作成

Udonarium Backend のインストール

最新版の Udonarium Backend の入手

Cloudflare Worker を作成する

Udonarium Backend のコードに置き換える

Worker に SkyWay の ID などを設定する

Worker に独自ドメインを設定する（オプション）

Udonarium Backend の動作確認

Udonarium Axe 本体のインストール

最新版の Udonarium Axe を入手

Udonarium Axe を Cloudflare にアップロード

Udonarium Backend の設定を更新

Udonarium Axe に独自ドメインを設定する（オプション）

接続テスト

バージョンアップの方法

Udonarium Axe 本体のバージョンアップ

3.の手順の詳細説明

Udonarium Backend のバージョンアップ

前のバージョンに戻したい場合は？

参考リンク