Monacaを使ってスマートフォンをゲームコントローラーにする方法

こんにちは。今回はKruyが書いた英語版アシアルブログの翻訳記事をお届けします。
（原文はこちら）

==============================

先日、Monacaで2つのおもしろいプラグインがリリースされました。HttpServerとWebSocketServerプラグインです。

チャットアプリ、マルチプレイヤーゲーム、ゲームコントローラーなどアイデア次第でおもしろいアプリが作れます。今回は、シンプルなゲームコントローラーを作りたいと思いますが、その前に2つのプラグインについて簡単に紹介します。

■HttpServer プラグイン
このプラグインを使うと、スマートフォンをウェブサーバー化することができます。モバイルウェブサーバーです！有効にすると、どんなブラウザーからでもウェブサーバー化したスマートフォンのIPとポートを指定してアクセスできるようになり、プロジェクトフォルダ内のコンテンツを公開することができます。今回はこのプラグインを使ってhtml5のゲームを公開します。

■WebSocketServer プラグイン
このプラグインを使うと、スマートフォンをウェブソケットサーバー化することができます。これでサーバー、クライアント間でリアルタイム通信することができます。今回はこのプラグインを使ってスマートフォンから、そこに接続しているクライアントにデータを送ります。

■注意点
・WebServer プラグインは、今のところAndroidでしか動きません。
・今回紹介するコードを実行するには、プラットフォームとしてMonacaが必要です。Monacaはハイブリッドアプリ開発のためのプラットフォームで、monaca.mobiにアクセスして登録すればすぐに使い始めることができますので、是非お試し下さい。

■サンプルゲームについて
ゲームコントローラーを作るということで、ゲームを用意する必要があります。
今回はpixi.jpからシンプルなデモを選びました。スクリーンをクリックすると歩いている男の子がジャンプするという、シンプルなゲームです。デモはこちら、ソースコードはこちらで見られます。このジャンプする男の子をコントロールするゲームコントローラーを作ります。下の図からわかるように、ユーザーが「Jump!」ボタンを押すと男の子がジャンプします！シンプルですが、今回のコンセプトを紹介するのには十分です。

■システム概要

■プロジェクト構成
クライアント用とサーバー用のコードを扱う必要がありますので、2つを分離する方がきれいです。ここでは、クライアント用のコードは全て「client」フォルダーに入れています。HttpServerプラグインに、このフォルダーからファイルを提供するようにリクエストします。

■クライアント側
ゲームのコードを「client」フォルダーに配置します。今回は自分のPCからファイルを転送するのにWebDav（スクリーンショットの下方に注目）を使っています。WebDavを使うと、たくさんのファイルを速く簡単に転送することができます。

「client/index.html」を開くと、2つのスクリプトタグが存在しないフォルダーを指していることがわかります。「pixi」フォルダーを「../../src」から「client」フォルダーにコピーします。それから、2つのスクリプトタグを以下のように直します。

■サーバー側
・WebServer プラグインの有効化
最初に、WebServerプラグインを有効にします。「Config」をクリックして「Plugin Settings...」を選びます。

次に、「Monaca Http and WebSocket Server」プラグインにチェックが入っていることを確認します。

・HttpServer
それでは、HttpServerのコードを見ていきましょう。以下のコードを「www/index.html」に設置します。

アプリケーションを動かします。うまくいけば、アラートダイアログでサーバーのIPアドレスとポート番号が表示されます。

これで、サーバーがうまく動いていることが確認できました。ブラウザーからこのスマートフォンのIPアドレスとポート番号を指定してアクセスします。

サーバーが動いています！ここまでのところは順調ですが、次に進んで収集がつかなくなる前に、コード構成をまとめましょう。アプリケーション用にAppネームスペースを作って、他のアプリケーションモジュールを付けられるようにします。ファイル名はapp.jsにします。

HttpServer関連のコードはhttp_server.jsに移動します。

・WebSocketサーバー
WebSocketに関するサーバー側のコードをwebsocket_server.jsに配置します。