背負い投げとENTER_FRAME

Icon

なんちゃってWebクリエイターがFlashやらActionScriptやらを淡々と書く。ときとき柔道の話しもする。

SVGで自由変形

ここのマウスオーバーエフェクトがものすごく素敵なので、いつか使ってみたいのでちょっとSVGを勉強しておく。 続きを読む »

SAPページの多言語対応

ワンソースで多言語対応しないと行けないので、
簡単な言語をストックする関数を考えた。 続きを読む »

シンプルなJavascript製スプライトシートエンジン

仕事でボツになったもの。もったいないのでライブラリ化して公開した。 続きを読む »

Javascriptで全角半角混在の文字列をキレイに短縮

昔書いた「PHPで全角半角混在の文字列をキレイに短縮」をJavascriptで書いたのでシェア。

普通にstr.slice(0,20)で全角半角混在の文字列をスライスすると、
行末がガタガタになるから、1文字ずつ全角半角判別して短縮する。

function strLength( strSrc ){
	len = 0;
	strSrc = escape(strSrc);
	for(i = 0; i < strSrc.length; i++, len++){
		if(strSrc.charAt(i) == "%"){
			if(strSrc.charAt(++i) == "u"){
				i += 3;
				len++;
			}
			i++;
		}
	}
	return len;
}

function multByteStringSlice( str , strLimit ){
	
	var isSlice = false;

	while( strLength(str) > strLimit ){
		str = str.slice(0, str.length-1);
		isSlice = true;
	}

	if( isSlice ){
		str += '...';
	}

	return str;
}

Demo: http://gallery.renowan.com/archive/multByteStringSlice/app/index.html

ポイントを振り分けるUIの実装を考える

こういうポイントを振り分けるUIをどう実装するかちょっと悩んだ。

Total Point: 14

パラメータ1: 0 ( + – )
パラメータ2: 0 ( + – )
パラメータ3: 0 ( + – )

keisanというオブジェクトを作って各自に計算処理をさせるのはいいが、
共通のTotal Pointが破綻しないように条件分岐を書くとカオスになってしまう。

(function(){
	
	var AppView = Backbone.View.extend({
		el:$("body"),
		totalPoint:0,
		nowTotalPoint:0,
		events:{
			"click #sta-p": "staBtn",
			"click #sta-m": "staBtn",
			"click #atk-p": "staBtn",
			"click #atk-m": "staBtn",
			"click #def-p": "staBtn",
			"click #def-m": "staBtn"
		},
		initialize: function(){
			// 振り分けるポイント
			this.totalPoint = this.nowTotalPoint = 14;
			// 各パラメータの初期ポイントを引数に渡す
			this.pointObjSTA = new this.keisan('sta',100);
			this.pointObjATK = new this.keisan('atk',170);
			this.pointObjDEF = new this.keisan('def',110);

			$('#total').html(this.totalPoint);
		},
		// クリックしたときの処理、Rednerもここに
		staBtn: function(e){
			var btnName = $(e.target).attr('id');
			
			this.pointObjSTA.change(btnName,this.nowTotalPoint);
			this.pointObjATK.change(btnName,this.nowTotalPoint);
			this.pointObjDEF.change(btnName,this.nowTotalPoint);

			this.nowTotalPoint = this.totalPoint - this.pointObjSTA.getPlusPoint() - this.pointObjATK.getPlusPoint() - this.pointObjDEF.getPlusPoint();

			$('#total').html( this.nowTotalPoint );
		},
		keisan: function( myType , myValue ){
			var type = myType;
			var value = myValue;
			var plus = 0;

			function render(){
				$('#display-'+type).val(plus);
				$('#label-'+type).html(value);
			}

			render();

			return {
				change: function( btnName , nowTotalPoint ){
					if( btnName.indexOf(type) > -1 ){

						// nowTotalPoint: 現在の残ってるポイント
						// totalPoint: もともとのポイント。ポイントのマックスという意味でもある。
						// testTotal: ポイントの試算

						var dir = btnName.indexOf('-p') > -1 ? 1 : -1 ;
						
						var testPlus = plus + dir;
						var testTotal = nowTotalPoint - dir;

						console.log('dir       ',dir);
						console.log('testTotal',testTotal);

						var testFlg = false;

						//条件1
						if( dir == 1 && testTotal > -1 ){
							console.log('条件1');
							testFlg = true;
						}

						// 条件2
						if( dir == -1 && testPlus > -1 ){
							console.log('条件2');
							testFlg = true;
						}


						if( testFlg ){
							plus += dir;
							value += dir;
							render();
						}
					}
				},
				getPlusPoint: function(){
					// console.log(type+':'+plus);
					return plus;
				},
				render: render
			}
		}
	});

	var app = new AppView;
	
})();



サンプルページ

ポイントの変更があったら自動的に計算し直すという仕組みが必要だ。
カオスなので、次はBankboneのModelとEventで書きなおす。
オブザーバーパターンの偉大さがよく分かる。

CSS3のpreserve-3dを遊んでみる

意外と簡単に3Dを作れてしまう新しい機能、preserve-3d。
複雑なモデリングも無理っぽいから、使い道は限られるでしょ。 続きを読む »

TwitterのTimeLineっぽいリストを作ってみる

アレを作ってみたかった。TwitterのTimeLineがクリックすると分裂するアレ。
汎用性は考えないから、ライブラリー化してないし、実装もあんまり美しくない。
IE6、7は全然考えてないからfirst-childとか遠慮無く使っちゃう。

続きを読む »

Arcticを試してみる

Arcticはどういうものかを試してみたかったのでDL。
サンプルのNumberを見たら、案外行けそうなので、
これをベースにオレオレスロットを作ってみた。

続きを読む »

中の人のプロフィール

柔道歴約20年だが諸理由で未だ初段。162cm、60kgくらいの軽量級。得意は背負い投げと巴投げ。2009年、左ヒザ前十字靭帯損傷。ただ今柔道復帰を企んでいる真っ最中。仕事では最近、ActionScriptを書いたり、WordPressをいじったりの日々が続いてる。@renowanにてつぶやいてる。

アーカイブ

Flicker

This movie requires Flash Player 9.0.0