Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
Monaca
JavaScript
websocket
こんにちは。今回は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に配置します。


・WebSocket クライアント
サーバーコマンドを待ち受けるクライアントが必要です。その部分のコードは、「onmessage」イベントを待ち受けます。このコードは「client/websocket_client.js」に配置します。



■完成したコード
完成したコードはgithub上のプロジェクトに設置しました。自由にダウンロードして動かしてみて下さい!
https://github.com/kruyvanna/Monaca-Game-Controller


■まとめ
今回は、MonacaのWebServerプラグインを使うとゲームコントローラーアプリケーションが簡単に作れることを紹介しました。あなたが思い描くおもしろいアプリを作るのに、この記事を役立てていただけたら幸いです。