RPGツクールMVで制作したゲームをウェブ公開する

この記事は「RPG ツクール MV Advent Calendar」14日目の記事です。
この記事を作成するにあたり、 http://tkool.jp/mv/ のページの「2015/12/01 RPGツクールMV 体験版ダウンロード開始！」のリンク先からダウンロードできる『RPGツクールMV　体験版』を使用しています。

# はじめに

あと３日で発売される[RPGツクールMV](https://tkool.jp/mv/)は、制作したユーザゲームをウェブブラウザから実行できる形式で出力できることが非常に大きなアピールポイントになってます。

20年前、大学受験を機に[RPGツクール DANTE98](https://ja.wikipedia.org/wiki/RPG%E3%83%84%E3%82%AF%E3%83%BC%E3%83%AB#RPG.E3.83.84.E3.82.AF.E3.83.BC.E3.83.AB_Dante98)を最後にツクラーから足を洗った自分が、[海外版 RPG Maker MV](http://www.rpgmakerweb.com/products/programs/rpg-maker-mv) の発売日前日にその存在を知り、英語が致命的に苦手にも関わらず即ポチってしまったほどのインパクトがありました。その日から今日までモチベーションMAXが続いています。

# ウェブ実行に期待すること

「ウェブブラウザで実行できるゲーム開発環境としては、世界で一番簡単なんじゃないか？」と誰かが豪語していましたが、お小遣いが限られていたり、まだゲーム制作のノウハウを知らない中学生・高校生さんからプロ級のクリエイターさんまで、それぞれのスキルに合った制作ツールとして無限の可能性を秘めているのは間違いなく、多くのツクラーさんが広くRPGツクールMVで独創的なゲームを生み出して世に公開してくれることを熱く望んでいます。

そのための一歩として、最も手軽なユーザゲームを公開する方法である、ウェブ実行の手順や必要になりそうなノウハウをまとめました。

# ウェブ公開する手順

ウェブブラウザで実行するには公開するウェブスペースが必要になりますので、今回はレンタルサーバサービスとして実績のある[さくらインターネット](http://www.sakura.ad.jp/)さんの「[さくらのレンタルサーバ](http://www.sakura.ne.jp/)」を契約してウェブに公開するまでの手順と、ウェブ実行で発生する Now Loading を以下に減らして、プレイヤーに快適に遊んでもらうかのノウハウを紹介していきたいと思います。

# RPGツクールMVのマニュアルから

RPGツクールMVのエディタで F1 を押して表示されるヘルプには、Android や iOS なんかの少々手間がかかる内容については長々と画面キャプチャを交えて詳細に説明ページを用意してくれているのですが、ウェブ実行については笑えるほど少ないです。

ヘルプ目次
　⇒ 出力フォーマット（これ目次タイトルとして不親切だと思います）
　　⇒ デプロイメント（配布物を生成する手続きのこと。これも耳慣れない用語ですね）
　　　⇒ Web上で公開する場合

にあるのですが……

```
プロジェクトフォルダをそのままWebサーバーにアップロードするとブラウザ上でプレイすることができます。
※プロジェクトフォルダは新規プロジェクトを作成・保存したときに［場所］で設定した箇所にあります。
※Game.rpgprojectとsaveフォルダはゲームの実行に必要ありませんが、そのままアップロードしても特に支障はありません。
```

たったこれだけです！
世にホームページを公開する方法の説明や参考書が大量にあるのは確かに前提としていいと思いますが、もう少し説明があってもいいと思います。すぐ上の「Android／iOSの場合」のリンク先のページの分量と丁寧さを分けられなかったのでしょうか。

**プロジェクトフォルダを最初に作成した時に設定した内容**なんてデフォルトのままＯＫボタンを押しただけで覚えていない人はどうすればいいのでしょう（笑
ＭＶエディタのメニューバーから「ゲーム」⇒「フォルダを開く」という説明にしなかった理由が見当もつきません。

# レンタルサーバを契約してみる

さくらのレンタルサーバには複数のプランがありますが、今回契約するプランは、機能的に年額1,543円のライトプランで大丈夫なのでそちらを契約します。ブログを設置したりサーバ上で何か特殊なことをしたい場合は **人気 No.1** とオススメされているスタンダードプランを選択しても良いかもしれません。

さくらインターネットさんはサービス利用者が非常に多いこともあり、マニュアル関係も充実しています。
何かわからないことがあれば、それぞれヘルプのページがありますのでそちらをご覧ください。

- [レンタルサーバーご利用までの流れ・お支払い方法](http://www.sakura.ne.jp/flow.html)
- [さくらのレンタルサーバ マニュアル目次](https://help.sakura.ad.jp/app/rs)
- [FFFTPのダウンロード (このリンク先だけ窓の杜)](http://www.forest.impress.co.jp/library/software/ffftp/)
- [さくらのレンタルサーバ FFFTP のFTP設定](https://help.sakura.ad.jp/app/answers/detail/a_id/2311)
- [さくらのレンタルサーバ 契約サービスの情報の確認方法](https://help.sakura.ad.jp/app/answers/detail/a_id/2473)
- [さくらのレンタルサーバ sftpは使えますか？](https://help.sakura.ad.jp/app/answers/detail/a_id/1138/)

# 契約手続き

[さくらのレンタルサーバ](http://www.sakura.ne.jp/)のページの「お申し込みはこちら」のページへ進み、「はじめて利用する」をチェック、サービスプランは「ライト」、ご希望の初期ドメインは公開した後にプレイヤーさんに入力してもらうURLのホスト名を入力します。今回、私は ` tkoolmv .sakura.ne.jp` として取得しました。

その後、登録者情報を入力し、入金方法として次のいずれかを選択します。

<dl>
<dt>クレジットカード：</dt>
<dd>
・手数料無しでご利用いただけます。お勧めです。<br>
</dd>
<dt>請求書払い：</dt>
<dd>
・コンビニ・ゆうちょ銀行・郵便局でお支払いいただけます。<br>
・請求書発行手数料として、別途324円が必要となります。<br>
・郵送による都合上、お手元に届くまで数日を要します。<br>
</dd>
<dt>銀行振込：</dt>
<dd>
・振込手数料はお客様によるご負担となります。<br>
・ご請求内容を電子メールでご案内いたします。<br>
</dd>
</dl>

その他の諸々の事項を入力していくと確認画面となります。

![sakura01.jpg](https://qiita-image-store.s3.amazonaws.com/0/99946/f867de60-ed6d-ef2b-4a89-2e1d8b6ef3f3.jpeg)

ここで **お申し込みをする** ボタンを押せば、仮契約完了です。
# メールを待つ

契約が完了すると折り返しのメールが届くのを待ちます。

登録が完了してすぐに

> お申込受付完了のお知らせ [abc12345]

５～10分程度で

> [さくらのレンタルサーバ] 仮登録完了のお知らせ

その少し後に

> [さくらインターネット]【新規お申込み】ご請求について [請求書No.1200000000]

と３通が順番に届きます。

サーバ料金の支払いは３通目となり、この中に書かれていますがお試し期間の２週間のうちに振り込み手続きをすれば契約完了です。

但し、振込の場合は確認に２営業日かかることを考慮してお支払期限の前々日には入金手続きをしておく必要があります。
前日や当日の場合は、一度アカウントが失効してしまいサーバにアップロードしたデータが削除されてしまうようです。
（※クレジットカードの場合は、会員管理画面からのキャンセルをしなければそのまま契約成立するようです）

# ウェブサーバにファイル転送する

ウェブサーバにファイルを転送するための情報は２通目に書かれています。


# FFFTP をセットアップする

ファイルをアップロードするソフトとして、Windowsで一番有名な FFFTP を使えるように設定します。

[FFFTP (窓の杜)](http://www.forest.impress.co.jp/library/software/ffftp/)からダウンロードしてインストールします。

開発者がバージョンアップを終了して開発コミュニティが引き継いで機能が強化されるようになって以降、セットアップ中に出てくる確認ダイアログの内容がセキュリティに詳しくない人にとっては意味不明で少々不安になる内容なので、ここで１画面ずつ確認していきます。
基本的に「次へ」と「はい」で問題ありません。変なソフトをインストールさせるステップはありません。

![cap0046.png](https://qiita-image-store.s3.amazonaws.com/0/99946/31cd80fb-d0af-8be8-1a1a-5538e263fdb4.png)

![cap0048.png](https://qiita-image-store.s3.amazonaws.com/0/99946/7151b8c0-1073-8237-102e-dbd58dd4024f.png)

![cap0050.png](https://qiita-image-store.s3.amazonaws.com/0/99946/65fe77b8-48c5-cb50-e1b3-2d80d4e2a664.png)

![cap0053.png](https://qiita-image-store.s3.amazonaws.com/0/99946/b3129c2b-5997-a428-96e3-0e1e26441fa8.png)

![cap0054.png](https://qiita-image-store.s3.amazonaws.com/0/99946/0db7c75f-81b0-5848-a514-a4833f575e4c.png)

![cap0055.png](https://qiita-image-store.s3.amazonaws.com/0/99946/ba3aa6a2-29f4-045e-d6ac-e20bec54911d.png)

# FFFTP にサーバ情報を登録する

FFFTPを起動して左上の赤いコンセントのマークから接続設定画面を開きます。

![cap0099.png](https://qiita-image-store.s3.amazonaws.com/0/99946/cf7cfd40-1a87-ce43-7294-90cdd7cf3cec.png)

次のように設定します

![cap0100.png](https://qiita-image-store.s3.amazonaws.com/0/99946/dfbc73e5-b03e-0549-39f7-1630c1f10fa0.png)

日本語のファイル名をがある場合にウェブサーバで使えるようにするために「文字コード」のタブの「ファイル名の漢字コード」を次のように「UTF-8」を選択しておきます

![cap0061.png](https://qiita-image-store.s3.amazonaws.com/0/99946/ca1f5727-5591-738a-0a85-e46cdeafdce3.png)

転送を高速化するため「特殊機能」のタブの中を次のように変更しておくと効果的です

![cap0058.png](https://qiita-image-store.s3.amazonaws.com/0/99946/4cb1b1c9-61fd-a8ec-f571-5c62536cba9e.png)

ここでおもむろに接続しようとしても失敗することがあります。

![cap0101.png](https://qiita-image-store.s3.amazonaws.com/0/99946/a5b580df-fbc6-64cd-2ec7-612c29051f3e.png)

下の方に 「・・・・・を探しています」「が見つかりません」 と出ています（サーバ名が xxxxxx になっているのはこのエラーを出すためにわざとしたもの）

![cap0065.png](https://qiita-image-store.s3.amazonaws.com/0/99946/c8377b2e-5c8e-de39-eb80-5f956df4f8f3.png)

２通目の内容に

> なおドメインの情報がインターネット全体に行き渡り、利用可能となるまで
> 　数時間～2日程度の時間が必要となります。あらかじめご了承ください。

とあるので、設定はされてもすぐには利用できないようです。私が契約した時は30分ほどで、使えるようになりました。

ところが、サーバの情報が登録されて接続できるようになると恐ろしい画面が出てきます。

![cap0067.png](https://qiita-image-store.s3.amazonaws.com/0/99946/64954b23-3930-be45-bcf2-635ac3acd607.png)

これは「セキュリティがしっかりした通信経路で接続しようとしているが、あなたが想定している情報と間違ってないか確認してくれ」というメッセージなのですが、パソコンに少し詳しいぐらいの人でも理解できるものではありません。
とりあえず先頭に書かれている `CNの一致：はい` と `検証に成功：はい` の２つがあれば問題なしと判断できるので、そのまま「はい」を選択して次に進みます。

![cap0096.png](https://qiita-image-store.s3.amazonaws.com/0/99946/8c9b4acc-1154-e186-d303-685e1c66a993.png)

またしてもよくわからない確認画面が出てきました。「次から暗号化を試行しなくなります」という本当に大丈夫か不安になるメッセージですが、「今回の手順でうまくいくはずなので今後もそれを使います」というだけの確認なので、「はい」を押してもらっても問題ありません。

# ファイルをアップロードする

ようやくファイルをアップロードする画面までたどり着きました。

- 左側の画面にはあなたのパソコンのどこかのフォルダ
- 右側の画面にはレンタルサーバのあなたのホームフォルダ

が表示されます。

今回は左側のフォルダを、RPGツクールMVのエディタのメニューバー ⇒ 「ゲーム」⇒「フォルダを開く」で確認できるフォルダへ移動させ、右側のフォルダから `www` を選択（ダブルクリック）してそれぞれ表示するフォルダを変更させます。

![cap0073.png](https://qiita-image-store.s3.amazonaws.com/0/99946/6a16f436-ae8d-a43e-89c7-6944c484a7d2.png)

次に左側のフォルダとファイルを全て選択（ウィンドウを選択してキーボードの Ctrl+[A] でも、マウスでドラッグでもできます）します。
その状態でツールバーにある青い上向き矢印をクリックするとアップロードが始まります。
最近のFFFTPは４並列でアップロードできるようになったので、ファイル数が多くてもかなり高速に転送できます。
全部でプロジェクト作成してそのままの場合は400メガバイトくらいのサイズなので利用しているネット回線によっては少し時間がかかるかもしれません。（私の環境では２分ほどで転送が終わりました）

![sakura04.jpg](https://qiita-image-store.s3.amazonaws.com/0/99946/c1dc96e5-8700-0765-a5b9-5378f99dbc4a.jpeg)

転送が終わると次のような画面状態になります。

![cap0076.png](https://qiita-image-store.s3.amazonaws.com/0/99946/aa06b41b-d8db-7673-da17-a470de1f729a.png)

これで、ウェブブラウザから利用できるようになりました。さっそく実行してみましょう。

# ウェブブラウザで実行する

ウェブブラウザを開いてアドレス欄に `http://xxxxxxx.sakura.ne.jp` (契約したURL) と入力してみましょう。

![cap0088.png](https://qiita-image-store.s3.amazonaws.com/0/99946/b2ceb1bf-cbc2-e4e2-9020-51ecf7f674c0.png)

RPGツクールMV製のゲームをプレイする時のおなじみの画面が表示されれば成功です。

![cap0087.png](https://qiita-image-store.s3.amazonaws.com/0/99946/e6234616-8285-26e0-9abb-b5e6547e315b.png)

これで、RPGツクールMVで制作したゲームがウェブで公開して世界中のユーザさんに遊んでもらえる準備ができました。
あとは渾身のゲームを作るだけです。

# でもちょっとまって……

タイトル画面でBGMが再生されるまで待った状態のデベロッパーツール画面

![cap0090.png](https://qiita-image-store.s3.amazonaws.com/0/99946/f8ff6ea6-4d88-6dde-89c6-2f1f6dacffbb.png)

タイトル画面から「ニューゲーム」を選んでゲームが始まった状態のデベロッパー鶴画面

![cap0092.png](https://qiita-image-store.s3.amazonaws.com/0/99946/a1cef350-7aee-efc2-3263-18d4abdb4e0c.png)

モンスターにエンカウントして戦闘が始まった時のデベロッパー鶴画面

![cap0094.png](https://qiita-image-store.s3.amazonaws.com/0/99946/469161dd-bf8a-eb0d-f0a7-9a0c19cb6cd1.png)

RPGツクールMVで制作したゲームをウェブで公開する時の問題点のひとつ、

> 何かと「Now Loading」が表示されて待たされる！

がダウンロード時間の秒数としてありありと出てしまっています。

- URLを開いてタイトル画面が表示されるまで13秒、BGMが鳴り始めるまでさらに9秒、
- 「ニューゲーム」を選択してからマップ画面が表示されるまでに5秒
- エンカウントして戦闘画面が始まるまでに6秒と、BGMが鳴り始めるまでにさらに7秒

ゲームの臨場感を阻害してしまっています。
これはゲームを遊んでもらう冒頭での出来事なので、そのゲームの印象にもつながってしまいます。

これを改善するためのノウハウを、12月23日の2度目のアドベントカレンダーで後編として説明したいと思います。