「Moves地図メーカー」は、Movesのデータを、ブログに埋め込むコードを生成します。web知識のない人でも、コピペするだけで簡単に利用できちゃいます。「旅行ログ」や「運動ログ」などの記事にぜひ、ご利用下さい。

実際に地図に埋め込んで公開すると、次のような地図が出来上がります。公開したくない部分を削ったり、色やテキストを変えて、カスタマイズすることが可能です。また、デザインはスタイルシートの記述不要でレスポンシブ対応になっています。

デモを見る (富士サファリパーク)

デモを見る (東京湾納涼船の航行)

1ユーザー認証

ご利用には「アクセストークン(パスワード)」が必要です。まだ取得してない人は、下記ボタンから「ユーザー認証」をして下さい。

ユーザー認証をする

1-1ユーザー認証の方法

1. 「ユーザー認証」のボタンをクリックする。
2. 画面に8桁の「PINコード」が表示されます。(サンプル画像)
3. 「PINコード」を、Movesアプリに入力して下さい。(PINコードを入力する方法)
4. 先ほど「PINコード」が表示されていた画面が切り替わり、「アクセストークン」が表示されます。(サンプル画像)
5. その「アクセストークン」を[2.地図を作成する]でご利用下さい。
6. 利用しなくなった場合はアクセストークンを無効にして下さい。以降はこのサービスがあなたのMovesのデータを読み取ることができなくなります。(アプリ連携を解除する方法)

2地図を作成する

「アクセストークン」を持っている人は、下記のフォームに入力して「地図を作成する」をクリックして下さい。MovesのStoryLine(ストーリーライン)が、[3.地図をカスタマイズする]のGoogle Mapsに反映されます。

2-1アクセストークン

※「ユーザー認証」で取得した「アクセストークン」を入力して下さい。

[記録する / 削除する]

2-2出力する地図の「日付(開始日)」を入力

※[2014/03/05]、[20140305]などの形式で入力して下さい。

2-3翌日分も取得するか

※日を跨いだデータを埋め込みたい場合は「取得する」を選択して翌日分も取得して下さい。

取得しない
取得する

地図を作成する

3地図をカスタマイズする

ここでは不要なマーカーやアクティビティ(ライン)を削除してカスタマイズすることができます。デフォルトではサンプルを表示しています。和歌山県旅行に行った時に歩いた「大門坂」から「那智の滝」までのコースです。

不要なマーカー、アクティビティを地図上から削除することができます。例えば「ランニング記録だけ公開したい」「自宅周辺などブログでは公開できないプライバシー情報を消したい」などといった場合にご利用下さい。

マーカー

• ※サンプルはカスタマイズできません。

アクティビティ(ライン)

• ※サンプルはカスタマイズできません。

moves.map.maker.jsの設置URL

※[4-1.Javascript]でダウンロードしたJavascriptライブラリの設置URLを入力して下さい。

[記録する / 削除する]

埋め込み用コード

※ここに埋め込まれたHTMLコードを、記事内の地図を設置したい場所にコピペすれば、Movesの地図を表示することができます。

まずは[2.地図を作成する]で地図を作成して下さい。

4使い方

Moves地図メーカーを自分のブログで使う手順は、とっても簡単な2ステップです。説明していきます。

4-1Javascript

まず、下記のJavascriptをmoves.map.maker.jsと名前を付けて保存し、サーバーにアップロードして下さい。[通常版/Minify版]

10〜23行目をお好みに合わせてカスタマイズすることができます。デフォルトではMoves標準の色や名前を設定してあります。ブログの雰囲気に合わせて調整して下さいね。なお、jQueryを別途読み込んでおいて下さい。

// Moves地図メーカー ver 1.0
// 作：あらゆ
// http://syncer.jp/moves-map-maker
function moves_map_maker_syncer(json,places){
	var moves_map_data = new Array();
	moves_map_data['setting'] = new Array();
	moves_map_data['color'] = new Array();
	moves_map_data['label'] = new Array();

	//オプション
	moves_map_data['setting']['height'] = 75;		//地図キャンパスのサイズ比率(横幅に対する高さの割合、75なら幅400pxに対して300pxになる)
	moves_map_data['setting']['weight'] = 5;		//線の太さ
	moves_map_data['setting']['opacity'] = 0.85;	//線の透明度(0〜1の間)
	moves_map_data['setting']['foursquare'] = 1;	//[1=マーカーにfoursquareのリンクを付ける、0=付けない]
	moves_map_data['setting']['label'] = '3b3b3b';	//吹き出しのタイトルの色
	moves_map_data['color']['wlk'] = '00d55a';		//[歩き]の色
	moves_map_data['color']['run'] = 'f660f4';		//[走り]の色
	moves_map_data['color']['cyc'] = '00cdec';		//[サイクリング]の色
	moves_map_data['color']['trp'] = '848484';		//[交通機関]の色
	moves_map_data['label']['wlk'] = 'ウォーキング';	//[歩き]のラベル
	moves_map_data['label']['run'] = 'ランニング';		//[走り]のラベル
	moves_map_data['label']['cyc'] = 'サイクリング';	//[サイクリング]のラベル
	moves_map_data['label']['trp'] = '交通機関';		//[交通機関]のラベル

	$('.moves_map_maker_syncer_wrapper').each(function(){
		$(this).css({'width':'100%','max-width':'100%'});
		$(this).children('img').css({'max-width':'none'});
		$('#moves_map_maker_syncer_canvas').empty().css({'width':$(this).width(),'height':(($(this).width()/100)*moves_map_data['setting']['height'])});
	});
	var moves_map;
	var latestInfoWindow = null;
	var mapOptions = {zoom:5,center:google.maps.LatLng(38.856975, 140.123553),mapTypeId:google.maps.MapTypeId.ROADMAP};
	moves_map = new google.maps.Map(document.getElementById('moves_map_maker_syncer_canvas'),mapOptions);
	var markerBounds = new google.maps.LatLngBounds();
	moves_map_data['lines'] = new Array();
	moves_map_data['event'] = new Array();
	moves_map_data['makers'] = new Array();
	moves_map_data['mevent'] = new Array();

	var place = JSON.parse(places);
	for(var i in place){
		var TrackPoints = new google.maps.LatLng(place[i].latlng[0],place[i].latlng[1]);
 		moves_map_data['makers'][i] = new google.maps.Marker({position:TrackPoints,map:moves_map});
		var content1 = (place[i].fid!=''&&moves_map_data['setting']['foursquare']==1) ? '<a href="https://ja.foursquare.com/v/'+place[i].fid+'" target="_blank"><b>'+place[i].name+'</b></a>' : '<b>'+place[i].name+'</b>';
		var content2 = '<br/><span style="font-size:90%;color:#'+moves_map_data['setting']['label']+';">('+place[i].starttime+'〜'+place[i].endtime+')</span>';
		moves_map_data['mevent'][i] = content1+content2;
		markerBounds.extend(TrackPoints);
		moves_map_maker_event_setting(i,0);
	}
	var data = JSON.parse(json);
	for(var i in data){
		var TrackPoints = google.maps.geometry.encoding.decodePath(data[i].encode);
		moves_map_data['lines'][i] = new google.maps.Polyline({path:TrackPoints,strokeColor:'#'+moves_map_data['color'][data[i].color],strokeOpacity:moves_map_data['setting']['opacity'],strokeWeight:moves_map_data['setting']['weight'],map:moves_map});
		moves_map_data['lines'][i].setMap(moves_map);
		var content1 = (data[i].name!='') ? '<b>'+moves_map_data['label'][data[i].name]+'</b>' : '';
		var content2 = '<br/><span style="font-size:90%;">('+data[i].starttime+'〜'+data[i].endtime+')</span>';
		var content3 = (data[i].duration>0) ? '<br/>時間:'+moves_map_maker_duration(data[i].duration) : '';
		var content4 = (data[i].distance>0) ? '<br/>距離:'+moves_map_maker_distance(data[i].distance)+'m' : '';
		var content5 = (data[i].steps>0) ? '<br/>歩数:'+moves_map_maker_number_format(data[i].steps)+'歩' : '';
		var content6 = (data[i].calories>0) ? '<br/>消費カロリー:'+moves_map_maker_number_format(data[i].calories)+'kcal' : '';
		moves_map_data['event'][i] = content1+content2+content3+content4+content5+content6;
		for(var ii in TrackPoints){markerBounds.extend(TrackPoints[ii]);}
		moves_map_maker_event_setting(i,1);
	}
	moves_map.fitBounds(markerBounds);
	function moves_map_maker_distance(data){
		if(data>999){data = Math.floor(((data*10) / 1000)/10);data+='k';}
		return data;
	}
	function moves_map_maker_duration(data){
		var hourText = '';var minuteText = '';var secondText = '';
		if(data>3599){var hour = Math.floor(data/3600);data = (data%3600);hourText = hour+'時間';}
		if(data>59){var minute = Math.floor(data/60);data = (data%60);minuteText = minute+'分';}
		if(data>0){var second = Math.floor(data/1);data = (data%1);secondText = second+'秒';}
		return hourText+minuteText+secondText;
	}
	function moves_map_maker_number_format(data){
		return (1000>data) ? data : data.toString().replace(/^\d+[^\.]/, function(t){return t.replace(/([\d]+?)(?=(?:\d{3})+$)/g,function(t){return t + ',';});});
	}
	function moves_map_maker_event_setting(num,type){
		if(type==0){
			google.maps.event.addListener(moves_map_data['makers'][num],'click',function(){
				if(latestInfoWindow) latestInfoWindow.close();
				var thisInfoWindow = new google.maps.InfoWindow({content: '<div><p style="font-size:15px;line-height:1.618;margin:0;padding:0;font-family:"Verdana",sans-serif;">'+moves_map_data['mevent'][num]+'</p></div>'});
				thisInfoWindow.open(moves_map_data['makers'][num].getMap(),moves_map_data['makers'][num]);
				latestInfoWindow = thisInfoWindow;
			});
		}else{
			google.maps.event.addListener(moves_map_data['lines'][num],'click',function(point){
				if(latestInfoWindow) latestInfoWindow.close();
				var thisInfoWindow = new google.maps.InfoWindow({content: '<div><p style="font-size:15px;line-height:1.618;margin:0;padding:0;font-family:"Verdana",sans-serif;">'+moves_map_data['event'][num]+'</p></div>',position:point.latLng});
				thisInfoWindow.open(moves_map);
				latestInfoWindow = thisInfoWindow;
			});
		}
	}
}

4-2HTML

あとは、[3.地図をカスタマイズする]の項目で生成した「埋め込み用コード」を、ブログ記事の地図を表示させたい場所にコピー&ペーストで挿入するだけで大丈夫です。1ページにつき、1つの地図を埋め込むことができます。

5Movesとブログの融合を始めよう！

ここまで読んでいただき、ありがとうございました。「Movesを個人的利用以外に活かす方法がないか？」をテーマに、このwebサービスを作ってみました。Movesが自動で作ってくれる地図データは旅行や運動、ドライブなど実に様々な内容の記事に活かせるはずです。あなたのブログ、またはwebサイトに、微風でもいいので新しい風が吹けば幸いです。

「自分で表示させる」ではなく、「万人が表示できるシステムを作る」というのは想像してた以上に大変ですね…。最初はラインを引くだけの地図だったんですが、「マーカーとかあった方がいい」と言ってくれたAlternativeColor.jpのてぃくと(@tikt1992)さんに感謝！おかげで手抜かず現状、満足いくものが作れました。

もし追加機能の要望や、不具合の発見などございましたら、気軽にコメント欄、または私のTwitter(@arayutw)宛てにお申し付け下さいませ!!