
この記事は[Unreal Engine (UE) Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ue) のシリーズ3、12月11日分に向けて書いたものです。

<YouTube videoId="ltFep3Eg0Gs" />

[第 19 回 UE5 ぷちコン](https://historia.co.jp/ue5petitcon19)にて DlcRockShoot というゲームで応募させて頂きました。

何の変哲もない360度トップビュー STG ですが、初期状態では武器がなく周囲から迫ってくる青いキューブを避けることしかできません。
緑色のアイテムを取ると武器が追加されて青キューブを破壊できるようになります。

![](/assets/blog/ue5-dlc/NoWeapon.png)

実装上はゲームの実行ファイル自体には自機が弾を発射する機能は存在していません。
アイテム取得時に Pak ファイルをダウンロードして Mount し、追加された ActorComponent と Niagara が自機にアタッチされる、という仕組みです。
(このPakファイルは200KBytesほどのごく小さいものになります)
つまり、この「ラインタイムにダウンロードされる細か過ぎる DLC」、というのがコンセプト(ツッコミ所)でした。

ありがたい事にぷちコン審査結果発表会の中で取り上げて頂きました。挙動が細か過ぎるせいで、わざわざコマ送りまでして解説して頂きほんとすみませんでした…(汗)。

<YouTube videoId="CMDMmRmoApg" /> (28:55 のあたり)

Pak ファイルのダウンロードと Mount 処理は Blueprint ノードがないため自力で C++ のコードを書くかプラグインの力を借りる必要があります。
マーケットプレースの[PakLoader プラグイン](https://www.unrealengine.com/marketplace/ja/product/pak-loader-plugin)を使用したので、
本稿ではその使い方を解説します。

# 方針

Blueprint クラス構成はこんな感じになります。

自機`BP_Player`がアイテムを取得した時に、`BP_GameInstance` のダウンロード処理を呼び出します。
DLC プラグイン(FastBullet)の Pak ファイルがダウンロードされると Mount し、Pak 内の ActorComponent と NiagaraSystem が使用できるようになります。
それらを`BP_Player`にアタッチすることで、弾発射ができるようになります。

![](/assets/blog/ue5-dlc/DlcRockShoot-classdiagram.png)

DLC の一覧は JSON ファイルに記載しておき、ゲームの起動時に読み込んでおきます。
Pak ファイル名とファイルサイズ(ファイル破損チェック用)、Mount 処理に必要なプラグインのパス、アタッチする Component 名を書いています。
(この JSON ファイルを自動生成する Python スクリプトを最後の方に掲載しています)

```json
{
  "URLBase": "http://localhost:8090/",
  "DLC": [
    {
      "Name": "FastBullet",
      "PakFileName": "FastBulletDlcRockShoot-Windows.pak",
      "PakFileSize": 2725340,
      "PakPluginPath": "../../../DlcRockShoot/Plugins/FastBullet",
      "ComponentToAttach": "/FastBullet/AC_FastBullet"
    },
    {
      "Name": "SlowBullet",
      "PakFileName": "SlowBulletDlcRockShoot-Windows.pak",
      "PakFileSize": 2725702,
      "PakPluginPath": "../../../DlcRockShoot/Plugins/SlowBullet",
      "ComponentToAttach": "/SlowBullet/AC_SlowBullet"
    }
  ]
}
```

# プレイヤー側の処理

自機の BP_Player が武器アイテムと接触すると、BP_GameInstance のダウンロード処理を呼び出し、ダウンロードのプログレスバー UI を表示します。
ダウンロード中の進捗率の更新はイベントディスパッチャが呼ばれるため、プログレスバー UI を更新します。
ダウンロード完了後にもイベントディスパッチャが呼ばれるため、古い ActorComponent を削除した後、DLC 情報から取得したクラス名を使って ActorComponent を生成、 BP_Player にアタッチしています。
その後、プログレスバー UI が 100%まで到達した状態を表示しないとすっきりしないため、いったん 100%表示にして Delay 経過後に非表示にする、という演出を入れています。

![](/assets/blog/ue5-dlc/BP_Player-EventGraph-caption.png)

自機の弾の発射は、自身にアタッチされてるコンポーネントのうち `BPI_PlayerShot` インターフェースを持つものを取り出し、`OnPressShot`/`OnReleaseShot` を呼び出しています。
アタッチされているコンポーネントを直接参照せず、インターフェース経由で呼び出しているため、DLC 側の ActorComponent に依存しないようにしています。
依存しないということは、DLC 側のプラグインが存在しなくても Blueprint のコンパイルが通るようになります。

![](/assets/blog/ue5-dlc/BP_Player-EventGraph-ShootBullet.png)

# ダウンロード・Mount 処理の実装

BP_GameInstance に実際のダウンロード処理を実装しています。ダウンロード処理の実体は`DownloadPak`ノードですが、
エディタで実行している時、ローカルに Pak ファイルがダウンロード済みの時、Pak ファイルが破損している時、等の条件が多岐に渡るため実行フローが多少複雑になっています。

![](/assets/blog/ue5-dlc/BP_GameInstance-EventGraph-crop.png)

PakLoader プラグインを使う上で一番苦労したのが Mount 時のパスの処理でした。

```txt
MountPakFile に渡すパラメータ:
  PakFileName: (ProjectPersistentDownloadDir)/FastBulletDlcRockShoot-Windows.pak
  MountPath: (空欄)

RegisterMountPoint に渡すパラメータ:
  RootPath: /FastBullet/
  ContentPath: ../../../DlcRockShoot/Plugins/FastBullet/Content/

LoadPakAssetRegistryFile に渡すパラメータ:
  AssetRegistryFile: ../../../DlcRockShoot/Plugins/FastBullet/AssetRegistry.bin
```

PakLoader の各関数に上記のようなパスを渡す必要があります。
`../../../` とあるのは、ProjectPersistentDownloadDir から UE プロジェクトの Root ディレクトリ(ゲーム内の `/` に相当)への相対パスを表しています。

```txt
DLC.json に記載
  PakFileName: FastBulletDlcRockShoot-Windows.pak
  PakPluginPath: ../../../DlcRockShoot/Plugins/FastBullet
```

上記のうち、DLC プラグイン固有のパスを切り出して JSON ファイルに記載し、そこから各ノードに渡すパラメータを生成しています。
この辺りを含めたMount処理はマクロでまとめています。

![](/assets/blog/ue5-dlc/BP_GameInstance-MountPakFile.png)

# DLC コンテンツの作り方

DLC 側については、まず ContentOnly プラグインを作成します。
下記例(FastBullet)では、弾を発射する NiagaraSystem と、ActorComponent の 2 つのアセットが存在します。

![](/assets/blog/ue5-dlc/ContentOnlyPlugin.png)

ActorComponent では BeginPlay 時に NiagaraSystem コンポーネントを自機にアタッチし、EndPlay 時に削除しています。

![](/assets/blog/ue5-dlc/AC_FastBullet-EventGraph-crop.png)

ActorComponent は `BPI_PlayerShot` インターフェースを継承しており、`OnPressShot`/`OnReleaseShot` を実装しておきます。それぞれ、NiagaraSystem コンポーネントに `Activate`/`Deactivate` を呼ぶだけです。

![](/assets/blog/ue5-dlc/AC_FastBullet_ImplementInterface.png)

Niagara パーティクルの弾が的に当たった時の処理も記載していますが割愛します。
こちらの [とかさん](https://www.youtube.com/@OY-Games) の Youtube 動画を参考に実装しています。とてもわかりやすいチュートリアル動画を多数公開されていますので、是非ご覧下さい。

<YouTube videoId="wYq2SR63vkM" />
(03:14のあたり、Niagara コリジョンの所を見て下さい)

# パッケージング

## Project Launcher の設定

![](/assets/blog/ue5-dlc/ToolMenu-ProjectLauncher.png)

パッケージングは Project Launcher を使って行います。メインのゲームパッケージと DLC とで設定項目は大体同じですが一部異なるので、それぞれカスタムプロファイルを作成しておきます。

![](/assets/blog/ue5-dlc/ProjectLauncher-CreateCustomProfile.png)

### メインゲームのカスタムプロファイル

メインゲームのプロファイルはこのようになります。デフォルト状態から変更のある箇所をオレンジ枠で囲っています。

![](/assets/blog/ue5-dlc/MainGame-caption.png)

### DLC のカスタムプロファイル

メインゲームとほぼ一緒ですが、異なる箇所は緑枠で囲っています。

![](/assets/blog/ue5-dlc/DlcFastBullet-caption.png)

## パッケージング

![](/assets/blog/ue5-dlc/DlcPlugin-disabled.png)

メインのゲームをパッケージングする場合は、あらかじめ DLC のプラグインを無効化してから Project Launcher からパッケージングを実行します。
(DLC プラグインの無効化を忘れるとメインのゲームに DLC が含まれた状態でパッケージが作成されてしまうのでご注意下さい)

![](/assets/blog/ue5-dlc/ProjectLauncher-LaunchProfile.png)

パッケージができた後は、`UnrealPak.exe -List` を使ってメインゲーム側に DLC が入っていないか確認しておいて下さい。
下のように grep して DLC プラグイン側のアセットが含まれていると失敗です。残念!

```bash
$ /e/Program\ Files/Epic\ Games/UE_5.3/Engine/Binaries/Win64/UnrealPak.exe -List Windows/DlcRockShoot/Content/Paks/DlcRockShoot-Windows.pak  | grep Bullet
LogPakFile: Display: "DlcRockShoot/Plugins/FastBullet/Content/AC_FastBullet.uasset" offset: 165165056, size: 2848 bytes, sha1: 1E38C7F4A4DC3A0902DE6E55389CDF122C43942A, compression: Oodle.
LogPakFile: Display: "DlcRockShoot/Plugins/FastBullet/Content/AC_FastBullet.uexp" offset: 165167977, size: 1541 bytes, sha1: 437D5AA7071A4F68EA21E50F6FCD893256A2A9EF, compression: Oodle.
LogPakFile: Display: "DlcRockShoot/Plugins/FastBullet/Content/NS_FastBullet.uasset" offset: 165171200, size: 4294 bytes, sha1: F09F6EBEB1B9EF5F1BCC188EEE5809E59E128C84, compression: Oodle.
LogPakFile: Display: "DlcRockShoot/Plugins/FastBullet/Content/NS_FastBullet.uexp" offset: 165175567, size: 11550 bytes, sha1: 0A59D0C127E42CE1C7C58C83D7CF497E8B802365, compression: Oodle.
LogPakFile: Display: "DlcRockShoot/Plugins/FastBullet/FastBullet.uplugin" offset: 165187584, size: 352 bytes, sha1: 2C1A7A354B87F692B974C1855A8EDD9E5B3FFF9F, compression: None.
LogPakFile: Display: "DlcRockShoot/Plugins/SlowBullet/Content/AC_SlowBullet.uasset" offset: 166514688, size: 2854 bytes, sha1: C163A3A8B6E3DAFB9F43C5C6E13A3969E904F58C, compression: Oodle.
LogPakFile: Display: "DlcRockShoot/Plugins/SlowBullet/Content/AC_SlowBullet.uexp" offset: 166517615, size: 1535 bytes, sha1: DA18495306D92BC7A534263AFE8877BA23765027, compression: Oodle.
LogPakFile: Display: "DlcRockShoot/Plugins/SlowBullet/Content/NS_Bullet.uasset" offset: 166520832, size: 4299 bytes, sha1: E2A4CC72525994D0BA2C768516095CF6376E1CD1, compression: Oodle.
LogPakFile: Display: "DlcRockShoot/Plugins/SlowBullet/Content/NS_Bullet.uexp" offset: 166525204, size: 11548 bytes, sha1: A6D835E21763C34E2BEFFBD63A4DD0DC074A07DD, compression: Oodle.
LogPakFile: Display: "DlcRockShoot/Plugins/SlowBullet/SlowBullet.uplugin" offset: 166537216, size: 352 bytes, sha1: 52066EFFB076C96612A7705C671D6CB20601C874, compression: None.
```

パッケージ完了後、DLC のプラグインを有効にして DLC プラグインのパッケージングを行います。

![](/assets/blog/ue5-dlc/DlcPlugin-enabled.png)

パッケージングが完了すると、ProjectLauncher で指定したフォルダの下、かなり深い階層に pak ファイルが生成されます。

```bash
DlcFastBullet/Windows/DlcRockShoot/Plugins/FastBullet/Content/Paks/Windows/FastBulletDlcRockShoot-Windows.pak
```

# 実行

## DLC ファイルを集めて DLC.json を作成

DLC の pak ファイルを同じフォルダに置いて DLC 情報のファイル `DLC.json` を作成します。
当初手作業を書いてましたが、だんだん辛くなってきたので下記のような簡単な Python スクリプト `generate-dlc-json.py` を書きました。
DLCの置き場所はlocalhostを想定していますが、外部のサーバーの置く場合は`url_base`を書き換えて下さい。

```python
import json
import os
import typing
from pathlib import Path

url_base = "http://localhost:8090/"
project_name = "DlcRockShoot"
output_file = "DLC.json"

def get_dlcs(file_list: list[Path]) -> list[dict]:
    dlcs:list[dict] = []
    for file in file_list:
        index = file.name.index(project_name)
        dlc_name = file.name[0:index]
        print("dlc_name: {0}".format(dlc_name))
        dlc:dict = {
            "Name": dlc_name,
                        "PakFileName": file.name,
                        "PakFileSize": file.stat().st_size,
                        "PakPluginPath": "../../../{project_name}/Plugins/{dlc_name}".format(project_name=project_name, dlc_name=dlc_name),
                        "ComponentToAttach": "/{dlc_name}/AC_{dlc_name}".format(dlc_name=dlc_name)
        }
        dlcs.append(dlc)
    return dlcs

def main():
    scan_path = Path(os.path.dirname(__file__))
    file_list = scan_path.glob("*.pak")
    dlcs:list[dict] = get_dlcs(file_list)
    dlc_info: dict = {
        "URLBase": url_base
    }
    dlc_info["DLC"] = dlcs
    j = json.dumps(dlc_info, indent=4)
    print("json: {0}".format(j))
    with open(scan_path.joinpath(Path(output_file)), "wt") as f:
        json.dump(dlc_info, f, indent=4)


if __name__ == "__main__":
    main()

```

DLC の Pak ファイルを置いたフォルダで以下のように実行すると、DLC.json ファイルが生成されます。

```bash
$ python generate-dlc-json.py
```

## HTTP サーバー起動

DLC を設置するサーバーを立てます。(ポート番号`8090`は`DLC.json`と一致しておく必要があります)

```bash
$ python -m http.server 8090
```

## ゲーム起動

`DLC.json`をゲームパッケージの `Windows/DlcRockShoot` フォルダにコピーした後、`Windows/DlcRockShoot.exe` を実行します。

アイテムを取得した後に自機から弾が出たら成功です!

![](/assets/blog/ue5-dlc/FastBullet.png)

弾が出ない時は、ログファイル `Windows/DlcRockShoot/Saved/Logs/DlcRockShoot.log` (Shipping パッケージなら `C:\Users\[ユーザー名]\AppData\Local\DlcRockShoot\Saved\Logs\DlcRockShoot.log`) に何かエラーが出てないか確認して下さい。

# 注意点

いくつか注意すべき所がありましたので、書いておきます。

## プロジェクト設定

- 「Use Io Store」のチェックを外す

  PakLoader プラグインのドキュメントにも記載されていますが、IoStore を有効にしたパッケージでは Mount できないためチェックを外しておく必要があります。
  (個人的にはこれが何故なのか調査したい所です…)

- Share Material Shader Code のチェックを外す

  [ぷちコン応募動画](https://youtu.be/ltFep3Eg0Gs?si=pNF199G_2NnhVg7_)
  をよく見るとわかりますが、自機の弾のマテリアルが非常に見辛くなっています。
  実は応募時点で解決できなかった問題で、DLC 側の Niagara 弾のマテリアルが剥がれてデフォルトになっていましたが、
  Share Material Shader Code のチェックを外すことで解消しました。([当時の投稿](https://twitter.com/tomotaco/status/1647078641548017664))

![](/assets/blog/ue5-dlc/ProjectSettings-Packaging-caption.png)

## プロジェクトにコードプラグインを追加した時は、ゲームパッケージと DLC パッケージを更新する

この記事を書いている最中に Blueprint のスクショが撮影したくなり GraphPrinter プラグインを導入したのですが、
導入後にゲーム側のパッケージングを行った所、導入前の DLC パッケージの Mount に失敗するようになりました。
出来上がったパッケージそのものからマウント可能かどうかを確認する方法が不明なので、ゲームと DLC の再パッケージは同時に行うよう注意する必要があります。
(これ、第三者から提供された DLC パッケージを Mount しようにも、本体側のプラグイン構成が変わったらできなくなるので、UGC 的な観点からは問題になりますね…)

# まとめ

ということで、ゲームのごく一部の機能をPakファイルとしてゲーム本体とは別にパッケージングし、ゲーム中にダウンロード・機能追加する方法を書きました。
細か過ぎるDLCに一体何の意味があるのか…というツッコミは来そうですが、ただひたすらに「やってみたかっただけ」になります。
マーケットプレースのプラグインを使うだけ…かと思いきやそこそこ面倒でしたので、忘れないうちに記録しておきます。

# 蛇足: GameFeature は未使用

UE5 の目玉機能の一つに、GameFeature と ModularGameplay というものがありました。
古代の谷のデモでランタイムで機能を追加したり切り換える様子が印象的でした。
本記事でもその機能を使っているんでは…?と思われた方もおられると思いますが、実は全く使っていません(汗)。

GameFeature プラグイン化したバージョンの開発も進めていたのですが、ランタイムで Mount した GameFeature プラグインを UE に認識させる方法がわからない(LoadAndActivateGameFeaturePlugin が失敗する)ため、頓挫していました。
色々模索する中で、GameFeatureSubsystem の機能を Blueprint ノード化したプラグイン[UEGameFeatureUtilPlugin](https://github.com/tomotaco/UEGameFeatureUtilPlugin)も
作ったりしました。(UE5.1.1 止まりなんで更新しないと…)

GameFeatureSybsystem のソースを読むと、InstallBundle というキーワードが頻繁に出てきます。
DefaultInstallBundleManager なるプラグインも存在し、ダウンロードや Mount 処理、パッチ適用などを行うようなのですが
どうやって使うのか情報を見つけることができませんでした。

もやもやした気持を抱えつつ数ヶ月が経過した頃、こちらの[どんぶつさんのツイート](https://twitter.com/donbutsu17/status/1710152022476161138)で気になる情報を見かけました。

<YouTube videoId="Cb63bHkWkwk" /> (05:37:30 のあたり)

10 月にニューオリンズで開催された Unreal Fest の講演で、将来的な機能として Modular Game Builds なるものが紹介されていました。
パッケージが数十 GB に肥大化しビルド時間も長期化している問題への対策としてこんな構想が語られていました。

- GameFeature プラグイン化した個々の機能を並列にビルドする
- ゲーム実行時、一部機能を先に実行しておき、残りの機能は CDN からダウンロードして追加する

InstallBundle なるものもこの中で使われる…のでしょうか? 個人的にとても気になるので続報を待ちたいと思います。


UE5で細か過ぎるDLCを作る

UE5.1 以降の PixelStreaming Webクライアントをカスタマイズする方法


UE5 で現在時刻を取得する時は Now や UTC Now のノードを使用しますが、取得できる値は DateTime 型です。
経過時間を求めたい場合や、何時間後の時刻を認める場合はここから何らかの加減算をする事になりますが、
UE4 までは時間を表わす TimeSpan 型との演算ノードが提供されていました。
ところが、UE5 になってから DateTime と TimeSpan との演算ノードがリストから削除されています。

![UE4.27.2のDateTimeからつながるノードリスト](/assets/blog/ue5-datetime/ue4-datetime-caption.png)

![UE5.1.1のDateTimeからつながるノードリスト](/assets/blog/ue5-datetime/UE5-datetime-caption.png)

これは UE5 から演算ノードのピンにワイルドカードが導入されたことが影響するようです。

## DateTime と減算ノードのおかしな挙動

試しに加算ノードを出してみましょう。
Now ノードの DateTime 型のピンからドラッグして、"+"を入力すると、Add のノードがあります。

![](/assets/blog/ue5-datetime/UE5-DateTime-add2.png)

このノードを選択すると、加算ノードが出現し接続されます。
各ピンの型は、DateTime と TimeSpan を加算し DateTime を返すノードとなっています。

![](/assets/blog/ue5-datetime/UE5-DateTime-add3.png)

これを利用すると、例えばシステムのタイムゾーン設定に依らず JST の時間を計算する処理を書くことができます。

![](/assets/blog/ue5-datetime/UE5-DateTime-add.png)

一方、減算ノードを出してみましょう。
Now ノードの DateTime 型のピンからドラッグして、"-"を入力すると、Subtract のノードがあります。

![](/assets/blog/ue5-datetime/UE5-subtract.png)

これを選択すると、なぜか減算ノードに接続されず、ワイルドカードのままになっています。なんでやねん!

![](/assets/blog/ue5-datetime/UE5-subtract-after.png)

もう一度ピン同士を接続してみます。再び Now ノードの DateTime 型のピンから減算ノードのピンにドラッグすると、
接続可能のチェックマークが表示されています。

![](/assets/blog/ue5-datetime/UE5-subtract-reconnect.png)

マウスボタンを話すと、やはり接続されていません。なんでやねん!(2 回目)

![](/assets/blog/ue5-datetime/UE5-subtract-reconnect-after.png)

ただ、減算ノードのピンの型が確定しているようなのでピンにマウスカーソルを重ねてみると、Timespan 構造体になっていることがわかります。

![](/assets/blog/ue5-datetime/UE5-subtract-reconnect-after-type.png)

再び Now ノードの DateTime 型のピンからドラッグして減算ノードのピンに接続しようとすると、
今度はピンの型が違うため接続できない表示が出ます。そこは分かりますが、どうしてこうなった!

![](/assets/blog/ue5-datetime/UE5-subtract-reconnect-failed.png)

どうも UE5 の不具合のようで、すでに issues やフォーラムに投稿されています。

- UnrealEngine issues [Subtraction Node wild card inputs incorrectly assigns Time Span data type when given a Date Time data type](https://issues.unrealengine.com/issue/UE-135466)
- UnrealEngine Forum の投稿
  - [[datetime-timespan]ノードを表示させる対処方法につきまして](https://forums.unrealengine.com/t/datetime-timespan/715793)

## 解決策 1: プラグインを使う

結局のところどうすればいいのか調べたところ、マーケットプレースの無料プラグイン [LE Extended Standard Library](https://www.unrealengine.com/marketplace/ja/product/low-entry-extended-standard-library?sessionInvalidated=true) を
使うのがお手軽な気がします。

![](/assets/blog/ue5-datetime/UE5-LowEntryStdLib.png)

このプラグインには巨大な整数値を保持する LowEntry Long オブジェクトが実装されており、
DateTime から UNIX Timestamp(1970 年 1 月 1 日 0 時 0 分 0 秒からのミリ秒単位の数値)をこの LowEntry Long オブジェクトで取得することができます。
ここから任意の整数値の加減算が可能です。

![](/assets/blog/ue5-datetime/UE5-LowEntryStdLib-TimeStamp.png)

### 経過時間の表示を実装する(UE4.27)

まずは UE4.27 で経過時間を表示する実装をしてみましょう。
Widget Blueprint を作成し、下記図のように Widget を配置します。

![](/assets/blog/ue5-datetime/DateTimeUE427.png)

イベントグラフに下記図のように実装します。

![](/assets/blog/ue5-datetime/DateTimeUE427-2.png)

Level Blueprint に Widget の作成処理を実装します。

![](/assets/blog/ue5-datetime/DateTimeUE427-3.png)

PIE 実行し、Push ボタンを押すと下記図のように経過時間が表示されます。

![](/assets/blog/ue5-datetime/DateTimeUE427-4.png)

### 経過時間の表示を実装する(UE5 + LowEntryExtStdLib)

同じ処理を UE5 でも実装してみましょう。

![](/assets/blog/ue5-datetime/UE5-DateTime-LowEntry.png)

PIE 実行し、Push ボタンを押すと同様に経過時間が表示されます。

![](/assets/blog/ue5-datetime/UE5-DateTime-LowEntry2.png)

UE4.27 と同様に動作する事が確認できました。めでたしめでたし。

## 解決策 2: エディタ設定を変更する

この演算ノードのワイルドカードは Type Promotion という機能だそうで、エディタ設定で切ることができます。

![](/assets/blog/ue5-datetime/EditorPreference-caption.png)

演算ノードのワイルドカードが使えなくなりますが、DateTime - DateTime のノードが一覧に出てきます。

![](/assets/blog/ue5-datetime/EditorPreference2.png)

ただ、演算ノードのワイルドカード自体はそれはそれで便利なので機能ごと切ってしまうのは悩ましいですね…。

## 解決策 3: コピペ

実は DateTime - DateTime のノードは下記手順で表示することができます。

- UE4.27 で DateTime - DateTime のノードを表示し、コピーします。
- UE5 でペーストします。

このためにわざわざ UE4.27 をインストールするのが面倒…という方は、下記テキストを選択して UE5 にペーストしてみて下さい。

```unrealscript
Begin Object Class=/Script/BlueprintGraph.K2Node_CallFunction Name="K2Node_CallFunction_2"
   bIsPureFunc=True
   FunctionReference=(MemberParent=Class'"/Script/Engine.KismetMathLibrary"',MemberName="Subtract_DateTimeDateTime")
   NodePosX=736
   NodePosY=448
   NodeGuid=D7C304C4408C63BC8C8D2BA711817F71
   CustomProperties Pin (PinId=4C2B8708470E5498F5334C82AF1BF2F5,PinName="self",PinFriendlyName=NSLOCTEXT("K2Node", "Target", "Target"),PinToolTip="Target\nKismet Math Library Object Reference",PinType.PinCategory="object",PinType.PinSubCategory="",PinType.PinSubCategoryObject=Class'"/Script/Engine.KismetMathLibrary"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,DefaultObject="/Script/Engine.Default__KismetMathLibrary",PersistentGuid=00000000000000000000000000000000,bHidden=True,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
   CustomProperties Pin (PinId=3A5E5EDE4F4D6625332FD39051CE8503,PinName="A",PinToolTip="A\nDate Time Structure",PinType.PinCategory="struct",PinType.PinSubCategory="",PinType.PinSubCategoryObject=ScriptStruct'"/Script/CoreUObject.DateTime"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,LinkedTo=(K2Node_VariableGet_6 7F10DB2647204613CAB646A6B79F0869,),PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
   CustomProperties Pin (PinId=E0895CD44586D76CDEEDC6AED180B0BA,PinName="B",PinToolTip="B\nDate Time Structure",PinType.PinCategory="struct",PinType.PinSubCategory="",PinType.PinSubCategoryObject=ScriptStruct'"/Script/CoreUObject.DateTime"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,LinkedTo=(K2Node_VariableGet_1 608475994F7AEA5402C76BB4688973EF,),PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
   CustomProperties Pin (PinId=B99A9C8342C8EE2FFAD5328087841B82,PinName="ReturnValue",PinToolTip="Return Value\nTimespan Structure\n\nSubtraction (A - B)",Direction="EGPD_Output",PinType.PinCategory="struct",PinType.PinSubCategory="",PinType.PinSubCategoryObject=ScriptStruct'"/Script/CoreUObject.Timespan"',PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,LinkedTo=(K2Node_CallFunction_3 B5987E8A48EAE4775AEBCD9130085B18,),PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
End Object
```

![](/assets/blog/ue5-datetime/UE5-DateTime-pasted.png)

なんでやねん! (3 回目)


UE5 DateTimeの減算ノードを出すことができない問題


こちらは [Unreal Engine (UE) Advent Calendar 2022](https://qiita.com/advent-calendar/2022/ue) のカレンダー 4 、12 月 1 日分の参加記事となります。
埋まりが悪いとその 4 ごと消えてしまいそうな気がするので積極的に小ネタを出して行きたいと思います。

# はじめに

UnrealEngine は `C:\Program Files\Epic Games` フォルダの下にインストールされるため、
一部のバージョンだけ別ドライブにインストールする、という器用な事ができません。
そのため複数のバージョンを入れるとすぐに C ドライブの容量が一杯になります。
また、通常のエディタの使用やパッケージング時の Cook 処理速度についても、エンジンがインストールされているドライブの速度が
ダイレクトに効いてくるため、作業中のプロジェクトとエンジンは速い SSD に入れておく事が作業効率の上でも重要になってきます。

最近の PC であれば C ドライブは SSD である事が主流になってきていますが、その容量はまだ 500GB 程度と心もとないため、
後から速い SSD を増設してこちらにエンジンをインストールしたい、という質問は結構な頻度で飛び交っているのを観測しています。

これは、Windows 標準の機能であるシンボリックリンクを使うことで解決可能ですので、本稿にて解説します。
この機能自体は UE とは全く無関係なので、他の Windows ソフトウェアでも有効です。

# シンボリックリンクとは

シンボリックリンクとは、他のフォルダやファイルを参照する特殊なファイルの事で、Linux 等の UNIX の世界ではお馴染みの概念です。
Windows においては Vista 以降に標準搭載されています。
ドライブの境界を超えて参照することができるので、`C:\Program Files\Epic Games\UE_5.1` を `E:\Program Files\Epic Games\UE_5.1` を参照するようにシンボリックリンクを張ることで、
`E:\Program Files\Epic Games\UE_5.1`にエンジン一式のファイル群があっても`C:\Program Files\Epic Games\UE_5.1`にあるものと同等な環境にすることができます。

シンボリックリンクの作成にはコマンドプロンプトから mklink コマンドを使用します。

```tsx
c:\Program Files\Epic Games>mklink
シンボリック リンクを作成します。

MKLINK [[/D] | [/H] | [/J]] リンク ターゲット

        /D          ディレクトリのシンボリック リンクを作成します。既定では、
                    ファイルのシンボリック リンクが作成されます。
        /H          シンボリック リンクではなく、ハード リンクを作成します。
        /J          ディレクトリ ジャンクションを作成します。
        リンク      新しいシンボリック リンク名を指定します。
        ターゲット  新しいリンクが参照するパス (相対または絶対)
                    を指定します。

c:\Program Files\Epic Games>
```

# 普通にエンジンをインストールする

まず最初は普通に UnrealEngine をインストールします。この時は C ドライブの容量を消費しますので注意して下さい。

# インストールフォルダを開く

そしておもむろに `C:\Program Files\Epic Games` を開いてみましょう。

![エクスプローラで開いたインストールフォルダ](/assets/blog/ue5-mklink/Explorer.png)

筆者の環境では UE_5.0 はすでに E ドライブ(増設した速い SSD)に移しているのですが、5.1 は移動していなかったのでこれを移動したいと思います。
コマンドプロンプトで同じフォルダを開くと、UE_5.1 は通常のフォルダになっていることがわかります。

![コマンドプロンプトで開いたインストールフォルダ](/assets/blog/ue5-mklink/cmd.png)

# エンジンフォルダ移動の準備(UE エディタと EpicGame ランチャーの終了)

フォルダ移動をする前に、いったん起動中の UE エディタがあると色々不具合が起きるので終了しておきます。
EpicGames ランチャーも起動していたら、いったん終了しておきましょう。

![EpicGamesランチャーの終了](/assets/blog/ue5-mklink/ExitLauncher.png)

# エンジンフォルダ移動

Windows エクスプローラーで `C:\Program Files\Epic Games` を開き、`UE_5.1` フォルダを SSD 内のフォルダ (筆者の環境では `E:\Program Files\Epic Games`) に移動します。
ドライブ間の移動のため結構時間がかかりますので気長にお待ち下さい。

# シンボリックリンクの作成

移動が終ったら、コマンドプロンプトで `C:\Program Files\Epic Games` を開き、下記のように入力します。

```tsx
c:\Program Files\Epic Games>mklink /D UE_5.1 "E:\Program Files\Epic Games\UE_5.1"
UE_5.1 <<===>> E:\Program Files\Epic Games\UE_5.1 のシンボリック リンクが作成されました

c:\Program Files\Epic Games>
```

以上の操作で準備は完了です。dir コマンドで確認し、`UE_5.1` フォルダがシンボリックリンクになっている事が確認できます。

![コマンドプロンプトで開いたインストールフォルダ](/assets/blog/ue5-mklink/cmd2.png)

エクスプローラで確認しても、フォルダのアイコンがシンボリックリンクになっている事が確認できます。

![シンボリックリンク作成後のインストールフォルダ](/assets/blog/ue5-mklink/Explorer2.png)

# ランチャーの表示がおかしい時

EpicGames ランチャーから先程フォルダ移動・シンボリックリンク作成した UE 5.1 を起動しようとすると、修復と表示されている事があります。

![EpicGamesランチャーにUE5.1の修復表示](/assets/blog/ue5-mklink/Launcher.png)

これは EpicGames ランチャーを終了せずにフォルダ移動するとこのような表示になりますが、慌てずにランチャーを終了・再起動しましょう。

![EpicGamesランチャーを再起動後に読み込み中表示](/assets/blog/ue5-mklink/Launcher2.png)

いったん読み込み中になりますが、しばらく待つと以下のように起動可能な状態になりました。

![EpicGamesランチャーにUE5.1が起動可能の表示](/assets/blog/ue5-mklink/Launcher3.png)

# まとめ

筆者はよく使うバージョンのエンジンをインストール後に速い SSD に移して作業しています。
また、検証用に過去のバージョンのエンジンも入れていますが、そちらは遅くても構わないので大容量の HDD に置いておき、
よく使用するエンジンのバージョンを切り変えるタイミングで SSD に移したり HDD に戻したりしています。
この運用で 3 年ほど使用していますが、今のことろドライブ移動に起因する不具合は起きていません。
ついでにエンジンソースの find&grep もよく行うのでエンジンソースも SSD に置いていますが、検索速度がダイレクトに作業効率に効いてくるので重宝しています。

最初から速くて大容量の SSD しか使わなければ全く気にする必要のない事で、あと数年でそのような世の中になりそうな気もしていますが、
後から調整の聞くこのやり方もまだしばらくは有効だと思いますので、試してみて下さい。


UE をインストールした後に別ドライブに移す


こちらは [Unreal Engine (UE) Advent Calendar 2022](https://qiita.com/advent-calendar/2022/ue) のカレンダー 2 、12 月 18 日分の参加記事の追加分となります。

Linux DedicatedServer ができたので AWS に EC2 インスタンスを立てて動かしてみました
…と書きたい所ですが、Graviton2 インスタンスを試したくなったので LinuxArm64 で再パッケージングしました。

# EC2 インスタンスの作成

AWS マネジメントコンソールにログインし、EC2 のインスタンス画面の右端にあるインスタンスを起動をクリックします。

![インスタンスを起動をクリック](/assets/blog/ue5-aws-ec2/EC2-00.png)

名前を入力し、マシンイメージは AmazonLinux、アーキテクチャは(せっかくなので)64bitArm を選択します。

![名前・AMI・アーキテクチャの設定](/assets/blog/ue5-aws-ec2/EC2-01-caption.png)

インスタンスタイプはデフォルトの c6g.medium で問題ありません。キーペアは(既存のものがなければ)新規作成します。

![インスタンスタイプとキーペア](/assets/blog/ue5-aws-ec2/EC2-02-caption.png)

キーペア名を入力し、キーペアを作成をクリックすると、pem ファイルがダウンロードされるので手元で保管して下さい。
この pem ファイルは ssh ログイン時に使用します。

![キーペアを作成](/assets/blog/ue5-aws-ec2/EC2-03-caption.png)

作成したキーペア名を EC2 側にも忘れずに設定しておいて下さい。(なお筆者は一度忘れて ssh ログインできないインスタンスを作成してしまい…作り直す羽目になりました orz)

![作成したキーペアを設定](/assets/blog/ue5-aws-ec2/EC2-04-caption.png)

ネットワーク設定の編集をクリックして下さい。

![ネットワーク設定](/assets/blog/ue5-aws-ec2/EC2-05-caption.png)

パブリック IP の自動割り当てを有効化に設定して下さい。

![パブリックIP自動割り当てを有効化](/assets/blog/ue5-aws-ec2/EC2-06-caption.png)

インバウンドセキュリティグループはデフォルトでは ssh(22/tcp)のみのため、追加が必要です。

![セキュリティグループを追加](/assets/blog/ue5-aws-ec2/EC2-07-caption.png)

ここで UE のネットワークを追加します。
タイプをカスタム UDP、ポート範囲を 7777、ソースに手元の PC のグローバル IP アドレスを記入します。
`***.***.***.***/32`と CIDR 表記で書くことでその IP アドレスからのみ接続を許可します。
手元の PC のグローバル IP アドレスが不明の時は、[ENV Checker - 環境変数チェッカー](http://www.cybersyndrome.net/env.cgi)などのサイトで調べることができます。サイトを開き`REMOTE_ADDR`の値を記入して下さい。

![追加グループの内容](/assets/blog/ue5-aws-ec2/EC2-08-caption.png)

以上の設定が終わったら、インスタンスを起動をクリックします。

![インスタンスを起動](/assets/blog/ue5-aws-ec2/EC2-09.png)

10 数秒ほどして起動が完了します。

![インスタンス起動完了](/assets/blog/ue5-aws-ec2/EC2-10.png)

起動が完了しても初期化が終わるまではログインできません。

![インスタンス初期化中](/assets/blog/ue5-aws-ec2/EC2-11-caption.png)

このような表記になったらログイン可能です。

![インスタンス初期化完了](/assets/blog/ue5-aws-ec2/EC2-12-caption.png)

# DedicatedServer パッケージのコピー・展開・起動

ログイン可能になったら、パブリック IPv4 アドレスに ssh 接続してログイン可能かどうか確認します。
(パブリック IPv4 アドレスは ↑ のインスタンス一覧画面を右にスクロールしていくと表示されています)

```tsx
$ ssh -i ../../../../ssh/aws/UE-DedicatedServer-keypair.pem  ec2-user@***.***.***.***
The authenticity of host '***.***.***.*** (***.***.***.***)' can't be established.
ECDSA key fingerprint is SHA256:7cpp+CGYwC61o5GZmk3j2+z3AlBHny4CbgzSDUYBsrw.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added '***.***.***.***' (ECDSA) to the list of known hosts.

       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-2/
[ec2-user@ip-***-***-***-*** ~]$
```

ログインできたらいったんログアウトし、Linux DedicatedServer のパッケージ Zip を scp で EC2 インスタンスにコピーします。

```tsx
$ scp -i ../../../../ssh/aws/UE-DedicatedServer-keypair.pem LinuxArm64Server.zip ec2-user@***.***.***.***:~/
```

その後、EC2 インスタンスに再度ログインし、パッケージを展開、実行権を付与し、実行します。

```tsx
[ec2-user@ip-***-***-***-*** ~]$ ls
LinuxArm64Server.zip
[ec2-user@ip-***-***-***-*** ~]$ unzip -x LinuxArm64Server.zip
Archive:  LinuxArm64Server.zip
   creating: LinuxArm64Server/
  inflating: LinuxArm64Server/Manifest_NonUFSFiles_LinuxArm64.txt
  inflating: LinuxArm64Server/Manifest_UFSFiles_LinuxArm64.txt
   creating: LinuxArm64Server/Multiplay51/
  inflating: LinuxArm64Server/Multiplay51Server-Arm64.sh
   creating: LinuxArm64Server/Multiplay51/Binaries/
   creating: LinuxArm64Server/Multiplay51/Binaries/LinuxArm64/
  inflating: LinuxArm64Server/Multiplay51/Binaries/LinuxArm64/Multiplay51Server-LinuxArm64-Shipping
   creating: LinuxArm64Server/Multiplay51/Content/
   creating: LinuxArm64Server/Multiplay51/Content/Paks/
  inflating: LinuxArm64Server/Multiplay51/Content/Paks/global.ucas
  inflating: LinuxArm64Server/Multiplay51/Content/Paks/global.utoc
  inflating: LinuxArm64Server/Multiplay51/Content/Paks/Multiplay51-LinuxArm64Server.pak
  inflating: LinuxArm64Server/Multiplay51/Content/Paks/Multiplay51-LinuxArm64Server.ucas
  inflating: LinuxArm64Server/Multiplay51/Content/Paks/Multiplay51-LinuxArm64Server.utoc
[ec2-user@ip-***-***-***-*** ~]$ ls -l LinuxArm64Server/Multiplay51/Binaries/LinuxArm64/
total 114176
-rw-rw-r-- 1 ec2-user ec2-user 116914968 Dec 18  2022 Multiplay51Server-LinuxArm64-Shipping
[ec2-user@ip-***-***-***-*** ~]$ chmod +x LinuxArm64Server/Multiplay51/Binaries/LinuxArm64/Multiplay51Server-LinuxArm64-Shi
pping
[ec2-user@ip-***-***-***-*** ~]$ ls -l LinuxArm64Server/Multiplay51/Binaries/LinuxArm64/
total 114176
-rwxrwxr-x 1 ec2-user ec2-user 116914968 Dec 18  2022 Multiplay51Server-LinuxArm64-Shipping
[ec2-user@ip-***-***-***-*** ~]$ ./LinuxArm64Server/Multiplay51/Binaries/LinuxArm64/Multiplay51Server-LinuxArm64-Shipping
```

起動したら Windows クライアントから接続します。調子に乗って 4 人分接続してみましたが、フォーカスが外れたウィンドウはフレームレートが落ちるようです。
同一の Windows 上でクライアント実行しているのでご容赦下さい。あと、操作する人間が 1 人しかいないのはどうしようもなく…(爆)

<YouTube videoId="T7mkFIyHMN4" />

# 注意

放っておくとどんどん時間課金されます。
[オンデマンドインスタンス料金表](https://aws.amazon.com/jp/ec2/pricing/on-demand/)によると c6g.large は 0.0856USD/時間となっていますが、
1 ヶ月(24 時間 30 日)で約 8400 円(1USD=136 円換算)になります。
不要になったインスタンスは忘れずに停止または終了しておきましょう。
(終了するとインスタンスの全データが破棄されるため、また使うことがあるなら停止に留めておくのが良さげです)

# まとめ

Graviton2 のインスタンスいいですね! UE DedicatedServer のパッケージングを動かす上では x64 と特に違いは感じられませんでした。
x64 の c5.large が 0.107USD なので多少お安くなっているようです。


UE5 Dedicated ServerをAWS EC2インスタンスに立てる


こちらは [Unreal Engine (UE) Advent Calendar 2022](https://qiita.com/advent-calendar/2022/ue) のカレンダー 2 、12 月 18 日分の参加記事となります。

UE5 で ThirdPerson テンプレートのプロジェクトを改造し、最短でマルチプレイヤーに対応して DedicatedServer を立てる所までの手順を書きます。
ListenServer を使う記事は多数見つかりますので本稿では扱いません。最初から DedicatedServer しか眼中にない!という奇特な方を対象としています。

# 方針

公式ドキュメントの[専用サーバーを設定する](https://docs.unrealengine.com/5.1/ja/setting-up-dedicated-servers-in-unreal-engine/)によると、
OpenLevel に IP アドレスを渡すことで DedicatedServer に接続しに行きます。
そのため、普通に ThirdPerson テンプレートからプロジェクト作成した後、まずはログイン用のレベルと IP アドレス入力と接続ボタンの UI を作成します。

# プロジェクト作成とマルチプレイ用の設定

UE エディタを起動し、ThirdPerson テンプレートから Blueprint のプロジェクトを作成します。
![ThirdPersonテンプレートからプロジェクト作成](/assets/blog/ue5-dedicated-server/ThirdPersonTemplate.png)

また、ThirdPerson テンプレートには物理で動くキューブが 3 とほど置かれていますが、動きが Replicate しない設定になっているため、修正しておきます。

![StaticMeshのReplicate設定](/assets/blog/ue5-dedicated-server/Replicate-Movement-caption.png)

# ログイン用のレベルを作成

コンテンツブラウザの何もない所で右クリックしレベルを選択します。

![レベルの作成](/assets/blog/ue5-dedicated-server/CreateLevel.png)

名前は何でも問題ありませんがここでは LoginMap にしました。

![LoginMapレベルができた](/assets/blog/ue5-dedicated-server/LoginMapLevel.png)

# ログイン用 UI の作成

IP アドレス入力と接続ボタンの UI 用として、`WBP_OpenIPAddr` という Widget を作成します。

Widget の構成はこのようにしましたが、IP アドレス入力欄と OpenLevel のボタンさえあれば問題ありません。
![ログイン用UIのWidget構成](/assets/blog/ue5-dedicated-server/WBP_OpenIPAddr.png)

OpenLevel ボタンをクリックされた時のロジックをイベントグラフに実装します。TextBox に入力されたテキストを OpenLevel に渡すだけですね。
![ログイン用UIのロジック](/assets/blog/ue5-dedicated-server/WBP_OpenIPAddr2.png)

# 起動時にログイン用 UI を表示

LoginMap のレベル BP を開き、下記のように実装します。DedicatedServer の時は UI の表示はできないため除外しています。
![レベルBPでUIを表示](/assets/blog/ue5-dedicated-server/InitWBP.png)

# PlayInEditor でログイン UI の動作確認

早速実行してみましょう。LoginMap レベルを開いた状態で、Play ボタン右側のメニューから NetMode が Play As Client になっている事を確認してから、Play ボタンをクリックします。

![PlayInEditor実行](/assets/blog/ue5-dedicated-server/PlayInEditor.png)

以下のような画面が表示されたら成功です。

![ログインUIが表示された](/assets/blog/ue5-dedicated-server/OpenEmpty.png)

なお、DedicatedServer が立ってないのでどこにも接続することはできません。残念!

# ローカルで DedicatedServer を立てて接続確認

デバッグ目的で最も手軽に DedicatedServer を立てるには、UE エディタを下記の引数で起動します。

```tsx
"d:\Program Files\Epic Games\UE_5.1\Engine\Binaries\Win64\UnrealEditor.exe" d:\home\logion\development\UE5\Multiplay51\Multiplay51.uproject ThirdPersonMap -server -game -log
```

プロジェクトファイルをフルパス指定した後、マップ名 ThirdPersonMap を指定しています。
オプション引数は `-server` でサーバーとして実行、`-game`で Cook せずにプロジェクトを単独実行します。`-log`によりログを出力します。

- [UE4 MultiPlayer Online Deep Dive 基礎編 1 -Getting Started- (historia 様ご講演) #UE4DD](https://www.slideshare.net/EpicGamesJapan/ue4-multiplayer-online-deep-dive-getting-started-ue4dd) (pp.64)
- [【UE4】マルチプレイにおける Dedicated Server の建て方](https://qiita.com/Developer_KanZG/items/9b8cf4623432c3537eba)

下記エラーが表示された時は、uproject ファイルのパスがフルパス指定になっているかどうか確認して下さい。
![プロジェクトが見つからない時のエラー表示](/assets/blog/ue5-dedicated-server/FailedToOpenDescriptorFile.png)

DedicatedServer の起動に成功すると、ログ画面が出現します。ポート 7777 にて待ち受けをしていることがわかります。7777 は UnrealEngine のマルチプレイヤー接続に使用されるデフォルトの UDP ポートです。
![UEエディタでDedicatedServer起動時のログ画面](/assets/blog/ue5-dedicated-server/UnrealEditorServerLog-caption.png)

PlayInEditor(緑色の Play ボタン)を実行し、`120.0.0.1:7777`を入力、OpenLevel をクリックします。
![DedicatedServerに接続](/assets/blog/ue5-dedicated-server/OpenLocalHost.png)

レベル遷移成功です!おめでとうございます。
![DedicatedServerのレベル遷移成功](/assets/blog/ue5-dedicated-server/ThirdPerson-OpenLevelSucceeded.png)

DedicatedServer のログにも接続リクエストやレベルへの参加リクエストが記録されています。
![クライアントから接続時のDedicatedServerログ画面](/assets/blog/ue5-dedicated-server/UnrealEditorServerLog-ConnectionSucceeded-caption.png)

# パッケージングの準備

ここから Linux DedicatedServer のパッケージングに向けて準備していきます。
DedicatedServer 用のパッケージングを行うには下記が必要となります。

- プロジェクトを C++プロジェクトに変更(ServerTarget(後述)を追加してビルドする必要があるため)
- プロジェクトのエンジンバージョンをソースビルドの UnrealEngine にする

特に後者はランチャー版のエンジンでは ServerTarget がサポートされていないためで、強引に ServerTarget の設定を行ないパッケージングしようとしても、以下のようにログに無慈悲なメッセージが表示されます。

```tsx
UATHelper: Packaging (Linux): Server targets are not currently supported from this engine distribution.
```

## C++プロジェクトへの切り替え

C++プロジェクトに切り替えるには、ダミーで C++ソースを追加します。

![C++ソースを追加](/assets/blog/ue5-dedicated-server/AddCpp.png)

親クラスは指定なしで問題ありません。

![親クラスはなし](/assets/blog/ue5-dedicated-server/AddCpp2.png)

クラス名もデフォルトのままで問題ありません。

![適当なクラス名を指定](/assets/blog/ue5-dedicated-server/AddCpp3.png)

しばらくクラス追加処理が走ります。

![クラス追加中](/assets/blog/ue5-dedicated-server/AddCpp4.png)

追加が完了すると、C++ビルドに必要な Source フォルダや VisualStudio のソリューションファイル(\*.sln)が生成されています。

![VisualStudio関係のファイルが生成されている](/assets/blog/ue5-dedicated-server/VisualStudioSolutionFile.png)

`Source\Multiplay51` フォルダ以下に生成された`MyClass.h`,`MyClass.cpp` はもういらないのでエクスプローラから削除しておいて下さい。

![不要なクラスを削除](/assets/blog/ue5-dedicated-server/RemoveSource.png)

## ServerTarget の追加

Source フォルダ内を開き、 `Multiplay51Editor.Target.cs` をコピー&ペーストして`Multiplay51Server.Target.cs` を生成します。

![ServerTarget](/assets/blog/ue5-dedicated-server/ServerTarget.png)

`Multiplay51Server.Target.cs` をテキストエディタで開き、文字列置換で`Editor`を全て`Server`にします。

```tsx
// Fill out your copyright notice in the Description page of Project Settings.

using UnrealBuildTool;
using System.Collections.Generic;

public class Multiplay51ServerTarget : TargetRules
{
	public Multiplay51ServerTarget(TargetInfo Target) : base(Target)
	{
		Type = TargetType.Server;
		DefaultBuildSettings = BuildSettingsVersion.V2;

		ExtraModuleNames.AddRange( new string[] { "Multiplay51" } );
	}
}
```

## プロジェクトのエンジンバージョンの切り替え

github からエンジンソースの入手と VisualStudio ビルドを行ってない場合は、下記リンクを参考にして下さい。

- [Unreal Engine のソースコードをダウンロードする](https://docs.unrealengine.com/5.1/ja/downloading-unreal-engine-source-code/)
- [ソースから Unreal Engine をビルドする](https://docs.unrealengine.com/5.1/ja/building-unreal-engine-from-source/)

プロジェクトファイル上で右クリックし Switch Engine Version を実行します。

![エンジンバージョンの切替](/assets/blog/ue5-dedicated-server/SwitchEngineVersion.png)

ソースビルドのエンジンのフォルダを選択します。

![エンジンバージョンの指定](/assets/blog/ue5-dedicated-server/SwitchEngineVersion2.png)

再度 VisualStudio のプロジェクトを生成するため少し時間がかかります。

![VisualStudioプロジェクトファイル生成中](/assets/blog/ue5-dedicated-server/GeneratingProjectFiles.png)

## Windows 用クライアントのパッケージング

UE エディタを起動し、Windows 用クライアントのパッケージングを行います。
Platform のメニュー内の Windows を開き、Build Target が Multiplay51 になっている事を確認し、Package Project を実行します。

![Windowsパッケージング](/assets/blog/ue5-dedicated-server/WindowsPackaging.png)

## Linux 用 DedicatedServer のパッケージング

続いて Linux 用 DedicatedServer のパッケージングを行います。
Linux のビルドには予めクロスコンパイルチェーンのインストールが必要となります。未入手の場合は下記からダウンロード・インストールして下さい。
[開発要件](https://docs.unrealengine.com/5.1/ja/linux-development-requirements-for-unreal-engine/)

Platform のメニュー内の Linux を開き、Build Target が Multiplay51Server になっている事を確認し、Package Project を実行します。

![Linuxパッケージング](/assets/blog/ue5-dedicated-server/LinuxServerPackaging.png)

以上でパッケージングは完了です!

# 手元で Linux DedicatedServer を立てる

Linux 用の DedicatedServer を手軽に実行するには Windows10 以降に付属している WSL(Windows Subsystem for Linux)を使用します。
未入手の場合は下記を参考にして下さい。

- [https://learn.microsoft.com/ja-jp/windows/wsl/install](https://learn.microsoft.com/ja-jp/windows/wsl/install)

手元の環境では Ubuntu-22.04 が入っているのでこれを実行し、パッケージを作成したディレクトリに移動した後、下記の通り実行します。

```tsx
$ ./LinuxServer/Multiplay51/Binaries/Linux/Multiplay51Server
```

あっさり起動しました。

![WSL でLinux DedicatedServer起動](/assets/blog/ue5-dedicated-server/WSL.png)

Windows クライアントを 2 つ起動し、127.0.0.1:7777 に接続するとマルチプレイが動いていることが確認できます。
![マルチプレイ実行中](/assets/blog/ue5-dedicated-server/MultiplayOnWSL.png)

なお、接続先の IP アドレスは WSL のバージョンによって異なります。WSL のバージョンはコマンドプロンプトから確認できます。

```tsx
> wsl -l -v
  NAME                   STATE           VERSION
* Ubuntu-22.04           Running         1
```

WSL1 であればブリッジ接続のため 127.0.0.1 になります。(LAN 内の他の PC から接続する場合はホストの WindowsPC の IP アドレスになります)
WSL2 の場合は NAT の中にいるため、WSL のシェル内で ifconfig で確認して下さい。

```tsx
$ ifconfig -a | grep inet
inet 172.24.201.78  netmask 255.255.240.0  broadcast 172.24.207.255
```

LAN 内で複数の PC から接続する場合は、WSL1 の方が便利です。WSL のバージョンはコマンドプロンプトから下記の通り自由に変更可能です。

```tsx
> wsl --set-version Ubuntu-22.04 1
変換中です。この処理には数分かかることがあります...
変換が完了しました。
```

# まとめ

UE の ThirdPerson テンプレートからプロジェクトを作成し、マルチプレイヤー対応してパッケージング、DedicatedServer を立てる所までをまとめてみました。
WSL のおかげで Linux DedicatedServer の動作確認も手軽にできるようになりましたので、気になったら試してみて下さい。

後、AWS に EC2 インスタンスで DedicatedServer を立てる所は[続きの記事](/posts/20221219-ue5-aws-ec2)に書きました。


UE5 でマルチプレイヤーのサンプルプロジェクトを作ってDedicated Serverを立てる


2022 年 3 月 23 日、GDC にて[AWS GameKit](https://aws.amazon.com/jp/gamekit/)が発表され、UnrealEngine 用のプラグインがリリースされました。

AWS には Web サービスや、モバイルアプリなどのバックエンドとして使用できる多数のオンラインサービスが提供されていますが、
実際に使うにはそれなりに各サービスの仕様や API に習熟した上で自分で組み合わせる必要があります。
使ってみるととても便利なのですが、誰にでも簡単に…とは言い辛いのもまた確かでした。

ゲームでよく使われるオンラインサービスはユーザー認証、アイテムやゲーム内通貨の管理、プレイ記録、プレイヤーデータのクラウド保存、実績など
ある程度限られており、ゲーム用のオンラインサービスに特化したサービスを提供する会社も多数あります。
AWS GameKit はそのオンラインサービスを開発者自身の AWS アカウント上で構築することができる開発キットです。
AWS 上に構築する以上、運用費は AWS アカウントに請求が来ることになりますが、他社が提供するゲーム用オンラインサービスを使うより費用は割安になることが期待されます。
(※具体的に比較した訳ではないです)

この記事では、AWS GameKit for UnrealEngine プラグインを使い、identity(ユーザー認証)のサンプルを使って実際に構築した様子を解説します。
すでに AWS の各サービスを使っている方から見ると何でもない内容ですが、これから AWS アカウントを作って試そうと考えている方には
このサンプルを使うと何が起きるのか多少は把握できるようになると思います。

# UE4 プロジェクトの作成

まずはプラグインを組み込んだ UE4 プロジェクトを作成します。ざっくりとした手順は以下のようになります。

- UE4 を起動し、適当なテンプレートでプロジェクトを作成します。(プロジェクト名を TestAwsGameKit とします)
- ファイルメニューから C++ファイルを追加し、C++プロジェクトにします。
- UE4 エディタをいったん終了し、プロジェクトのフォルダに Plugins フォルダを作成し、[AWS GameKit のページ](https://aws.amazon.com/jp/gamekit/)から
  `AwsGameKitUnrealPlugin_Windows_v1.0.0.zip` を展開して作成される AwsGameKit をフォルダを Plugins フォルダの下にコピーします。
- TestAwsGameKit.uproject ファイルを選択して右クリックメメニューから Generate VisualStudio Project を実行します。
- TestAwsGameKit.sln ファイルをダブルクリックして VisualStudio を起動し、TestAwsGameKit を選択した状態で右クリックメニューからリビルドを実行します。
- ビルドが完了すると、VisualStudio を終了し UE4 エディタを起動します。

# AwsGameKit プロジェクト作成

プラグインが使用できる状態になると、プロジェクト設定に AWS GameKit のカテゴリが出てきます。
Game title・Region を設定し、事前に作成しておいた IAM の AccessKey・SecretKey を入力、Submit をクリックします。
![Project設定からAwsGameKitプロジェクト作成](/assets/blog/ue4-aws-gamekit/01_ProjectSettingsCreateProject-caption.png)

続いて Identity And Authentication の項目までスクロールし、Create をクリックします。
![Project設定のログインサーバ作成画面](/assets/blog/ue4-aws-gamekit/02_ProjectSettingsIdentity-caption.png)

使用状況に応じて課金が発生する可能性があるため警告が表示されますが、
構築自体に料金はかかりませんし、お試し程度の使用であれば無料枠に収まるため料金はほとんどかかりません。
ここは Deploy をクリックします。
![課金が発生するかも警告](/assets/blog/ue4-aws-gamekit/03_AwsCostDialog-caption.png)
構築のため 10 分程度待たされますが、完了すると以下のような表示になります。
![Project設定のログインサーバ作成済み](/assets/blog/ue4-aws-gamekit/04_ProjectSettingsIdentityDeployed.png)

# ユーザー認証サンプルの実行

UE4 プロジェクトにあるプラグインのサンプルを実行してみましょう。
コンテンツブラウザから
`AwsGameKit Content`のフォルダを開き、`BP_AwsGameKitIdentityExamples` をレベルにドラッグ&ドロップします。
(`AwsGameKit Content`フォルダがない場合は、View Options から表示されるメニュー内の Show Plugin Contents にチェックを入れましょう)
![UE4コンテンツブラウザのプラグインアセット](/assets/blog/ue4-aws-gamekit/05_PluginContents.png)

Play In Editor 実行すると、サンプル UI が表示されます。
![PlayInEditor実行](/assets/blog/ue4-aws-gamekit/06_PlayInEditor.png)

Register から新たにユーザーを作成します。ユーザー名、メールアドレス、パスワードを入力して Call API をクリックして下さい。
![新規ユーザー登録](/assets/blog/ue4-aws-gamekit/07_Register.png)

この時 AWS の Cognito 管理コンソールを見てみると、ユーザーが登録されていることがわかりますが、未検証になっています。
これはメールアドレスが実在するか確認する手続きが終わってない状態なので、このままではログインすることはできません。
![Cognitoユーザー未検証](/assets/blog/ue4-aws-gamekit/07_CognitoUserPool_NotVerified.png)

Register の時に入力したメールアドレスにメールが届いているはずなので、そちらに書いてある確認コードを入力します。
検証が完了すると成功のステータスが返ってきます。

![ログインメール確認成功](/assets/blog/ue4-aws-gamekit/07_Confirm_Success.png)

Cognito 管理コンソールでも検証済みになっている事がわかります。
![Cognitoユーザー検証済](/assets/blog/ue4-aws-gamekit/07_CognitoUserPool_Verified.png)

早速ログインしてみましょう。

![ログイン成功](/assets/blog/ue4-aws-gamekit/08_Login_Success.png)

ログイン中に GetUser の API を実行すると、ユーザー情報が表示されます。

![ログイン中のユーザー情報取得](/assets/blog/ue4-aws-gamekit/09_GetUser.png)

ログインしていない時はどうなるでしょうか。Logout 実行後、GetUser を実行するとエラーが表示されます。

![ユーザー情報取得失敗](/assets/blog/ue4-aws-gamekit/09_GetUserFailed.png)

Developer Log を開くと、ログインしていないというエラーが返ってきている事がわかります。
![ユーザー情報取得失敗時のログ](/assets/blog/ue4-aws-gamekit/09_GetUserFailedLog.png)

# 作成された AWS サービス

作成される AWS サービスは多岐にわたります。その一部を見てみましょう。

ユーザー情報を取得する GetUser という API のエンドポイントです。
実際の処理は Lambda で行なわれますが、外部から呼べる REST API にするために必要になります。
![ApiGatewayのエンドポイント](/assets/blog/ue4-aws-gamekit/04_APIGateWay.png)

APIGateWay は無制限に呼び出されると費用がかかるため、この GetUser は Cognito でユーザー認証済みの時のみアクセスできるよう制限がかかっています。
![ApiGatewayの認証](/assets/blog/ue4-aws-gamekit/04_APIGateWay_Authorizer.png)

API の使用状況を監視する CloudWatch ダッシュボードです。
![CloudWatchダッシュボード](/assets/blog/ue4-aws-gamekit/04_CloudWatchDashBoard.png)

ユーザー認証を行う Cognito ユーザープールです。
![Cognitoユーザープール](/assets/blog/ue4-aws-gamekit/04_CognitoUserPool.png)

認証済みのユーザーに AWS サービスの使用を許可する権限する Identitiy プールです。
![CognitoIdentityプール](/assets/blog/ue4-aws-gamekit/04_CognitoIdentityPool.png)

ユーザー情報を保存する DynamoDB です。
![DynamoDB](/assets/blog/ue4-aws-gamekit/04_DynamoDB.png)

Cognito の API を呼び出した時、また GetUser を呼び出した時に実行される処理を登録しておく Lambda です。
![Lambda関数](/assets/blog/ue4-aws-gamekit/04_Lambda.png)

Lambda で実行するスクリプトは Python で書かれていますが、実行に必要なライブラリ環境を Lambda レイヤーという仕組で登録しています。
![LambdaLayer](/assets/blog/ue4-aws-gamekit/04_LambdaLayer.png)

これらのサービスは CloudFormation で自動構築されますが、その設定ファイルや、Lambda で実行するスクリプトや実行に必要なレイヤーはいったんクラウドストレージ S3 にアップロードされます。
![S3](/assets/blog/ue4-aws-gamekit/04_S3.png)

# まとめ

UE4 からボタン一発でユーザー登録からメールアドレス確認、認証までの一通りの処理を行うログインサーバの構築ができることがわかりました。
自分の用途に合わせてカスタマイズしていくには… `Plugins/AwsGameKit/ResourcescloudResources` の下に
CloudFormation などのバックエンドの設定ファイル・スクリプトがありますので、そこを修正していくことになると思います。
分量がかなりあるので読むだけでげんなりしますが、逆に AWS を使っている身にとって[きちんと設計された](https://aws.amazon.com/jp/blogs/gametech/aws-gamekit/)
バックエンド構築例の設定ファイルやソースコードとしてとても参考になるのではないかと思います。


UE4 AWS GameKit 使ってみた


[前回の記事](/posts/20210119-ue4-python-module)で自作モジュール構成を変更した時はエディタの再起動が必要、と書いていましたが、実は自作モジュール側の修正を反映させる度に必要でとても面倒でした。

修正を即座に反映する方法はこちらになります。明示的にモジュールを Reload してやればいいんですね。

```python
# main.py
import sys
import os
sys.path.append(os.path.dirname(__file__))

import libs.foo              # この行を追加
import importlib             # この行を追加
importlib.reload(libs.foo)   # この行を追加

from libs.foo import Foo

f = Foo()
f.print()
```

この情報は Qiita の記事[【Python】モジュールをアンインポート・リロードする](https://qiita.com/Krypf/items/68c1f7c26efd084cf207)を参考にさせて頂きました。
そもそも Reload が必要、という所に気がついたのは[前回の記事](/posts/20210119-ue4-python-module)のこの記述がきっかけでした。

> どうも前回のモジュール解決情報が残っているようです…。

(自分で書いておきながら…なぜ半年以上気がつかない orz)


UE4 の Python で自作モジュールの修正を即座に反映する方法


Python を書くとき、1 つの Python スクリプトに全部書いてしまうと身通しが悪くなるので、
普通はこちらのようにモジュールを分けて書いていくと思います。

```python
# libs/foo.py
class Foo:
  def print(self):
    print("Foo!")

# main.py
from libs.foo import Foo

f = Foo()
f.print()
```

コマンドラインから実行すると、こんな感じで実行されます。

```batch
D:\Path\To> python main.py
Foo!
D:\Path\To>
```

ところがこれを UE4 の Python プラグインで実行すると、なぜかエラーになることがあります。
(正確には、Python スクリプトを `/Content/Python` の直下に置いている時は動作しますが、それ以外のフォルダに置いている時にエラーになります)

```batch
LogPython: Error: Traceback (most recent call last):
LogPython: Error:   File "D:/Path/To/main.py", line 1, in <module>
LogPython: Error:     from libs.foo import Foo
LogPython: Error: ModuleNotFoundError: No module named 'libs.foo'
```

なんでやねん!
UE4 で Python のツールを書き出した時はこの問題が解決できず、あきらめて全機能を 1 つの Python スクリプトの中に書いていました…。

だいぶ後になってわかったのですが、以下のように書けば動きます。
インクルードパスに、実行対象の Python スクリプトが置かれているフォルダを追加します。

```python
# main.py
import sys
import os
sys.path.append(os.path.dirname(__file__)) # この行を追加
from libs.foo import Foo

f = Foo()
f.print()
```

めでたしめでたし…とは行きません。Python を書くのに VSCode をお使いの方には凄まじいトラップがあります。

![VSCodeがお勧めする強烈なトラップ](/assets/blog/ue4-python/vscode-formatter-dialog.png)

フォーマッタ autopep8 を入れますか?とお勧めしてくるので言われるがままにインストールしてしまうと、

```python
# main.py
from libs.foo import Foo
import sys
import os
sys.path.append(os.path.dirname(__file__))
  :
```

こんな感じで勝手に順序を入れ替えてしまい、動かなくなります。
(autopep8 はダメですが、ついでにお勧めされる black, yapf では問題ありません)

ということで、無事 UE4 の Python でもモジュールが使えることがわかりました。

また、モジュール構成を変えた時はソースに問題がなくても `No module named '...'` の
エラーが出ることがあります。
逆に、明らかにモジュールが解決できない状況でもエラーが出ないことがあり、頭を悩ませることがあります。
そういうときは、UE4 のエディタをいったん終了し、再実行しましょう。
ちゃんと追い切れてないんですが、どうも前回のモジュール解決情報が残っているようです…。

上記は UE4.26(Python3.7)で確認しました。UE4.25 以前(Python2.7)では、
上記構成に加えて `libs/__init__.py` というファイル名で空ファイルを作っておく必要があります。


UE4 の Python で自作モジュールを使う方法


UE4 では Python プラグインを有効にすると、Python スクリプトから UE4 の機能を触ることができ
レベル配置やアセット操作の自動化に役立てることができます。

Python ファイル(\*.py)の置き場所は、公式サイトの
[Python を使用したエディタのスクリプティング](https://docs.unrealengine.com/ja/ProductionPipelines/ScriptingAndAutomation/Python/index.html)
に書かれています。

```
Unreal Editor では、この sys.path リストにいくつかのパスを自動的に追加します。
- プロジェクトのフォルダの下にある「Content/Python」サブフォルダ。
- Unreal Engine のメインのインストール フォルダの下にある「Content/Python」サブフォルダ。
- 有効にした各プラグインのフォルダの下にある「Content/Python」サブフォルダ。
- ユーザー ディレクトリ内にある「Documents/UnrealEngine/Python」フォルダ。たとえば、Windows 10 では「C:/Users/Username/Documents/UnrealEngine/Python」となります。
```

それでは `/Content/Python` の下に置きましょう…と行きたい所ですが、そうは問屋が下しません。
UE4 でツールを書く時は、通常 Editor Utility Widget で GUI を作ってそこから Python スクリプトを実行するため、
ツールのフォルダにまとめて置きたい…と思うのが人情というものです。
Python スクリプトだけ `/Content/Python` の下に置く…というのは後々混乱の元です。

実は、Python スクリプトはプロジェクト内の自由な場所に置くことができ、どこでも実行することができます。
種明かしは以下の Execute Python Command ノードを見て下さい。

![EUWからPythonの実行方法](/assets/blog/ue4-python/python-from-euw.png)

`Python Command` のピンの文字列に、 `/Content/Python` からの相対パスで実行したい Python スクリプトを指定してやれば良い訳です。
この例では `/Content/Utility/Foo/Python/main.py` に実行したい Python スクリプトがある、という想定をしています。
`/Content/Python` フォルダ自体が存在しなくても問題ありません。


UE4 の Python ファイルを任意のフォルダに置く方法


このブログのソースコードが読みにくかったので `rehype-prism` を入れてシンタクッスハイライトされるようになりました。
あと画像がオリジナルサイズのまま埋め込まれていたのでページの横幅に調整、`react-medium-image-zoom` でクリック時に拡大するようにしました。
こういう感じの ZoomImage コンポーネントを作って、

```tsx
// ZooomImage.tsx
import React from "react";
import "react-medium-image-zoom/dist/styles.css";
import Zoom from "react-medium-image-zoom";

export const ZoomImage = function ZoomImage(props) {
  return (
    <Zoom>
      <img {...props} width="100%" />
    </Zoom>
  );
};
```

MDX 変換時のコンポーネントリストに加えました。

```tsx
// [slug].tsx
    :
import { ZoomImage } from '../../components/ZoomImage'
    :
const components = {
  a: Link,
  YouTube: dynamic(() => import('react-youtube')),
  Head,
  img: ZoomImage // ここに追加
}
    :
export default function PostPage({ source, frontMatter }) {
  const content = hydrate(source, { components })
  return (
    :
  )
}
```


Prism でシンタックスハイライト


このブログの React UI コンポーネントには[MaterialUI](https://material-ui.com/)を使用しています。
Next.js 公式のブログのひな形サンプル
[blog-starter-typescript](https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript)
は[TailwindCSS](https://tailwindcss.com/)を使っており、HTML の構造に引きずられることなく好きなスタイルが自分で作れる…!
という事を売りにしているようなのですが、今はデザインに凝りたくはないので
コンポーネント並べるだけでええ感じにしてくれるらしい MaterialUI を使うことにしました。
(お気づきの方もおらえるかも知れませんが jQuery 時代は bootstrap 大好きでした…)

Next.js のプロジェクトに MaterialUI を組み込む方法はこちらの記事を参考にしました。

- [Next.js プロジェクトで Material UI を使う方法](https://tech.playground.style/javascript/next-material-ui/)
  また、この記事から MaterialUI の[Next.js 用のサンプル](https://github.com/mui-org/material-ui/blob/master/examples/nextjs/)へのリンクが
  貼られており、[Link コンポーネント](<(https://github.com/mui-org/material-ui/blob/master/examples/nextjs/src/Link.js)>)がいい感じでしたのでこのブログにも導入してみました。

ところが、`npm run dev`では一応表示されるのに`npm run build`を実行すると下記エラーが出てしまいなかなか解決できませんでした。

```bash
Type error: Type '{ children: Element; as: string; href: string; passHref: true; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & RefAttributes<any>'.

  29 |           {posts.map((post) => (
  30 |             <li key={post.filePath}>
> 31 |               <Link
     |                ^
  32 |                    as={`/posts/${post.filePath.replace(/\.mdx?$/, '')}`}
  33 |                    href={`/posts/[slug]`}
  34 |                    passHref
```

色々検索していると、型の不一致の時に出るエラーのようです。
React.forwardRef() のジェネリクスにちゃんと正しい型を指定すれば…と思ってさらに色々検索した結果、
こちらの issue に書かれていたコードが参考になりました。

- [[Link] typescript error Property 'component' does not exist on type IntrinsicAttributes](https://github.com/mui-org/material-ui/issues/16846)

以上を踏まえて、Link コンポーネントの[ソース](https://github.com/mui-org/material-ui/blob/master/examples/nextjs/src/Link.js)の
拡張子を tsx に変更した上で、以下の修正を行いました。

## 修正前

```tsx
const NextComposed = React.forwardRef(function NextComposed(props, ref) {
  :
});
  :
export default React.forwardRef((props, ref) => <Link {...props} innerRef={ref} />);
```

## 修正後

```tsx
import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router-dom";
  :
const NextComposed = React.forwardRef<HTMLAnchorElement, RouterLinkProps>(function NextComposed(props, ref) {
  :
});
  :
export default React.forwardRef<HTMLAnchorElement, RouterLinkProps>((props, ref) => <Link {...props} innerRef={ref} />);
```

これで npm run build が通るようになりました。React.js/Next.js なんもわからん…。


Typescript+Next.js+MaterialUIで詰まる


このサイトは 2015 年 8 月から RazerCMS という CMS を使って運営していたのですが、
いつの間にか公式サイトや github リポジトリが消失、どこかでメンテされている様子がなかったので、
今回[Next.js](https://nextjs.org/)で作り直してみました。
github の private リポジトリに commit・push して Vercel で Deploy する方式です。
以前から Markdown でブログ記事を書くのと、ビルド時の生成できびきび動くサイトに
あこがれていたのでそれがようやく叶いました。

Markdown の変換には MDX を使用しています。
YouTube の埋込方法を探していてこちらの記事を参考にしました。

- [Blog を MDX, Next.js で作成した](https://reona.dev/posts/20200605)

Markdown に React コンポーネントが貼り付けられるようになるそうで、自作コンポーネントの実験場には最適ですね!
今はまだシンプルすぎるサイトですが、そのうちせわしなくなるかも知れないのでよろしくお願いします。


ブログをリニューアルしました


新年も明けてだいぶ経ちますが(汗)。

前の記事から丸一年、昨年とタイトルが同じというのもどないやねんというツッコミはさておき…昨年一年何があったかを思い出しながら書いて行きたいと思います。

まず、[unityroom への作品投稿](https://unityroom.com/users/e1sn0m4j6rd8lgau72yp)をきっかけに(アカウントだけ作って 10 年以上放置していた) [twitter アカウント](https://twitter.com/tomotaco)の運用を始めましたが、そのままゲーム制作アカウントとして常用するようになりました。もくもく会やゲーム開発者の交流イベントへの参加も増え、twitter 上で他のゲーム開発者の方々とのつながりができた事はとてもありがたい出来事でした。名刺に unityroom の自分のプロフィールページへのリンクを QR コードで印刷すると、名刺を渡したその場で遊んでもらえるのがとても近未来的です。
ゲーム制作では、2015 年に Unity 触り始めて最初に作りかけて放置していた、[球面シューティング](https://unityroom.com/games/sphericalshooterdemo)の開発を再開しました。一昨年(2017 年)に unityroom に参加しようとミニゲームをいくつか作った結果、

- ParticleSystem が[シューテイングの弾処理に使えそうな目途が立った](https://github.com/tomotaco/LandingSpace)こと
- [射線軸から見ても破綻しないビーム](https://github.com/tomotaco/ParticleSystemBeamShaderDemo)ができたこと
- 球面上の移動処理の不具合で詰まっていたのが「Collider の位置がずれてて箱と干渉していた」という実にしょうもないバグだった事が判明したこと orz

などのきっかけが重なり再び前進できるようになりました。詰まった当時にやろうとしていた事をそのまま続行していたら、今でも前に進めないままだったことでしょう。そういう意味では unityroom と一週間ゲームジャムで色々新しいことに手を出せたのは良かったと思います。まさに一週間ゲームジャムやもくもく会が自分の開発を前進させるきっかけになっています。(一週間ゲームジャム駆動開発…と書くと聞こえは良いですがまあちょっとスパンが長過ぎる…)

球面シューティングはなんとかリリースに向けて作り切りたい、という覚悟で有料アセットにも手を出しています。(特に[hasu さんの曲](https://audiostock.jp/artists/19614/audios)に惚れ込んで購入した曲がまだ組込できていないのがなんとも悔しいです…早く組み込んでリリースしないと他のすごいゲームに使われてしまう…!)
その一方で一週間ゲームジャムへの参加は球面シューティング止まりで、それ以降はネタを思いついて終わり、プロジェクトを作って終わり、という体たらく orz こっち方面も何とかしたいですね…。
あと、[Unity ゲーム開発者ギルド](https://scrapbox.io/unity-game-dev-guild-pr/Unity%E3%82%B2%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA%E8%80%85%E3%82%AE%E3%83%AB%E3%83%89)と[運営者ギルド](https://qiita.com/organizations/admin-guild)にも参加しました。膨大な参加者が各自の分報チャンネルに独り言をつぶやくと、色んな方面からツッコミやら反応がもらえるのが実に楽しいです。運営者ギルドは Web サービス開発運営する人のコミュニティで、私はまだ何もリリースしてないのですが、参加をきっかけに前から一度つくってみたいネタの具体化に向けて少しずつ動き出しました。
仕事方面では相変わらず C++(Qt)中心ですが、途中少しだけ Python3 と Javascript(ES6)に手を出せたので楽しかったです。パッケージ・ライブラリの充実振りが素晴らしく、ちょこっと画像処理するなら Python3 一択のような気がしますね…。ただ自分の脳内キャッシュの狭さから Python 書くと ruby を忘れ、ruby を書くと Python を忘れてしまうのがなんとも悔しい…
そんな感じですが今年もよろしくお願いします。


あけましておめでとうございます


新年も明けてだいぶ経ちますが(汗)。

一昨年の年末に入手した GPD WIN を活用しようと色々試した一年でした。
Unity や Visual Studio 2017 を入れて通勤電車内でのプログラミングをしたかったのですが、どうにも 5.5 インチの画面では文字が小さ過ぎた orz TabletPro の TouchZoomDesktop を入れていたのでピンチズームはできるものの、毎回拡大縮小を繰り返すのはとっても非効率、キーボードも親指ポチポチなら十分できますが、タッチタイプするには小さすぎる…ということで、結局テストプレイ機に落ち着きました。その一方で、飲み会の席などで自作ゲームのデモ機としてはとても優秀で大活躍しました。

昨年の 1 月 15 日に GPD Pocket のクラウドファンディングも開始されました。小さいノート PC 好きとしてダイレクトに心に訴えるものがありましたが、GPD WIN をまともに使いこなしてない状況で次に走るのは…と思い踏みとどまりました。Atom x7 が続くのもどうかな…と思っており、次は Core m プロセッサのタブレット(Teclast X5 Pro)かノート PC にしようと考えていたこともありましたので…。

代わりに Gemini PDA に出資してしまった… Psion 好きとしては見過ごせませんでした orz これは今月出荷が始まるそうなので楽しみにしています。今のスマホが壊れかけ(液晶パネルがはがれかけてきてて粘着テープで仮固定中)につき、早く来てくれ～`(>_<;)`

あと、9 月 11 日の Banggood.com の創立記念セールで Cube Thinker が時間限定で安売りされたのでポチってしまいました。Core m3-7y30 で 8GB, SSD256GB のスペックで〇〇〇ドルを切る衝撃的な価格…。Acer Aspire V5-171 の後継機種としてノマド開発に大活躍しています。見た目以上にずっしり来るので持ち運ぶのは大変ですが(汗)

来週 15 日から GPD WIN2 のクラウドファンディングが始まるようですが、高そうなのと Core m 機は買ってしまったので様子見のつもりです。

プログラミングの方では、Unity でミニゲーム開発に手を出し、Unityroom に 2 作品ほど投稿しました。Unity 1 週間ゲームジャムというイベントのおかげです。お題が公表されてから 1 週間という限られた期間のため、つまづきや迷いは片っ端から切り捨てて行かないと完成しません。その一方で、未完成のままの投稿も OK・遅刻も上等(遊んでくれる人は少なくなるだけ)、という緩さがとてもありがたかったです。完成できたのはこの緩さのおかげと言っても言い過ぎではありません。Python3 にもちょっとだけ手を出してみましたが OpenCV との親和性が高くてありがたかったです。画像処理が目的なら Python が一番ですね…。

あとは、コワーキングスペースやネットカフェでの作業も色々試してみました。ネットカフェの閉鎖空間も集中できていいのですが、コワーキングスペースのオープンで適度に会話が聞こえてくる空間の方がどちらかというと自分には合っているようです。



毎月下旬、大阪の天六でインディーズゲーム開発者やゲーム業界の方々が集まって呑んだりプレゼンしたりして過ごす[ichi pixel](https://ichipixel.net/)というイベントがあります。こういうイベントへの参加は週末だと家庭の事情で難しいのですが、平日だと仕事帰りにふらっと寄れてむしろ参加しやすいのかも知れない…と気づいてしまった(といっても仕事の都合でいつも参加できる訳ではありませんが)ので、ちょうど 16th の時(2017/11/22)が unity1week 用に制作してた時期だったので、開発途中の版を見せに行ってきました。
ただ、前記事の通り制作を始めてから 2 日しか経過していなかったため、この時点でてきていたのは

- 自機の動きは一通りできていたものの、パーティクルは噴射のみ
- ブロックは 4 つ固定
- ゴールはあるが未実装

と完成からはほど遠いものでした。
当時の様子が[こちら](http://ichipixel.net/2017/12/10/959)になります。...なんというか、まさしく未完成品を見せて神妙な顔をさせるテロ行為...ホントすいませんでした orz
まあそれでも操作感に感想をくれる方もいて大変ありがたかったです。
それにしても GPD WIN はデモ機に最適ですね。知り合いでない人にいきなり声を掛けるのは相当敷居が高かったんですが、GPD WIN を持っていると何人もの人が声をかけてくれて、ついでにテストプレイも頼むことができました。

17th の時(2017/12/19)は完成版を見せに行ってきました。今度は色々感想も聞けて参考になりました。
ちまちまブロックを移していくより激突して隙間に...の攻略にはすぐに気付いてくれた辺り、さすがなゲーム制作者の集いやな...と感心しました。


16th, 17th の ichi pixel に参加しました


unityroom に 2 つ目のゲームを投稿しました。

[着陸スペース](https://unityroom.com/games/landingspace)

<YouTube videoId="CEgJGpFbhfk" />

相変わらず Unity の物理エンジンに全面的に乗っかったゲームですが、今回は Rigidbody2D を使ってみました。プリミティブの Cube や Cylinder を飛ばしていますが、追加直後は 3D 版の Rigidbody や Collider がアタッチされているので、これを削除して 2D 版のものをアタッチし直す必要があります。これをしておかないと、衝突時せずすり抜けてしまうので注意が必要です。

# 制作履歴

Mercirual のコミットログと記憶を参考に当時の制作状況を振り返ってみると、こんな風になりました。

|            |                                                          |
| ---------- | -------------------------------------------------------- |
| 2017/11/18 | Unity 京都スペシャル 2 の後に製作開始                    |
| 2017/11/22 | 16th ichi-pixel で未完成版を魅せて回る(別記事に書く予定) |
| 2017/12/12 | 初版公開                                                 |
| 2017/12/19 | 最終版(効果音付き)公開                                   |

unity1week のお題「[space](https://unityroom.com/unity1weeks/7)」の期間が 2017/11/13 ～ 19 なので...いやはやほぼ 1 ヶ月の大遅刻ですね…いやはや面目ないです orz

# 動機

Unity には [ParticleSystem](https://docs.unity3d.com/Manual/class-ParticleSystem.html) (Shuriken) という便利なモジュールがありますが、これに対して私は当初エフェクト専用なのかな?という印象を持っていました。しかし、ゲームデザインに関わる処理に使えるかどうか、具体的にはシューティングの弾などに使えるかかどうか知りたかったので、実際に使って確認してみました。結果、OnParticleCollision() というイベントハンドラがあるのでまったく問題ありませんでした。
あとは完全に自分の趣味です。Xbox360 の Xbox Live Indies Game に [Superspace](https://youtu.be/g6ct2OOOcBQ) というゲームがありましたが、自機からワイヤーを垂らしてブロックを運ぶ、という基本的な挙動はこれのパクリです…。そもそもこの手の慣性操作のアクションシューティング(海外では Cave Flyer というジャンルで呼ばれているらしい)そのものが大好きでして、精密な操作が要求される場面でコントロールし切る自分カッケーと悦にひたりつつも、外部からの何でもない攻撃や障害物が迫ってきて軽くパニックになる緊張感がたまりませんでした。
当初はそういうものを作りたいと思っていたのですが…実際に出来上がってみたものは、激突してブロックが舞い上がった隙間に潜り込む戦略が一番タイムが短縮できるようです...どうしてこうなった。(いや自機の体力を設定せず無敵にしたせいですね…とほほ)
技術的(Unity 的)な動機としては、Unity ゲーム制作で必要とされる要素(タイトル・設定・ランキング等)やアセット(後述)を一通り経験しておきたかった、というものがあります。

# 雑感

ランキングを実装しているうちに、ゴール時のスクリーンショットを撮ってランキングに掲載してみたくなった、効果音が欲しいとの声に応えて付けたくなった、などの脱線もありましたが、それらも含めてやりたかった事は一通り実現できたので自分としてはとても満足しています。
制作途中の版でも人に見せたことでモチベーションが維持できました。どういうゲームかもわかってもらえない状況で反応が薄いのはしょうがないと思いますが、見せないよりはよっぽどよかったです。あと GPD WIN はデモ機に最高。
製作中の作業は、基本的に寝る前の 1 ～ 2 時間程度(たまに早朝も)で、何かに詰まった時は無理せず睡眠を優先し通勤途中にネットで調べものなど行いました。基本スローペースではありますが、小さなことでも問題が 1 テーマずつ片付いていくのはとても楽しい経験でした。
使用アセット
使用したアセットは以下の通りです。

- [Zenject Dependency Injection IOC](https://assetstore.unity.com/packages/tools/integration/zenject-dependency-injection-ioc-17758)
  Singleton の他、今夏は Factory や MemoryPool(オブジェクトプール) も含めてがっつり使ってみました。Validation (Shift+V) が通るまではエラーがわかりにくくて苦難の道のりですが、それを乗り越えると実感できる [Inject] の手軽さは手放せません。
- [UniRx - Reactive Extensions for Unity](https://assetstore.unity.com/packages/tools/integration/unirx-reactive-extensions-for-unity-17276)
  自機やメニューなどほぼ全ての制御はこちらをつかって書きました。強力なイベントフィルタリングや Reactive Property のおかげで if ブロックを使うことなく、すっきり書くことができました。
- [LINQ to GameObject](https://assetstore.unity.com/packages/tools/integration/linq-to-gameobject-24256)
  メニューのフェードイン・フェードアウト処理の際に例えば「名前が Button で始まる GameObject の Button コンポーネント」だけを選び出す必要があり、そのような場面でこれを使うと 1 行でかけてとても重宝しました。
- [DOTween (HOTween v2)](https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676)
  メニューのフェードイン・フェードアウト処理に使いました。1 行で書けるため多用してしまった…。大玉ドリブルの時は Update() 内で状態変化からの経過時間からアルファ値を求めて毎フレームセットしていた事を考えると、ずいぶんと楽できました。
- TextMesh Pro (Unity2018.1 以降、PackageManager からインストール形式に変更されました)
  メニューやランキング・設定・スコア等の全ての文字表示に使いました。当初、項目が増えるたびにテキストファイルからフォントを生成するようにしていましたが、途中で面倒になり[こちらの記事](https://qiita.com/thorikawa/items/03b65b75fa9461b53efd)のようによく使う文字を全て登録してしまいました。
- [PLAY Animation Importer for Unity](https://assetstore.unity.com/packages/tools/modeling/play-animation-importer-for-unity-24500)
  [とてかん CG](https://cganime.jp/totekan/)・[PLAY Animation](https://doga.jp/PLAY/) のパーツアセンブラファイルを Unity に取り込む拙作のプラグインです。Cube と Cylinder しか使ってないように見えますが、実は自機のみ角の取れた立方体でして、このプラグインで取り込みました。
- [Recorder](https://assetstore.unity.com/packages/essentials/unity-recorder-94079)
  今回も動画撮影に使用しました。uGUI や効果音も録画さえるようになり使い勝手が良くなりました。
  この他、以下のソースコードを一部改修して使用させて頂いています。
- [unityroom-tweet](https://github.com/naichilab/unityroom-tweet)
  unityroom に投稿された作品から結果等をツイートするサンプルです。2017.2 対応を行いました。
- [Leaderboard For Unity WebGL](https://github.com/NCMBMania/LeaderboardForUnityWebGL)
  Nifty Cloud Mobile Backend を使ったランキングのサンプルです。2017.2 対応、Zenject 対応、ランキング登録項目にスクリーンショット画像を追加、などの対応を行いました。

Unity に直接関係ありませんが、以下のツールも使用しました。

- [Bfxr](https://www.bfxr.net/)
  chiptune っぽい効果音の作成で重宝しました。ランダム生成で基本で、気に入ったものが出るまでひたすらクリックしてました…。
- [Sound Engine Free](https://soundengine.jp/)
  効果音の調整に使用しました。カットしてフェードインまたはフェードアウトするだけでしたが…。

なお、Unity 2017.2 用のプロジェクト一式を [github](https://github.com/tomotaco/LandingSpace) で公開中です。Unity をお持ちの方はよかったらお手元でビルドしてみて下さい。


unityroom 投稿ふたたび


半年ほど前、Unity の WebGL ビルドを公開するサイト unityroom にて 1 週間ゲームジャム というイベントが開催されていたので投稿してみました。

[Unity ちゃんの大玉ドリブル](https://unityroom.com/games/unitychanbigballroll)

まあ 1 週間も遅刻したのですが orz

<YouTube videoId="7Bbgkke8r68" />

もとは Unity 公式の玉転がしチュートリアルの玉移動から改造していく形で始めたのですが、玉を SD キャラに置き換えてモーションを適用するところは素晴らしく簡単にできてしまい、そのあたりはさすが Unity だと思いました。上記サイトでも(主に SD キャラの可愛さのおかげで)好意的なコメントを頂き感謝しています。

使用したアセットは以下の 3 種類です。

"Unity-chan!" Model (走る・旋回しながら走る・ジャンプのモーション、アフィリエイトリンクにつきご注意下さい)
Optimize, SD Kohaku-Chanz!(SD キャラの各モデル、アフィリエイトリンクにつきご注意下さい)
Zenject Dependency Injection IOC(コンポーネント間の依存関係を踏まえて生成管理するライブラリ、アフィリエイトリンクにつきご注意下さい)
ちなみに上記の動画を撮るために、プロジェクトを 2017.1.1 にアップグレードし Unity 本家が提供している Recorder アセット (β 版) を使ってみました。
アップグレードすると zenject の Source/Editor/Testing/ZenjectIntegrationTestFixture.cs 内でコンパイルエラーがでました。
#if UNITY_5_6 (2 個所)を#if UNITY_5_6_OR_NEWER に変えれば良いようです。(2017/12/23 追記; 現在はこの修正は不要です)

また、YouTube に上げてから気付いたのですが、なぜか uGUI (タイトルや「準備はいい?」「残念」等の文字」) が動画に記録されてないようですね…orz β 版なので多少の不具合には目をつぶっても、アセットを追加 →Tool/Record/Video メニューから Recorder のダイアログを表示 → 録画の解像度・形式・保存先等を設定 →Start Recording の数ステップで録画できてしまうのでこのお手軽さは魅力的です。

…で何で今頃になってこんな記事を投稿したのか? それはもちろん Unity Affiliate のテストのためです… unityroom で公開したゲームのページに使用したアセットへのリンクを貼るとバウチャーコードがもらえるらしい、という例の企画に乗ってみたかっただけなのです。失礼しました…orz


unityroom に自作ゲームを投稿しました


先日作った Esc・F1 ～ F12 のみのスクリーンキーボードですが、既存のソフトの設定でできるようです。作ってみてから気づくあたりが残念の極みですが…。

- [TouchMousePointer](https://www.lovesummertrue.com/touchmousepointer/ja-jp/)
  タッチ操作でマウスカーソルを操作するソフトですが、Ctrl・Alt 等のボタンを表示する補助パネル機能があります。寄付で追加されるボーナス機能により、このカスタマイズが簡単にできるようですね。

- [FloatingButton](http://www.trifoliumstudio.com/floatingbutton)
  キーのボタンを自由に設置できるソフトです。グループパネル内に整理して並べることも可能。お絵かきソフトのショートカット用に作られたようです。

今のところ、タッチ操作によるマウスカーソルの操作は必須なので TouchMousePointer のカスタマイズで対応することになりそうです…。


すでにあった模様


昨年末に Windows8.1 タブレットを購入しました。 BayTrail-T の安い 7.9 インチの中華タブレット [Teclast](http://www.teclast.com/) [X89Win](http://akafudatengoku.com/products/detail.php?product_id=6064) です。一緒に Bluetooth キーボード型ケース [HB045](http://akafudatengoku.com/products/detail.php?product_id=6062) も購入し、装着して小さなクラムシェル型ノート PC (しかも英語配列!) として使うことを目論んでいましたが、大きな落とし穴がありました。

このキーボード、Esc やファンクションキーがありません。他の Bluetooth キーボードのように Fn キーを押しながら最上列の数字キーを押すと入力できるだろう…とタカをくくっていたら明るさ・ブラウザ・検索等が割り当ててありました。よく確認しなかった自分が悪いのですが orz もともとは iOS/Android 用でしょうから Esc やファンクションキーはまず使わないんでしょうね…。こちらとしては、ファンクションキーは VisualStudio 等の IDE のデバッグ実行で必要なため、結局このキーボードはお蔵入りとし、ただのタブレットとして使っていました。

一方、Windows8.1 にはスクリーンキーボード(Soft Input Panel と言うらしい)が内蔵されていて、設定によりフルキーボードを出すこともできます。これはこれでなかなか使いやすくて重宝していました。タッチ操作であるが故に画面内の一部が覆い隠されてしまう事だけが唯一残念な点。そんな中、これをカスタマイズして ↑ のキーボードに欠けているキーだけを出すようにできれば幸せになれるのでは…と気づいてカスタマイズの方法を探っていましたが、どうやらなさそうです。そして次に思いついたのがスクリーンキーボードの自作でした。

ということでインストールしたばかりの VisualStudio2015 を使い、WPF でせこせこと書いてみました。せっかくなのでソースコードごと github で晒しておきます。

- [ScreenKeyboardEscFn](https://github.com/tomotaco/ScreenKeyboardEscFn) (ソースコード、VisualStudio2015 Community 用)
- ScreenKeyboardEscFn-bin-20150910.zip (実行ファイル、 .NET Framework 4.5 以降)

参考にしたのはこちらの[記事](http://web.archive.org/web/20160701134906/http%3A%2F%2Fsturnus.hateblo.jp/entry/2014/07/09/231530)で公開されていたソースコードです。とりあえず押されたボタンに応じて keybd_event() を飛ばすだけです。また、キーボードのウィンドウを消してもタスクトレイのアイコンから再表示できます。終了したい場合は同じくタスクトレイのアイコンのメニューから選んでください。

![スクリーンキーボード](/assets/blog/screen-keyboard/ScreenKeyboardEscFn-small.png)

…ちなみに実用性はこれから確認します(汗)。


Escとファンクションキーだけのスクリーンキーボードを作ってみた


(2020 年 12 月現在、razorCMS の公式サイト・github リポジトリが消失しているため当時の一部リンクが再現できていません)

このサイトは[さくらのレンタルサーバライト](https://www.sakura.ne.jp/lite.html)を利用しており、データベースには[SQLite](https://www.sqlite.org/index.html)しか使用できません。

そのため Wordpress など有名所の CMS を入れるには[一工夫](http://nomu.skr.jp/2013/02/sakura-wordpress-sqlite/)が必要になります。ただ結構重かった印象があったので他の CMS を探してみたところ、razorCMS が面白そうなので入れてみました。(選定にあたってこちらの[記事](http://tryit.x-sys.net/p123.html)を参考にさせて頂きました)

いつものようにアーカイブを展開して FTP でアップロードするほか、気を付ける必要があったのは以下の 2 点です。

PHP のバージョンを 5.3 以降にする。(最新の 5.6 で問題ありません)
あらかじめ.htaccess の「Options」の行を削除する。(/.htaccess と/rars/.htaccess の 2 箇所あることに注意)
これで [自分のサイト URL]/login にアクセスするとログイン用のダイアログが出現します。こちらに書かれている通り、管理者のユーザー・パスワードは決め打ちなのでイタズラされる前に変更しておきましょう…。


tacoworks 活動記録(Next.js版)