— boreal-kiss.com

Archive
2008年6月 Monthly archive

Adobe CS3風のアイコン作ろうと思ってたらまさにそれ用のAirアプリケーションが配布されてた。

Icon Generatorが登場したよ – Yasu Log::Flash/Flex/AIR::ブログ

アイコンサイズも複数選べるのでいい感じ。Macのドックに並べて見ると少しだけadobeの正規アイコンよりでかかったので神経質な人は気になるところかもしれない。Airになじみのない人に念のため。Air製アプリを使うためにはAirアプリのインストーラー(Runtime)をインストールしないといけない。つまり初回は二個ソフトウェアをインストールすることになる。ほんの少しだけ手間がかかるのがAirが今イチ普及しない理由の一つなのだろうけど、Flash Player 10からはサーバーを介さずにローカルにファイルを保存できるようになるので、こういったもののWebアプリケーション版が作り甲斐でてきそう。最高だなFlex。ということでTwitter用アイコン作ったぜー。

Icon Generator

Read More

MacOSXのローカルサイト(http://localhost/~USERNAME/)でFlexアプリケーションからPHP経由でMySQLと通信するまでに必要な諸設定について。文章が長くなったので今回はFlexとの連携直前の下準備まで。

About my Mac

MacOSX 10.5.3 (Intel Core 2 Duo)

必要なもの

3と4は必須ではないけど有った方が断然便利。

  1. Apache(webサーバー)
  2. MySQL(データベース)
  3. phpMyAdmin(MySQLを操作するwebアプリケーション)
  4. PEARパッケージ(PHP用モジュール)
  5. Flexアプリケーションが動作する環境(Flex Builder, Flex SDK etc.)

1. Apache

最初からMac OSXにはインストールされているので、PHPが動作するように設定をするだけ。ただし設定ファイル(httpd.conf)の在処がOSX 10.5から変更されている(参考: Mac OS X 10.5 Leopard で PHP を動作させるには − kazumich.log)。

/etc/httpd/httpd.conf (OSX 10.4) -> /etc/apache2/httpd.conf (OSX 10.5) 

httpd.conf内の以下の行のコメントアウト#をはずす。

#LoadModule php5_module      libexec/apache2/libphp5.so

以下のコマンドでApacheを再起動しhttpd.confの設定を反映させる。(この後何回も行う重要なコマンド)

sudo apachectl restart

次にMacのシステム環境設定 > ネットワーク共有からWeb共有を有効にする。これで自分のローカルサイト(http://localhost/~USERNAME/)でPHP5が動作するようになる。試しに「~/Sites/」直下に以下を記述したファイルをindex.phpとして保存(Finderだと「書類 > サイト」)。

<?php echo 'Hello world'; ?>

ブラウザでhttp://localhost/~USERNAME/index.phpにアクセスして「Hello world」と表示されたらOK。

2. MySQL

MySQL :: MySQL Downloadsより本体をダウンロード。Mac OSX 10.5用には32bit環境用(x86)と64bit環境用(x86_64)が用意されているので必要な方を。僕はx86_64をダウンロードした。PowerPCの場合はPowerPC専用と明記されたものを使わないとダメかもしれません。

MySQL本体とStartupItemsの両方をインストール。ターミナルより以下を指定でMySQLサーバが起動。

sudo /Library/StartupItems/MySQLCOM/MySQLCOM start

試しにコマンドラインで以下を指定してMySQLと通信できればOK。

mysql -u root

MySQLが起動していないとこういうエラーが出る。

Can't connect to local MySQL server through socket '/tmp/mysql.sock'

rootユーザーにパスワードを設定する場合はMySQLと通信した状態でターミナルより以下のように指定。

mysql> UPDATE user SET password = PASSWORD('********') WHERE user = 'root'; 

これで次回のMySQLログイン時にパスワード入力が必要になる。アクセスは「mysql -u root -p」。

3. phpMyAdmin

必須ではないけどGUIとしてスタンダードだしある方が断然便利。phpMyAdmin | MySQL Database Administration Tool | www.phpmyadmin.netより最新のパッケージをダウンロード。ただのPHPファイル群なのでMacがどうこうってものはない。解凍したフォルダ名を例えば「phpMyAdmin」にして例えば「~/Sites/」直下にフォルダごと移動(Finderだと「書類 > サイト」)。

フォルダ内のconfig.inc.phpファイル(またはそれに準じた名前のファイルを”config.inc.php”に修正)内に以下のような記述を加える。Authentication Typeはパスワード制にした(cockieを使う方法もある)。パスワードは先ほどrootユーザーに付与したもの。extentionの項はMySQL 4.1.2以上用のmysqli (improved MySQL)とした(mysqlでもok)。これでwebブラウザからhttp://localhost/~USERNAME/phpMyAdmin/にアクセスすると常時rootユーザーでMySQLと通信することになる。

$cfg['pmaAbsoluteUri'] = 'http://localhost/~USERNAME/phpMyAdmin/';
$cfg['Servers'][$i]['auth_type'] = 'config';
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = '******';
$cfg['Servers'][$i]['extension'] = 'mysqli';

毎回パスワードを要求させるのであれば上記の一部を以下のように記述。

$cfg['Servers'][$i]['auth_type'] = 'http';
$cfg['Servers'][$i]['user'] = '';
$cfg['Servers'][$i]['password'] = '';

次にPHPが参照するMySQLソケットパスを実際のMySQLソケットパスとに合わせてやる。この時点でhttp://localhost/~USERNAME/phpMyAdmin/にアクセスしてphpMyAdminが動作するのであれば通信が正しく行えている状態なので修正は必要ない。MySQLのソケットパスはMySQLと通信した状態でターミナルより確認できる。

mysql> status;

ソケットパスは僕の場合以下のようになっていた。

UNIX socket: /tmp/mysql.sock

次にPHPが参照しているMySQLソケットパスは、phpinfo()で確認できる。先ほど”Hello world”を書いたindex.phpに以下のように記述して実行すればok。

<?php phpinfo(); ?>

表示される情報の下の方にPHPが参照しているmysql(mysqli)ソケットパスが表示されているはず。僕の場合は以下のようになっていた。

MYSQL_SOCKET		/var/mysql/mysql.sock
mysql.default_socket	no value

MYSQLI_SOCKET		/var/mysql/mysql.sock
mysqli.default_socket	no value

これらを修正するためにphp.iniファイルを修正する。コマンドラインより

sudo pico /etc/php.ini

ファイル内部のMySQL (MySQLi)の項目にMySQLの実際のソケットパス(ここでは/tmp/mysql.sock)を記述。

mysql.default_socket = /tmp/mysql.sock
mysqli.default_socket = /tmp/mysql.sock

Apacheを再起動(sudo apachectl restart)してphpinfo()で確認する。先ほど”mysql.default_socket no value (mysqli.default_socket no value)”となっていた箇所が設定できていればOK。phpMyAdminにアクセスできるはず。

4. PEAR

これも絶対必須ではないけど、例えばDBモジュールだとデータベースのバージョン変化だったりに柔軟に対応できるので便利。まずインストーラーのダウンロード。ターミナルより

sudo curl http://pear.php.net/go-pear | php

どこにインストールするか聞かれるので番号を押しながら設定(参考: 素晴らしき哉、人生!: Mac OS 10.5にpearをインストール)。デフォルトだと「~/Documents」直下にインストールになる(参考: Mac OS Xで動かす軽量プログラミング言語 − @IT)。僕は前者に従って以下のように設定した。

1. Installation prefix ($prefix) : /usr/share/PEAR
2. Temporary files directory : $prefix/temp
3. Binaries directory : /usr/bin
4. PHP code directory ($php_dir) : $prefix
5. Documentation base directory : $php_dir/docs
6. Data base directory : $php_dir/data
7. Tests base directory : $php_dir/tests

上記の例の場合pearコマンドは「/usr/bin/」にインストールされるので、自分の環境設定ファイルにパスを通しておくと後々便利。

pico ~/.profile

ファイル内に以下のように記述。

export PATH="$PATH:/usr/bin"

PEARパッケージ内の情報は以下のコマンドで取得できる。

pear list

DBパッケージをインストール。上記の例の場合「/usr/share/PEAR/」配下にDB.phpがインストールされる。

sudo pear install -a DB

PEARパッケージをインストールした時点で「/etc/php.ini」の最後尾に以下のような記述が追加されているはず(なければ追加記述する)。

;***** Added by go-pear
include_path=".:/usr/share/PEAR"
;*****

php.iniファイルを反映させてから(sudo apachectl restart)、試しにDB.phpをインクルードしてみる。適当なphpファイルを作り以下のように記述してから実行。

<?php require_once('DB.php'); ?>

エラーが出なければパスが通っている証拠。これでFlex以外の環境は整いました。次回へつづく

Read More

自分でもはまった、Flash Player 10に関係するものでフォーラムなどでも挙げられているもの。個人的にはwordpressのアップローダーが機能しないのが痛すぎる。9と10って共存できるんだろうか。

[追記 2008/06/21]

FireFox拡張のFlashSwitcher(Firefox3)でプレイヤー9と10を共存させれるっぽい。うーんFirefox3への移行は腰が重いところ。

Flash Player 9と10(Astro)共存 | (SCRATCHBRAIN.BLOG v2

Read More

mcdonaldland » Design Patterns Quick Reference で「Design Patterns」のチートシートpdfが無料配布されている。見た目がキレイなので観賞用にいいかも。ポスター版も有り(有料)。
Design Patterns

Read More

various functions with different distributions for Math.random() « Pixeleroで興味深いことをやっていたのでFlashで実践。Math.random()の頻度分布は0以上1未満の範囲でだいたいフラットな形状になる。じゃあ例えばこれは?

f = (Math.random()+Math.random()+Math.random()+Math.random()) / 4

フラットな頻度分布にならず0.5近傍に頻度のピークがくる。なんでだろ。パっと理由が思いつかない。以下にデモとActioScriptソース等。横軸が関数の返す値、縦軸が頻度でスライダーをいじると関数形が変わります。

[Flash]ランダム関数頻度分布

[追記:2008/06/08]

言及されていた。[ActionScript3.0](標準)正規分布乱数 | moriBlog
中心極限定理というらしい。ちなみにMath.random()を10万回足し合わせて10万で割ると値はほぼ0.5。相対誤差0.1%未満になる。Math.random()だけを使って特定の数値を作ることが可能なわけだ。

[追記:2008/06/09 11:00]

Flex版を作成した。グラフ作成なんかはFlexで作るのが簡単でいいかも。ただファイルサイズがでかくなるのがネック。

[Flex]ランダム関数頻度分布その2

Read More

livedocs.adobe.comリファレンスをオフラインで閲覧するためのデスクトップアプリケーションの作成手順。以下の例はFlex 3リファレンスガイドだけど別になんでもok。もちろんadobeじゃなくても応用可能。livedocsadobe.comのような階層化したhtml群をダウンロードするにはコマンドラインでwgetを用いればよいが(wgetでAdobe Flex3の日本語APIリファレンスを一括ダウンロードする方法 – アガテナ)、コマンドラインに苦手意識があるのでwgetしてくれるソフトウェアを用いた。

  1. wgetをGUI操作できるCocoaWgetをゲット(MacOSX10.4以降)
  2. CocoaWgetを起動 > URL欄に「http://livedocs.adobe.com/flex/3_jp/langref/」と入力。これでダウンロードターゲットが「flex/3_JP/langref/」配下のファイルになる
  3. 「リンクをたどる」にチェック。さらに「このホストのみ」を選んでダウンロードしたい階層を選択。ここでは10階層にした。追加ボタンを押したらダウンロード開始
  4. デフォルトだとデスクトップに「livedocs.adobe.com」というフォルダが作成されていてその中にファイル一式がダウンロードされる。フォルダの位置は適宜移動

ファイルダウンロードに関しては以上で終了で、この段階でも普通にブラウザで見れる。次にデスクトップアプリケーション化。

  1. ファイル一式をデスクトップアプリケーション化するソフトウェアFluidをゲット(MacOSX10.5以降)。Fluidは簡単に説明すると、特定のwebサイトを閲覧するための専用ブラウザ作成ソフトで、例えばtwitterクライアントなんかが簡単に作成できる。専用ブラウザなのでFirefoxやSafariが強制終了しても被害を被らず、リファレンスのような常時起動させておきたいものをブラウジングするのに非常に便利
  2. Fluidを起動 > URL欄に先ほどダウンロードしたリファレンスのトップページのロケーションを選択。不明な場合、リファレンスのトップページをFirefox等で開いてみて、ローカルURL(file:///Users/~~~~~/index.html)をそのままコピー&ペーストすればok
  3. アプリケーションの名前を設定。このアプリケーション用にアイコンを用いたい場合はその画像ファイルを指定。僕はFlickrで発見したAdobeのロゴをつかった
  4. Createボタンを押せばアプリケーションフォルダに専用ブラウザが作成されているはず

注意点としては、ローカルに保存したファイルの格納場所を変更させるとブラウジングできなくなる点。移動させる場合は再度専用ブラウザを作成する必要がある。アイコンを変えたい場合やアプリケーション名を変更したい場合も同様。まあ5秒ぐらいでできるけどね。

Read More

zソート等で非常に参考になったのは/as3/Astro/Torus3D_01/src/Document.as – Spark project。上記Spark projectの例の場合、プリミティブを構成する頂点座標は重複して登録させず、かわりに三角形パッチを構成する頂点座標の組み合わせをインデックスすることで多面体を作成している(詳細はdrawRectanglesの仕様参照)。この場合、各三角形を構成する頂点座標の組み合わせ情報に関してzソートを行うだけで済むので経済的なんだけど(i.e., drawRectanglesの第二引数indicesに関してのみソーティングが行われている)、それ以前にプリミティブ作成時に頂点情報の組み合わせをどうインデックス化するか思考するのが面倒くさい。

そこで今回は頂点情報が重複するのを一切気にせず各三角形パッチごとに頂点座標を計算させた(つまりdrawRectanglesの第二引数indicesを全く設定していない)。グリッド化は簡単になったのだけど、計算量が増えた(三角形パッチ数は頂点数の約二倍)こととzソートする成分がdrawRectanglesに渡す第一引数verticesと第三引数uvtDataの二つになる点が面倒くさい点か。あと幾何学的問題で、矩形画像の球面上へのテクスチャリングはどうしても極近傍に空白ができる。グリッドサイズを細かくしていけば無視できるレベルにはなるけど。ソースはswfリンク先にあります。


(要Flash Player 10)

[追記:2008/06/05]

Spark projectソースに関して補足。renderScene関数内の

vector.w = projection.focalLength / (projection.focalLength + vector.z);
vector.project();

は不要の模様。直前のworld(Matrix3Dクラス)に投影情報が含まれているので

var vector:Vector3D = world.transformVector(vertex);

この時点ですでにvectorは投影用に座標値が変換されている。あと関係ないのだけど、Vector3D.project()はVector3Dの第4引数wで第1~3引数の値を”割る”メソッドなので注意が必要。こんなかんじ。

var v:Vector3D = new Vector3D(100,100,100,2);
v.project();
trace(v);//(50,50,50)

[追記:2008/08/06]

Spark projectのソースについて作者の方よりご指摘を受けています。僕が現在Flash Player 10を使えない状況なのでまだ確認ができていません。上記情報を鵜呑みにせず、コメントも合わせて参照ください。

Read More