javascript | ユガラボ

【SVG】raphael.jsを使ったらすんごい色々捗った

ユーリ — Thu, 16 Apr 2015 10:00:53 +0000

こんにちは、ユーリです！
少し前、SVGでアニメーションを行う記事を書きましたが、
その後の開発でブラウザ間の挙動の違いや、古いブラウザでうまく動かなかったりと色々と苦労いたしました。

うおー、やはり一定数の古い環境は切り捨てるしかないのかッ…！対応コードを書けば書くほど煩雑になってゆく！

そこに現れた救世主！！
SVG制御用ライブラリ…　Raphael.js　っ！！　 ↓さんぷる

自前のコードだけでの対応に限界を感じ、ライブラリを使用してめんどくさいところは全部吸収してもらうことにしました。
まさにうってつけのライブラリが見つかりました！
それがraphael.jsでございます。

raphael.jsのココがスゴイ！

■IEやsafqriの古いバージョンでも動作
特に何も意識せずとも、raphael.jsからの処理を使ってSVGを操作すれば、古いブラウザでもしっかり表示され、animateも問題なく動作してくれます！
svg要素を直接うごかしていたら、animateが動作しなかったり、変な位置に表示されたりしてしまい、たいへん苦労いたしました。
■jQueryライクな記述で、直感的に要素や値を操作できる
jQueryのような値の指定やメソッドチェーンが利用できます。
jQueryに慣れている方であればすんなり飲み込めるのではないでしょうか。
■基本的なeventをサポート
マウスオーバーやクリックのような処理も、svgの要素単位で実装ができます。
svg要素はマウス判定の範囲に複雑な形状を利用できるため、リッチな動作を実現できます。

サンプルコード

SVG要素を作成し、図形を描画する

SVG要素の大きさを指定する方法はいろいろありますが、いろいろ試した結果、
divなどのブロック要素で任意の大きさを指定し、その中にsvgをwidth:100%、height:100%で配置するのがいちばん安定しました。
この方法の場合、あとからdiv要素の大きさが変わっても、中身のSVG要素もあわせて伸び縮みしてくれます。
viewboxでサイズ指定するとさらに堅牢です。
PCで閲覧している方は、このページを表示しているウィンドウ自体のサイズを変えてみていただけると伸び縮みに対応していることを確認できるハズです。

上記のコードで、このように表示されます。

クリックやマウスオーバーなど、イベントの処理を書く

SVGを表示できたらぐにぐに動かしたいですよね！
先ほどようにSVGを生成してから、その要素に対してclick、mouseover、mouseoutの処理を定義してみます。
SVG要素が複雑な形をしていても、その形の通りに当たり判定が適応されます。

	var paper = Raphael("svg_wrap","100%","100%");
	paper.setViewBox(0,0,600,200,true);	//viewBoxの大きさを指定
	var path = paper.path("M548,95v8H349C347,130,326,150,300,150c-19,0-36-11-45-28c-8,16-25,28-45,28s-36-11-45-28c-8,16-25,28-45,28c-26,0-47-20-49.8-45H50v-8h20C72,70,93,50,120,50c19,0,36,11,45,28c8-16,25-28,45-28s36,11,45,28c8-16,25-28,45-28c26,0,47,20,49,45H548z"); //パスを追加する
	path.attr({	//パスのプロパティを変更
		fill	: "#AAA" ,
		stroke	: "#666" ,
		"stroke-width" : 3, //線の太さ
	});
	path.click(function(){	//クリック時の処理
		var r = Math.floor(Math.random () * 256);	//赤ランダム
		var g = Math.floor(Math.random () * 256);	//緑ランダム
		var b = Math.floor(Math.random () * 256);	//青ランダム
		var color = "rgb("+r+","+g+","+b+")";		//ランダム色生成
		path.attr({	//パスのプロパティを変更
			fill  : color,	//塗りつぶしの色を変える
		});
	});
	path.mouseover(function(){	//マウスオーバー時の処理
		path.attr({	//パスのプロパティを変更
			"stroke-width"  : 8,	//線の太さを変える
			opacity			: 0.8	//透明度を変える
		});
	});
	path.mouseout(function(){	//マウスアウト時の処理
		path.attr({	//パスのプロパティを変更
			"stroke-width"  : 3,	//線の太さを戻す
			opacity			: 1.0	//透明度を戻す
		});
	});

上記のコードで、このように表示されます。マウスイベントに対応しています！

アニメーションを行う

前回のSVGの記事で苦労してアニメーション処理を書きましたが、raphael.jsにかかれば、非常に簡単にアニメーション処理ができてしまいます；；
記述方法はjQueryのanimateとほぼ同じで、アニメーションさせるプロパティにsvg要素の色や座標を指定すればOKです。

	path.mouseover(function(){	//マウスオーバー時の処理
		path.animate({path:"M548,95v8H349c-54,7-23,2-49,2c-19.8,0-18,2-45,2c-25,2-25-1-45-1s-19,3-45-1c-27,5-25-1-45-1c-26,0-13,5-49-0.6H50v-8h20c31-2,23-1,49-1c19,0,17-11,45-0.8c25-3,25-3,45-3s22-3,45,3c29-4,25-1.2,45-1c26,0,27-0.7,49,3H548z"},250);	//パスの形を変更
	});
	path.mouseout(function(){	//マウスアウト時の処理
		path.animate({path:"M548,95v8H349C347,130,326,150,300,150c-19,0-36-11-45-28c-8,16-25,28-45,28s-36-11-45-28c-8,16-25,28-45,28c-26,0-47-20-49-45H50v-8h20C72,70,93,50,120,50c19,0,36,11,45,28c8-16,25-28,45-28s36,11,45,28c8-16,25-28,45-28c26,0,47,20,49,45H548z"},100);	//パスの形を戻す
	});

マウスオーバーでアニメーションします！

この前の苦労はなんだったのか…。

集合要素に対して処理を行う

要素をたくさん並べて処理をしたい場合、setという配列のようなクラスを使用して、forEachでそれぞれの要素に対してまとめて処理を行うことができます。

	var paper = Raphael("svg_wrap","100%","100%");
	paper.setViewBox(0,0,600,200,true);	//viewBoxの大きさを指定
	var rectarray = paper.set();		//svg要素の集合を格納する"set"を作成
	for( var i = 0, j = 20; i < j ; i++ ){	//20回繰り返す
		rectarray.push(						//setに対してsvg要素を追加する
			paper.rect(i*(j+10),100,20,80)	//paperの中に四角形を作成(x,y,w,h)
		);
	}
	rectarray.forEach(function(e,i){		//setの中身の要素それぞれに対して処理(element,index)
		e.attr({	//プロパティを変更
			fill	: "#8CC" ,	//塗りつぶしの色
		});
		e.mouseover(function(){	//マウスオーバー時の処理
			if( e.attr("y") == 0 ){	//yの値が0の場合
				e.animate({y:100,fill:"#88C"},200,"<>");	//下に移動するアニメーション
			}else{					//yの値が0でない場合
				e.animate({y:0,fill:"#C88"},200,"<>");	//上に移動するアニメーション
			}
		});
	});

マウスオーバーでアニメーションします！

やっぱりSVGはなめらかでたのしい！
これくらい手軽に扱えれば、どんどん夢が広がっていきます！

The post 【SVG】raphael.jsを使ったらすんごい色々捗った first appeared on ユガラボ.

【備忘録】SVGのpathをJavaScriptでぬるぬる動かしたかった

ユーリ — Wed, 18 Mar 2015 08:10:45 +0000

ぬるんぬるん！ぐねんぐねん！

こちらは、最近流行りのSVG！gif画像ではありません。
クリックして色を変えるなどの処理がリアルタイムで行えます。
IEやsafariなど一部のブラウザではうまく動作しないかもしれません。ゴメンナサイ。
これをjavascriptで制御しようとしたところ、いろいろ大変だった話。

※この記事は、SVGが動作する環境の方へ向けて書いています。動かない方はゴメンナサイ。

SVGは、ドットの集まりではなく、パス(点と線)の集まりである為、解像度は無限大です！
また、パスの値は数値で書かれていて、ページが表示されてからでも、パスの値を調節すれば、見た目をぐにぐに変えちゃったりもできます！
ただし、現時点ではブラウザによって対応していない環境があったり、大きさの指定がややこしかったりと、いろいろ課題もございます。

今回は、どうしてもSVGをぬるぬる動かしたい！という案件がございまして、工数はかかりましたが、なんとか要件を満たすことができました。
拙いやり方でしたが、とりあえず備忘録として書いておきます。

今回は、こちらのSVGを例にご説明いたします。

このSVGのソースはこちらになります。

これを別のhtmlページにコピペすると、上に表示されている緑色の円がそっくりそのまま表示されるはずです。
とてもシンプルな構造ですよね！

このソースの中には、図形を表すための図形の頂点の位置、図形の線の太さや塗りつぶしの色、などが書かれています。

ブラウザはこれを読んで描画を行うわけです。
例えば、この例の場合、円の形(点と線の集まり)を表しているのはこの部分です。↓
d=”M124,89c0,27-22,49-49,49s-49-22-49-49S47,40,75,40.6S124,62,124,89z”
そして、この中に書かれている点の位置を書きかえてしまえば、その場で表示を変えることができる、という寸法です。

ここまで前置き。詳しい説明に移ります。

SVG要素を動的に変更したい場合は、animateタグを使用する、もしくはJavaScriptで直接値を打ち込む、などの方法がございます。
まずは、animateタグについて。
animateタグの中身には、変更したい要素名と、値、動作スピード、動作条件などを記載します。

上記の例では、
[attributeName]…「fill」という要素、この場合fillなので塗りつぶしの色を、
[values]…「#88BB33;#CC6699」すなわち#88BB33から#CC6699に、
[dur]…「2.0s」2秒間かけて変化させる。という命令が書いてあります。
また、繰り返し回数[repeatCount]…「indefinite」で、アニメーションを無限に繰り返すという指定をしました。

このタグをどこに書くかというと、アニメーションさせたいSVG要素の内側に書きます。
こんな感じ。

これを実際に実行したものがこちら。

色が緑から赤にだんだんと変わっています。
延々と変わっています。

これくらいなら簡単な変化でありますが、このanimateタグは、pathの形状の変化にも使えてしまうのです。

そのためには、pathについて「動作前の状態」と「動作後の状態」を用意する必要があるわけです。
ということでAdobe Illustratorにてパス形状を編集する画面を例にいたします。
(SVGを書き出せるソフトウェアでしたら、他のものでも構いません。)
こちらが、動作前の状態とします。

次が、動作後の状態とします。

それぞれ、別名で保存からsvgとして保存します。

そして、保存したSVGファイルをテキストエディタで開きます。
図形の形状を表すpathの中の“d”の値がそれぞれ違うことが確認できます。

動作前の”d”:
M124,89c0,27-22,49-49,49s-49-22-49-49S47,40,75,40.6S124,62,124,89z
動作後の”d”:
M154,89c0,27-52,49-79,49s-49-22-49-49S47,40,75,40.6S154,62,154,89z
この”d”の中身の値を抽出して、animateタグに打ち込めば良いわけです！
animateタグの[attributeName]の中身を、図形の形状を表す“d”に変更し、
実際に変化する値である、[values]の中身に動作前、動作後のパス形状を”;”セミコロンで区切って入力。
こんなタグになりました。

動作させてみます。
ぬるっと動きました！

しかし、このままでは延々とアニメーションしてしまいます。
そこで、アニメーションの動作を制御するbegin要素を追加します。
begin=”indefinite”とすることで、animateの動作タイミングをJavaScriptで制御できます。
さらに繰り返し回数[repeatCount]…「1」と設定することで、動作回数を1度だけとします。
そしてこのanimateタグにidを付与します。
また、この後の動作のためにpathのタグにもidを付与しておきます。

そして、JavaScriptからidをもとにanimateタグをゲットし、
beginElement();を呼ぶことで、アニメーションを動作させることができます！

		//アニメを動作させる
		var animate = document.getElementById('circle_animate');
		animate.beginElement();

ボタンクリックで、beginElement();を呼ぶようにしてみました。

クリック！

クリックでアニメを動かすことに成功！ひとつ前に進んだ！

ただし、このままではアニメーションしても元に戻ってしまいます。
何故かというと、表示されているSVGの形状は、pathの場合”d”の中身で決まっていて、
アニメーションした後はその値による表示に戻ってしまうためです。
そこで今度は、アニメーションしたあとにpath要素自体の”d”の値をJavaScriptで書き換えてしまうようにします。

		//アニメを動作させる
		var animate = document.getElementById('circle_animate');
		animate.beginElement();
		//pathそのものの形状を変化させる
		var path = document.getElementById('circle_path');
		path.setAttribute('d','M154,89c0,27-52,49-79,49s-49-22-49-49S47,40,75,40.6S154,62,154,89z');

むくり！

アニメ後も、要素の形状がそのままになりました！

ここで、疑問が生まれます。動作前と後で、どんなパスを入れてもちゃんとアニメーションしてくれるのか？という問題です。
ためしに、単純なパスと複雑なパスをanimateタグで繋げてみます。

あれ。ぬるぬるしない。
調査の結果、どうやら動作前と後で、「パスを表す構成」が同じでなければうまく動いてくれないようです。
具体的には、点の数が変わったり、座標の指定方法が変わったりすると、ダメみたいです。
たとえば頂点が4つしか無い四角形から、頂点が5つある五角形に変形、ということはできないようです。
ただし、「頂点が5つだけど最初だけ四角形に見えるパス」などを用意すれば、その限りではありません。

さて、脱線しましたが、animateタグは「動作前」と「動作後」だけでなく、一つのタグでいくつも動作をつなげることができます。
変化させたいパスを“;”セミコロンでどんどん繋げていけば、こんな動きもできちゃうわけです！

↑クリックすると色が変わります(笑)

さらに、複雑な動作をさせたい方には、keyTime、keySplinesという、アニメーションのスピードを細かく設定できる要素もあります！
今回は少々手間のかかる方法でしたが、もっと簡単に動かせる仕組みが一般化していくとよいですね！

The post 【備忘録】SVGのpathをJavaScriptでぬるぬる動かしたかった first appeared on ユガラボ.

切符の下に4つの数字が書いてあるじゃろ？

ユーリ — Fri, 20 Feb 2015 04:00:06 +0000

こんにちは！ユーリです。たまには、数学に関するお話。

「4つの数字を組み合わせて、10を作る」という遊びがあります。
Suicaが無いころの世代だと、電車の切符に書いてあったり、今でも見る事ができるものだと、車のナンバープレートだったり。
とにかく4つの数字を並び替えてもいいので足したり引いたり掛けたり割ったりして、なんとかして「10」を作る！という遊びです。

最近、わたしはとある課題で、この「10をつくる」のなかでも特に難しいという問題に出会いました。

「1 1 8 5」

この4つの数字を組み合わせて、なんとか10を作れ！とのことです。
切符のイメージにすると、こんな具合です。

さあ、どうでしょう。ちょっと考えてみて下さい。
足す、引く、掛ける、割る、並び替え、全て可能です！

… 1185　。

どうでしょう。わりと難しいと思います！
実際、わたしは10分くらい悩んだのですが、わかりませんでした。

さて、本題です！

わたくし得意の(?)プログラムで、4つの数字をこねくり回して10を作る、という計算機を作成いたしました！
さっそく答えを入れて、出た結果は…！

「8/(1-1/5) = 10」

んっ…？(硬直)

計算の手順を確認してみると…

1.まず 1 を 5 で割って「0.2」をつくる。
2.もう一つの 1 から 0.2 を引いて「0.8」をつくる。
3.最後に8を「0.8」で「割る」…ッ！この計算をかけ算に直すと「 8 × 1.25 」ということになる。
4.10。完成。

わかるかっ！暗算でたどり着いたら天才すぎるだろ！
しかしなるほど！たしかに間違いなく10ができているのだった。

この問題、どうやら解法がひとつしかないようです。
解法が一つしかない組み合わせということは、特別むずかしい問題ということになります。
他にも解法が一つの組み合わせってあるんでしょうかね…。

でも、やっと答えがわかった…！スッキリ爽快！
これから先、どんな切符がわたしの前に現れようと、怖くありません！
とはいえ、今時切符を買うタイミングなんてほぼ無いんですが…。
ちがうよ！ズルじゃないよ！
アタマを使っただけさ！

この問題以外にも、いろいろお試しいただけますよ！

使う数字	, , ,
作りたい数字

計算結果 :

？？？

The post 切符の下に4つの数字が書いてあるじゃろ？ first appeared on ユガラボ.

【jQuery】コピペOK！タッチ操作とマウス操作の動作定義をまとめる

ユーリ — Fri, 28 Nov 2014 11:00:08 +0000

さいきん、スマホでもPCでも同じような動作を求められるWebAPIが増えていますよね。
動作はjQueryで書くことになるのですが、もともと用意されているイベント(click,mousemoveなど)ではタッチ操作を拾いきれないことがあります。
そこで、二つの環境の動作を同じ関数にまとめる定義を作りました。

まず、こちらがサンプルボタンです！PCでもスマホでも共通のコードで動作するところがポイントです！

demo

基本のクリック動作、押下、移動、キャンセルの４種を定義できます。

サンプルコードです！
動作定義部分と、jQuery拡張部分の二つに分けてご紹介します。

まずは、動作定義部分です。
上に置いてあるボタンは、こちらのコードで動作しています。

$(function(){
	$('#hoge').touchInterface(
	function(e,$_this){ //タッチorクリックの動作
		$_this.empty().append('action:up/end');
		$_this.css('background-color','#FFF');
	},
	function(e,$_this){ //(オプション)押下
		$_this.empty().append('action:down/start');
		$_this.css('background-color','#AAF');
	},
	function(e,$_this){ //(オプション)移動
		$_this.empty().append('action:move');
		$_this.css('background-color','#AFA');
	},
	function(e,$_this){ //(オプション)範囲外
		$_this.empty().append('action:out/cancel');
		$_this.css('background-color','#FFA');
	}
	);
});

はい、わりとシンプルな作りですね！
jQueryエレメントの挙動を拡張して”touchInterface”というアクションを命令し、
その引数として関数を４つ渡しています。
まとめるとこんな感じです。

$(element).touchInterface(up,[down],[move],[out]);
引数はすべてfunction(関数)です。
また、2〜4つ目の引数は省略できます。

関数内では、 $(this) という表記が使えない為、代わりに $_this を使用して下さい。
また、タッチ位置などを使いたい場合は、e の中から引っ張って下さい。

続いて、肝心のjQuery拡張部分です。
jQueryの機能を拡張して、「touchInterface」というアクションを定義しています。

$.fn.extend({
	touchInterface : function(up){
		var down	= (arguments.length > 1 ) ? arguments[1] : false;
		var move	= (arguments.length > 2 ) ? arguments[2] : false;
		var cancel	= (arguments.length > 3 ) ? arguments[3] : false;
		return $(this).on({
			'touchstart mousedown'	: function(e){
				e.preventDefault();
				this.touching = true;
				if(down)down(e,$(this));
			},
			'touchmove mousemove'	: function(e) {
			 	if(!this.touching)return;
				e.preventDefault();
				if(move)move(e,$(this));
				if('ontouchstart' in window){
					var touch = e.originalEvent.changedTouches[0];
					var offset = $(this).offset();
					if(	touch.pageX < offset.left || touch.pageX > $(this).outerWidth()  + offset.left ||
						touch.pageY < offset.top  || touch.pageY > $(this).outerHeight() + offset.top  ){
						this.touching = false;
						if(cancel)cancel(e,$(this));
					}
				}
			},
			'touchcancel mouseout'	: function(e){
				if(!this.touching)return;
				e.preventDefault();
				if(cancel)cancel(e,$(this));
				this.touching = false;
			},
			'touchend mouseup'		: function(e){
				if(!this.touching)return;
				e.preventDefault();
				up(e,$(this));
				this.touching = false;
			}
		}).css('cursor','pointer');
	}
});

上記のjQuery拡張部分のコードは、JavaScriptソース内のjQuery動作定義部分の外側に記述してください。
もちろんjQuery本体も忘れずに読み込んでくださいね！

拡張部分のポイントは、タッチ系のイベントとマウス系のイベント両方に対して同じイベントをバインドしているところです。
また、オブジェクトに対してタッチした後、タッチ移動した際にタッチ位置がオブジェクトの外に出た場合、 PCではmouseoutが呼ばれるのに対し、スマートフォンでは対応するイベントがありません。
そこで、挙動を統一する為に、タッチ操作のときのmoveイベント内で、オブジェクトの外に出ていないか判定する処理を設けています。

さらに詳しくは、デモページを用意いたしましたので、併せてご覧ください。
デモページのソースにはコメントも併記しています。

>> demo page
今回のコードを書くにあたり、こちらの記事を参考にさせていただきました！
Developer’s Blog | iPhone/Android/PC 対応。jQuery で書くタッチイベント
以上です！拙い部分もあるやもしれませんが、ご容赦ください。

The post 【jQuery】コピペOK！タッチ操作とマウス操作の動作定義をまとめる first appeared on ユガラボ.

【備忘録】文法を間違えていないのに、jsonファイルがうまく取得できない

ユーリ — Fri, 31 Oct 2014 03:47:32 +0000

こんにちは、ユーリです。

先日、お仕事でjsonファイルを取得してデータを表示する機構を作っていたときのこと。
テキストエディタで文法も間違いなく、jsonファイルを作成しました。

しかし、javascriptからアクセスしようとしても、うまく読めない。

結論から言いますと、jsonファイルに「BOM」が含まれていたからでした。

※BOM(Byte Order Mark)
ファイルの先頭にこっそり挿入されている識別子で、
そのファイルの形式を表すデータです。

これが、データを読み出す際に不純物として処理され、エラーが発生したようです。
ほかにも、改行コードが悪さをすることもあるようです。

テキストエディタでjsonファイルを再度開き、「BOMなし」の保存をして再アップロードしたところ、
無事、jsonファイルを読み出すことができました！

めでたしめでたし。

The post 【備忘録】文法を間違えていないのに、jsonファイルがうまく取得できない first appeared on ユガラボ.