Born Neet

今日のセミナー中にできるかも・・・と思いついたので作ってみました。
意外と簡単に、1時間程度でできました。

canvasで画像拡大鏡

マウスカーソルのある部分を拡大して表示できます。
ただ、単純に引き伸ばしているだけなので、荒くなっちゃいます。

一応倍率も変えられますよ。

bookmarkletとかにしたらおもしろいかもですね。

あ、tnantoka's Canvas Showcaseと2重更新するのが既に面倒だ。
どうしよう？？

そろそろ本格的にhtml5やcanvasが流行り始めるかもしれない、
そんな予感というか妄想をして、今まで作ったcanvasプログラムを集めてみた。

ちょっとしたポートフォリオですね。

tnantoka's Canvas Showcase

2年前から触ってるのに、進歩してない・・・orz
むしろ小ネタに走ってる傾向にあることがわかりました。

これからも思いつきを大事にしていきたいです。

※ 実は結構アーリーアダプターだったんだぜ？

「canvas初心者」という条件に該当しないと思われることをわかっていながら、
行ってきました。
（googleの食堂以外の場所に入ってみたかっただけ、というわけではないですよ^^）

簡単にまとめると、こういうことをしようというセミナーでした。





嘘です、もっとためになる話がたくさんありました。
内容については、公開されてる資料とかをご参照下さい。
※ ハッシュタグ#html5jとかから辿れば見つかると思います。

で、今日の話を聞いてて気づいたのは、結構前からcanvasを触ってきたけど、
初心者とあんまり変わんないなーということ。
つまり、canvasを使うのに知識なんていらなくて、
アイディアと気合とリファレンスさえあれば、なんだってできるんですよね。
（と、珍しくポジティブシンキンしてみる）

ただ、非プログラマ層（デザイナーさんとかエンドユーザ）に広めるのって難しそう、
と今更ながらに思ったりもした。
確かにjsプログラマな僕達にとっては画期的なんだけれど、
デザイナーさんにとってはASでやれば良いのでわざわざ覚える必要もないし、
ユーザにとってはFlashだろうとcanvasだろうと動けばいいんですもんねー。
※ これはHTML5の他の仕様にも言えて、cometだろうとwebsocketだろうと
　　動けば（例えば、ホワイトボードを共有できれば）なんだって良い。

とかごちゃごちゃ考えずに、「こんな便利なことできるぜ！」ってサービスを作って、
「これどうやってんの？」「HTML5だよ！」「すげー！！」って広めていけば良いんでしょうね。
そして、最終的には「標準仕様だから、全部のブラウザで動くんだぜ！！！」って胸をはって言いたい。
（Google Waveもそういう方針？）

ということで、皆さん頑張りましょう。
僕も微力ながら、今後もhtml5な作品を公開していきたいと思います。


・・・あ、あと、属性値の引用符の省略ってどこまで推奨してよいものやら、
と思うのは僕だけでしょうか？
htmlってやっぱプログラムで（ユーザ入力データを使って）生成されることが多いから、
引用符で囲んでおいた方が安全なんじゃないかと思ってしまうんですよねー。

まぁそもそも仕様的にスペースやタグ、引用符が入る場合は、省略×なわけだから、
ちゃんとエスケープしなさいってことなんだろうけど。


とまぁいろいろ考えさせられて良い刺激になりました。
やっぱりセミナー・勉強会っていいですね。

最後になりましたが、セミナーを主催していただいた、白石さんや羽田野さんにお礼を申し上げます。
ありがとうございましたm(_ _)m

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

というのも、今日はちょっと前に話題になった、
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触ってた時依頼かぁ）