スペースキーじゃなくてInputFieldで

Unityで入力した文字列をサーバーに送信できるようにする

 

WebSocket Unityとサーバーの双方向通信 Unity編

この記事で書いたものをレベルアップ
リンク先のものは、スペースキーの入力を通知していますが
今回はUIで入力された文字列をサーバーに送信するようにする

用語整理

Unity
統合開発環境を内蔵したゲームエンジン
2Dはもちろん、3DやVR用アプリケーションも作ることができる
Web,iOS,Androidなど様々な機器向けにデータをエクスポートできる

WebSocket
HTML5に定義されている技術規格
クライアントとサーバー間に「ソケット」と呼ばれる
持続的な接続を確立させることで
双方向からデータの送信を開始できるようになる(らしい)
基本的なHTTPだとクライアントからだけしか
データの送信を開始できない

( Unity ) websocket-sharpライブラリ
Unityで使用するC#用ライブラリ
WebSocketが簡単に作れるようになっている
ここからダウンロードできる

Visual Studio
MicrosoftのIDE
Unityをダウンロードすると一緒についてくる
Unity2018からのUnityで使うメインエディタ

InputField
Unityのオブジェクトの一つ文字列が入力できる
子要素にTextオブジェクト、Placeholderオブジェクトがある

実装

websocket-sharpライブラリインポート

websocket-sharpライブラリのビルドは
前回の記事に書いてあるので省略

テスト用Unityプロジェクトを作成( 2D )

Assetsに子ディレクトリPluginsを作成
Assets/Plugins内にビルドしたwebsocket-sharp.dllをコピー

websocket-sharpライブラリインポート終了

ここまでは前回と同じ

 

InputField配置

HierarchyにInputFieldを配置

Create > UI > InputField

追加された
Canvasが自動で生成されてその子になっている

 

スクリプト作成

新規スクリプトを作成

Assets > Create > C# Script

編集

https://docs.unity3d.com/ja/current/ScriptReference/UI.InputField.html
ここを参考にInputFieldの制御を書く

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class InputFieldController : MonoBehaviour
{
    public string inputValue;
    InputField inputField;

    void Start()
    {
        inputField = GetComponent<InputField>();
        InitInputField();
    }

    public void InputLogger()
    {
        inputValue = inputField.textComponent.text;
        Debug.Log(inputValue);
        InitInputField();
    }

    void InitInputField()
    {
        inputField.text = "";
        inputField.ActivateInputField();
    }
}

 

スクリプトとオブジェクトのリンク

ドラッグ&ドロップでInputFieldオブジェクトにスクリプトをアタッチ

InputFieldコンポーネント内、On End Editの ” + “をクリック
すぐ下にあるアタッチしたスクリプトをドラッグ&ドロップしてリンク

On End EditはInputFieldからフォーカスが外れた時実行
On Value Changedは入力値が変更されると実行

右側のプルダウンを選択

InputFieldController > InputLogger

入力テスト

これで入力できるようになった
Playボタンを押してテスト
文字列を入力して、Enterを押すとログに文字列が表示される

WebSocket通信

今入力された文字列をWebSocketでサーバーに送信できるようにする

新規スクリプトを作成

Assets > Create > C# Script

InputField.csの入力された文字列が格納される変数は
以下のようにpublicにして他のスクリプトで使用できるようになっている

public string inputValue;

作りこんでいくにつれて文字列の入力方法が
InputFieldから音声入力に変わる予定なので
WebSocketなど中心となるプログラムは別で作って
オブジェクト指向で入力方法だけ変えられるように作る

 

新規作成したmain.csを編集

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using WebSocketSharp;
using WebSocketSharp.Net;

public class main : MonoBehaviour
{
    GameObject InputField;
    InputFieldController script;

    WebSocket ws;

    string new_inputvalue;
    string old_inputvalue;

    void Start()
    {
        InputField = GameObject.Find("InputField");
        script = InputField.GetComponent<InputFieldController>();
        Debug.Log("InputField Conected");

        ws = new WebSocket("ws://27.120.98.26:9001/");
        ws.OnOpen += (sender, e) =>
        {
            Debug.Log("WebSocket Open");
        };
        ws.OnMessage += (sender, e) =>
        {
            Debug.Log("WebSocket Receive Message Data: " + e.Data);
        };
        ws.OnError += (sender, e) =>
        {
            Debug.Log("WebSocket Error Message: " + e.Message);
        };
        ws.OnClose += (sender, e) =>
        {
            Debug.Log("WebSocket Close");
        };
        ws.Connect();
    }

    void Update()
    {
        new_inputvalue = script.inputValue;

        if (new_inputvalue == old_inputvalue)
        {
        }
        else
        {
            string send_message = new_inputvalue;
            old_inputvalue = new_inputvalue;
            Debug.Log("InputField Update");
            Debug.Log("WebSocket Send Message Data: " + send_message);
            ws.Send(send_message);
        }
    }

    void OnDestroy()
    {
        ws.Close();
        ws = null;
    }
}

スクリプトをHierarchyのCanvasでへドラッグ&ドロップでアタッチ

入力テスト②

動作するかだけ確認
Playボタンを押してテスト

回線が開いてないからエラーが出ているけど
送信しようとしているのでOK
完成!

サーバー側との通信

サーバーでPythonファイルを実行する

python3 /home/ユーザー名/python3_project/mei/version_1/arp.py

こんな感じのメッセージが出たら準備OK

INFO:websocket_server.websocket_server:Listening on port 9001 for clients..

Unity側Playボタンを押してプロジェクトを実行
コンソールに接続完了メッセージが出ると同時に
サーバー側でも接続完了メッセージ

以降文字列を入力してEnterを押すと送受信される

WebSocket Unityとサーバーの双方向通信 Unity編

WebSocketを使ったUnityとサーバーの双方向通信の実装

WebSocketを使ってUnityとサーバー間で
テキストデータを送り合うことを第一目標にしています

今回は其の弐
Unity側の処理を書きます

前回はこちらです

WebSocket Unityとサーバーの双方向通信 サーバー編

用語整理

Unity
統合開発環境を内蔵したゲームエンジン
2Dはもちろん、3DやVR用アプリケーションも作ることができる
Web,iOS,Androidなど様々な機器向けにデータをエクスポートできる

WebSocket
HTML5に定義されている技術規格
クライアントとサーバー間に「ソケット」と呼ばれる
持続的な接続を確立させることで
双方向からデータの送信を開始できるようになる(らしい)
基本的なHTTPだとクライアントからだけしか
データの送信を開始できない

( Unity ) websocket-sharpライブラリ
Unityで使用するC#用ライブラリ
WebSocketが簡単に作れるようになっている
ここからダウンロードできる

Visual Studio
MicrosoftのIDE
Unityをダウンロードすると一緒についてくる
Unity2018からのUnityで使うメインエディタ

クライアント( Unity )側実装

websocket-sharpライブラリダウンロード

以下Gitにアクセスして”Download ZIP”
https://github.com/sta/websocket-sharp

websocket-sharpライブラリビルド

ダウンロードしたディレクトリを解凍
websocket-sharp.slnファイルをダブルクリック

Visual Studioで開く

サブプロジェクトExampleをソリューションから削除

ビルド方法をReleaseに変更

メニューからビルドを実行

Build>Build All

成功するとwebsocket-sharp/bin/Release/websocket-sharp.dllが生成される

Unityにwebsocket-sharpライブラリをインポート

テスト用Unityプロジェクトを作成( 2D )

Assetsに子ディレクトリPluginsを作成
Assets/Plugins内にビルドしたwebsocket-sharp.dllをコピー

websocket-sharpライブラリインポート終了

 

スクリプト作成

新規スクリプトを作成

Assets > Create > C# Script

色々調べながら、スペースキーを押すとメッセージが
サーバーへ送信されるスクリプトを書く。できたのはこんな感じ

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using WebSocketSharp;
using WebSocketSharp.Net;

public class main : MonoBehaviour
{

    WebSocket ws;

    void Start()
    {
        ws = new WebSocket("ws://27.120.98.26:9001/");

        ws.OnOpen += (sender, e) =>
        {
            Debug.Log("WebSocket Open");
        };

        ws.OnMessage += (sender, e) =>
        {
            Debug.Log("WebSocket Receive Message Data: " + e.Data);
        };

        ws.OnError += (sender, e) =>
        {
            Debug.Log("WebSocket Error Message: " + e.Message);
        };

        ws.OnClose += (sender, e) =>
        {
            Debug.Log("WebSocket Close");
        };

        ws.Connect();

    }

    void Update()
    {

        if (Input.GetKeyUp(KeyCode.Space))
        {
            string send_message = "SpaceKey_pressed";
            Debug.Log("WebSocket Send Message Data: " + send_message);
            ws.Send(send_message);
        }

    }

    void OnDestroy()
    {
        ws.Close();
        ws = null;
    }
}

main.cs(スクリプト)ができたら、SceneのMain Cameraへ
ドラッグ&ドロップでアタッチする

Unity側実装終了

 

接続テスト

サーバーでPythonファイルを実行する

python3 /home/ユーザー名/python3_project/mei/version_1/arp.py

こんな感じのメッセージが出たら準備OK

INFO:websocket_server.websocket_server:Listening on port 9001 for clients..

Unity側Playボタンを押してプロジェクトを実行
コンソールに接続完了メッセージが出ると同時に
サーバー側でも接続完了メッセージ

以降スペースキーを押すごとにメッセージが送受信される

 

まとめ

やっとサーバーっぽいことができた!
WebSocket色々使えるので、これから作る

サーバーをたてる!(契約編)

やりたいことができたので、サーバーを立てることにしました

プロパイダー選び
父親が過去に取得して放置していたwashio.netなるドメインがありました
Value-domeinでとったものだったので同管理会社の
Core-Serverに最初に目をつけました
Python3も動くし、WordPressも

良さげ…と思ったら気になる部分が

基本料金は198円/月なのですが、オプションにやたら
高いものが隠れています
特に説明もなく、ちょっと調べても
不都合なことがありますくらい出てきません

よくわからなかったので、きちっと調べたところ
Core-Serverは共有サーバーなので
いくつかの契約でiPアドレスを共有している

で、仕様に書いてあるSSL対応というのは
そのiPに対してとった共有SSLというもの(らしい)
ということで、セキュアにすると自分のドメインを
つけられなくて、Core-Serverのドメインになる
(間違ってたら教えてください)

Xcodeでリンク作ったりするときは、例外にしなければ
SSLの方がいいので、https://www.washio.net/ にしたい…
でも恐ろしいことに、オプションの割引がいつまでなのか
書いてない…(見つけなれない?)

心配なので、別のプロパイダーを探すことにしました。

プロパイダー選びPart2
そも、探しているサーバーは
・安いやつ
・Python3が動く
・Apache
・WordPressも使える
・他社ドメイン逆引きできる
…という感じのものです

Prototypecafeで店長?さんがオススメしていたのは
VPSというやつでした
VPSというのは、自分で好きなOSやソフトが入れられて
root管理者権限が行使できるサーバーとのことでした

VPSの価格比較サイトがあって、容量などから
絞り込んでいくと
Serverman@VPSというのがありました。
Dream train internetという会社のものです
Entryプランで467円/月
VPSなのでソフト系はほぼほぼ気にしなくてよし
他社ドメイン逆引きできる

ここで気づきましたが、VPSということは
そのそれぞれに独自iPが付いているのだと思うので
こっちだとあのオプションを気にしなくて済む?

これ良さそうだなーということで
プロパイダー選びの旅はゴールしました

 

プラン選び
Serverman@VPSでは初期インストールOSを
CentOS7(64bit)
CentOS6(64bit/32bit)
Debian7(64bit)
Debian6(64bit/32bit)
ubuntu14.04LTS(64bit)
ubuntu12.04LTS(64bit)
から選べます

本屋さんで本棚をふわーって見た感じだと
CentOS7が多かった

でも、ラズパイを家でさわっていたので
似たようなコマンドが使えるやつがいいなというのと
Let’s encryptが入ってるということで
Debianかubuntuに絞りました

さらに、AI関連のページだとubuntu指定が多かったので
最終的にubuntu14.04LTS(64bit)を選ぶことに

契約はEntryプランでサーバーを借りました

 

他社ドメイン逆引き設定(Value-Server側)
IPv4 27.120.98.26 のサーバーを借りました
ここに、washio.netのドメインを関連付けます

このドメインのiPは?と聞くことを正引き
このiPのドメインは?と聞くことを逆引きと言う

まず、Value-domeinのコントロールパネルで
washio.netのiPは27.120.98.26であると設定します

コントロールパネル>ドメイン>DNSレコード/URL転送の設定から
契約しているドメインの管理画面を開きます
画面にて、必要情報(サーバーのiP)を入力します

入力したら、変更ボタンを押して、確定します

 

他社ドメイン逆引き設定(Serverman@VPS側)
先の設定で、washio.netのiPは27.120.98.26であるとされました

なので、次はServerman@VPSに、私のドメインはなーに?
と質問させるよう設定します

MyDTI(会員情報・お手続き)を開きます
MyDTI>契約中サービス>確認・変更>他社管理ドメイン設定
で設定ボタンを押し、必要情報(ドメイン名)を入力します

設定が完了すると、以下のようになります

これで他社ドメイン逆引き設定は終了。
ブラウザでhttp://ドメインネーム/と入力すると、
Apache2の初期画面が出てきます。

 

終わりに

慣れない作業で、混乱しました
何かおかしい部分があれば教えてください