KRAY Inc

JavaScript 3DレンダリングエンジンのThree.jsを試す

takuru — Fri, 03 Feb 2012 01:28:21 +0000

こんにちは。
KRAYアルバイトの浅海です。

今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。
http://github.com/mrdoob/three.js

webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。
Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。

半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。

「ちょっとのプログラムで3Dができる。」
この面白さを皆さんに届けたいです。

Three.js

web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーションが色々できてきました。
その中でも、ひと際目を引くのがThree.jsを使用したサンプルです。
ブラウザの進歩もここまできたか・・・、というようなものばかりです。
ついこの間まで人類は、marqueeタグやマウスポインタを変な画像が追っかけるjavascriptで遊んでいたはずですが・・・

このThree.jsのサンプル、どれを見ても、とても難しそうなことをしています。
人の顔が3Dで精巧に作られていたり、なんか凄い綺麗な空間がはじけていたり・・、ですが、ソースを見てみると、JavaScript部分は非常に短い事がわかります。
Three.jsがほとんどの計算をやってくれるからです。

立方体を表示する

Hello world!!
さて、単純な立方体を表示してみます。

実際の動作

HTML

canvasが無いことに気づくと思います。
canvasはThree.jsが内部的に生成するので必要ありません。

<html>
<head>
<meta charset="utf-8" />
<title>example 1</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
<script src="./Three.js" type="text/javascript"></script>
<script src="./main.js" type="text/javascript"></script>
</head>
<body>
<div id="canvas-wrapper"></div>
</body>
</html>

JavaScript

Three.jsには大きさを指定するだけで立方体を作ってくれる機能があり、四角形を表示するだけならJavaScriptは約15行書くだけです。お手軽！

var width = 640;
var height = 480;

var geometry = new THREE.CubeGeometry(100, 100, 100); // 立方体作成
var material = new THREE.MeshBasicMaterial({color: 0x0000aa}); // 材質作成
var mesh = new THREE.Mesh(geometry, material); // 立方体と材質を結びつけてメッシュ作成

var camera = new THREE.PerspectiveCamera(40, width / height, 1, 1000); // カメラ作成。画角40、距離1〜1000の部分を表示できる。
camera.position.z = -400; // カメラの位置はz軸の-400
camera.lookAt(mesh.position); // メッシュの位置にカメラを向ける。

var scene = new THREE.Scene(); // シーン作成
scene.add(mesh); // シーンにメッシュ追加

var renderer = new THREE.WebGLRenderer(); // レンダラ作成
renderer.setSize(width, height);

window.onload = function(){
document.getElementById('canvas-wrapper').appendChild(renderer.domElement);
renderer.render(scene, camera); // sceneをcameraで映す（表示）
}

四角形が表示されました。

レンダラー

Three.jsには、canvasのレンダラとwebGLのレンダラを切り替えることができる機能があります。
canvasのレンダラを使えばiPad等、webGLに対応していない環境でも見ることができるのですが、WebGLレンダラでないと実現できないことも多くあるようです。

といっても今回のサンプルはCanvasレンダラでも十分やっていけますので、
WebGL対応してない方のために、この記事の最後にCanvasレンダラ対応のものを用意してあります。

canvasのレンダラを使用したい場合は、上記javascript１５行目
THREE.WebGLRenderer()
の部分を
THREE.CanvasRenderer()
とすることにより、canvasのレンダラを使用できます。

光をあてる

とりあえず表示されましたが、ベタ塗りされているので立方体なのかどうかはまだわかりません。
非常にダサい感じがあります。
なので光をあてて輪郭をはっきりさせてみます。

実際の動作

JavaScript

光源を作成してsceneに追加します。

// scene作成後に追加
var light = new THREE.DirectionalLight(0xffffff, 1.5); // 光源の色, 強さ
light.position = {x: 0, y: 0.2, z: -1} // 光源の位置
scene.add(light);

また、現在の立方体に設定されているマテリアル（材質）だと光を反射しないので、光を反射してくれるマテリアルに変更します。

// material作成の行を以下と入れ替え
// ランバート反射を行うマテリアル
var material = new THREE.MeshLambertMaterial({color: 0x0000aa});

これで立方体の輪郭がはっきりして、3Dプログラムをしている気分になりました!

テクスチャを貼り付ける

テクスチャとしてこの画像を使います。

テクスチャがなんなのかは、サンプルをどうぞ。

実際の動作

JavaScript

Materialの作成した部分を以下のように書き換えます。

var texture = new THREE.ImageUtils.loadTexture('/images/anko.jpg');
var material = new THREE.MeshLambertMaterial({map: texture}); // テクスチャ反映

これだけで、方向なども自動にテクスチャが貼られます。
お手軽ですね。

マウスで回転させる

マウスドラッグで立方体を回転できるようにします。
単純化のため、マウスのx移動、y移動をそのままx方向、y方向の回転に対応させます。
なので、立方体を逆さにするとx回転が逆になりますが、そこは目をつぶって下さいませ・・・。

実際の動作

JavaScript

角度の変更は、meshのrotationを変えるだけでできるようになっています。
簡単です。

描画をrender関数にまとめました。

function render(){
renderer.render(scene, camera);
}

マウスで移動させる

シフトを押しながらマウスドラッグで立方体を移動できるようにします。

実際の動作

JavaScript

mousemoveのイベントリスナを以下のように書き換えます。
positionを変更することにより移動できます。

if(e.shiftKey){
mesh.position.x += moveDistance.x * 0.5;
mesh.position.y += moveDistance.y * 0.5;
}
else{
mesh.rotation.x += moveDistance.y * 0.01;
mesh.rotation.y -= moveDistance.x * 0.01;
}

これで移動できるようになりました。
移動や回転、基本的なことはやったので、次はもう少し高度なことを試してみます。

クリック判定する

マウスが立方体をクリックしたかどうかを簡単に検出することができます。
そう、Three.jsならね。

3Dのプログラムでよく使われる、レイによる衝突判定を行います。
イメージとして、クリックした位置から、３Dの世界に向かってレイ（光線）が発射されます。
その光線が、メッシュと衝突したかどうかを計算して判定しているのです。
といっても、全ての計算はThree.jsがやってくれますが・・。

実際の動作

JavaScript

以下を追加します。

var projector = new THREE.Projector();
renderer.domElement.addEventListener('mousedown', function(e){
var mouse_x = ((e.pageX-e.target.offsetParent.offsetLeft) / renderer.domElement.width) * 2 - 1;
var mouse_y = - ((e.pageY-e.target.offsetParent.offsetTop) / renderer.domElement.height) * 2 + 1;
var vector = new THREE.Vector3(mouse_x, mouse_y, 0.5);
projector.unprojectVector(vector, camera);

var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize()); // レイの作成
var obj = ray.intersectObjects([mesh]); // レイがメッシュに衝突するかどうか
// 戻り値は、衝突したメッシュが配列で入っている。

if(obj.length > 0){
var text = document.createTextNode("立方体をクリックしました。 x = "+obj[0].point.x+"y = "+obj[0].point.y+"z = "+obj[0].point.z);
var p = document.createElement('p')
p.appendChild(text);
document.body.appendChild(p);
}
}, false);

ray.intersectObjects(array)

このメソッドには、meshを配列で渡します。
今回の例はmeshが一つですが、複数のメッシュを配列で持っておけば、全てのメッシュとレイの衝突判定を行なってくれます。

戻り値は衝突したメッシュ毎に配列で返ってきます。
その内容は以下のとおりで、これだけの情報が簡単に取得できるThree.jsは凄いですね。

distance: // 距離
point: {x: y: z:} // クリック座標
object: {} // クリックされたオブジェクトの情報
face: {} // クリックされた面の情報

最後に

Three.jsで3Dした気分になりました。
簡単な3Dゲームですら実現できそうです。
はたしてこの先、ブラウザ上の3Dはどう活用されていくのでしょうか・・・。

個人的に、最後の例のように、文章など普通のwebコンテンツの上に3Dがドカーンと置いてあるのは、中々面白いと思います。

おまけその１　Canvasレンダラ使用Ver

上記と同じものを、Canvasレンダラを使用して作ったバージョンです。
WebGLに対応していないiPadなどでも見えるかと思います。
タッチイベントに対応するために、プログラムは少し変えています。

Canvasレンダラバージョン

webGLレンダラ版と違い、動きがもっさりして、ポリゴンの継ぎ目が見えてしまいます。
さらに、初代のiPadでは、テクスチャが壊れてしまいました。

操作方法

１本指:回転
２本指:移動

おまけその２　lookAt

camera.lookAt(position)
でカメラをpositionの位置に向けられます。

クリックした物体の方向にカメラを向けるサンプル。
lookAtのサンプル

おまけその３　githubリポジトリ

全てのサンプルページではソースを見れますが、githubにも公開しました。
ご自由にお使い下さい！
https://github.com/asaumi/webgl_sample
リポジトリ git://github.com/asaumi/webgl_sample.git

以上です。

[Amazon EC2] AMI をゼロから作る CentOS 6.2 / S3-Backed 版

morimori — Tue, 24 Jan 2012 04:00:17 +0000

まえがき

もりやまです。
今回は、一昨年の 7 月に弊社サイトをリニューアルして、サイトのアクセス数が大分増えるよりも前に書いた EC2 の AMI を作る記事を、CentOS 6.2 ベースでやってみようと思います。
少し長いですが、お付き合いください。

はじめに

公式の手順は「From a Loopback – Amazon Elastic Compute Cloud」にあります。
基本はこの通りなのですが、如何せん Fedora Core 4 を使った例なので、最新の OS で作るにはそのままでは使えませんのでご注意ください。

CentOS 6.2 のベースである RHEL6 は、rpm パッケージのペイロードが xz 形式で圧縮されるようになったため、RHEL5 以前の rpm では展開することができません。
そのため AMI のビルド環境は、xz 形式のペイロードを展開できるバージョンの rpm が使われている OS を使う必要があります。
今回はビルド用の環境に、Momonga Linux (64bit) の trunk 環境を使用しましたが、作成する AMI と同じ OS・アーキテクチャで揃えておくのが安心です。
それでは実際に作っていきたいと思います。

0. 準備

AMI の作成には、EC2 AMI Tools というパッケージを使うので、インストールしておいてください。
ruby で書かれているので、ruby も入っている必要があります。

1. loopback イメージを作成

dd if=/dev/zero of=CentOS-6.2-1.kray-i386.img bs=1G count=8

このイメージがそのままインスタンスのルートデバイスになります。今回は 8GB で作成します。
AMI にする際にイメージの空き領域はほとんど圧縮されてしまうので、必要な領域がそれほど多くなくても大きめに作っておいて問題ありません。
ただし、S3-Backed なインスタンスで使えるルートデバイスの最大サイズは 10GB です。

2. loopback イメージにファイルシステムを作成してマウント

mkfs.ext4 -F -L _/ CentOS-6.2-1.kray-i386.img
mkdir ami-root
mount -o loop CentOS-6.2-1.kray-i386.img ami-root
cd ami-root

今回はルートデバイスを ext4 でフォーマットします。ルートデバイスで使えるファイルシステムは「Enabling Your Own Linux Kernels – Amazon Elastic Compute Cloud」に記載されています。
以前は AWS 側で用意されている kernel しか使えなかったのですが、2010 年 7 月に、PV-GRUB を使ってインスタンスにインストールされている kernel を起動できるようになりました。
今回はそれを使う AMI を作るので、PV-GRUB が認識できるファイルシステムを使う必要があります。

3. インストールに必要なファイルを作成

mkdir etc proc dev

cat > etc/fstab < LABEL=_/ / ext4 defaults 1 1
none /dev/pts devpts gid=5,mode=620 0 0
none /dev/shm tmpfs defaults 0 0
none /proc proc defaults 0 0
none /sys sysfs defaults 0 0
EOS

mount -t proc none proc

こちらはほぼ公式のドキュメントの通りで、特筆すべきところはありません。

4. インストール用の yum.conf を作成

wget -O ../RPM-GPG-KEY-CentOS-6 http://ftp.riken.jp/Linux/centos/RPM-GPG-KEY-CentOS-6
cat > ../repos.conf < [ami-base]
name=CentOS-6 - Base
mirrorlist=http://mirrorlist.centos.org/?release=6&arch=i386&repo=os
gpgcheck=1
gpgkey=file://${PWD}/../RPM-GPG-KEY-CentOS-6

#released updates
[ami-updates]
name=CentOS-6 - Updates
mirrorlist=http://mirrorlist.centos.org/?release=6&arch=i386&repo=updates
gpgcheck=1
gpgkey=file://${PWD}/../RPM-GPG-KEY-CentOS-6
EOS

こちらもほぼ公式のドキュメント通りですが、ビルドに使用するホストが Momonga Linux で CentOS の GPG 公開鍵を持っていないため、事前にダウンロードしています。

5. 最小限の構成をインストール

setarch i386 yum -y -c ../repos.conf --installroot=$PWD --disablerepo=* --enablerepo=ami-base,ami-updates groupinstall Core

公式のドキュメントでは「Base」グループでインストールしていますが、ここではさらに少ない「Core」グループでインストールします。
「setarch i386」は、ビルドに使用するホストが 64bit 環境のため指定しています。
「--disablerepo=* --enablerepo=ami-base,ami-updates」は、ビルドに使用するホストに設定してあるリポジトリまでロードされてしまうため、このように指定しています。
以降 yum を実行する際は、すべてこれらを指定します。

6. 不要なパッケージを削除

rpm -e --root $PWD selinux-policy-targeted selinux-policy policycoreutils libselinux-utils libsemanage checkpolicy iptables-ipv6
setarch i386 yum -y --installroot=$PWD remove "*-firmware"

SELinux や IPv6 は使わないので、関連するパッケージを削除します。
さらに、EC2 で動かすには必要ないファームウェアも削除してしまいます。

7. kernel をインストール

setarch i386 yum -y -c ../repos.conf --installroot=$PWD --disablerepo=* --enablerepo=ami-base,ami-updates install kernel

PV-GRUB で User Provided Kernel による起動をするので、kernel をインストールします。
ディストリビューションによっては Xen 用の kernel が別にあるものもありますが、CentOS6 では kernel パッケージで問題ないようです。

8. ec2-ami-tools と ec2-metadata をインストール

setarch i386 yum -y -c ../repos.conf --installroot=$PWD --disablerepo=* --enablerepo=ami-base,ami-updates install ruby rsync
rpm -Uvh --root=$PWD http://s3.amazonaws.com/ec2-downloads/ec2-ami-tools.noarch.rpm
wget -O usr/bin/ec2-metadata http://s3.amazonaws.com/ec2metadata/ec2-metadata
chmod +x usr/bin/ec2-metadata

ここは必須ではありませんが、あると便利なので入れておきます。

9. fstab に /mnt と swap パーティションの設定を追加

cat >> etc/fstab << EOS
/dev/xvde2 /mnt ext4 defaults 1 0
/dev/xvde3 swap swap defaults 0 0
EOS

instance storage をマウントする設定を追加します。デバイス名が xvde2, xvde3 と決め打ちですが、これは t1.micro を除く 32bit のインスタンスで設定されます。
64bit 環境ではまた変わってくるので、詳しくは「Amazon EC2 Instance Storage – Amazon Elastic Compute Cloud」を参照してください。

ちなみに、Amazon Linux AMI を起動すると xvda になるのですが、今回の方法で作った AMI では xvde になってしまいました。
AWS 公式の RHEL6 の AMI でも xvde になるので、Amazon Linux AMI が特別なのでしょうか。

10. ネットワークの設定

cat > etc/sysconfig/network-scripts/ifcfg-eth0 << EOS
DEVICE=eth0
BOOTPROTO=dhcp
ONBOOT=yes
TYPE=Ethernet
USERCTL=yes
PEERDNS=yes
IPV6INIT=no
EOS

cat > etc/sysconfig/network << EOS
NETWORKING=yes
EOS

cat > etc/hosts << EOS
127.0.0.1 localhost.localdomain localhost
EOS

こちらはほぼ公式のドキュメントの通りです。

11. rc.local に ssh 公開鍵を取得する設定を追加

cat > etc/rc.local << EOS
# Update the Amazon EC2 AMI creation tools
rpm -Uvh http://s3.amazonaws.com/ec2-downloads/ec2-ami-tools.noarch.rpm

# Update ec2-metadata
wget -O /usr/bin/ec2-metadata http://s3.amazonaws.com/ec2metadata/ec2-metadata
chmod 755 /usr/bin/ec2-metadata

if [ -f "/root/firstrun" ] ; then
dd if=/dev/urandom count=50|md5sum|passwd --stdin root
rm -f /root/firstrun
else
echo "* Firstrun *" && touch /root/firstrun
fi

if [ ! -d /root/.ssh ] ; then
mkdir -p /root/.ssh
chmod 0700 /root/.ssh
fi

ATTEMPTS=5
FAILED=0
# Fetch public key using HTTP
while [ ! -f /root/.ssh/authorized_keys ]; do
curl -f http://169.254.169.254/latest/meta-data/public-keys/0/openssh-key > /tmp/aws-key 2>/dev/null
if [ $? -eq 0 ]; then
cat /tmp/aws-key >> /root/.ssh/authorized_keys
chmod 0600 /root/.ssh/authorized_keys
rm -f /tmp/aws-key
echo "Successfully retrieved AWS public key from instance metadata"
else
FAILED=$(($FAILED + 1))
if [ $FAILED -ge $ATTEMPTS ]; then
echo "Failed to retrieve AWS public key after $FAILED attempts, quitting"
break
fi
echo "Could not retrieve AWS public key (attempt #$FAILED/$ATTEMPTS), retrying in 5 seconds..."
sleep 5
fi
done
EOS

基本は「Sharing AMIs Safely – Amazon Elastic Compute Cloud」に記載されている通りです。
合わせて ec2-ami-tools と ec2-metadata のアップデートをするようにしています。

12. sshd の設定を変更

perl -p -i -e 's,^#PermitRootLogin yes,PermitRootLogin without-password,' etc/ssh/sshd_config
perl -p -i -e 's,^#UseDNS yes,UseDNS no,' etc/ssh/sshd_config
perl -p -i -e 's,^PasswordAuthentication yes,PasswordAuthentication no,' etc/ssh/sshd_config
perl -p -i -e 's,^UsePAM yes,UsePAM no,' etc/ssh/sshd_config

こちらも上記のドキュメントに記載されているのですが、更にパスワード認証と PAM を無効にしています。

13. grub の設定を追加

cat > boot/grub/menu.lst < default=0
timeout=0
hiddenmenu
title CentOS6.2
root (hd0)
kernel /boot/vmlinuz-$(rpm --root=$PWD -q --queryformat "%{version}-%{release}.%{arch}\n" kernel) ro root=LABEL=_/
initrd /boot/initramfs-$(rpm --root=$PWD -q --queryformat "%{version}-%{release}.%{arch}\n" kernel).img
EOS

PV-GRUB 用の設定です。通常の GRUB の設定と同じですね。

14. 「4gb seg fixup」対策

echo "hwcap 1 nosegneg" > etc/ld.so.conf.d/libc6-xen.conf
chroot . ldconfig

EC2 に限らず、Xen 環境で発生する問題のようですが、「4gb seg fixup …」というようなメッセージが延々と /var/log/messages に出力されてしまうことがあります。
上記はそれを防ぐための設定です。

15. 不要なファイルを削除してイメージをアンマウント

setarch ${ARCH} yum -y -c ../repos.conf --installroot=$PWD --disablerepo=* --enablerepo=ami-base,ami-updates clean all
cd ..
umount ami-root/proc
umount -d ami-root

AMI を作成する前に、yum のキャッシュ等を削除します。
スクラッチから作る場合には問題ないと思いますが、既存のインスタンスを AMI 化する際には、ssh の公開鍵や sshd のホストキー、.bash_history やログ等、削除すべきファイルが多々あるので注意しましょう。

16. loopback イメージをバンドル

mkdir ami-bundle
ec2-bundle-image -i CentOS-6.2-1.kray-i386.img -k ${EC2_PRIVATE_KEY} -c ${EC2_CERT} -u ${AWS_ACCOUNT_NUMBER} -d ./ami-bundle -r i386 --kernel aki-ec5df7ed

インストールが済んだ loopback イメージを AMI としてバンドルします。
ここで PV-GRUB の AKI を指定するのですが、同じ AKI でもリージョンごとに ID が違います。今回は東京リージョン（ap-northeast-1）のものを指定します。
PV-GRUB 用の最新の AKI は、User Provided Kernel のドキュメントに載っています。
ファイル名の pv-grub- の後が、hd0 のものが S3-Backed 用、hd00 のものが EBS-Backed 用のようです。
今回は「東京リージョン」「S3-Backed」「32bit」なので、「aki-ec5df7ed ec2-public-images-ap-northeast-1/pv-grub-hd0_1.02-i386.gz.manifest.xml」を指定します。

17. バンドルした AMI を S3 にアップロード

ec2-upload-bundle -b ${S3_BUCKET} -a ${AWS_ACCESS_KEY} -s ${AWS_SECRET_ACCESS_KEY} -m ./ami-bundle/CentOS-6.2-1.kray-i386.img.manifest.xml --retry --location ap-northeast-1

東京リージョンのバケットにアップロードするので、「--location ap-northeast-1」を指定しています。
この際、アップロード先のバケット名にドットが含まれていると、証明書の検証に失敗してアップロードに失敗します。
ec2-upload-bundle を使わずに別の方法でアップロードするか、ec2-upload-bundle が内部で curl を使うので、~/.curlrc に「insecure」と書いておくことで回避できます。
後者が簡単ですが、アップロードが完了したら「insecure」を削除することをお忘れなく。

18. AMI を登録

さて、いよいよアップロードした AMI を登録するのですが、実は登録用のコマンドは EC2 AMI Tools には含まれていません。
登録用のコマンドは EC2 API Tools というパッケージに含まれているのですが、今回はそれを使わずに AWS Management Console から登録してみます。

EC2 のタブを開く
Navigation の Region を「Asia Pacific(Tokyo)」に変更
Navigation から「AMI」を選択

Amazon Machine Images の「Register New AMI」を選択
AMI Manifest Path に、アップロードした AMI の URL を入力して「Register」

登録完了！

まとめ

あとは起動して動作確認して、問題なければ完成です。
今回の手順をシェルスクリプトにして、コマンド一発で S3 へのアップロードまで済むようにしたものを Gist に上げたので、参考にしてみてください。

今回 S3-Backed の AMI を作ったので、次回はそれを EBS-Backed の AMI にする方法を紹介したいと思います。

RailsのデプロイとUnicornのトラブルシューティング

irohiroki — Wed, 18 Jan 2012 02:50:54 +0000

デプロイしたけど何かおかしい？

先日、Unicornを採用しているウェブアプリで問題が発生しました。デプロイした最新のコードが実行されているように見えますが、時々古いコードの挙動を見せるのです。

今回はそのトラブルシューティングの一部始終を紹介しながら、Unicornのホットデプロイ（ダウンタイムなしでアプリケーションを更新すること）の仕組みをおさらいします。担当は私、去年KRAYに入社しました@irohirokiです。よろしくお願いします。

問題

まずはデプロイ先のサーバにSSHして、Unicornのプロセスを調べてみました。

$ ps ax -H
PID TTY STAT TIME COMMAND
3159 ? Sl 0:00 unicorn master (old) -c unicorn.conf -D
3162 ? Sl 0:00 unicorn worker[0] -c unicorn.conf -D
3164 ? Sl 0:00 unicorn worker[1] -c unicorn.conf -D
3169 ? Sl 0:00 unicorn master -c unicorn.conf -D
3173 ? Sl 0:00 unicorn worker[0] -c unicorn.conf -D
3175 ? Sl 0:00 unicorn worker[1] -c unicorn.conf -D

無関係な部分は省いてありますが、だいたい上のような状態でした。Unicornは複数のworkerプロセスを一つのmasterプロセスが管理する構成です。ところが問題発生時は上の通り、本物のmasterプロセスとは別に、(old)のついたmasterプロセスとそのworkerが存在していました。これはデプロイ前の古いコードを走らせているプロセスです。そのため、HTTPリクエストを新旧２系統のunicornが取り合って、新しいコードが実行されたり古いコードが実行されたりしていました。正常ならば下のようになるはずです。

$ ps ax -H
PID TTY STAT TIME COMMAND
3169 ? Sl 0:00 unicorn master -c unicorn.conf -D
3173 ? Sl 0:00 unicorn worker[0] -c unicorn.conf -D
3175 ? Sl 0:00 unicorn worker[1] -c unicorn.conf -D

ホットデプロイの流れ

ここでUnicornの正常なホットデプロイの流れをおさらいしておきます。

新しいmasterを生成
masterプロセスにUSR2シグナルを送ると、masterプロセスは新しいmasterプロセスを生成して、自分と同じコマンドを最初から実行させます。
新しいworker誕生
新しいmasterプロセスの実行に問題がなければ、自動的に設定した数のworkerプロセスが新masterから生まれます。
古いworker終了
新しいworkerが無事誕生したら、古いmasterにQUITシグナルを送ります。QUITシグナルを受け取ったmasterプロセスは、自分のworkerたちに同じくQUITシグナルを送ります。そうするとworkerプロセスたちは、自分が現在処理中のリクエストを処理し終わった時点で終了します。
古いmaster停止
QUITを受け取ったmasterは、workerが終了したのを確認して自分自身も終了します。

よってホットデプロイを成功させるには、まずmasterにUSR2を送り、新しいmasterおよびworkerが正常に起動できたことを確認して、古いmasterにQUITを送る、となります。

しかしこれらの作業を手でやることはありません。まっとうなWeb developerなら必ず自動化します。ではその自動化ツールと、上記の具体的な実施箇所を見てみましょう。

capistrano-unicorn

Capistranoは伝統的なデプロイの自動化ツールです。Rubyの表現力を生かして、言わば“実行できる設定ファイル”を書くことができます。capistrano-unicornは、CapistranoでUnicornをサポートするための拡張です。

早速ホットデプロイに関係する部分を見てみましょう。

desc 'Reload Unicorn'
task :reload, :roles => :app, :except => {:no_release => true} do
if remote_file_exists?(unicorn_pid)
logger.important("Stopping...", "Unicorn")
run "#{try_sudo} kill -s USR2 `cat #{unicorn_pid}`"
else
logger.important("No PIDs found. Starting Unicorn server...", "Unicorn")
# （略）
end
end

（https://github.com/sosedoff/capistrano-unicorn/blob/master/lib/capistrano-unicorn/capistrano_integration.rb#L57周辺）

中程でunicornプロセスにUSR2を送っているのがわかります。（よく見るとログのメッセージが間違ってますが、これは後で作者にパッチを送ります。）このtaskはunicornという名前空間にあるので、cap unicorn:reloadでUSR2を送れることになります。

続いてQUITを送る必要がありますが、これはcapistranoのtaskではなく、Unicornの設定ファイルの中に書きます。

preload_app true

before_fork do |server, worker|
old_pid = "#{server.config[:pid]}.oldbin"
if File.exists?(old_pid) && server.pid != old_pid
begin
Process.kill("QUIT", File.read(old_pid).to_i)
rescue Errno::ENOENT, Errno::ESRCH
# someone else did our job for us
end
end
end

（https://github.com/sosedoff/capistrano-unicorn/blob/master/examples/rails3.rb#L36周辺を改変）

before_forkというフックの中で古いmasterのプロセスIDを読み込んでQUITを送っています。before_forkは、masterがworkerを産む直前に実行する処理を登録するメソッドです。こうして古いworkerとmasterは削除されます。

しかし、上で述べたホットデプロイの手順には「新しいmasterおよびworkerが正常に起動できたことの確認」があります。before_forkの時点でその確認はできているのでしょうか？

実はそれを担保するのが、上のスニペットの先頭にあるpreload_app trueです。この設定により、masterがworkerを産む前に新しいコードがロードされ、初期化が実行されます。よってbefore_forkが実行される時には、HTTPリクエストを受け付ける準備ができていると考えられるのです。これでホットデプロイがcapistrano-unicornでどのように実現されているかがわかりました。

仮説と検証

以上の調査結果と理論を照らし合わせて、問題が発生する経緯について仮説を立ててみます。

Unicornのプロセスを見ると、新しいmasterとworkerが動作していますので、USR2を受け取って新しいコードをロードし、forkまでしていることがわかります。しかし、before_forkで送られたはずのQUITの効果が見られません。つまりQUITシグナルがどこかで失われたと考えられます。

そこで、新しいコードと使用しているgemを「QUIT」で検索してみたところ、gtk2 gemがQUITを無視していることがわかりました。

#else
sigfunc[0] = signal(SIGHUP, SIG_IGN);
sigfunc[1] = signal(SIGINT, SIG_IGN);
sigfunc[2] = signal(SIGQUIT, SIG_IGN);
sigfunc[3] = signal(SIGBUS, SIG_IGN);
sigfunc[4] = signal(SIGSEGV, SIG_IGN);
sigfunc[5] = signal(SIGPIPE, SIG_IGN);

（http://ruby-gnome2.svn.sourceforge.net/viewvc/ruby-gnome2/ruby-gnome2/trunk/gtk2/ext/gtk2/rbgtkmain.c?revision=4697&view=markup）

対策

この問題を解決するには、gtk2 gemを改造するか、QUITを使わない方法を考えだすしかありません。他人のgemを安易に修正するのはトラブルの元なので、自分のコードで何とかすることにします。

実はUnicornはWINCHというシグナルにもハンドラが設定されており、masterがこれを受け取るとworkerを行儀よく終了させます。つまりQUITの仕事の一部を達成できます。ではWINCHを使うことにして、あとはどうやって古いmasterを停止するかです。

gtk2はINTやHUP、TERMといった一般的な停止シグナルを全て無視するので、KILLを送ることにします。しかし、WINCHを送った後もworkerはやりかけの処理を続けますから、KILLを送るのが早過ぎるとworkerを看取る人がいなくなってしまい、うまくありません。

一般的に、ウェブアプリケーションサーバにはタイムアウトがあります。HTTPリクエストに対する処理時間が長過ぎる場合に、エラーとして処理する作法です。本アプリケーションの場合、タイムアウトは30秒になっていました。つまりWINCHを送ってから30秒後には、どんなworkerも終了またはエラーとして処理されているわけです。よってWINCHを送ってから30秒後にKILLを送ることにします。

以上のことを踏まえてbefore_forkを書いてみます。

before_fork do |server, worker|
old_pid = "#{server.config[:pid]}.oldbin"
if File.exists?(old_pid) && server.pid != old_pid
begin
Process.kill("WINCH", File.read(old_pid).to_i)
sleep 30
Process.kill("KILL", File.read(old_pid).to_i)
rescue Errno::ENOENT, Errno::ESRCH
# someone else did our job for us
end
end
end

WINCHを送り、30秒後にKILLを送るようにしました。しかしこれは不正解です。これではせっかくmasterが起動してもforkまでに30秒空費することになります。その点を考慮したのが下の設定です。

before_fork do |server, worker|
old_pid = "#{server.config[:pid]}.oldbin"
if File.exists?(old_pid) && server.pid != old_pid
begin
Process.kill("WINCH", File.read(old_pid).to_i)
Thread.new {
sleep 30
Process.kill("KILL", File.read(old_pid).to_i)
}
rescue Errno::ENOENT, Errno::ESRCH
# someone else did our job for us
end
end
end

30秒待つのは別のスレッドにしました。これでQUITを使わずにホットデプロイを達成できました。

gtk2はマルチプラットフォームのGUIウィジェットや音声・動画処理フレームワークなどを提供する優れたライブラリです。今回のプロジェクトではPDF文書をパース／生成するのに利用しました。このような強力なライブラリとUnicornを併用できないのは勿体ないことだと思います。gtk2との併用に限らず、本エントリがUnicornの理解に役立てば幸いです。

学んだことまとめ 2011/11/14〜11/25

amachin — Thu, 22 Dec 2011 07:06:01 +0000

まえがき

一週間ずつだと遅れていくので、今日は二週間分です。
そろそろ、ちゃんとしたブログ書かないとなー。

Webアプリ開発

Bundler 1.1

http://patshaughnessy.net/2011/11/5/besides-being-faster-what-else-is-new-in-bundler-1-1

（ Besides being faster, what else is new in Bundler 1.1? – Pat Shaughnessy より）
・速い
・bundle outdated
　新しいバージョンがあるgemをリストアップする
・bundle clean
　pathを使ってる場合、bundle installまたはupdateした時に自動的に使ってないgemを消してくれる。–pathではなくsystem gem repositoryを使ってる場合、bundle clean –forceで同じことができる（他のディレクトリのGemfileに書かれてるgemは無視することになるので注意）。
・bundle install –standalone
　pathを使った場合、/bundler/setup.rbを作ってくれる。このスクリプトはbundlerがない環境でも –path のgemを$LOAD_PATHに加えてくれる、言うなれば“standaloneのbundler”である。

joemiller/aws-cf-private-streaming-tools – GitHub

https://github.com/joemiller/aws-cf-private-streaming-tools
CloudFront でコンテンツをプライベートに設定するためのコマンドラインツール。
Origin Access Id の設定はできたけど、AWSSDKforPHP で発行した URL にアクセスしても何も返ってこない。

スマートフォンアプリなんかに使うバックエンドシステム用クラウドサービス？

https://cloudmine.me/
スキーマレスDB、ユーザ管理などをRESTfulなAPI経由でサービスしている？

npm 1.0: Global vs Local installation « node blog

http://blog.nodejs.org/2011/03/23/npm-1-0-global-vs-local-installation/
基本的にnodeではmodulesをグローバルなディレクトリではなくプロジェクトの./node_modulesに入れる

MongoDBはcompactする必要がある

http://oblog.objectclub.jp/mongodb-10

その他

プログラマを一生の仕事にできるビジネスモデルで目指す未来のビジョン

http://www.publickey1.jp/blog/11/si.html
http://www.publickey1.jp/blog/11/post_191.html
いろいろ参考になります。

Google Maps APIの有料化、「上位0.35％のサイトのみが影響」と説明 -INTERNET Watch

http://internet.watch.impress.co.jp/docs/news/20111124_493211.html
よっぽど継続的にアクセスを集めなければ大丈夫なんだろうか。

ゲーム開発プロジェクトマネジメント講座

http://www.square-enix.com/jp/info/library/dldata/PM/PM.pdf

旅行関連のディスカバリープラットフォームを運営するGogobot、モバイル分野にも進出を開始

http://jp.techcrunch.com/archives/20111018gogobot-takes-social-travel-discovery-platform-mobile-with-ios-app/

NoSQL は REST に影響を与えるか？

http://www.infoq.com/jp/news/2011/10/nosql-rest

開発合宿、やってます。

ishizima — Thu, 15 Dec 2011 01:20:07 +0000

はじめに

今日は普段の技術系記事と違って、社内のことを紹介してみたいと思います。
クレイでは3週間に1度、開発合宿を行なっています。普段の業務は受注案件の開発がメインですが、合宿という形で自分たちが提供するサービスの開発に集中する時間を設けるのが目的です。

なぜ開発合宿？

先ほども書いた通り、クレイの主な業務は受注案件、つまりお客様から依頼されたシステムを開発するのが中心です。一方で、自分たちで企画して自分たちで実装したWebサービスを提供していきたい、という思いも持っています。

とは言うものの、普段の業務時間から自社のための開発時間を作りだすというのは案外難しいものです。それはスケジュールを守るためであったり、電話やメールによる何かしらの対応のためであったり。

なので、強制的に普段の業務をリセットして自分たちの時間を確保するため、普段のオフィスを離れて、どうせなら泊まりで集中作業しよう……、となったわけです。
普段はスタッフそれぞれ担当のプロジェクトを手がけていますが、開発合宿の時だけは同時に全員が同じプロジェクトに取り組みます。皆で同じ方向を向いて進むというのも重要なのかもしれません。

合宿風景

クレイでは、日付を決めて当日朝から翌昼までを開発合宿期間としています。
この期間だけは極力他の業務を止めて、事前に全員で合意した目標を達成するための作業を行います。
なので、事前の目標を決めたりだとかタスクの洗い出しだとか、ある程度の準備は必要です。合宿中にやると時間食われちゃいますからね。

開発中

合宿の大半は黙々とコーディングしてます。皆が向き合って作業していると、図らずもコミュニケーションが取りやすいメリットが。ただ、それぞれが自分の作業に熱中してしまうのか、それほどコミュニケーションが発生しないのが現在の課題です。
もちろん、開発速度向上というメリットはじゅうぶん享受できているのではないでしょうか。

それから仮眠。開発合宿はホテルの会議室を借りています。仮眠に使う部屋が別の階にあることもあって、みんなあまり利用しようとしません。時間がもったいないという意識もあるのでしょう。効率を考えると寝た方がいいのですが。
一部スタッフからは椅子で寝たほうがいいという意見もあります。

食事中

食事風景。よく見ると、ダニーのお茶碗は山盛りですね。コードの品質と炭水化物の量は比例するのかもしれません。

ふりかえり

そして、合宿の最後はふりかえりです。30分程度、この1日半の合宿内容を振り返る時間を設けています。
やり方を具体的に書くと、Keep(良かったこと、続けたいこと)、Problem(問題だったこと)、Try(次回挑戦したいこと)の3項目について意見をポストイットのようなカードに書き出します。
以下、実際に初回の開発合宿でふりかえったときの内容を書いてみます。

Keep

足りない点をすぐ話して解決できる
集中して作業できた
協力できている
全員が一つのことをする

Problem

本がない
途中で失速した
二日目の眠気
自分の役割が明確になっていなかった

Try

目標を設定する
仮眠スペースを用意する
外付けキーボードを用意する
休憩を入れてメリハリをつける

Keepはこんなことが良かった！ということを皆で共有することで、モチベーションアップやノウハウの共有につながります。そして、Problemに対して何をTryしていくか、次回以降実際にTryすることでProblemを解決するサイクルができあがれば、開発合宿（だけじゃないですけど）がより良いものになっていくでしょう。

開発合宿で開発してるモノについて

冒頭で自分たちのサービスを提供したいって書いたのですが、ではどんなサービスなのでしょうか。軽く紹介させてください。

旅の思い出作りに

みなさんは旅行で撮った写真をオンラインでアルバム化したいと思ったことはありませんか？
FlickrやPicasa、500pxなど写真共有サービスって色々あると思うんですけど、旅に特化したものを探すと案外ありません。なので、今回旅の記録を写真で残せる、そして人に見せられるサービスを開発しようと思い立ちました。詳しいことはまた別の機会に！

学んだことまとめ 2011/10/07〜11/11

ishizima — Mon, 12 Dec 2011 06:27:03 +0000

まえがき

皆さんこんにちは。
いきなりですが、この前クルマに轢かれました。皆さんも横断歩道を渡るときは青信号でも左右に注意しましょう……。とりあえずMacが無事でよかったです。

まとめ

JavaScript, HTML, CSS 関連

canvas上の描いたテキストの横のサイズを取得する方法。

ctx = document.getElementById(‘canvas’).getContext(‘2d’)
ctx.font = ‘20px Arial’
m = ctx.measureText(‘amamdmdmdm’)
m.width

HTML5 API チェッカー

http://html5.jp/tutorial/apicheck/

Ruby, Rails 関連

Gem を作って公開してみた

https://rubygems.org/gems/endeco
https://github.com/morimori/endeco
環境依存の設定ファイルを管理する。

Git 関連

コミットをしくじった時の対処法

http://d.hatena.ne.jp/keisukefukuda/20111105/p1
gitのコミットをしくじった時の対処法について、一覧性の高いまとめがなかったので作りました。

複数人で使ってるよ → もうpushしちゃったよ → さらに誰かが（依存する）変更をpushしてるよ → 涙ふけよ

その他

InfoQ: AmazonとEucalyptusのセキュリティ脆弱性

http://www.infoq.com/jp/news/2011/11/amazon-eucalyptus-security-holes
シグネチャラッピング攻撃の件。この脆弱性の発表前に対策はされたようなので、とりあえずは安心。

rails3 + html5 canvasでお絵かき投稿サイトを作ろう！

takuru — Mon, 14 Nov 2011 05:35:44 +0000

はじめましてこんにちは。
KRAYアルバイトの浅海です。

html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。
初めてブログ記事を書くということで気合が入りました。
ちょっと長めですがお付き合い下さい。

機能

お絵かき投稿サイトの必要最低限な機能って？
ざっと下のような機能を入れてみます。

絵を描ける
絵を消せる
描画を一回分戻れる
線の太さを変えられる
線の色を変える
絵を投稿できる
投稿された画像の一覧を表示できる

→ 完成見本はこちら

絵を描ける

HTML5のcanvasにマウスの軌道に線を引いていくわけです。
canvasでのマウス軌道の描き方は、
・mousemoveイベント発生時に点をプロット
という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。

これではお話になりません。
なので、点ではなく線を引くことにします。
これは下のようになります。

この方法でもまだ、曲線の時に粗が目立ちます。

そこで、線と線の間に点をプロットする、今までの２つの方法を合わせて使います。
すると下のように、綺麗な線が描けます。

※canvasのプロパティに、lineJoinというものがありまして、これに’round’を入れておくとパスとパスの間を滑らかに連結してくれるようです。
しかし、~~考えるのが面倒だったため~~全ての線は個別に描画しました。

※11/21
.lineCapでいけそうです・・

controller

railsアプリを作成してからpictures controllerを作ります。

$ rails new canvas
$ cd canvas
$ rails generate controller

ルーティング

ルーティングを設定します。
pictures controllerのnew actionで絵を書くことにします。

# config/routes.rb
root :to => 'pictures#new'

erb

何の変哲もないcanvasタグを書きます。
CSSだけでwidthとheightの設定をすると調子が悪いので、
必ずcanvasタグ内でサイズ指定して下さい。

# app/views/pictures/new.html.erb

="draw-area" width="300" height="300"></canvas>

coffee script

canvasのcontextを取得して、点を描画する機能と線を描画する機能を追加します。

// app/assets/javascripts/pictures.js.coffee
canvas = $('#draw-area')
ctx = canvas[0].getContext('2d')
ctx.lineWidth = 1

ctx.putPoint = (x, y)-> # x,yに点を描画
@.beginPath()
@.arc(x, y, @.lineWidth / 2.0, 0, Math.PI*2, false)
@.fill()
@.closePath()
ctx.drawLine = (sx, sy, ex, ey)-> # 始点(sx, sy) から終点(ex, ey)に線を描画
@.beginPath()
@.moveTo(sx, sy)
@.lineTo(ex, ey)
@.stroke()
@.closePath()

そして、canvasをクリックしたときに点を描画します。
mousedownというフラグ変数を用意して、マウスを押している状態か判定しています。

// app/assets/javascripts/pictures.js.coffee
mousedown = false
canvas.mousedown (e)->
ctx.prevPos = getPointPosition(e)
mousedown = true
ctx.putPoint(ctx.prevPos.x, ctx.prevPos.y)

マウスが動いている間は点と点を線で繋ぎます。
始点は一つ前のイベント発生時の座標、
終点は現在のイベント発生時の座標です。

// app/assets/javascripts/pictures.js.coffee
canvas.mousemove (e)->
return unless mousedown
nowPos = getPointPosition(e)
ctx.drawLine(ctx.prevPos.x, ctx.prevPos.y, nowPos.x, nowPos.y)
ctx.putPoint(nowPos.x, nowPos.y)
ctx.prevPos = nowPos

マウスの押下をやめた時と、canvasからポインタが出た時に描画を終了します。

// app/assets/javascripts/pictures.js.coffee
canvas.mouseup (e)->
mousedown = false
canvas.mouseout (e)->
mousedown = false

絵を消せる

キャンバス上の絵を全消去できるようにします。

erb

消去のボタンを作成します。
CSSのデザイン設定等は省略します。

coffee script

#clear-buttonが押された時、context.clearRectでcanvas全体を指定して消去します。

// app/assets/javascripts/pictures.js.coffee
$("#clear-button").click ->
ctx.clearRect(0, 0, canvas.width(), canvas.height())

描画を一回分戻れる

人間は失敗するものです。
描画を一回分戻れるようにしてあげます。

erb

戻すボタンを作成します。

coffee script

contextに現在の状態を保存する機能を追加します。
getImageDataを使えば指定領域の描画情報を取得することができます。

// app/assets/javascripts/pictures.js.coffee
ctx.savePrevData = ->
@.prevImageData = @.getImageData(0, 0, canvas.width(), canvas.height())

canvas.mousedownに描画前の状態を保存する以下の一行追加します。

// app/assets/javascripts/pictures.js.coffee
canvas.mousedown (e)->
ctx.savePrevData() # この一行を追加
ctx.prevPos = getPointPosition(e)
mousedown = true
ctx.putPoint(ctx.prevPos.x, ctx.prevPos.y)

ボタンを押したとき、contextのputImageDataを使って、保存してあったprevImageDataをcanvasに上書きします。

// app/assets/javascripts/pictures.js.coffee
$("#return-button").click ->
ctx.putImageData(ctx.prevImageData, 0, 0)

これで描画をやり直せます。
思う存分間違って大丈夫です。

線の太さを変えられる

線の太さは現在1pxの固定になっています。
これではつまらない！
これをHTML5のスライダーを使って変更できるようにします。

erb

HTML5のスライダーは、Railsのrange_field_tagヘルパーがあるので使います。
初期値1、最小値1、最大値20で作成しました。
その下には、現在の太さを表示するための領域を用意しました。

<%= range_field_tag 'pen-width-slider', 1, :min => 1, :max => 20 %>
<span id="show-pen-width">1</span>px

coffee script

スライダーの操作はchangeイベントで捕捉できます。

// app/assets/javascripts/pictures.js.coffee
$("#pen-width-slider").change ->
ctx.lineWidth = $(@).val()
$("#show-pen-width").text(ctx.lineWidth)

これで線の太さを変えられるようになりました。

色を変えられる

「黒一色じゃつまらないです。いろんな色で書きたいです。」
「やりましょう。」

erb

R,G,Bそれぞれのスライダーで実装します。
#preview-colorという、色をプレビューするボックスも用意しまいした。

<%= range_field_tag 'pen-color-red-slider', 0, :min => 0, :max => 255 %>
<span class="red">R</span> <span id="show-pen-red">0</span><br />
<%= range_field_tag 'pen-color-green-slider', 0, :min => 0, :max => 255 %>
<span class="green">G</span> <span id="show-pen-green">0</span><br />
<%= range_field_tag 'pen-color-blue-slider', 0, :min => 0, :max => 255 %>
<span class="blue">B</span> <span id="show-pen-blue">0</span><br />
<div id="preview-color"></div>

scss

現在の色をプレビューするボックスのスタイルです。
ただの四角です。

/* app/assets/stylesheets/pictures.css.scss */
#preview-color{
width: 30px;
height: 30px;
background-color: rgb(0, 0, 0);
border: solid 1px black;
}

coffee script

contextに色変更の機能を加えます。
strokeStyleとfillStyleにスライダーの色を設定するだけです。

// app/assets/javascripts/pictures.js.coffee
ctx.setColor = ->
color = "rgb(#{red_slider.val()},#{green_slider.val()},#{blue_slider.val()})"
@.strokeStyle = color
@.fillStyle = color
preview_color.css('background-color', color)

スライダーの操作を取得します。

// app/assets/javascripts/pictures.js.coffee
red_slider = $("#pen-color-red-slider")
green_slider = $("#pen-color-green-slider")
blue_slider = $("#pen-color-blue-slider")
preview_color = $("#preview-color")

red_slider.change ->
ctx.setColor()
$("#show-pen-red").text($(@).val())
green_slider.change ->
ctx.setColor()
$("#show-pen-green").text($(@).val())
blue_slider.change ->
ctx.setColor()
$("#show-pen-blue").text($(@).val())

これで色を変えられるようになりました。

絵を投稿できる

さて、ついに絵をサーバ側に保存します。
仕様は適当に、
・public/imagesディレクトリに保存
・１００件まで。超えたら古いものから削除していく。
です。

erb

保存するボタンを作ります。

coffee script

canvasでtoDataURLすると、base64エンコードされた画像文字列が取得できます。
これをpictures controllerのcreate actionにポストします。

// app/assets/javascripts/pictures.js.coffee
$("#save-button").click ->
url = canvas[0].toDataURL()
$.post '/pictures', {data: url}

ruby

画像データ受信元のルーティングを追加します。

# config/routes.rb
resources :pictures, only: [:create] # この一行を追加

ピクチャーモデルを作成します。
実際はmysqlの設定などしていますが、省略です。
今回、カラムはidしか使わないためマイグレーションはいじらずにさっさとdb:migrateしました。

$ rails generate model picture
$ rake db:migrate

コントローラの動作です。
ブラウザから送られてきた画像データから、
最初の文字列を削除してbase64デコードすると画像として保存できます。

# app/controllers/pictures_controller.rb
def create
path = 'public/images/'
picture = Picture.create
File.open("#{Rails.root}/#{path}/#{picture.id}.png", "wb") { |f|
f.write Base64.decode64(params[:data].sub!('data:image/png;base64,', ''))
}
if Picture.count > 100
picture = Picture.order(:id).first
begin
File.unlink("#{Rails.root}/#{path}/#{picture.id}.png", "wb")
rescue
# 適当な処理
end
picture.destroy
end

render :nothing => true
end

これで画像を投稿できるようになりました。

投稿された画像の一覧を表示できる

画像は投稿できるようになったけれども、
投稿された画像を見ることができないので見れるようにします。

erb

ただの表示用div要素です。

ruby

pictures controllerにcreate actionのルーティングを追加します。

# coufig/routes.rb
resources :pictures, only: [:index, :create]

rails側でrenderして、HTMLをクライアントに返しても良いですが、
今回はディレクトリの構造が安易なのでRailsはidだけ渡して、残りはブラウザで処理してもらいます。

# app/controllers/pictures_controller.rb
def index
@response = ''.tap do |me|
Picture.all.reverse.each do |picture|
me << "#{picture.id},"
end
end
end

KRAY Inc

JavaScript 3DレンダリングエンジンのThree.jsを試す

目次

Three.js

HTML

JavaScript

レンダラー

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

ray.intersectObjects(array)

最後に

操作方法

おまけその２ lookAt

おまけその３ githubリポジトリ

[Amazon EC2] AMI をゼロから作る CentOS 6.2 / S3-Backed 版

まえがき

はじめに

0. 準備

1. loopback イメージを作成

2. loopback イメージにファイルシステムを作成してマウント

3. インストールに必要なファイルを作成

4. インストール用の yum.conf を作成

5. 最小限の構成をインストール

6. 不要なパッケージを削除

7. kernel をインストール

8. ec2-ami-tools と ec2-metadata をインストール

9. fstab に /mnt と swap パーティションの設定を追加

10. ネットワークの設定

11. rc.local に ssh 公開鍵を取得する設定を追加

12. sshd の設定を変更

13. grub の設定を追加

14. 「4gb seg fixup」対策

15. 不要なファイルを削除してイメージをアンマウント

16. loopback イメージをバンドル

17. バンドルした AMI を S3 にアップロード

18. AMI を登録

まとめ

RailsのデプロイとUnicornのトラブルシューティング

デプロイしたけど何かおかしい？

問題

ホットデプロイの流れ

capistrano-unicorn

仮説と検証

対策

学んだことまとめ 2011/11/14〜11/25

まえがき

Webアプリ開発

Bundler 1.1

joemiller/aws-cf-private-streaming-tools – GitHub

スマートフォンアプリなんかに使うバックエンドシステム用クラウドサービス？

Nodeで使えるECMA Script 5の新機能

Deploying node.js on Amazon EC2

node.jsのモジュールリスト

BDD for node.js

npm 1.0: Global vs Local installation « node blog

MongoDBはcompactする必要がある

その他

プログラマを一生の仕事にできるビジネスモデルで目指す未来のビジョン

Google Maps APIの有料化、「上位0.35％のサイトのみが影響」と説明 -INTERNET Watch

ゲーム開発プロジェクトマネジメント講座

旅行関連のディスカバリープラットフォームを運営するGogobot、モバイル分野にも進出を開始

NoSQL は REST に影響を与えるか？

開発合宿、やってます。

はじめに

なぜ開発合宿？

合宿風景

開発中

食事中

ふりかえり

開発合宿で開発してるモノについて

旅の思い出作りに

学んだことまとめ 2011/10/07〜11/11

まえがき

まとめ

JavaScript, HTML, CSS 関連

canvas上の描いたテキストの横のサイズを取得する方法。

HTML5 API チェッカー

おまけその２　lookAt

おまけその３　githubリポジトリ