Unity+PHP+JavaScriptで遊んでみる

はいどーもこんにちはニートです。
サーバー&データベースとクライアントの関係を知りたくなったので、本日はUnity+PHP+JavaScriptで遊んでみようと思いますよ。

なにして遊ぶのか

作りたいのはこんな感じのものです。

1.Unity製のアプリからサーバーに問い合わせ、データベースから最新のデータを返却してもらう
2.Unity製のアプリからサーバーに新規データを送信し、データベースに格納してもらう
1.ブラウザからサーバーに問い合わせ、データベースから最新のデータを返却してもらう
2.返却されたデータをJavaScriptで加工し、HTMLとして表示

サーバーサイドではPHPのプログラムを動かします。
また、データベースとしてMariaDBを使います(MySQLってなってたけどMariaDBらしい)。
ブラウザ側ではJavaScriptで仕掛けを作ります(いわゆるAjax)。
Unity製アプリはC#ですね。

サーバーを立ち上げる

僕はサーバーサイドの知識が全然ないので、PHPの入門書に書いてあったXAMPPをそのまま導入しました。
ただ別にPHPやMariaDBである必要はないです。
単に僕がかろうじて入門書を読んだことがある言語がPHP&MariaDBだったというだけの話ですw
慣れてるやつでいいと思います。

データベースを作成する

unity-testという名前のデータベースで、code(数値型でAIに僕はしました),name,levelカラムを用意してください。
具体的にはこんな感じ(中身はなくて大丈夫です)。

ぶっちゃけnameとlevelしか使わないので、この二つがあれば何でもいいと思います。

ブラウザ用ファイルの作成

まずは画像で言う「クライアント」の処理を作っていきたいと思います。
というわけでHTMLファイルをドン。

loadAjax.jsも作ります。
こんな感じ。

以上を設置すると、index.htmlはこんな感じの表示になると思います。

コード的には難しいところは特にないと思うのですが、僕はHTMLもブラウザ向けのJavaScriptもド素人ですw
ES2017のコードが動くかどうかもよくわからなかったので、とりあえず書籍の通りの書き方でやっています。
そこのところだけご了承ください(コードを鵜呑みにしないほうがいいということです)。

サーバー用ファイルの作成

お次はサーバーで動かすファイルを作成します。
言語はPHPですね。
まずはuserDataLoader.phpから。

このファイルはデータベースにアクセスし、結果をjson形式で返します。
JSON_UNESCAPED_UNICODEを指定しておかないとUnity側で見たときJsonデータが読みにくかったので、これも指定しておきます。

お次はデータベースにデータを追加する側のコードです。

このファイルにはUnityアプリからアクセスします。
POSTされたデータを受け取り、データベースに追加しています。

なお、僕はPHPは入門書をちょっと読んだだけのド素人なので、このコードは「とりあえず動く」というレベルのものです(入門書のコードをちょっと変えただけ)。
セキュリティも非常に怪しいし、書き方は真似しない方がいいんじゃないかなあと思います。
もう少し勉強したいですね。

Unity側のコード

さて最後にUnity側のコードを作成していきます。
シーンに「結果表示ボタン」「結果表示テキスト」「作成したデータ送信ボタン」をuGUIで作成しておいてください。
なお、コードにはUniRxを使っています。

まずは送信するデータを作成します。

名前とレベルを持っているだけですね(僕はフィールドには「_」というプレフィクスを付けるようにしているのですが、DBのカラムと合わせるため今回は省いています)。
で、これをJsonUtilityでデシリアライズするとき、配列型だとうまくいかないので、こんな感じのラッパークラスを作成しておきます。

参考URL:http://blog.cluster.mu/2016/08/jsonutility_instead_of_litjson/

次はJSONデータを作成し、送信するクラスです(ここではボタンを押すたびにデータが変わるようにしているだけ。本来はユーザーのデータを送信する)。

TARGET_URIは自分の環境に合わせて変更してください。

これでサーバーにPOSTし、サーバーではuserDataPoster.phpが働いてデータベースにデータを追加してくれます。
最後はUnityアプリにデータを落とす動作です(ブラウザでやったことをUnityでもするだけ)。

こちらもTARGET_BASE_URIを自分の環境に合わせて設定してください(ファイル名は不要)。
ボタンを押すとサーバーと通信を開始し、userDataLoader.phpからJSONデータを返してもらいます。
そのデータをC#が読み込める形に復元し、最終的に文字列を組み立て、テキストに表示させています。

これで完成ですね。
Unityから送信したデータはUnity内でもブラウザでも見ることができます。
ブラウザから見るときはJavaScirptからリクエストを発行し、サーバーからデータを返してもらっています。


最後にもう一度、どんな風な設計になっているのかの画像を置いておきます。

問題点

今回作成したプログラムの問題点を自分なりに考えてみました(不慣れな部分のコードが汚いのは無視)。

1.誰でもuserDataPosterにアクセスできるので、悪意のあるユーザーがデータベースに追加し放題なのが問題。アプリごとにはじく設定とか欲しい? どうやる?
2.カラム名が変わったら全部のプログラムに対して変更が必要。これはしょうがない?
3.アクセス制限の設定が全くわからなかった
4.フレームワークを利用してないので余分なコードを書きまくった気がする

1と3は似てますね。
とどのつまりはセキュリティの問題です。
これは要勉強ですね……。

2はそもそもカラムというか、データベースの要素を変更しないようカッチリ決めてから作る必要があるのかなーと思いました。

4はPHPとJavaScirptにどんなフレームワークがあるのか知らないのでしょうがないですねw

勉強できたこと

基本的に通信しないプログラムしか作ってこなかった僕も、ついにここまで来ました。
もう通信関連の処理にも苦手意識はありません。
少なくとも、通信するAPIが用意されているクラスを利用するくらいはもう問題ないでしょう。

また、サーバー&データベースとクライアント(今回ならブラウザとUnity)の関係はボンヤリと知ることができたかなと思います。
今まで「サーバー? データベース? なんでそんなものがあるの??」みたいな感じだったので、これはよい進歩ですね。
実際に自分でサーバーを立ち上げてゲームを作るかどうかはさておき、今回の学びで得た知識はFirebaseを利用するときにも活躍しそうだなーと思いましたよ。

終わりに

今回はPHPで作りましたが、イケてる感じの方はRuby on Railsとかで何やらしているらしいです。
僕も真似したいなあと思いつつ、なかなか勉強する時間が取れそうにありません。
ちゅーかどの言語、フレームワークを使うにせよセキュリティの勉強のほうが先なのかなあと思いました。
今のままだとガバガバ過ぎますもんね……。

ほなそんな感じでまた。

フォローする