iPhotographer

■Google map
前回はEdge Animate 内でYoutubeの動画を扱う解説をしていますが、今回はまずGoogle mapを同じようにEdgeのエディターで矩形のオブジェクトに貼ってみたいと思います。Google mapもyoutubeと同様に直方体の側面になる一つの面にiframeタグを配置します。やはりyoutubeと同様にStageの "document.compositionReady" に下記のようなコードを書きます。

var map = sym.$("r2");

var gmap = '<iframe width="560" height="315" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps/ms?msa=0&msid=210773704872478538625.0004ccf232bcb33f724fe&brcurrent=3,0x601a331f12678a2b:0xe630416f5df53bdc,0&ie=UTF8&t=m&ll=35.007362,138.496056&spn=0.04429,0.095959&z=13&output=embed"></iframe>'

map.html(gmap);

iframeのタグはGoogle mapの埋め込み用HTMLコードです。サンプルに使われている地図は、清水港のルアー・フライフィッシングのポイントを僕がコツコツ書き込んでいる秘蔵のマイマップです。

■D3.js
走馬灯の次の面にはデータドリブンなドキュメント描画に使われるJavascriptライブラリのD3.jsで極簡単なグラフを描いてみようと思います。

D3.jsを使うためにはライブラリを読み込む必要があるのですが、Edgeでは外部のリソースの利用にリソースローダーの"yepnope.js"が採用されています。まずはyepnopeでD3のライブラリを読み込んでみます。

yepnope({

nope:[

'http://d3js.org/d3.v3.min.js',

],

complete:init

});

このようにライブラリを読み込んだ後一度だけ"complete"で設定した関数が呼ばれます。（なぜ"nope"が選択されるのわからないのですが）

init()で実行される処理ですが、今回はD3.jsでbeatcaster.netのミュージックランキングのグラフを描画したいと思います。ランキングのデータはBeatCasterのランキングをテスト用にJSONで配信しているものです。数値パラメーターが順位と投稿数しか無い単純なグラフなので、順位をY軸にし、投稿の数を円の大きさで表しています。円はSVGのcircleで描画しています。

function init(){

		d3.json("http://beatcaster-dev.dogrun.me/edge-demo",function(json){

			var js = json.music.slice(0,10);		

			var w = 500;

			var h =250;

			var svg = d3.select("#Stage_r4")

				.append("svg")

				.attr("width",w)

				.attr("height",h);



			var circles = svg.selectAll("circle")

						.data(js)

						.enter()

						.append("circle");



			circles.attr("cy",function(d,i){

						return(30+23 * i);

						})

					.attr("cx","50")

					.attr("r", function(d,i){

						var p = d.point;

						return 0.14*p -8;

					})

					.attr("fill",function(d,i){

						if(i == 0){

							return "LightCoral"

						}else if(i == 1){

							return "Salmon"

						}else if( i == 2){

							return "LightSalmon"

						}else if(i >=3 & i < 6){

							return "Khaki"

						} else if(i>=6 & i<8){

							return "PaleGoldenrod"

						} else {

							return "DarkKhaki"

						}

					})

					.attr("stroke","white")

					.attr("stroke-width", "1");

			svg.selectAll("text")

				.data(js)

				.enter()

				.append("text")

				.text(function(d,i){

					var orders = i+1;

					return '['+orders+']'+d.title +'/'+ d.artistname

				})

				.attr("x",function(d,i){

						var p= d.point;

						var x1 = 60 + 0.1*p;

						return x1;

						console.log(x1);

				})

				.attr("y",function(d,i){

						return(30+23 * i);

				})

				.attr("font-family","sans-serif")

				.attr("font-size",function(d,i){

					if(i>=6){

						return "9px";

					}else if(i>=3 & i<6){

						return "11px";

					}else{

						return "14px"

					}

				});

		})

}

今回までのコードをパブリッシュしたのがこちら。
走馬灯はこれで３面埋まりました。次回は最後の面に jquery pluginを利用してスライドショーを表示してみたいと思います。