2013年8月8日

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つのスクリプトタグを以下のように直します。