Asagiri Jam App

久々の趣味アプリをリリースしました。
FRF2011に向け、改良を重ねようと思います。


http://soohei.net/blog/asagiri-now-2010
[追記1]
一時公開終了しました。(2011/4/5)

[追記2]
http://fes-app.com

JS (1) : JavaScriptでのクラス定義

■ クラスの定義方法

例えばASだと、このような定義になると思いますが、

package{
	public class MyClass{
		
		public var myValue;
		
		//コンストラクタ
		public function MyClass(value1, value2){
			var newValue = value1 + value2;
			test1(newValue);
		}
		
		public fucntion test1(value3){
			myValue = value3;
			trace("myValue:", myValue);
		}
		
		public fucntion test2(){
		
		}
	}
}


JSではこのように書くと良いと思います。

var MyClass = function(){ 
	this.myValue;
	this.initialize.apply(this, arguments); 
}

MyClass.prototype = {
	//コンストラクタ
	initialize: function(value1, value2) {
		var newValue = value1 + value2;
		test1(newValue);
	},
	
	test1: function(value3){
		this.myValue = value3;
		console.log("myValue:", myValue);
	},
	
	test2: function(){
	
	}
}


説明 :
・JSに変数の型指定はありません。
・この書き方をすると、関数内で定義した変数を除いて、全てpublicになります。クラス内でprivate変数はつくれません。
・イベント処理っぽいことが入って来た時にさらに掘り下げますが、14行目の「this」は必須です。
・console.logはfirebugや、WebKitのコンソールで確認。


■ サンプル

できるだけASっぽく、1クラス1ファイルで考えてみます。
ドキュメントクラス風にMainクラスを実行して、SampleClassクラスのインスタンスをつくり、
その中の関数を呼んで終わり。という簡単なプログラムです。

まずHTMLファイルでmain.jsを読み込む。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<script type="text/javascript" src="main.js"></script>
</head>

<body>
	<div id="content"></div>
</body>

</html>


main.jsの中身

document.write('<script type="text/javascript" src="sampleClass.js"></script>');

onload = function(){
	var main = new Main();
}

//Mainクラス
var Main = function(){
	this.initialize.apply(this, arguments); 
}
Main.prototype = {
	//コンストラクタ
	initialize: function() {
		var sampleInstance = new SampleClass("Hello World!");
		sampleInstance.talk();
	}
}


sampleClass.jsの中身

//SampleClassクラス
var SampleClass = function(){ 
	this.myMessage = "";
	this.initialize.apply(this, arguments); 
}
SampleClass.prototype = {
	//コンストラクタ
	initialize: function(message) {
		this.myMessage = message;
	},
	
	//this.myMessageを出力
	talk: function(){
		console.log(this.myMessage);
		document.getElementById("content").innerHTML = this.myMessage;
	}
}


説明 :
・main.jsの1行目はASでいうimportっぽい書き方をしてみたくてやっています。
(HTMLをいじらずJSだけで完結できるので便利)
・実際はJQueryのonLoadから処理を始めて行くと色々できるようになります。(次回以降)

ダウンロード :
http://soohei.net/blog/files/js_01.zip


参考 :
http://d.hatena.ne.jp/amachang/20060516/1147778600
http://d.hatena.ne.jp/vividcode/20090706/1246905260

JS (0) :

一年に一度のフェス日記と化していたブログですが、せっかく心新たにJavaScriptを覚えているので、Flashに本格的に足を踏み入れるキッカケとなった緒方さんのFLASH OOP 最終章のような素敵な内容を目指します。

■ Flashを覚えた時のように、JSを覚える

・(1) JavaScriptでのクラス定義
・(2) JSONデータの読み込み
・(3) 表示部分を準備
・(4) スライドショーのプログラム
・(5) アニメーションをつける

ActionScriptを使える人が脳内で仕組みを置き換えながら理解できるようにします。ベストな実装方法かはわかりません。逆に教えて頂きたい。今日から少しずつまとめます。