Born Neet

とわりと強く思いました。
そしてなんだかちょっとワクワクしました。

というのも、今日はちょっと前に話題になった、
Flash+JSなエロいサービス（※）をCanvasに移植しようと遊んでいたのです。
※ リンク先にダメな画像があったりするわけではありません。（画像編集ツールです）
　ただ、用途がそっち向けになるので嫌悪感を抱く方は本エントリを無視して下さい。
　ごめんなさいm(_ _)m

できたのがこれです↓

錯覚エディター by HTML5 Canvas

結局元ネタのような自動ロジックの実装は断念して、
ただのエディタと化しましたが、
思っていたよりかなり簡単にできました。

ちゃんとしたペイントソフトを作るのはもちろん大変だし、Flashの方が向いている気がしますが、
こういうちょっとした用途にはCanvasが最適かもしれません。
※ Firefox以外のブラウザが右クリックで保存に対応してくれないとダメですが。

エロを題材に何を偉そうにって感じですが、
テクノロジーの普及にとって大きな原動力になると昔聞いた気がします。
※ インターネットとかパソコン、DVD、ゲーム機だって…

というわけで、引き続きHTML5を応援していきたいと思います。
※ Canvas、FIleAPIの次は…やっぱWebSocketか？難しそうだなぁ。

SQLiteでサイトを作ってたんだけど、
同時更新を頻繁にするようなやつはやめといた方が良いと聞いたので、
急遽MySQLに変更。

xamppはすぐパスワード聞いてきて嫌なので、ソースからユーザ権限で入れてみる。
あんまりSnow Leopard向けの情報がなかったのでメモっておきます。

参考サイトは以下の3つ。
MySQL 5.0.45をソースからインストールする on CentOS4.4 - Developer☆STYLE
MySQLをソースからインストール（RedHat9） - FreeStyleWiki
MySQL

では、始めます。
まず、MySQL :: MySQL 5.5
からtar.gzをダウンロードして展開しておく。

ここで多くの手順ではmysqlユーザを作れと書いてあるけど、
ハマったのでログインユーザ（僕の場合は「t」）をmysql用のユーザにする。
※ 元々_mysqlなるユーザがいたせい？

ということで特になにもせずにインストール作業に入る。

sudo rm -rf mysql
make clean
1回ミスったので消す

./configure --prefix=/Users/t/mysql --with-charset=utf8 \
    --with-mysqld-user=t
make
make install
特に何もエラーは出ず

cd
cp -p mysql-5.5.0-m2/support-files/my-small.cnf ./my.cnf
ホームディレクトリに設定ファイルを置く
乳牛日記: MySQL5 パラメータファイル(my.cnf)のおき場所

vi my.cnf
[client]
default-character-set=utf8

[mysql]
default-character-set=utf8

[mysqldump]
default-character-set=utf8

[mysqld]
default-character-set=utf8

:wq
文字コードをutf8に

mysql/bin/mysql_install_db
初期化
（mysqlユーザでやった時はここで失敗した）

mysql/bin/mysqld_safe
デーモン起動

ps -ef | grep mysql
mysql/bin/mysqladmin version
起動確認

これでルート権限不要なmysql実行環境ができた。
もうちょっと残作業を。

vi .profile
/Users/t/mysql/bin:
source .profile
PATHに追加

mysqladmin -u root password 'password'
パスワード設定

mysql -u root -p
password> ********
パスワードを使用してログイン

mysql>show variables like 'char%';
文字コードがutf8になってることを確認

mysql>show databases;
mysql>use mysql;
mysql>show tablse;
mysql>select user,password,host from user;
主要なコマンドを一通り叩いてみる。

すんなりできた。
はじめからログインユーザでやれば良かったorz

最後にperl（CGI）からの接続テスト。
参考：PerlからMySQLに接続する（DBD::mysql） - Max OS X LeopardでAMP環境を構築しよう - Apache, MySQL, PHP, Perlで作る開発環境 - futomi's CGI Cafe

mysqld_safe
mysql -u root -p
create database t;
use t;
create table test (id int, name text, blog text);
insert test values (0, 'tnantoka', 'bornneet');
select * from test;
テスト用のデータベース・テーブルを準備

sudo cpan
cpan> install DBD::mysql
cpan> q
CPANでDBD::mysql（全部小文字）のインストール

cd apache/cgi-bin
vi mysql.cgi

#!/opt/local/bin/perl

use strict;
use warnings;
use DBI;

my $dbh = DBI->connect("DBI:mysql:t", "root", "xxxxxxxx");
my $sth = $dbh->prepare("SELECT * FROM test");
$sth->execute;
print "Content-Type: text/html\n\n";
print '<pre>';
print "id\tname\tblog\n";
while(my @row = $sth->fetchrow_array) {
      print join "\t", @row;
}
print '</pre>';
$sth->finish();
$dbh->disconnect();


:wq
テスト用のスクリプト

chmod +x mysql.cgi
実行権限をつける

DBD::mysqlでこけるって記事を結構みかけたけど、
特に何も起こらなかった。
さて、MySQLで開発を進めるか。（大学でPHP触ってた時依頼かぁ）

clipがおもしろそうだったので遊んでみました。
恥ずかしながらこの機能、今日まで知りませんでした。
※ 昨年末、HTML5やCanvasを結構触ってたのに・・・

というわけで、MDCのサンプルを改造してできたのが以下の2つ。

A canvas clip example(with rotate&uupaa)
星が回転します。ちょっとプラネタリウムっぽい？

A canvas clip example(with uupaa(mouse event))
マウスの動きに合わせてクリッピング領域が移動します。
また、左クリックで拡大、右クリックで縮小できます。
望遠鏡をイメージしました。

どちらもuupaa-jsを使ってるので、IEでも動くはずです。（とてつもなく重いですが。）

さて、今までcanvasものはjQuery+uuCanvasで実装してきましたが、
昨年末に待望の0.7が登場したので、今回からすべてuupaa.jsでやることにしました。

uupaaはクロスブラウザでHTML5やCSS3等々が使えちゃう素晴らしいライブラリですが、
ドキュメントはあまりないので、以下に手順を書いておきます。

興味ある方はどうぞ。

uupaa.jsを入手しよう（build）

2分でわかる uupaa.js の ビルド方法 :: handsOut.jpの通りですが、
とりあえずフルセットを試したいって人は以下の手順だけやればOK。
（僕の作ったサンプルで読み込んでるものをダウンロードするのもありですが。）

Windows

JREをインストール。
（無料 Java ソフトウェアをダウンロード - Sun Microsystems）

xamppをインストール。
（apache friends - xampp for windows）

コンパネ→システム→詳細設定→環境変数から、
PATHに「c:\xampp\php」を追加する。

minifier.zipを展開して、中身をuupaa.jsのbuildディレクトリに入れる。

コマンドプロンプトでbuildディレクトリに移動して、「b」を実行。

これでuupaa.jsのディレクトリに「uupaa.js（縮小化なし）」が、
buildディレクトリに「mini.full.y.js（縮小版）」ができます。

普段は
<script type="text/javascript" src="mini.full.y.js"></script>
としておいて、何かあったら、
<script type="text/javascript" src="uupaa.js"></script>
に切り替えてデバッグするのが良いと思います。（かなりでかいので）

Mac(snow leopard)

Macには初めからJavaもPHPも入ってるので、
uupaa.js/buildにcdして、 「php -f b.php」するだけでOKです。

uupaa.jsを使ってみよう

今回使った機能をjQueryと対比しながら列挙してみる。
※ ソース見てないので間違ってるかもしれません。
参考：uupaa.js 0.7 チートシート(Core) :: handsOut.jp

window.onload周り

// jQueryでは…
$(function() { ... });

// uupaaでは…
window.xboot = function() { ... };  // DOMContentLoaded
window.xwin = function() { ... };  // window.onload
window.xcanvas = function() { ... };  // canvas使ってる時はこれ。

event周り

// jQueryでは…
$('#id').click(function(e) { ... }); // set
$('#id').click(); // fire

// uupaaでは…
uu('#id').click(function(e) { ... }); // set
	/* チートシートでは以下の書き方になってるけどダメっぽい */
	uu('#id').bind('click', function(e) { ... });
uu.ev.fire(uu('#id').nth(), 'click'); // fire
	/* これはダメ */
	uu('#id').click();
uu.ev.stop(e); // イベントキャンセル

その他

offset(), width(), height()相当のメソッドは見つけられませんでした。
属性はattr()で取れます。
get(0)に相当するのは、nth()っぽいです。
※ uu.id()を使えばノードが返ってくるので、そっちを使うべきだと思います。
　uu[.query]()が返すのはuu.jamです。（uupaaオブジェクトでwrapされたもの）

Canvasの使い方

Canvas機能を組み込んだuupaa.jsをロードするだけです。
（上記のbuild手順でやればフル機能が入ってます。）
uuCanvasの時に書いていたXAMLは不要になりました。
canvas 周りの I/F を変更しました。 - latest log

ただ、pの下にcanvasを置くとIEでエラーになるので注意です。（excanvasもそうみたい）
preとかul,dlとかは大丈夫だった気がします。
・・・とりあえず、divに入れてお茶を濁しておきましょう。
※ ホントはdiv直下にインライン要素を置くのもダメですけどね。

あと、uupaaとは直接関係ないですが、
canvas（というか要素内）でマウス座標を取る際の気をつけるところ。

要素の左上を原点とした座標は、
IEではoffsetX,Y、それ以外はlayerX,Yで取得します。
（uupaaのソースもそうなっていたはずです。）

このlayerXが曲者で、positionが未設定の場合pageXと同じ値を返します。
layerXとoffsetXは違う - Griever

というわけで、cssで「position: relative;」するか、
uu('#id').css('position', 'relative')しときましょう。

まとめ

以上です。
皆さんも国産ライブラリuupaa.jsを使ってみて下さい。

・・・久しぶりにブログ書いたら、文章ひどいですね。

先日、イーブックオフで中古本を2冊ほど注文しました。
すると翌日、何やら謝罪メールが。

「出荷前の検品で商品に不備が見つかった」とのこと。
あらあら・・・。まぁ送料無料にする為についでに買った本だし、
別になくてもいいかぁ、とか思いながら読み進めると、

「サービスとして無償で同梱します。（送料はもちろん無料のまま）」

という目を疑うような記述が。
もらっちゃっていいんですか？

本来なら向こうの不手際に怒るところですが、
やられたなーって感じです。
※ しかも注文2日後には手元に届きました。

これからも中古本買う時はebookoffにしようと思いましたとさ。

Settings APIの練習を兼ねて
新しいJetpack Featureを作ってみました。

Mozilla Labs Jetpack - func :: jetpack

名前は「func」といいます。

機能はいたって単純で、
以下のように右クリックメニューから関数を実行できます。



実行する関数は、about:jetpackから設定します。
※ 反映されない場合はabout:jetpackを更新してみると良いかもしれません。



デフォルトではfunc1に、
「<a href="document.location.href">document.title</a>」を
clipboardへコピーする関数が設定されています。
（func2,func3は空）

また、ソース1行目のFUNCS変数を変更することで、
登録する関数の数を増やすこともできます。

以上、使い道はあんまりなさそうですが、
よければどうぞ。

参考にしたのは以下のサイトです。
ありがとうございます_ _

はてぶにブックマークを登録するJetpack Feature - まめ畑
Jetpack Settiongs JEPを使ってみた - まめ畑
短縮URLをクリップボードにコピーするJetpack書いた - やればできる子の日記