奈良橿原 プログラミング・アカデミー 技術ノート

奈良橿原にある子どもプログラミング教室(大人は教えないとは言ってない)のブログです。レッスン内容やインストラクターの技術メモなど。

MySQLでMySQL server has gone awayエラー

MySQL 5.5.27, for Win32 (x86) です。XAMPPについてたやつです。

いくつか原因があるようですがー。自分のケースは結局解決方法がググっても見つからず、試行錯誤でなおしました。ログとして残しておきます。

表示されるエラーは以下のとおり。

ERROR 2006 (HY000): MySQL server has gone away
No connection. Trying to reconnect...
Connection id: 3
Current database: *** NONE ***

ERROR 1184 (08S01): Aborted connection 3 to db: 'unconnected' user: 'hoge' host: 'localhost' (init_connect command failed)

どういう状況で発生したかというと、

>> mysql -uroot

mysql> create user 'hoge'@'localhost' identified by 'hoge';
Query OK, 0 rows affected (0.00sec)
mysql> select 1;
+---+
| 1 |
+---+
| 1 |
+---+
mysql> quit

>> mysql -uhoge -phoge

mysql> select 1;
# ここでエラー!

と、まったく同じ操作を、rootならできるのに新規作成したユーザでできないのでした。

原因は、my.iniの文字コードまわりの設定。もともと次のようにUTF8を使う際の設定がコメントアウトされていたので、これのコメントを全部はずして利用していたわけですが……。

## UTF 8 Settings
#init-connect=\'SET NAMES utf8\'
#collation_server=utf8_unicode_ci
#character_set_server=utf8
#skip-character-set-client-handshake
#character_sets-dir="/ProgramFiles/xampp-cake/mysql/share/charsets"

このうち、

init-connect=\'SET NAMES utf8\'

これがNGだったようです。この行だけ元通りコメントアウトしたらエラー消えました。コメントアウトしたことによる文字コードまわりへの影響も今のところ特にないです。

Google App Engine/PHP を試してみた

https://developers.google.com/appengine/docs/php/

GAEがPHP対応したそうなのでさっそく試してみました。導入のドキュメントはこちら。これを見ながら順に進めていきます。OSはWindowsです。

SDKのインストール

開発環境用にphp-cgi.exeが別途必要ということなので、こちらから VC9 x86 Thread Safe バージョンのZIPファイルをダウンロードして展開。適当に配置。ここでは、

E:\ProgramFiles\php

ということにしておきます。

続いて、SDK本体のダウンロード。こっちもZIP形式なので展開して適当に配置。先ほど配置したPHPランタイムの配置場所との位置関係は特に気にする必要ないです。ここでは、

E:\ProgramFiles\appengine-php-sdk

ということにしておきます。

HelloWorld

とりあえずHelloWorldを表示するスクリプトを書いてみます。スクリプトの配置場所はSDKの場所とは関係ないです。どこでもOK。ここでは、

E:\temp\php\helloworld\helloworld.php

ということにしておきます。

内容を適当に編集。

<?php echo 'Hello, World!'; ?>

続いて、アプリケーションのURLなどを定義する設定ファイルapp.yamlを書きます。これは、アプリケーションのフォルダに置かないといけないので、今回の場合、配置場所は次のようになります。

E:\temp\php\helloworld\app.yaml

内容を編集。以下はGAEのドキュメントそのままです。どんなURLにアクセスがあっても、すべてhelloworld.phpでハンドリングする設定になってます。

application: helloworld
version: 1
runtime: php
api_version: 1

handlers:
- url: /.*
  script: helloworld.php

以上が書けたら、コマンドプロンプトを起動して、SDKのディレクトリへ移動。そこにdev_appserver.pyというサーバ起動スクリプトが・・・えっ、Pythonなの???

ええっと

dev_appserver.py --php_executable_path=E:\ProgramFiles\php\php-cgi.exe E:\temp\php\helloworld\

って実行すればサーバが起動するので、ブラウザからhttp://localhost:8080/にアクセスすれば、はいOK! のはずなんですけどね。Pythonはいってないので・・・今日はこのへんで・・・。

iio Engineを試してみた

http://iioengine.com/

まずは「Download Full SDK」ボタンを押してダウンロード。SDKと名前がついてますが、ただのjsライブラリです。

はろーわーるど

まずはGetting Startをやってみました。
http://www.programming-academy.jp/samples/iioengine/hello.html

<!DOCTYPE html>

<meta charset="utf-8">
<title>iio Engine sample - hello</title>

<body>
<script src="../../lib/iioEngineSDK/core/iioEngine.js"></script>
<script>
  Helloiio = function(io) {
    io.addObj(new iio.ioText("Hello iio!!", io.canvas.center)
      .setFont("30px Consolas")
      .setTextAlign("center")
      .setFillStyle("black"));
  };
  iio.start(Helloiio);
</script>
</body>

最初、いつものクセでbody要素を省略していたのですが、それだと動いてくれませんでした。

上記のようにiio.startにアプリ関数しか指定しない場合、body要素いっぱいに広がったcanvasが自動的に配置されるのですが、iio.startメソッドには、

  • body要素いっぱいにcanvasを自動配置する
  • canvas要素のidを指定する
  • canvasの親となる要素のidを指定する

という3通りの使い方があります。それぞれ、次のようにパラメータを指定して利用します。第3・第4引数があるかないかで、idがキャンバス自体を指すのかその親要素を指すのか意味が違ってくる、ちょっとわかりにくいAPIです。

  iio.start(Helloiio); // bodyいっぱいにcanvas配置
  iio.start(Helloiio, "hello-canvas"); // canvas指定
  iio.start(Helloiio, "container", 300, 450); // canvasの親指定

ただ、3つ目の親要素指定にはバグがあるようで、iioEngine.jsの2188行目(v1.2.2の場合)を次のように編集してあげる必要があります。

// else document.getElementById(id).appendChild(this.cnvs[i])
else document.getElementById(attachId).appendChild(this.cnvs[i])

図形などを配置してみる

キャンバス中央に四角形を描いてみます。
http://www.programming-academy.jp/samples/iioengine/addObj01.html

app = function(io) {
  io.addObj(new iio.ioRect(io.canvas.center, 80)
    .setStrokeStyle("#c71585", 3)
    .setFillStyle("#ffc0cb")
    .setShadow("#ccc", 5, 5, 5));
};
iio.start(app);

配置場所は座標で指定することもできます。指定するのは図形の中心座標。左上頂点じゃないので注意です。
http://www.programming-academy.jp/samples/iioengine/addObj02.html

io.addObj(new iio.ioRect(55, 55, 100)
  .setStrokeStyle("#ccc", 1));

円とか多角形も表示してみます。
http://www.programming-academy.jp/samples/iioengine/addObj03.html

まずは円。ついでですが、位置指定はこんなかんじで中心を起点に算出することもできます。

io.addObj(new iio.ioCircle(
    io.canvas.center.x, 
    io.canvas.center.y - 30, 
    50)
  .setFillStyle("rgba(255 , 0, 0, .5)"));
io.addObj(new iio.ioCircle(
    io.canvas.center.x - 30 * Math.cos(Math.PI / 6), 
    io.canvas.center.y + 30 * Math.sin(Math.PI / 6),
    50)
  .setFillStyle("rgba(0 , 255, 0, .5)"));
io.addObj(new iio.ioCircle(
    io.canvas.center.x + 30 * Math.cos(Math.PI / 6), 
    io.canvas.center.y + 30 * Math.sin(Math.PI / 6), 
    50)
  .setFillStyle("rgba(0 , 0, 255, .5)"));

続いて多角形。正五角形を描いてみました。多角形の位置座標は、その多角形を包含する矩形の左上頂点でした。まあ多角形の中心座標とか言われてもピンとこないですしね。

io.addObj(new iio.ioPoly(10, 10, [90, 47, 55, 94, 0, 76, 0, 18, 55, 0])
  .setStrokeStyle("#ff8c00", 3));

画像の配置

画像は、矩形オブジェクトを作成してそこに設定します。位置がわかりやすいように矩形に枠線をつけておきました。
http://www.programming-academy.jp/samples/iioengine/addObj04.html

var img = new Image();
img.src = "images/pipo-enemy036.png";
img.onload = function() {
  io.addObj(new iio.ioRect(65, 170, 120)
    .setStrokeStyle("#ccc", 1)
    .addImage(img));
};

図形を動かす

オブジェクトにはenableKinematicsメソッドがあって、これを呼び出すことでsetVelとsetTorqueが使えるようになります。setVel(x, y) で移動速度、setTorque(deg)で回転速度を指定できます。あとはフレームレートを設定すれば、オブジェクトは動き始めます。
http://www.programming-academy.jp/samples/iioengine/kinematics01.html

app = function(io) {
   
  io.addObj(new iio.ioRect(50, 50, 60)
    .setStrokeStyle("#c71585", 3)
    .enableKinematics()
    .setVel(2, 0)
    .setTorque(.05));
  
  io.setFramerate(50);
};
iio.start(app);

オブジェクトごとに別々のフレームレートを設定することも可能。io.setFramerateメソッドは第2引数にオブジェクトを指定することで、オブジェクトの追加とフレームレートの設定を同時に実行します。
http://www.programming-academy.jp/samples/iioengine/kinematics02.html

app = function(io) {
    
  var rect1 = new iio.ioRect(50, 50, 60)
    .setStrokeStyle("#c71585", 3)
    .enableKinematics()
    .setVel(2, 0)
    .setTorque(.05);

  var rect2 = new iio.ioRect(50, 150, 60)
    .setStrokeStyle("#4169e1", 3)
    .enableKinematics()
    .setVel(2, 0)
    .setTorque(.05);

  io.setFramerate(50, rect1);
  io.setFramerate(25, rect2);
};
iio.start(app);

とりあえずざっと触ってみただけですが、これからも折を見て使ってみる予定です。物理演算のサンプルもちらっと見ましたが、ほとんどbox2dをそのまま使ってるだけのようなコードで、enchant.jsを使ったほうが簡単に書けそうな印象。