Monaca+node.js+socket.ioでWebsocketアプリを作るてすと

最近はjavaばっかり使ってる気がしますが、
この手の記事は、ググってもあまり出ていないので書き留めておくことにしました。

つまりはPhonegap(cordova)なハイブリットアプリとnode.js鯖、socket.ioでWebsocketなアプリを簡単に作ろうということです。
Phonegap、大体はスタンドアローン(単体)で動くアプリの作り方や、ajaxを利用した通信なんかがほとんどなので。

そして、今回は構築環境が簡単で簡単にビルドもできるクラウド環境で動く
cordova開発プラットフォームMonacaを使います。
サーバに関してはこれもクラウド環境で。開発環境構築までやってくれるサーバサイド開発プラットフォームCloud9使います。
サーバサイドプログラミングもクライアントサイドプログラミングも全部クラウド任せ。
今の時代開発は何から何まで全部クラウドで出来るんだよ。ローカルなんていらないんだよ?っていう目的の記事でもあります。

とりあえず、そもそもCordovaフレームワークでsocket.ioって使えるのかなと思っていたのですが、公式にすごくわかりやすい例がありました。
Socket.IO with Apache Cordova

これを見ると、クライアント側のsocket.io.jsは公式が用意されているCDNを使えばcordovaでも問題なく動くらしいですね。
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>;

これで、ちゃんと動いてくれるのか試してみよう。
サーバ側のコード。socket.ioさえ使えればいいのでhttpサーバを立てる必要はありません。
process.env.PORTは、Cloud9で自動的にポートを振り分けてくれます。

var io = require('socket.io')(process.env.PORT);

io.sockets.on('connection', function (socket) {
    console.log('socket connected');

    socket.on('disconnect', function () {
        console.log('socket disconnected');
    });

    socket.emit('text', 'socket.io connect!');
});

クライアント側(monaca)に書くコード。省略してjsファイルだけです。

(function () { //即時関数
    //接続先の指定
    var url = "test-potproject.c9.io"; //websocketサーバのURL。

    //接続
    var socket = io.connect(url);
    socket.on('connect', function() {
        socket.on('text',function(text){
            alert(text);
        });
     });
}());

接続できればアラートが表示されるだけの簡単なアプリです。PCのChromeではちゃんと動作しました。
しかし、本元はアプリなんで、AndroidやiOSで動くのか。

で、何故だが動かない。
WebViewだから動くと思ったのに。試した端末としてはAndroid4.4です。対応してないってことはなさそうなんだけど・・・

で、試行錯誤したところ。WebsocketURLをws://test-potproject.c9.ioと記述しないと動きませんでした。ブラウザの仕様の問題か・・・
Web技術はやりやすくてとてもいいのだが、ブラウザが違うと動かなくなったりするのでこのあたりにぶち当たると痛い。

Android4.4 Nexus7で試したところですが、すぐに動きました。ほかのブログには接続に5秒とか待たされるとか聞きましたが、問題なく。
この部分もブラウザと端末で差がかなりありそうです。というか多分古いAndroidなんかでは動かないでしょうし・・・。
ネイティブJavaで記述されたsocket.ioのcordova pluginもありますが、古いのでこれはこれで最新版のsocket.ioで動くのか気になるところです。


ここから余談。

最近知りましたが、
プロトコルを省略して//blog.potproject.net/という風に書くこともできるらしいですね。
これも相対URLの一つだとか。ちゃんとしたものでクソ古いブラウザ以外は動作するらしいです。

つまり、画像を表示するには
<img src="//blog.potproject.net/wp-content/uploads/2015/02/aapicture.png" />
と書けばよろしいと。
表示させてみる。

後にhttps対応させるとかならこういう方法もあるのね。と。

WIIUとSplatoon買いました

IMG_0397
ついに念願のWiiUを手に入れた。

何故このタイミングで、ということですが、いろいろとひと段落してさらに勢いで購入。

Wii U すぐに遊べるファミリープレミアムセット(シロ)の中古です。
既に生産終了してますし、店頭でもあまり見かけたことないです。結構レアな気がします。

まあこのタイミングで買うわけとしては、ご存知の通りSplatoonをやりたいがための一択です。
現在楽しんでいます。

このゲームはヤバいですね。中毒性が。
他のゲームでは一試合10分以上掛かるのでちょうど切りのいいところとかでやめることが多いですが、このゲームに関しては平均3分。
つまりはやめると思うときが無いのです。
勝ってる時はまだまだ勝ちたいと思いますし、負けてる時は最後勝ってやめよう・・・etc。
後、人数待ちの時はやめられないという仕様もあってやめらんねえ。

スクショもこのブログに欲しいところですが、キャプチャーカードが無いため断念・・・
で、気づいたらこんな時間・・・という毎日を過ごしております。
お気に入り武器はプライムシューターコラボやホットブラスター、スクイックリンαあたりです。
とりあえずホットブラスターはローラーのような立ち回りの癖に壁を伝って攻撃できるので強い。
初めて使う人は癖のある武器なのかもしれないのですが、シューター経験者だと似たような武器が多いので強いと思います。

スクイックリンαはなんというか・・・マスケット銃のような感じで好きです。射程は他のより短いけどチャージ早いし。バリアで突っ込めるし。
ナワバリなら遠くから前線押せるので強いと思うのですよ。結局チャージャーで突っ込むのが好きって自分の好みもあります。後方支援っていいよね。

そんな感じで最近はゲーム漬けの日々です。