ツクールMVのゲーム内各所に匿名掲示板を設置するプラグイン

[RPGツクールMV](https://tkool.jp/mv/)の体験版を使ってプログラマ向けの内輪ウケを狙った作られた[SIerクエスト](http://sifue.github.io/SIerQuest/)が[Yahoo!ニュース](http://headlines.yahoo.co.jp/hl?a=20151118-00000044-it_nlab-sci)や[GIGAZINE](http://gigazine.net/news/20151116-sierquest/)にも取り上げられ、最近調子に乗って5倍ぐらいのボリュームの続編、[SIerクエスト2](http://sifue.github.io/SIerQuest2/)も公開したsifueです。

プレイして下さった方、本当にありがとうございます！！
なお、難しすぎるという意見から[攻略方法](http://sifue.hatenablog.com/entry/2015/12/15/002443)まで公開しました。

今回は、その[SIerクエスト2](http://sifue.github.io/SIerQuest2/)のために作られたゲーム内の様々な箇所に匿名掲示板を設置するプラグイン、mv-notesの使い方を説明します。

![1.png](https://qiita-image-store.s3.amazonaws.com/0/2382/2fbde600-2537-173e-4d65-8e9ec747903a.png)

![2.png](https://qiita-image-store.s3.amazonaws.com/0/2382/8db69b66-441b-3f91-a30e-c93abbc6ada1.png)

こんなことができます。

# mv-notes プラグイン
mv-notes プラグインは、ゲーム内の様々な場所に2chライクな匿名掲示板を設置するプラグインです。
Herokuの無料リソースで動くように作られており、内部的には、Node.js と PostgreSQL というデータベースが利用されています。またクライアント側にはjQueryというライブラリが利用されています。無論、全部無料で利用できます。

サーバー側のソースコードは及びプラグインは、[GitHub sifue/mv-notes](https://github.com/sifue/mv-notes)にてMITライセンスで公開しております。
サーバー側もクライアント側もそれぞれ100行ぐらいのJSで記述されていて非常に小さいアプリです。プルリクおまちしております。

## 機能
- ゲーム内様々な地点に匿名掲示板を設置できる
- 掲示板は共有することもできるし、内容を別にすることもできる
- 投稿内容を最新から8個取得できる
- 名前にはトリップを付けることができる
- リモートアドレスの情報からIDが生成される
- NG機能、削除機能はないので不適切な書き込みを見たら8回ぐらい書き込んで流さないといけない (ただしサーバーログには何かあった時のために保存)

## ねらい
ゲーム内で攻略のコミュニケーションだったり雑談を促したり、みんなこのゲームをやっているんだという雰囲気を作り出すことがねらいです。
デモンズソウルやダークソウルにあった、ステージ内のメッセージシステムに着想を得ました。

## 使い方
### 前提条件
- [Heroku](https://www.heroku.com/) のアカウントを作成してある
- [Heroku Toolbelt](https://toolbelt.heroku.com/) をインストール済みである
- Windowsの方は[Git for Windows](https://git-for-windows.github.io/)をインストール済みである
- [PostgreSQL download](http://www.postgresql.org/download/)からPostgreSQLをインストール済みである

これらの準備はしてあるものとして進めていきます。PostgreSQLは本体だけのインストールでその他のツールは不要です。最近インストール後にその他のツールをすすめられるようになってました。

### 利用手順
#### 1. サーバー側の準備
##### 1-1. まずプラグイン本体をクローン
WinではGitBash、Macではターミナルを起動して適当なフォルダで以下のコマンドを実行します。自分はよくマイドキュメントに`workspace`というフォルダを作ったりしています。

```shell-session
git clone https://github.com/sifue/mv-notes.git
cd mv-notes
```

これでmv-notesフォルダができれば完了です。このままコンソールは残しておいて下さい。

##### 1-2. Herokuにアップロード
Winの方は一旦、ファイルメニューからコマンドプロンプトをmv-notesフォルダで開きます。Macの方は引き続きコンソールを使います。

```shell-session
heroku login
```

以上のコマンドでログインしてください。

```text
Enter your Heroku credentials.
Email: zeke@example.com
Password:
...
```

と表示され、パスワードは非表示のままですが入力してログインできれば完了です。

```shell-session
heroku create
```

以上のコマンドでアプリケーションを作成します。

```text
Creating sharp-rain-871... done, stack is cedar-14
http://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git
Git remote heroku added
```

以上のように標示されれば作成は成功です。
次に、WindowsではGitBashに戻り、Macは引き続きターミナルで、

```shell-session
git push heroku master
```

と入力します。

```text
 * [new branch]      master -> master
```

と最後に表示されていればアップロードは完了しました。次に起動してアップロードされたサーバーを確認しましょう。


##### 1-3. Herokuアプリをブラウザで開く
Winの方はコマンドプロンプトで、Macの方は引き続きコンソールを使います。

```shell-session
heroku ps:scale web=1
heroku open
```

以上の2つのコマンドを実行するとブラウザで先ほどアップロードしたアプリが表示されます。そのURLを何処かに控えておきましょう。

```
http://sharp-rain-871.herokuapp.com
```

以上のようなURLだと思います。このURLはランダムで生成されたものですが、`heroku rename`コマンドで好きなものに変更もできます。

##### 1-4. データベースを作る
次にデータベースを作ります。Winの方はコマンドプロンプトで、Macの方は引き続きコンソールを使います。

```shell-session
heroku addons:create heroku-postgresql:hobby-dev
heroku pg:psql
```

以上2つのコマンドを順番に打ち込みます。

```
sharp-rain-871::DATABASE=>
```

こんなプロンプトが表示されたら、[DDL](https://github.com/sifue/mv-notes/blob/master/ddl.sql) を実行してテーブルとインデックスを作成します。

```sql
create table posts (
post_id serial primary key,
note_name varchar(200),
created_at timestamp with time zone,
data text
);
create index posts_note_name_created_at on posts (
  note_name,
  created_at
);

```

以上のSQLをコピーして貼り付けてEnterキーを押して下さい。

```
CREATE ...
```

のように表示されていれば成功です。これでHerokuのサーバー側の準備は整いました。


#### 2. ゲーム側の準備
##### 2-1. ゲーム内のプラグインフォルダにプラグインをコピー
ここからゲーム側でこのサーバーを使うように設定していきます。
gitでクローンしてきた`mv-notes`フォルダの`tkool-mv-plugins`フォルダに

- jquery.js
- MVNotes.js

以上2つのファイルがあるので、ゲームフォルダ内の `js/plugins` にコピーします。

##### 2-2. プラグインの設定
ゲームエディタのパズルみたいなアイコンのプラグイン設定を開き、ダブルクリックで、`jquery.js`と`MVNotes.js`の順でプラグインを設定します。

![3.png](https://qiita-image-store.s3.amazonaws.com/0/2382/e73c8911-f34d-04d9-bb39-520446217c59.png)

更に、`MVNotes.js`の項目をダブルクリックして、先ほどのHeroku上のアプリのURLのホスト名を入力してください。http://と末尾の/は不要なので気をつけて下さい。

![4.png](https://qiita-image-store.s3.amazonaws.com/0/2382/366fb509-cfcd-4099-dabd-5dde067604b9.png)

このようになればプラグインの設定は完了です。

##### 2-3. ゲーム内での利用
あとはゲーム内と特定のオブジェクトにイベントとして、以下の様なプラグインコマンドの設定をします。
![5.png](https://qiita-image-store.s3.amazonaws.com/0/2382/0ac7f97a-cabf-6c16-1613-2422f2abfed2.png)

プラグインコマンドは以下の用になっています。`notename` で指定されるノート名は、半角英数200文字以内で設定可能で、同じ文字列にしたものは同じ掲示板を参照することになります。

|動作  |プラグインコマンド  |
|---|---|
|掲示板を読む  |MVNotes read notename  |
|掲示板を書く  |MVNotes write notename  |

##### 2-4. ゲーム内での動作確認
まずは書くを選択して書き込みを行ってみて、
![10.png](https://qiita-image-store.s3.amazonaws.com/0/2382/f58fd4bf-d0f5-faf7-fa12-a705e6375c98.png)

![7.png](https://qiita-image-store.s3.amazonaws.com/0/2382/0f512dbf-a8cc-d4c0-000c-8b738fb07cc4.png)

最後に実際に読むを選択して書き込めたかチェックしてみましょう。
![8.png](https://qiita-image-store.s3.amazonaws.com/0/2382/c50fb9f6-2bef-85ee-5290-a2a3a17399a9.png)

これで完成です。うまくいかない時は、F8でディベロッパーツールを起動してデバッグしてみてもよいかもしれません。ホスト名やノート名がちょっと違うとエラーが出ているのではないかと思います。

大したサポートはできないかもしれませんが、[Gitter](https://gitter.im/sifue/mv-notes#)というチャットルームを作っておきました。不具合要望があったら、[GitHub Issues](https://github.com/sifue/mv-notes/issues)まで。共に[GitHub](https://github.com/)のアカウントが必要です。

## 最後に
以上が mv-notes プラグインの使い方の紹介でした。
あとは完全に後日談なのですが、最初入出力周りの実装を全てNode.jsで実装していたのですが、Web出力するとrequireがつかえず、Browserifyを使おうと思ったらそもそもnpmのパッケージ管理の仕組みが使えないということがわかり、やむなくjQueryをプラグインとして利用することにしました。
いつかツクールMVがnpmパッケージやモジュール対応されたらBrowserify版も作ってみたいなと思っています。

あと今回の件で自分自身、[SIerクエスト](http://sifue.github.io/SIerQuest/)こんなにバズって本当にいろんな人に反応をもらい、ゲーム作りが素晴らしい表現手段だということを思い知らされました。とはいえ自分はシナリオとシステムしか作る力がないので音楽やイラストを書かれている方には頭が上がりませんw

ではみなさんも楽しいツクールMVライフを！