かめのはこ

とあるエンジニアのメモ帳です

メモHTML5勉強会

activity html5

　
Processing.jsってなんだ？（田中孝太郎さん）

http://collisions.doppac.cc/archives/467
　
SVG overview（GREE渡辺さん）

http://www.slideshare.net/SatoshiWatanabe/svg-overview
　
WebGLで箱を回してみよう（にゃまだんさん）

http://www18.ocn.ne.jp/~nyamadan/20111026/
　
知って得する (かもしれない)、Internet Explorer での Canvas と SVG の描画（マイクロソフト物江さん）

http://www.slideshare.net/osamum/ie9-svg-canvas
　
HTML5な開発環境のお話（クックパッド太田さん）

http://ss-o.net/event/20111026/

HTML5勉強会

activity html5

スタッフの方が前回の勉強会の模様を公開してくれたみたいなので

メモ代わりに投稿
　
Smartphone 向け HTML5 ゲームの作り方 - 第21回HTML5とか勉強会 -

http://www.youtube.com/watch?v=b5ArG17l2fs
　
アメーバピグのスマフォ化 - 第21回HTML5とか勉強会 -

http://www.youtube.com/watch?v=Lrd5sq4lnQM
　
HTML5 ゲームと WebUI アーキテクチャ - 第21回HTML5とか勉強会 -

http://www.youtube.com/watch?v=wR71azevoT0
　
JSクイズゲームの作り方（HTML5実力テストの紹介）- 第21回HTML5とか勉強会 -

http://www.youtube.com/watch?v=5mT3rZE2zcg
　
あなたを"魅了する"開発環境 enchant.js / enchant PRO - 第21回HTML5とか勉強会 -

http://www.youtube.com/watch?v=sEx5nhTIQuE

HTML5とか勉強会（#html5j）にいってきた

activity html5

HTML5（#html5j）とか勉強会に参加してきました
類似勉強会は何度か参加しましたが、本流のこれには初めてでした
軽くまとめておきます。


[dena] KIDOさん（@sou）--------------------------------

関わっていたのはフューチャーフォンゲームのスマートフォン対応で
FLASH部分（アニメーション、インタラクティブ部分）をどうするかに注力したそうです

実現方法として
　A.HTML5／CSS3ベース
　B.CANVASベース
　C.SWFをそのまま使う（ExGAMEを利用）
　＋α　A,B,Cの組み合わせ

Aは選択、アニメ　選択と進んでいくものに向いている
Bは即時反応が必要なゲームに向いている

＜キーワード＞
タイムラインはjsDefferedやDeffered Object使って非同期処理
Arctic.jsは近日公開（海賊トレジャーとかで使っている
ExGameはmbgaプラットフォームで提供しているので要チェック


[cyber agent] HARAさん（@herablog）----------------

ameba piggの作り方
とにかくレスポンスを重視したというのを強調されていました

アバター当で画像を多量に利用しているが
CANVASで実現したそうです
画像は数値化しJSONに落とし込んでいました

＜キーワード＞
Ai to CANVAS（イラストレータのプラグイン）
sCSS
ImageIptim
Minify
CA 1pixel


[GREE] YONEKAWAさん（@yonekawa）------------------

WebUIを利用したアプリでネイティブ機能にアクセス
通信にはJSを利用
ネイティブとWEB処理の棲み分けには注力したそうです

＜キーワード＞
WebUI


[KAYAC] agoさん（@kyo_ago）-------------------------------

HTML5実力テストを作ったそうで
裏クイズを教えてもらいました
JSを生で触ったはほんと10年くらい前なので
LT時の内容はなんだかテンションがあがりました

ためしにやったJSは三〇点と落第点でした


[ユビキタス] 伏見さん（@sidestepism）-----------------------

最近さわり始めた enchant.js の開発元の方でしたが
数行でゲームが実現できるのはやはりすごかったです
ローカルのハッカソンでも一度やってみたいなと思う

＜キーワード＞
9leep
wise9.jp
idea * idea



こんなところでお開き。

Lithiumしてみる

php mongoDB

phpの軽量フレームワーク
Lithiumを試してみる

デフォがmongoDBだったのでなかなか素敵です

インストールとかは http://lithify.me/ ここから

チュートリアルがあったので確認してきます

app/config/bootstrap/connections.php

Connections::add('default', array(
  'type' => 'MongoDb',
  'host' => 'localhost',
  'port' => '27017',
  'database' => 'my_app',
));

　
おぉMongoさんですね

コントローラー
app/controllers/PostsController.php

namespace app\controllers;
use app\models\Post;
class PostsController extends \lithium\action\Controller {
    public function index(){
        $posts = Post::all();
        return compact('posts');
    }
    public function add(){
        $success = false;
        if($this->request->data){
            $post = Post::create($this->request->data);
            $success = $post->save();
        }
        return compact('success');
    }
}

app/models/Post.php

namespace app\models;
class Post extends \lithium\data\Model {
}

app/views/posts/add.html.php

＜? if($success): ?＞
<h1>Post Successfully Saved</h1>
＜? endif; ?＞
＜?= $this->form->create(); ?＞
    ＜?= $this->form->field('title');?＞
    ＜?= $this->form->field('body', array('type' => 'textarea'));?＞
    ＜?= $this->form->submit('Add Post'); ?＞
＜?= $this->form->end(); ?＞
＜?= $this->html->link('index','/posts/index'); ?＞

app/views/posts/index.html.php

＜? foreach($posts as $post): ?＞
    <article>
        <h1>＜?= $post->title ?＞</h1>
        <p>＜?= $post->body ?＞</p>
    </article>
＜? endforeach; ?＞
＜?= $this->html->link('add','/posts/add'); ?＞

いじりがいはありそうだ

phpからmongodbしてみる

php mongoDB

　
まずは php-mongoモジュールインストール

sudo pecl install mongo
sudo vi /etc/php5/conf.d/mongo.ini
　
extension=mongo.so
[mongo]
mongo.native_long=0
mongo.long_as_object=0
mongo.default_host="localhost"
mongo.default_port=27017
mongo.auto_reconnect=true
mongo.allow_persistent=true
mongo.chunk_size=262144
mongo.cmd="$"
mongo.utf8="1"
mongo.allow_empty_keys=0
　
// ※オプション設定
// 参考 http://www.php.net/manual/ja/mongo.configuration.php
　

apache再起動

// モジュール確認
php -i | grep -i mongo

では次にphpしてみる

$m = new Mongo("localhost:27017");
$db = $m->my_app;
$collection = $db->posts;
$cursor = $collection->find();
foreach($cursor as $obj){
    echo $obj["title"] . "\n";
}

// データ構成は
// use my_app
// db.posts.find()
// { "_id" : ObjectId("4e72e87de9a987c61c31b3cd"), "title" : "hoge" }
// { "_id" : ObjectId("4e72e87de9a987c61c31b4cd"), "title" : "sage" }

　
フレームワークを介さずにfindが使えるのはいいですね
※オプション設定
参考 http://www.php.net/manual/ja/mongo.sqltomongo.php

find( array([column]=>[value]) ); // where [column] = [value]

MongoDBを触ってみる

mongoDB

サイトからアーカイブをダウンロード
http://www.mongodb.org/downloads

# cd /tmp
# wget http://fastdl.mongodb.org/linux/mongodb-linux-i686-2.0.0.tgz
# tar zxvf mongodb-linux-i686-2.0.0.tgz
# cd mongodb-linux-i686-2.0.0/bin

データディレクトリが必要みたいなので作成する

# mkdir -p /data/db
# chmod -R 777 /data

起動してみる

# ./mongod

接続してみる

# cd /tmp/mongodb-linux-i686-2.0.0/bin
# ./mongo

> 'hello'.toUpperCase()
> db.user.save({name: 'tkc'})
> db.user.find()
{ "_id" : ObjectId("4e72e87de9a987c61c31b3cd"), "name" : "tkc" }

これはなかなかシンプルですね
次回プログラムから触ってみたいと思います

Linuxで掴んでるプロセスを調べる

ubuntu

fuser -va ファイル（ディレクトリ）
で掴んでるプロセスを参照できる

ログファイルのスイッチの際とか
マウント外したいときとか、
ゾンビプロセスのせいでできない時とかに使うのだろうきっと。


検証してみる

echo "test" > /tmp/hoge.log
vi /tmp/hoge.log

で開いたままにして

もうひとつターミナルを起動して

# fuser -va /tmp/hoge.log を叩いてみる
                     USER        PID ACCESS COMMAND
/tmp/hoge.log:

　
。。。何もでない
vi自体はswpファイルを作っているのでそっちをみてみる

# fuser -va /tmp/.hoge.log.swp
                     USER        PID ACCESS COMMAND
/tmp/.hoge.log.swp:  tsuchiya  17287 F.... vi

おぉいた！！
PIDのプロセスを確認してみると

0 S tsuchiya 17287 16873  0  80   0 -  2140 poll_s 16:28 pts/4    00:00:00 vi /tmp/hoge.log

たしかにviのプロセスだった

で次はkillしてみよう

fuser -k /tmp/.hoge.log.swp

1 強制終了


。。。おぉ落ちた！！

たけどターミナルの表示がなんか不安定になった
多用はせずに、ほんとどうしようもない時にだけ使うことにしよう

※強制的に落としたのでゴミ掃除はお忘れなく

rm /tmp/.hoge.log.swp