SOOHEI.NET_BLOG

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

soohei — Thu, 12 Aug 2010 12:20:45 +0000

■ クラスの定義方法

例えば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を読み込む。

–
main.jsの中身

document.write('');

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

–
Tweet

JS (0) :

soohei — Thu, 12 Aug 2010 11:00:04 +0000

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

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

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

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

–
Tweet

2009 – 2010

soohei — Thu, 31 Dec 2009 09:25:04 +0000

大晦日らしく1年をまとめます。

1月～4月
・ニセコ
・スノボ三昧
・iida公開

5月～8月
・骨展
・FUJI ROCK
・FUJI ROCKメンバーと飲む日々
・オトダマ

9月～10月
・Prodigy@幕張
・朝霧JAM
・渋谷の櫻坂の店員が変わった (味も変わった)

11月～12月
・DROPCLOCK@ISSEY MIYAKE
・自宅引越し
・FPM公開 (http://www.fpmnet.com/)
・初YCAM (セミトラ展へ)

今年一番聞いたアルバムは
FABRICLIVE.43 – SWITCH & SINDEN PRESENT GET FAMILIAR MIXED BY SINDEN

一番ハマった曲は
ドッグンドール / ゆらゆら帝国
今頃ゆら帝をちゃんと聴きました。

ベストアクトは
BASEMENT JAXX @ FRF と
SINDEN @ 朝霧

でした。

皆様良いお年を。
来年もよろしくお願いします。

DROPCLOCK @ ISSEY MIYAKE

soohei — Sun, 25 Oct 2009 17:07:57 +0000

最近のTHAでの仕事です。
DROPCLOCKの4面バージョンをISSEY MIYAKEの南青山の路面店で展示中です。

WOMEN, MEN, PLEATS PLEASEの各店舗でPARIS, NEW YORK, TOKYOの時計になっています。お近くをお通りの際はよろしくお願いします。毎日10時〜23時、12月下旬まで展示予定です。

みなさま、ありがとうございました。

2009 fes

soohei — Sun, 25 Oct 2009 17:00:43 +0000

今頃振り返り。

FUJI ROCK FESTIVAL 09

前半ずーっと雨。フル装備で行ったので無事だった。
帰りの高速で虹が見えた。
・SIMIAN MOBILE DISCO 良かった。
・卓球@岩盤ブース飲んで踊ってFRFで初オール。
・OASIS もう2度と見れないのでは。。Don’t Look Back In Anger はアコースティック。
・FRANZ FERDINAND アレックスの目からビームが。
・80KIDZ 初めて見た。楽しくて最前で踊ってた。
・ソカバンみんなで歌ってた。
・BASEMENT JAXX 最強の締め。ベストアクト。

朝霧JAM

富士山が素晴らしい。夜中からカセットコンロでキムチ鍋。次の日も朝からキムチ鍋&うどん。
・SINDEN 超-楽しかった。One More Time かけてた。ベストアクト。
・ゆらゆら帝国かっこよかった。ブーム到来の予感。
・SPECIAL OTHERS みんなふわふわ。
・YOUR SONG IS GOOD 楽しい締め。

32

soohei — Sun, 21 Jun 2009 08:14:35 +0000

最近雨が多いので、フジロックでの雨対策のことばかり考えています。
フジロックまであと32日です。今年はスノボで冬の苗場にも2度行き、
かぐら、みつまた、田代、ドラゴンドラの地理的理解もばっちりです。
もちろん狙うは「場内１」です。

–
CRASH

山中先生の骨展に、THAメンバーとして参加させて頂きました。
Ephyra～卒業～色々って有り、今こうして骨展のみなさんと
仲良くさせてもらえて、本当に感謝です。展示は8/30までです。
よろしくお願いします。

21_21 DESIGN SIGHT第5回企画展　山中俊治ディレクション「骨」展
会期：2009年5月29日(金) – 8月30日(日)　
時間：11:00～20:00（入場は19:30まで）
休日：火曜日
http://www.2121designsight.jp/

Metasequoia, Blendar

soohei — Sat, 24 Jan 2009 12:45:44 +0000

3Dでモデル作って、テクスチャ貼って、
アニメーションつける作業を一気に身につけたので、
忘れないようにメモ。

目次
-
■ MetasequoiaでモデリングしてBlendarでアニメーション
1) メタセコでモデルデータ作成
2) DXF書き出し
3) Blendarで読み込み
4) アニメーションつける

■ Metasequoiaでモデリングしてテクスチャ貼って、Blendarにインポート
1) メタセコでモデルデータ作成
2) UVマップのデータ書き出し
3) UVマップのデータ割り当て
4) 保存、Blendarで読み込み

環境 : Windows xp
使ったツール : Metasequoia, Bendar
-

■ MetasequoiaでモデリングしてBlendarでアニメーション
メタセコはモデリングツールとして優れているが、アニメーション機能がないので
メタセコでモデリング後にBlendarでアニメーションをつけます。

1) メタセコでモデルデータ作成
・基本図形などを駆使してつくる。

・オブジェクトパネルがフォトショのグループ・レイヤー機能的なので活用する
・「選択・接続面」、「範囲」、「ナイフ」あたりが使うツール
（参考: メタセコイア初心者講座 – KT爺メタセコイア指南書）
（参考: チュートリアル(本当に初めての方のために作成したBlenderチュートリアル) – WBS+(Web/Blender Studio+)）

2) DXF書き出し
・名前を付けて保存で「AutoCAD(*.dxf)」を選択、保存　(＊無償版だとできない)

・保存設定でサイズ・拡大率を「0.01」、座標軸を「Blendar」にする

・「OK」

3) Blendarで読み込み
・File→Import→DXF→ファイル選択して→Import DXF

・表示される。おそらく大きさも座標系もバッチリ。

・Zキーでワイヤーフレーム、ソリッドの切り替えが可能
・Tabキーで編集モードに
・まれにワイヤーフレームが表示されないときはTabキー2回連打
・基本的に動きをつける単位や、テクスチャの単位ごとにパーツをDXF書き出し、Importを繰り返す
（まとめてDXFにするとBlendar上でオブジェクトを分割する方法がわからなかった）

4) アニメーションつける
・右クリックでオブジェクト選択
・Mキーで配置するレイヤーを変更
・PキーでParentを登録でき、子は親のアニメーションに従う。
・よって、複数のパーツを一緒に動かしたいときは同じ親に登録し、親にアニメーションをつける。
・タイムライン機能もTabキーで編集可。
・Xで削除
・Cで視点の中心変更
・テンキーの1～9で視点切り替えショートカット
・Gで移動モード、X,Y,Zを押すと移動の方向がロックされる。
・Ctrlキーを押すと整数倍の移動になる
・レンダリング設定パネルのFormatをPNG、RGBAにすると背景透明PNGも書き出せる

（参考: Blenderチュートリアル(背景が透明な静止画、動画の出力方法) – WBS+(Web/Blender Studio+)）

■ Metasequoiaでモデリングしてテクスチャ貼って、Blendarにインポート
Blendarでマテリアルの設定詰めればだいぶキレイになるが、テクスチャの効果は偉大です。
（参考: Blenderチュートリアル(本当に初めての方のために・・・マテリアル１ – WBS+(Web/Blender Studio+)) – WBS+(Web/Blender Studio+)

1) メタセコでモデルデータ作成
上と同じ。

2) UVマップのデータ書き出し
・オブジェクト選択して、「UV操作」
・「UV操作」パネルで「面」選択
・オブジェクトパネルでも同じオブジェクトが選択されている必要有り
・「Fit」→「Apply」→「自動展開」→「ファイル出力」

・自由に編集、保存

（参考: イノシシのモデリング（6） – KT爺メタセコイア指南書）

3) UVマップのデータ割り当て
・材質パネル、「新規」、「マッピング」「模様」「参照」で選択
・オブジェクトを選択して、「選択部処理」→「面に現在の材質を設定」

・Ctrl+Shift+Rでレンダリング、確認。

4) 保存、Blendarで読み込み
・*.mqo形式（メタセコ標準）で書き出し

・Blendarにmqoインポータを追加
–
http://blender.jp/modules/newbb/viewtopic.php?viewmode=thread&topic_id=267&forum=5&post_id=3542#3542 からダウンロードして、
「C:\Program Files\Blender Foundation\Blender\.blender\scripts」に置く。
インストールの設定によっては「C:\Documents and Settings\ユーザ名\Application Data\Blender Foundation\Blender\.blender\scripts」（自分はこちら）。
–
・Blendarで「File」→「Import」→「Metasequoiad(*.mqo)」

・Scale 「0.01」
・AlphaMap, NormalMap, ColorMap, Targetは全て先ほど書き出したmqoを選択

・「Import」
・カメラや照明、映り込みの調整
・レンダリング
（参考: ロボットの作り方　＜ライティング編01＞）

ここまで振り返ってわかったのですが、
テクスチャの有無に関わらず、mqoで書き出し・インポートを行えば、1つめの手順は不要でした。

2008-2009

soohei — Sun, 04 Jan 2009 17:22:33 +0000

2008年振り返り (仕事以外)

行ったライブ
・Justice / 新木場
・Rage Against The Machine / 幕張メッセ
・Brahman / Zepp
・Primal Scream, Underworld, The Music,
　Foals, The Cribs, The Zutons, etc / Fuji Rock
・Sex Pistols, Fat Boy Slim, Justice, Fratellis, MGMT,
　The Teenagers, Crystal Castles, Does It Offend You Yeah, etc / Summer Sonic
・Radiohead / さいたまスーパーアリーナ
・The Music / 新木場
・The Bohemians / 下北沢Daisy Bar

大ざっぱにここ数年をまとめると、
(200?)・・Strokes, Libertines・・(2007)・・Justice, Battles・・Underworld, Daftpunk, DexPistols, BangGangDeejays・・(2008)・・RATM・・TingTings, Teenagers, Modular, Kitsune系・・BangGangDeejays 2nd・・80Kidz, Lowbrows, DexPistols・・Bohemians
という感じ。

2曲挙げなさいと言われたら
Stay The Same (80kidz Remix) / Autokratz
Dirty Liberty Baby Please -THE BOHEMIANS

今年も仕事頑張ってたくさんライブ行きます。どうぞよろしくお願いします。

ProcessingでWebカメラ (Windows)

soohei — Sun, 04 Jan 2009 17:22:05 +0000

ちょうどProcessingが1.0になった頃に
Processingを1週間くらい触っていて、
Windows(xp)でWebカメラを使おうとしたら
相変わらず素直には動かなかった。Macは最初から何も問題なし。

WINVDIG 1.01 をインストール
(最新版ではなく、1.01である必要がある)
http://www.eden.net.nz/7/20071008/

ほぼ最小サンプル
–

//ライブラリの取り込み
import processing.video.*;
//キャプチャする映像のオブジェクトを用意
Capture video;
int videoW = 120;
int videoH = 90;
int attachX;
int attachY;
int attachW;
int attachH;

void setup() {
  size(800, 600, P2D);
  //キャプチャする映像の設定
  video = new Capture(this, videoW, videoH, 24);
  attachW = height / 3 * 4;
  attachH = height;
  attachX = - (attachW - width) / 2;
  attachY = - (attachH - height) / 2;
}

void draw() {
 if (video.available()) {
    video.read();
    //映像を画面に配置

    image(video, attachX, attachY, attachW, attachH);
 }
}

–

CARE

soohei — Sat, 29 Nov 2008 13:45:45 +0000

・自転車
念願のロード。ANCHORでマット黒にしてもらいました。
前のチャリが何度かパンクした時、
「2週間に1度は空気入れてあげないと、もうボロボロだよ」
と自転車屋さんに行くたびに怒られました。
その心、大事にします。

・VINES
FUJIROCK08で奇跡の来日を果たすも、
金曜だったので見れなかったVINES。
さらに奇跡の単独ライブが決まり、ばっちりチケット買ったのだけれど、
やはりキャンセルに… がんばれ！！

・Mac Book Pro
最近忙しい波が来て、ずっと会社のPCで作業してて、
昨日さぁ Macでも開発やるぞと思ったら、キーボード、トラックパッドが反応しなくなってた。
仕事の谷間的に、今しかないと思い Apple Store 渋谷へ行くと、
ジニアスバーが昼の時点で予約一杯。
Pro Care の資格を買って、一番前に割り込ませてもらい、
「修理1週間です、あ、プロケアの方ですね。12/2にできます。」
という優遇を受け、修理に預けた。修理代も AppleCare で保証内。
お金をかけた分、手厚い。

※追記 : しかも今日(11/30)に修理終わった。

・Mighty Mouse
会社で使っていた Mighty Mouse。
締め切り近くなると、力んで手に汗かくみたいで、
そのたびにホイールが悪影響受けて利かなくなり、忙しさが増す。
掃除しても直らなくなってきたので、乗り換えた。
MSの一番スタンダードなやつが、一番良かった。