イナヅマTVログ » multimedia design, ActionScript,JavaScript, Lingo, PHP, Perl, SQL

2011.10.31
17:49
author: taikiken
1件のコメント

HTML5 / Canvas, スライムみたいにくっつくやつ – キモきもちいい

HTML5, Canvas のキモきもちいいサイト。
http://www.spielzeugz.de/html5/sticky-thing/
画面上のピンクの物体がブラウザ・ウインドウの端にくっついてスライムみたいにポワンポワン震えます。

spielzeugz.de/lab には他にもステキなDemo
がアップされています。

update
@abakaneさんに教えてもらったのですが、iPhone, iPad でもグリグリ動きます。
しかも数倍楽しい。
ピンチアウト・インでピンクのふにゃふにゃは大きくなったり小さくなったりします。
傾きも検知しているようです。
iPadだと良くわかります。続きを読む →

2011.10.24
00:47
author: taikiken
1件のコメント

ECMAScript 5, Browserサポート状況

前回投稿のコメントでECMAScript 5で追加されたプロパティを教えてもらったので、ブラウザ対応状況をGoogle先生にお聞きした。

http://kangax.github.com/es5-compat-table/

う〜ん、IE 8はほぼ全滅。
Safari 4もかなりヤバい。

使うならサイトレギュレーションがIE 9をミニマムにならないと無理。
まだまだ現実的じゃないってことになるみたい。

腐ったミルク(6)と腐りかけたミルク(7)と賞味期限切れミルク(8)が処分されると安心して使えるってことかな。
その日はまだまだ遠そう、今のJavaScriptの機能であがくしかなさそうです。

魅力的なプロパティや関数が増えてる、使えるようになるとJavaScriptの世界も変わって行くんだろうね。

上記リンクさせていただいたサイトには以下のサポート状況ものっています。
http://kangax.github.com/es5-compat-table/non-standard/

JavaScriptの母ECMAScriptも進化してました。

freeze, seal, preventExtensions
うなの日記が詳しかったのでリンクさせてもらいます。
http://d.hatena.ne.jp/unageanu/20110918/1316320274

es5-shim
非互換ブラウザのためのライブラリもあるようです。
https://github.com/kriskowal/es5-shim/

2011.10.23
15:52
author: taikiken
3件のコメント

JavaScriptでOOP – Classみたいなのにprivateな関数と変数

前回の投稿「JavaScriptでOOP – privateぽい関数と変数, staticなやつ」ではstaticな関数と変数を作成しました。

今回はインスタンスが作成できるClassみたいなのにprivateな関数と変数を設定します。

var Product = (function () {
    var cost = 1000
    ,tax = 0.05
    ,price = function () {
        return cost * (tax + 1);
    }
    ,main = function () {
    };
    main.prototype = {
        tax: function (n) {
            tax = n;
        }
        ,price : function () {
            var p = price();
            var t = cost * tax;
            return [p,t,p-t];
        }
    };
    return main;
})();
 
var product = new Product();
console.log(product.price());//[1050,50,1000]
product.tax(0.08)
console.log(product.price());//[1080,80,1000]

これで完全にでは無いですがprivateな変数・関数も備わったClassのように使用できます。
new してインスタンスも作れます。

一番の問題はProductを上書きできることです。
Class名にあたるProductを保護する方法が無いものでしょうか。

update 2011-10-23 22:21
via anonymous : Object.frozen=true
ECMAScript 5にこんなのが追加されてるらしい。
雰囲気的にfrozenなので多分固定化できるんだろうけど使い方がイマイチ分かんないな。

MDN
https://developer.mozilla.org/ja/JavaScript/New_in_JavaScript/1.8.5

msdn
http://msdn.microsoft.com/en-us/library/ff806186(v=vs.94).aspx

ここら辺のリンクだろうなぁ。

update
＊privateだけど
private は private だけど static になっちゃうんだよな〜
インスタンス毎に保持できるprivateな関数とか変数はConstructorに書くしかないんだろうか…

2011.10.23
14:59
author: taikiken
2件のコメント

JavaScriptでOOP – privateぽい関数と変数, staticなやつ

前回の投稿「JavaScript, 匿名関数の実行そして関数と変数の隠匿」を応用するとprivateな関数・変数を作成できます。

var Book = (function (){
    var cost = 1000
    ,tax = 0.05
    ,price = function () {
        return cost * (tax + 1)
    };
    return {
        getPrice : function () {
            return price();//cost * (1 + tax);
        }
        ,getTax : function () {
            return cost * tax;
        }
    };
})();
 
console.log(Book.getPrice());//1050
console.log(Book.getTax());//50
console.log(Book.price());//error

Bookはstaticな関数を持ったクラスのように使えます。

getPrice, getTaxはstatic public functionとして利用できます。
cost, tax, priceはprivateのように隠匿され外部からアクセスできません。

2011.10.23
13:11
author: taikiken
2件のコメント

JavaScript, 匿名関数の実行そして関数と変数の隠匿

関数の意図しない上書きを防ぐ

関数の上書き
JavaScriptの関数・変数は全てpublicです。
そのために意図しない上書きが行われてしまい、エラーが発生したり誤動作を起こしてしまうことがあります。

jQueryとprototype.jsを同時に使用すると関数$()がコンフリクトを起こすことは有名です。
意図しない上書きがおこるためです。

JavaScriptで関数・変数を外部からアクセスできないようにするためにはローカル扱いにすると可能です。

function someMethod () {
    var dog = 'Pochi';
}

関数someMethodに設定した変数dogはローカル変数なので関数外部からアクセスすることはできません。
ところが関数someMethodはグローバルなので上書きが可能です。

function someMethod () {
    var dog = 'Pochi';
    alert(dog);
};
someMethod();// Pochi
someMethod = function () {
    console.log('override');
};
someMethod();// console log

1度目のsomeMethod();2度目のsomeMethod();では実行結果が違います。
途中で関数の上書きが起こっているからです。

匿名関数

(function (){
    var dog = 'Pochi';
    alert(dog);
})();

今では見慣れた構文ですけど最初に見た時にかなり違和感を覚えました。
匿名の関数を作成しそのまま実行しています。

jQueryの練習問題なんかにも良く登場しますよね。

(function ($){
    var dog = $('#dog');
})(jQuery);

ノーコンフリクトなjQueryを引数で渡し匿名関数内では使い慣れた$を使用します。

匿名関数は名前を持たないので上書きの方法がありません。
匿名関数内の変数・関数をローカル設定すれば外部からアクセスできません。

2011.10.23
02:43
author: taikiken
1件のコメント

「ハイパフォーマンスJavaScript」の教え-ノンブロッキングパターン

「ハイパフォーマンスJavaScript」には新鮮な情報が詰まっています。

現在のWebはJavaScript無しには存在できないのではと思えるほど多くのJavaScripが使用されています。
最初のポイントはいかに素早くscriptを読込み実行するかになります。

教訓1

JavaScriptコードの実行はほかのフィルの読み込みをブロックする

HTMLにリンクされたJavaScriptのロードが開始されダウンロードが完了しその実行コードが完了するまで次のダウンロードが開始しない、という事実は驚きでした。
ダウンロード時間を短くするためにファイルサイズをできるだけコンパクトにすることは理解していましたが、その他のファイルのロードをブロックすることまでは恥ずかしながら知りませんでした。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src='script1.js'></script>
<script type="text/javascript" src='script2.js'></script>
<script type="text/javascript" src='script3.js'></script>
</head>
<body>
<div id='page'>
	<header>
		Logo
	</header>
 
	<article>
		Contents
	</article>
</div>
</body>
</html>

このようなHTMLソースの場合
script1.jsのダウンロードが完了しコードを実行するまで次のscript2.jsのダウンロードは始まりません。
当たり前ですが、script1.js以下のHTMLも読込まれず表示されません。
表示遅延が発生してしまいます。

何らかの対策が必要になります。

教訓2

ノンブロッキングパターン
ノンブロッキングなScriptロード方法が「ハイパフォーマンスJavaScript」には書かれています。

オリジナルコードの他にサードパーティのライブラリの紹介されていました。

LasyLoad
https://github.com/rgrove/lazyload

LABjs
LABjs : Loading And Blocking JavaScript
https://github.com/getify/LABjs

どれも動的にscriptタグを作成し外部JavaScriptのロードしています。
さらにダウンロード完了を待って初期関数を実行させることが可能です。
このアプローチをとることで読込みをブロックすることは無くなるようです。

教訓3

httpアクセスを最小限にする

「ノンブロッキングパターン」でブロック問題は解決できました。
ただ大量のJavaScriptファイルをロードすると同量の「httpアクセス」は発生します。
サーバーへのアクセスを最小にし過度の「httpアクセス」が起きないようにする配慮も必要になります。

地味なんですがファイルをまとめるのが有効な手段です。

jQueryとかprototype.jsも開発段階は複数のJavaScriptファイルに分かれています。
その方が開発管理がしやすいですから。
リリース時に1つのファイルにまとめられています。

同じことをしましょうね、って話です。

2011.10.22
14:25
author: taikiken
1件のコメント

JavaScriptでOOP – Classみたいなの

久しぶりにJavaScriptどっぷりな生活を送りました。
これがかなり楽しい。
なんでかなぁって考えるとJavaScriptをガリゴリ書いてるとFlash 5, Flash MX 時代の ActionScript 1 を思い出してしまうからみたいです。

JavaScriptを書くとFlash MX時代に見て覚えたActionScript Tipsがほとんどそのまま使えて楽しいことこの上なかったりします。
当時むさぼり読んだ Robert Penner さんの書かれた “Robert Penner’s Programming Macromedia Flashmx” は忘れられない本のひとつです。この本でprototypeチェーンそしてOOPを知りました。

JavaScriptでOOP

Class
JavaScriptでClassは使えませんが似たことはできます。

function Dog () {
	alert('Vow');
}
 
new Dog();

prototypeを使いインスタンスメソッド、インスタンス変数を設定します。

function Dog () {
}
Dog.prototype.name = "Pochi";
Dog.prototype.getName = function () {
	alert(this.name);
}
var dog = new Dog();
dog.getName();

次のように書くこともできます。

function Dog () {
}
Dog.prototype = {
	name: 'Pochi'
	,getName: function () {
		alert(this.name);
	}
}
var dog = new Dog();
dog.getName();

Class 継承
親Classをextendsするのもprototypeを使います。

function Dog () {
}
Dog.prototype = {
	name: 'Pochi'
	,getName: function () {
		alert(this.name);
	}
}
 
function Cat () {
}
Cat.prototype = new Dog();
Cat.prototype.name = 'Tom';
 
var cat = new Cat();
cat.getName();//Tom
 
var dog = new Dog();
dog.getName();//Pochi

子Class Cat は親Class Dog を継承しています。

【注意】
関数、変数はpublic扱いになります。
privateな関数、変数は作れないので使用には注意が必要です。

また、dynamicなので動的に変数・関数の追加が可能です。
便利でもありますが大きな間違いをおかしやすい点でもあると思います。

function Dog () {
}
Dog.prototype = {
	name: 'Pochi'
	,getName: function () {
		alert(this.name);
	}
}
 
function Cat () {
}
Cat.prototype = new Dog();
Cat.prototype.name = 'Tom';
 
var cat = new Cat();
cat.getName();//Tom
 
var dog = new Dog();
dog.getName();//Pochi
 
cat.color = 'white';
alert(cat.color);//white

private的な扱いにする方法もあるようですがそれはまた別の機会にポストしたいと思います。

static関数・変数
staticな関数・変数はObjectを使います。

var Dog = {
	name: 'Pochi'
	,getName: function () {
		alert(this.name);
	}
}
Dog.getName();

【注意】
Dogは単純なObjectです。

var Cat = Dog;

などとしてもCatはDogの参照で複製されていません。

var Cat = Dog;
Cat.name = 'Tom';
Cat.getName();// Tom
Dog.getName();// Tom

「みたい」なのと割り切れば使うのに困らないと思います。

prototype.jsにはClassを作る関数が用意されているのでそれを使う方法もあります。
Defining classes and inheritance
http://www.prototypejs.org/learn/class-inheritance

2011.10.22
02:04
author: taikiken
0件のコメント

Lights, WebGLなサウンド・ビジュアライザー

Lights
three.jsを使ったWebGLなサウンド・ビジュアライザー、Lightsがスゲーって話。
Robert PennerさんのG+投稿で知ったのですが、正に Awesome 最高です。
技術的な高さは勿論ですが、表現力やクオリティにドキンとさせられました。
マウスやキー入力にも反応し暗闇の中を音楽に合わせて光(Light)が走って行きます。