ダヴィンチコードの続編であります、天使と悪魔を観に行ってきましたー。
ダヴィンチコードと違って謎解きはそこまで深くなく、その分アクションや映像で盛り上がるという感じでした。
どっちが好き嫌いかは人それぞれなんでしょうが、自分はダヴィンチコードよりも見やすくてよかったです。だって、3時間も上映時間あるんだもの。
それにしても新宿ピカデリーは休日混み過ぎ。。。
人気ありそげな作品は、前日にチケットをオンラインで取っとかないと、チケット待ちの大行列に巻き込まれるので注意。
クリーンインストール時に自分用のまとめとして。
・plugin/fuzzyfinder.vim
バッファエクスプローラー。
minibufexpl.vim より個人的に好き。
・plugin/opsplorer.vim
ファイルエクスプローラー。
ファイルの各種操作がデフォルト1文字入力で出来たり、
「↑」で親ディレクトリへ移動出来るのが超便利。
・plugin/autocomplpop.vim
補完候補を自動で絞り込んで表示
・plugin/sudo.vim
root権限のファイルをうっかり一般ユーザで開いてしまった時用
・plugin/allml.vim
HTML編集中「Ctrl+x /」で閉じタグを補完
・css_color.vim
CSS内の色指定にその色を付けてくれる。
ftplugin/css.vim に追記するだけでおk。
・indent/javascript.vim
クラスベースのJavaScriptでもインデントを付けてくれる
・plugin/scratch.vim
スクラッチバッファを作成。
こちらの神記事を参考に、「,s」でJSLintによるJavaScriptの構文チェック結果の
表示用に主に使う。
※SpiderMonkeyのインストールも必要
・syntax/actionscript.vim
ActionScript3のシンタックスハイライト用
・autoload/actionscriptcomplete.vim
ActionScript3のOmnicomplete用
外部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クラスを拡張して汎用的に使えるようにしようっと。
こんな高かったのか・・！
正直ディズニーを舐めてた。
くそー、7月はランチが相当寂しくなりそうだ（泣
ってかここで結婚式挙げてる人とか貯金どんだけー。
親からの援助無し、とかだったらマジ尊敬する。
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は型がないから使えないか。。。
って、じゃあどこで使えばいいんだろう？
