外部JavaScriptファイルの遅延ロードってIEでちゃんと対応しようとすると、ホントめんどくさいのですが、jQuery使うと超簡単に書けちゃいます。ということを今日知った。
rss feed$(document).ready(function() {
$.getScript("JSファイルのパス", function() {
// ロード後に行う処理
});
});
簡単すぎてヤバい。
今日先輩が「jQueryを使わないJavaScriptをすっかり忘れた」と言っていたのですが（いいのか!?）、確かに超便利だけど、ちゃんと仕組みとか勉強しなくなりそうで怖いです。
使うにしても、ちゃんとソース読む癖は付けよう。
OpenSocialの勉強をしようと思って、ドキュメントを眺めていたのですが、やっぱりアプリ作らないとよく分からないので、今月はMixiアプリを作っていこうと思います。
Mixiアプリは仕様が公開されているので、それを見ながら。
JavaScriptアプリをiFrameでMixi上に表示することになるので、JavaScripterにはなんともやりがいがありますね。
ビューはGadgetXMLというXMLに、MXMLみたいに各種ビューの定義とかを書く。
JavaScriptとCSSは外部ファイルで読み込ませてもおk。jQueryとか普通に使えます。
で、JavaScriptでは「opensocial.DataRequest」オブジェクトでSNSからデータを送信したり取得。
取得するデータは「opensocial.DataResponse」オブジェクトで返ってくる。
DataRequestオブジェクトを使って永続化データを操作できる。
今のところ、Mixiから引っ張って来れるのは「ユーザー情報」「マイミク一覧」「参加コミュニティ一覧」ってところで、後はマイミクへの通知ができるみたい。
参加コミュニティからカテゴリ情報が取れればよかったんだけど、ID名, コミュニティ名, トップ画像しか取って来れない。
やはりユーザー情報やマイミクの情報と別のサーバの情報を組み合わせてマッシュアップしてくのがよさげか。
ということで、次はどっかのAPIとマッシュアップしたサンプルを作ってみたいと思いまっす。
会社のPCはiMacを使ってるのですが、今日からWindowsマシンも平行して使う事になった。
IE7, IE8の検証とパワポ, エクセル用という事で。
というわけで、やっぱりMacとWinでキーボードを共有できるSynergyだよね。
MacPortが使える環境なら一発で入るし設定も簡単。
sudo port install synergy
Mac側のホスト名が「hostname」コマンドで表示されるものでないとダメってのに少しはまったけど。
Windowsもexe形式のインストーラが用意されてて、インストールすればMac側のホスト名を入力するだけでいいので、20秒で使えるようになる。
あ、Mac側をSynergyサーバにする場合、Windowsにカーソル移したときのIME切り替えは「Command + @」みたいです。
※どうすりゃいいんだ！とやたらめったら打ちまくってたら発見したww
ということで前回の続き。
Catmull-Romスプライン曲線を描くためには、4つ以上制御点がいるので、curveVertex()の回数が4回目以上になったら、ラインを引くようにすればいい。
前回のsplineTo()もちょっと係数の辺りを修正した。
public function curveVertex( x:Number, y:Number ):void
{
var p:Point = new Point(x, y);
__splineVertex[__splineVertexCount] = p;
__splineVertexCount++;
if (__splineVertexCount >= 4) {
var idx0:int = __splineVertexCount - 4;
var idx1:int = __splineVertexCount - 3;
var idx2:int = __splineVertexCount - 2;
var p2:Point = __splineVertex[idx1];
this.graphics.moveTo(p2.x, p2.y);
splineTo(__splineVertex[idx0], p2, __splineVertex[idx2], p);
}
}
public function splineTo( p0:Point, p1:Point, p2:Point, p3:Point ):void
{
var t:Number = 0;
var k:Number = 1.0 / splineSegments;
for (var i:uint = 1; i <= splineSegments; i++) {
t = i * k;
lineTo(
catmullRom(p0.x, p1.x, p2.x, p3.x, t),
catmullRom(p0.y, p1.y, p2.y, p3.y, t)
);
}
}curveVertex()を呼ぶたびに、__splineVertex[]にPointとしてプッシュ。
で、4回目以降ならsplineTo()で曲線を描画。
実際にProcessingと同じ見た目になるかどうかのテスト。
リファレンスの例をやってみた。
package
{
import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.geom.Point;
import flash.events.Event;
[SWF(backgroundColor = 0xffffff)]
public class Main extends Sprite
{
private var g:Graphics;
private var __splineVertex:Array;
private var __splineVertexCount:uint;
public var splineSegments:uint = 20;
public function Main()
{
if (stage) {
initialize();
} else {
addEventListener(Event.ADDED_TO_STAGE, initialize);
}
}
private function initialize(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, initialize);
// main process
g = this.graphics;
begin();
curveVertex(84, 91);
curveVertex(84, 91);
curveVertex(68, 19);
curveVertex(21, 17);
curveVertex(32, 100);
curveVertex(32, 100);
end();
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
}
private function begin( thickness:Number=1, color:uint=0x000000 ):void
{
__splineVertex = [];
__splineVertexCount = 0;
g.lineStyle(thickness, color);
}
private function end():void
{
__splineVertexCount = 0;
}
private function curveVertex( x:Number, y:Number ):void
{
var p:Point = new Point(x, y);
__splineVertex[__splineVertexCount] = p;
__splineVertexCount++;
if (__splineVertexCount >= 4) {
var idx0:int = __splineVertexCount - 4;
var idx1:int = __splineVertexCount - 3;
var idx2:int = __splineVertexCount - 2;
var p2:Point = __splineVertex[idx1];
g.moveTo(p2.x, p2.y);
splineTo(__splineVertex[idx0], p2, __splineVertex[idx2], p);
}
}
private function splineTo( p0:Point, p1:Point, p2:Point, p3:Point ):void
{
var t:Number = 0;
var k:Number = 1.0 / splineSegments;
for (var i:uint = 1; i <= splineSegments; i++) {
t = i * k;
g.lineTo(
catmullRom(p0.x, p1.x, p2.x, p3.x, t),
catmullRom(p0.y, p1.y, p2.y, p3.y, t)
);
}
}
private function catmullRom( p0:Number, p1:Number, p2:Number, p3:Number, t:Number ):Number
{
var v0:Number = (p2 - p0) * 0.5;
var v1:Number = (p3 - p1) * 0.5;
return (2*p1 - 2*p2 + v0 + v1)*t*t*t + (-3*p1 + 3*p2 - 2*v0 - v1)*t*t + v0*t + p1;
}
}
}
うん、リファレンスの絵と全く同じ。
思ったよりも長くなったなー。
とはいえ、これでいい感じに曲線が描けるようになりました。
Graphicsクラスを拡張して汎用的に使えるようにしようっと。
Processingで描いたものをAS3に移植していて、curveVertex()で躓いた。
curveVertex()ってのは、スプライン曲線の点を追加するメソッドで、4つ点を決めてbeginShape()とendShape()で囲むだけでスプライン曲線を描いてくれるスグレもの。
これをActionScript3でやろうとしたところ、メチャ大変だった。
自分が曲線のアルゴリズムを全く知らなかったせいもあるけど。
ちょっと調べてみたんですけど、スプライン曲線にもいろいろあるんですね。
っていうかスプライン曲線とベジエ曲線の違いをようやく理解した。
スプライン曲線は、曲線の断片をつなげて連続した曲線を作り、与えられた制御点はすべて通過する、というか通過点を指定する曲線。
ベジエ曲線は、制御点を利用して曲線を描くが、制御点を曲線が通らない、というか端点の接戦ベクトルを指定する曲線。
つまりスプライン曲線とベジエ曲線は別物。
そして、3次とか2次とかって、3次元とかのことじゃなくて、多項式が2次か3次かということだったのね。。。
とまあこんなレベルですorz
で、スプライン曲線でよく使われるのはCatmull-Romスプライン曲線と呼ばれるものらしい。
（調べてる途中で「B-スプライン曲線」というものを知ったのだけど、これとベジエ曲線って何が違うの？？？）
Catmull-Rom曲線については、こちらのページが詳しいです。
これをAS3でやると、こんな感じになる。
public function CatmullRom(p0:Number, p1:Number, p2:Number, p3:Number, t:Number):Number
{
var v0:Number = (p2 - p0) * 0.5;
var v1:Number = (p3 - p1) * 0.5;
return (2 * p1 - 2 * p2 + v0 + v1) * t * t * t +
(-3 * p1 + 3 * p2 - 2 * v0 - v1) * t * t + v0 * t + p1;
}※ tは「0~1」の値を取ります。
で、短い直線を描きまくって曲線っぽくしていく。
分割数は多すぎると重くなるので、20くらいがいいみたい。
とりあえず、一番少ない4点でスプライン曲線を描いてみた。
package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.geom.Point;
[SWF(backgroundColor = "0x000000", frameRate = "30")]
public class Main extends Sprite
{
private var points:Array;
private var num:uint = 4;
private var seg:uint = 20;
public function Main()
{
if (stage) {
initialize();
} else {
addEventListener(Event.ADDED_TO_STAGE, initialize);
}
}
private function initialize(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, initialize);
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
// main process
points = [];
for(var i:uint = 0; i < num; i++) {
var p:Point = new Point();
p.x = Math.round(Math.random() * stage.stageWidth);
p.y = Math.round(Math.random() * stage.stageHeight);
points.push(p);
}
draw();
}
private function draw():void
{
graphics.clear();
for(var i:uint = 0, len:uint = points.length; i < len - 3; i++) {
var p0:Point = points[i];
var p1:Point = points[i + 1];
var p2:Point = points[i + 2];
var p3:Point = points[i + 3];
splineTo(p0, p1, p2, p3);
}
}
private function splineTo(p0:Point, p1:Point, p2:Point, p3:Point):void
{
graphics.lineStyle(1, 0xffffff);
graphics.moveTo(p1.x, p1.y);
for(var i:uint = 0; i < seg; i++) {
var t:Number = (i + 1) / seg;
graphics.lineTo(
catmullRom(p0.x, p1.x, p2.x, p3.x, t),
catmullRom(p0.y, p1.y, p2.y, p3.y, t)
);
}
}
private function catmullRom(p0:Number, p1:Number, p2:Number, p3:Number, t:Number):Number
{
var v0:Number = (p2 - p0) * 0.5;
var v1:Number = (p3 - p1) * 0.5;
return (2 * p1 - 2 * p2 + v0 + v1) * t * t * t + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t * t + v0 * t + p1;
}
}
}眠いので今日はここまでにして、curveVertex()は明日実装しよ。。。
（やっぱり複雑な図形を描こうと思ったら、数学の知識が必要なんですねorz）
こちらのブログを読んで、初めてPHPでもリフレクションが使えることを知った。
リフレクションというのは、リバースエンジニアリングするためのもので、Javaでいうところのクラスやメソッドの構造などを取得するAPIのこと。
要は「Hoge」ってクラスが「foo」ってプロパティ（変数）を持っているか、とか型は整数かどうかなどを知る事ができる。
ORM作る際にXMLとか書かなくても、クラス書いとけばそこから名前と型をテーブルにマッピングできるので使い方によってはとても便利なのだけど、PHPは型がないから使えないか。。。
って、じゃあどこで使えばいいんだろう？
PDO_MySQL使おうと思って、MySQLをMacPortからインストールしたんだけど、Leopardに最初から入ってるPHPってPDO_MySQLが組み込まれてないのね。。。
MySQL入ってないので当たり前か。
全部MacPortで入れ直そうかなーと思ってたのですが、PDO_MySQLってソースが落とせる
んじゃないですか！
PECLからソースを落とせます。
ということで早速インストール
phpize
./configure 'with-pdo-mysql=shared,/opt/local/lib/mysql5'
make
make test
sudo make install
で、php.iniを修正
extensions_dir = "/usr/lib/php/extensions/no-debug-non-zts-20060613/"
extension = pdo_mysql.so
Apacheを再起動しまして、phpInfo()で確認。
・・・ない！ないぞ！
PDO_MySQLが追加されていないではないか！！
Apacheのログを見てみる
less /var/log/apache2/error_log
すると、「Unable to load dynamic library」とのエラーが。
あーもう一番分かりにくいエラーきたー。
あらゆるググるで探した結果、iMacが64bitにも関わらず、32bit版でビルドしていた
ために、エラーが起きているみたい。
file /usr/lib/php/extensions/pdo_mysql.so
/usr/lib/php/extensions/pdo_mysql.so: Mach-O bundle i386
64bit用でビルドすれば大丈夫かな・・！
MACOSX_DEPLOYMENT_TARGET=10.5 CFLAGS="-arch ppc -arch ppc64 -arch i386 -arch x86_64 -g -Os -pipe -no-cpp-precomp" CCFLAGS="-arch ppc -arch ppc64 -arch i386 -arch x86_64 -g -Os -pipe" CXXFLAGS="-arch ppc -arch ppc64 -arch i386 -arch x86_64 -g -Os -pipe" LDFLAGS="-arch ppc -arch ppc64 -arch i386 -arch x86_64 -bind_at_load" ./configure 'with-pdo-mysql=shared,/opt/local/lib/mysql5'
だ、ダメだー。MySQLがそもそも64bit版でない。エラーが出て終了した。
MacPortでsearchしてもMySQLの64bit版は落とせない模様。つ、詰んだ。
あ、ちなみにMySQLをソースからインストールする場合はこれ出来ます。
ということで、MacPortでApache, MySQL, PHPを全てインストールすることで無事に解決したのであった。
世界は平和を取り戻した。過程は平和では無かったけれども！
Leopardが独自ビルドだからダメなんだyo！
さて、MacVimに乗り換えたわけですが、どうもActionScript3のシンタックスが効いてない。
Vimでは効いてるのに・・！
というわけで、MacVimで「set filetype」するときは、省略せずにちゃんと書きましょうということみたい。
autocmd BufNewFile,BufRead *.as set filetype=actionscript
Syntaxファイルはこちらからもらってきてます。
ついでなんでちょっと便利Tipsを。
よくVImでファイル編集してて、文字コードや改行コード変えたいなとか文字コード変えて開き直したいとかあると思うんですけど、そんなときはこんな感じにショートカットキーを割り当てとくと便利です。
" file encoding
nmap ,U :set fileencoding=utf-8<CR>
nmap ,E :set fileencoding=euc-jp<<R>
nmap ,S :set fileencoding=cp932<CR>
"reload file with given file encoding
nmap =U :e ++enc=utf8<CR>
nmap =S :e ++enc=sjis<CR>
nmap =E :e ++enc=euc-jp<CR>
nmap =J :e ++enc=iso-2022-jp<CR>
" file format
nmap ,W :set ff=dos<CR>
nmap ,L :set ff=unix<CR>
こんな感じにしとくと、コマンドモードで「=U」でUTF-8で開き直したりできて便利です。
ってVim使いの人ならこのくらい当たり前か。。。
MacVimだと複数ウィンドウ開ける！
やばい、これで既存のテンプレ開いて確認しつつ、別ウィンドウで新規画面を編集できる。
両方ともめちゃファイル開くので、別ウィンドウの方が圧倒的に管理しやすい。
これで作業効率120%だぜ。
ターミナルでscreen使えば？って話かもしれないけど、何か分からんがMacVimをターミナルで起動すると矢印キーの挙動が変なのよね。
下を押すとAとか入って改行されるし。誰か解決策を教えて。。。。。
PDO::MySQL入ってるのか！
ビルドオプション見て気づいた。
簡単なORM作ってるので、これでドライバはPDOで作ればSQLiteと
共通で使い回せる。
prepareとかquote作るのめんどくさいなーと思ってたのでラッキー！
