背負い投げとENTER_FRAME

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

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

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

昔書いた「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をどう実装するかちょっと悩んだ。

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で書きなおす。
オブザーバーパターンの偉大さがよく分かる。

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

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

続きを読む »

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

続きを読む »