今気になっている「node.js」「ゲームAI」「リーンスタートアップ」について特集が組まれていたので買ってしまいました。
どれも触り程度という内容ですが、それぞれがどういうものかを知るには丁度よかったです。



(1) node.jsについて
概要説明と簡単なプログラム例が掲載されています。
記載しているのはサイバーエージェントの方でした。
なんとなく触っているnode.jsですが、イベント処理の特性とかエラー処理の書き方とか、
何が得意で何が不得意なのかがざっくり理解できたと思います。

現在興味を持っているリアルタイム通信についても触れていて、現在の問題点や
スマホで実装するときの注意点が掲載されてあって勉強になりました。


(2) ゲームAIについて
ゲームを作っていく上で、敵が登場する場合には必ずAI(人工知能)が必要になります。
本格的なゲームAIの参考書を買う前に「人工知能ってどういうものか」を知るには丁度よかったです。
記載しているのはスクエニの方でした。

ゲームを面白くするのは「適度な強さの敵」なんですよね。
まだこの分野に手を付けるのは早いかなー。


(3) リーンスタートアップについて
最近目にすることが多くなった単語の1つに「リーンスタートアップ」があります。
自分で調べてもあまりピンとこなかったのですが、
この雑誌ではクックパッドの方が実例を挙げて説明しているので、
具体的なイメージが伝わってきてよかったです。


常に新しい技術や方法論が生まれているので、どれが最適な方法なのかはいつも手探り状態です。
そういう状況で、出来るだけ効率よくものづくりが出来ればなぁと思っています。

効率よくアプリを作って、アプリが安定動作して、ユーザー満足度が高くて、長く遊んで貰える！
これが理想です。

Google Map APIの利用制限と有料プランが発表になってから、
いつか別APIを使ったものに移行いしないとなぁと考えていました。

Google Maps APIの有料化・料金・利用制限まとめ:
http://matome.naver.jp/odai/2131976887859594401

Yahoo Map APIも同じく利用制限があるので、
Foresquareで使われているという「OpenStreetMap」が良さそうということで使ってみました。
今回も、Webサイトで実現しようということでJavascriptでの実装となります。

日本語ドキュメントが少ないので調べるのに時間がかかってしまいましたが、
意図したことが出来たので備忘メモ。

OpenStreetMap 日本語サイト: ←OpenStreetMapのサービスを利用してみたいとき
http://openstreetmap.jp

OpenStreetMap API 実験室 ← OpenStreetMap APIの基本的な使い方
http://openstreetmap.piyolab.net

↑API実験室をひととおり読むと、基本的な使い方がわかります。
地図を表示するだけなら簡単でした。

問題はここから、地図上に図形を描画したい。
ということで、参考にしたサイトはこちら↓

Debianでka-Mapのメモ プラスOpenLayers とGeoExt:
http://nobmob.blogspot.jp/2009/03/openlayers-17a.html

この中のプログラムをそのまま使ってもうまく表示されません。
理由は、座標の変換が必要だったからでした。

それでは、はじめから手順を追ってみます。

(1) OpanLayersライブラリを使用
図形を描画するには、OpenLayersライブラリを使用します。
OpenLayersのサイトから、tar.gzまたはzipファイルをダウンロードします↓
http://openlayers.org

OpenLayersのリファレンス(日本語)
http://mapabc.wikidot.com/openlayers:menu

解凍したら、OpenLayersを動作させるために必要なファイルだけをnginxにアップロードします。
アップしたのは以下の3点です。

・imgディレクトリ
・themeディレクトリ
・OpenLayers.js
※「OpenLayers.js」「img」「theme」は相対位置が決まっているようです。
　3点とも同ディレクトリに置く必要がありました


コーディング内でOpenLayers.jsを参照すれば、OpenLayersが使用可能になります。
↓こんな感じ
<script src="http://[取得したドメイン]/js/OpenLayers/OpenLayers.js"></script>

詳細は割愛しますが、OpenStreetMapを表示したい箇所のタグはこのようにしました↓

<div id="canvas" style="width:320px; height:480px"></div>

(2) Javascriptでの実装
OpenStreetMapを表示するJavascript部分は↓のとおりです。
ほとんど参考サイトのままです。

--------------------------------------
    // マップのオプション設定
    var options = {
        controls:[
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.ZoomPanel(),
            new OpenLayers.Control.Attribution()
        ],
        restrictedExtent:new OpenLayers.Bounds(139.7, 35.6, 139.8, 35.8)
                                       .transform(
                                           new OpenLayers.Projection("EPSG:4326"),
                                           new OpenLayers.Projection("EPSG:900913")
                                       )
    };

    // マップの初期化(オプション付与)
    var map = new OpenLayers.Map("canvas", options);
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);

    var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);

    // 点のプロパティ
    var style_point = {
        strokeColor: "#FF6347",
        fillColor: "#FF6347",
        fillOpacity: 0.2,    // 内側の透明度
        strokeWidth: 4, // 外周の太さ
        pointRadius: 10  // 半径
    };

    var vectorLayer = new OpenLayers.Layer.Vector("描画テスト", {style: layer_style});

    // 点の座標を決める
    var point = new OpenLayers.Geometry.Point(139.760, 35.680);

    // 座標を変換 ※この処理が新たに必要だった
    point.transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
    );
    
    // 点を生成
    var pointFeature = new OpenLayers.Feature.Vector(point, null, style_point);

    // レイヤの追加と描画する図の指定
    map.addLayer(vectorLayer);
    vectorLayer.addFeatures([pointFeature]);

    // 地図の中央座標を指定
    var lonLat = new OpenLayers.LonLat(139.76, 35.68)
                               .transform(
                                   new OpenLayers.Projection("EPSG:4326"),
                                   new OpenLayers.Projection("EPSG:900913")
                               );

    // 中央とズーム値を指定
    map.setCenter(lonLat, 15);
--------------------------------------

実行結果↓



テストがうまくいったことだし、次はアプリに適用してみよう。

百マス計算 ではWebView内で折れ線グラフと円チャートを表示しています。

折れ線グラフと円チャートが欲しいと思ったとき、
Android SDKで実装すると、今後iPhoneのSDKでも独自に実装しなくてはいけません。

そこで、Webページで折れ線グラフと円チャートを表示するようにすれば
Android/iPhoneともにWebViewを通して同じものが表示できるということで、Webページで実装しました。

↓折れ線グラフ


↓円チャート


実装したときの手順を備忘メモ。
流れはこんな感じ

(1) jQueryの参照先を探す
(2) jQuery Visualizeをダウンロードしてnginxに置く
(3-1) コーディング(折れ線グラフ)
(3-2) コーディング(円チャート)

====================================================================
(1) jQueryの参照先を探す
必須となるjQuery。これを使うには、まずはライブラリを持ってくる必要があります。
ダウンロードしても良いのですが、GoogleがCDN(Content Delivery Network)に用意しているファイルを読み込んで使います。
少しでも自サイトの負荷を減らしたいので……。

↓今回使用したもの
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js


(2) jQuery Visualizeをダウンロードしてnginxに置く
こちらはCDNを見つけられなかったので、ダウンロードしました。
静的ファイルなので、nginx側に置いてコーディング時に参照します。

■jQuery Visualize本体 ダウンロード元
https://github.com/filamentgroup/jQuery-Visualize
→images, css, js のディレクトリをダウンロード
→下記のnginx内にアップロード

nginx側の置き場所:
/usr/share/nginx/html/

これで準備が整いました。

あとは、node.jsとexpressフレームワークを使ってWebページを実現させた
「[Web] node.jsを使ってみる(さくらVPS編)」
をもとに、コーディングを始めます。
折れ線グラフと円チャートを実現させるにあたり、参考にしたサイトは↓です。

■jQuery Visualizeサンプル
http://filamentgroup.com/dwpe/#codeexamples
↓
Chart
↓
折れ線グラフと円チャート


■共通部分<head>のコーディング
まずは、(3-1)(3-2)共通の<head>タグ。1ファイルに記述しています。
※必要部分のみ抜粋して掲載しています
※[取得したドメイン]は、適宜読み換えてください

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>100マス計算(100 Squares Calc)クリア状況</title>
    <link rel="stylesheet" type="text/css" href="http://[取得したドメイン]/css/basic.css">
    <link rel="stylesheet" type="text/css" href="http://[取得したドメイン]/css/visualize.css">
    <link rel="stylesheet" type="text/css" href="http://[取得したドメイン]/css/visualize-light.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://[取得したドメイン]/lib/visualize.jQuery.js"></script>
    <script>
        $(document).ready(function(){ 
             $("table.line").visualize({type:"area", width: "230px", colors: ["#7777FF"]});
             $("table.line").hide();
             $("table.pie").visualize({type:"pie", width: "230px", colors: ["#7777FF", "#FF7777"]});
             $("table.pie").hide();
        });
    </script>
</head>

ここでは、jQueryをCDNから参照して、jQuery Visualizeに必要な「basic.css」「visualize.css」「visualize-light.css」
「visualize.jQuery.js」をnginxから参照しています。
下部のJavascriptはjQueryでjQuery Visualizeを使っている箇所です。
「type:"area"」が折れ線グラフ(塗り潰し)、「type:"pie"」が円チャートです。
jQueryで hide() しているのは、元となる表を表示したくないために隠しています。

また、「meta name="viewport"」は解像度をスマホの画面に合わせるためのパラメータ設定です。
これがないとPCと同じ表示になってしまって、折れ線グラフと円チャートが小さく表示されてしまいます。

(3-1) コーディング(折れ線グラフ)
折れ線グラフの元となる<table>タグの記述は↓のとおりです。

<h1>クリア時間とプレイヤー数<br />(Clearing time and number of players)</h1>
<table class="line">
    <caption>足し算(Addition)</caption>
    <thead>
        <tr>
            <td>
            </td>
            <th scope="col">40</th>
            <th scope="col">50</th>
            <th scope="col">60</th>
            <th scope="col">70</th>
            <th scope="col">80</th>
            <th scope="col">90</th>
            <th scope="col">100</th>
            <th scope="col">110</th>
            <th scope="col">120</th>
            <th scope="col">130</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">プレイヤー数(Number of players)</th>
            <td>1</td>
            <td>2</td>
            <td>5</td>
            <td>6</td>
            <td>4</td>
            <td>6</td>
            <td>7</td>
            <td>11</td>
            <td>11</td>
            <td>104</td>
        </tr>
    </tbody>
</table>

jQuery Visualizeで参照するために「class="line"」としています。


(3-2) コーディング(円チャート)
円チャートの元となる<table>タグの記述は↓のとおりです。

<h1>クリア状況<br />(Cleared situation)</h1>
<table class="pie">
    <caption>足し算(Addition)</caption>
    <thead>
        <tr>
            <td></td>
            <th scope="col">クリア</th>
            <th scope="col">パーフェクト</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">クリア率(Rate of complete)</th>
            <td>144</td>
        </tr>
        <tr>
            <th scope="row">パーフェクト率(Rate of perfect)</th>
            <td>14</td>
        </tr>
    </tbody>
</table>

jQuery Visualizeで参照するために「class="pie"」としています。

(3-1)(3-2)ともに、各数値はMySQLから引っ張ってきています。
MySQLを使った方法は 以前の記事 で掲載したので割愛します。

これで折れ線グラフと円チャートが実現できました。
とても便利なライブラリでした。

さくらVPSで自らWebサーバーを用意したのはいいけど、ずっと目で監視するのは大変だなぁと思っています。
そこで、色々調べて良さそうなツールがあったので試してみています。

Uptime Robot:
http://www.uptimerobot.com

無料で使えて、最大50サイトまで登録できるそうです。
監視は5分単位。
通知方法がメールだったりツイートだったり、iOSへのSMSも出来るという優れもの。

ということで、早速登録。
画面上の「Start Now」を押して必要事項を記入します。



登録が終わると登録確認メールが届くので、それに記載されてあるリンクをクリックして認証します。
認証が成功した画面↓



早速サインイン↓



サインイン成功↓



管理画面に入って「My Settings」を選択したら、タイムゾーンを設定します。
画面右に通知先が登録されているので、好きな通知先を登録します↓



「My Monitors」を押して監視画面に移ります。
まだ何も登録していないので、登録してみます。
今回は、サイトが落ちてないか確認したいので、以下を入力します。

Monitor Type = HTTP(s)
Friendly Name = 管理画面内で区別するための名前
URL = 監視対象のURL

「Alert contacts to notify」で通知先を選択します↓



登録が完了すると「My Monitors」に追加されます。
「Status」が緑色になっているので、サイトは有効です。
あとは5分おきに監視結果が反映されていきます↓



サイトの有効/無効だけではなく、キーワードの探知もできるようです↓



ちなみに、サイトが落ちてる場合は「Status」が赤く表示されます↓



管理画面で設定してすぐには通知メールは届きませんでした。
でも、数時間たった後にサイトを落としてみたら通知メールが届きました。

暫く使ってみて問題なかったら、これに決めようと思います。

100マス計算のクリア状況を表示するために node.js を使ってMySQLと連携しています。
動かし始めて暫くして、SQLが「too many connections」というエラーを返すようになりました。

原因を調べていたところ、こちらのサイトが参考になりました↓

MySQLがtoo many connectionsエラーを出して接続出来ない場合:
http://d.hatena.ne.jp/benelux/20120203/1328254993

まずは、MySQLの同時接続数の最大値を確認↓

mysql> show variables;
(略)
| max_connections | 151
(略)

ということで、参考サイトの手順を真似て確認してみました↓

$ mysqladmin -u root --password=[rootのパスワード] extended-status | grep -E 'Max|Threads'
| Max_used_connections              | 152      |
| Threads_cached                    | 0        |
| Threads_connected                 | 152      |     <--- 151オーバー! MySQLに接続できない!
| Threads_created                   | 9660     |
| Threads_running                   | 1        |

デフォルトの151を超えてるからかー。

ということで、まずはnode.jsを再起動するとThreads_connectedが減ったので実行↓

$ forever restart xxxxxxxxx.js

もう一度確認↓

$ mysqladmin -u root --password=[rootのパスワード] extended-status | grep -E 'Max|Threads'
| Max_used_connections              | 152      |
| Threads_cached                    | 0        |
| Threads_connected                 | 94       |     <--- あまり減ってない
| Threads_created                   | 9712     |
| Threads_running                   | 1        |

Threads_connected がまだ多い。うーん。

MySQLの接続処理を見直してみました。
参考サイトを見ると、「client.end()」として
MySQLの接続を切断しているみたいです。

この処理をしてなかった！

「client.end()」を適当な箇所に追加してnode.jsを再起動。

$ mysqladmin -u root --password=[rootのパスワード] extended-status | grep -E 'Max|Threads'
| Max_used_connections              | 152      |
| Threads_cached                    | 0        |
| Threads_connected                 | 1        |     <--- 減った！
| Threads_created                   | 9754     |
| Threads_running                   | 1        |

まずはこれでひと安心。
また暫く様子を見てみよう。