Featured image of post Udonarium Axe を Cloudflare 上に設置する
解説記事 - Tutorial

Udonarium Axe を Cloudflare 上に設置する

目次をひらく

はじめに

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

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

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

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

必要なもの

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

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

  1. SkyWay の設定（プレイヤー同士が通信を行うのに必要）
  2. Udonarium Backend のインストール（Udonarium Axe が内部的に SkyWay を使うのに必要）
  3. 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のアカウントを作成

SkyWay のプロジェクトを作成

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

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

SkyWayでプロジェクトを作成

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

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

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

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

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

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

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

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

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

IDとキーの確認 / 画像内の赤枠はコピーボタン

Cloundflare のアカウント作成

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

Cloudflare のアカウント作成

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

Cloudflare の言語作成

Udonarium Backend のインストール

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

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

最新版の Udonarium Backend の入手

udonarium-backend Releases から最新版の udonarium-backend.zip をダウンロードして開きます。

udonarium-backendのダウンロード

その中にある cloudflare-workers/index.js をテキストエディタなどで開いておきます。この後の手順で、この内容を全てコピーして貼り付ける必要があります。

Cloudflare Worker を作成する

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

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

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

Cloudflare Worker の作成

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

Cloudflare Worker の作成 - Hello World!

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

Cloudflare Worker の作成 - 名前の設定

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

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

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

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

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

Worker のコードを編集して置き換える

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

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

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

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

Variables and Secrets の設定を開く

以下の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 の Variables と Secrets を設定 / 「+Add」ボタンを押すと3つまとめて追加可能

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

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

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

Worker の独自ドメイン設定を開く

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

Worker で使用する独自ドメインを選択

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

Worker で使用するホスト名を設定

Udonarium Backend の動作確認

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

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

Worker で使用する URL の確認

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

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

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

Udonarium Axe 本体のインストール

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

最新版の Udonarium Axe を入手

Udonarium Axe Releases から、一番新しいバージョンの zip ファイルをダウンロードして開きます。

また、リリースノートのページには、どのバージョンでどのような変更が加えられたかが記述されていますので、参考にしてみてください。

Udonarium Axe のダウンロード

展開したフォルダの assets/config.json をテキストエディタなどで開きます。記事執筆時のバージョン v1.47.0 の場合、中身はこのようになっています。

{
  "backend": {
    "url": "バックエンドサーバーのURLを指定してください。https://localhost:3000"
  }
}

ファイル内の backend.url を先ほど作成した Worker の URL に変更します。 僕の場合は以下の通りになります。（みなさんの URL に差し替えてください。）

{
  "backend": {
    "url": "https://axe-api.catmans.house"
  }
}

Udonarium Axe を Cloudflare にアップロード

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

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

Cloudflare で新しいアプリケーションの作成

今回は「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. の設定を済ませてください。）

Udonarium Axe の URL を確認

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

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

ACCESS_CONTROL_ALLOW_ORIGIN の更新

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

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

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

Udonarium Axe への独自ドメインの設定

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

接続テスト

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

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

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

バージョンアップの方法

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

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

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

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

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

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

3.の手順の詳細説明

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

画面右上の「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 側の更新も確認してみてください。

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

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

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

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

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

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

ロールバック（前のバージョンへ戻す）

参考リンク

© 2025 - 2026 Catman
* 猫男の家 is unofficial Fan Content permitted under the Fan Content Policy. Not approved/endorsed by Wizards. Portions of the materials used are property of Wizards of the Coast. ©Wizards of the Coast LLC.
* 猫男の家はファンコンテンツ・ポリシーに沿った非公式のファンコンテンツです。ウィザーズ社の認可/許諾は得ていません。題材の一部に、ウィザーズ・オブ・ザ・コースト社の財産を含んでいます。©Wizards of the Coast LLC.

Hugo で構築されています。
テーマ Stack は Jimmy によって設計されています。