背負い投げとENTER_FRAME

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

はてぶで記事を見かけた。

【[iOS 8] Safari8で CSS Shapesが使えるようになった。】
dev.classmethod.jp/references/ios8-safari-css-shapes-support/

以前仕事で、CSSでこう言う表現できないかと何回か聞かれた：
・不規則な形のマスキング
・さらにマスクの中身が動く

無理。無理だ。マスク中身が動かない、マスクが四角や丸なら、方法はいくつかある。

【CSSで様々なクリッピング方法！ 切り抜き】
http://hensachi35.com/clipping-01

「CSS Shapesが使えるようになった」というので、もしかしたらこれで出来るかも？
と思ってやってみた。

続きを読む »

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

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

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

原因：HomeBrewでNodeをインストールしたから、通常のインストーラーではアップ出来ないみたい。 続きを読む »

こういう差分だけのフォルダとファイルを 続きを読む »

何かの拍子でiMessageがログアウトになっていて、
パスワードを入れてもすぐ勝手にログアウトに戻っちゃう。 続きを読む »

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