Home About Tutorial Examples My page Create New

web search

最寄のAED検索・ルート検索（アプリ＆作り方）

URL : http://app.linkdata.org/run/app1s808i

Tetsuro_Toyoda

Send a Message

Join as a Collaborator

License :

緯度経度の情報があるデータであれば、このプログラムを適用して「最寄検索・ルート検索」を実装できます。新潟県十日町市のAED情報を例に、アプリの実装例、仕様、プログラム、作り方を紹介しています。

Update: Dec 27, 2014

value

Post to this page

Get Embed Code

App detail

下記のアプリは、新潟県十日町市が公開する「AED設置施設、医療施設」を、現在地から近い順にソートして表示するアプリです。

近くのAED設置施設、医療施設＠十日町市

Tetsuro_Toyoda

632 runs , 0 forked , Update:Dec 26, 2014

value

3 0

Update: Dec 24, 2014 (Tetsuro_Toyoda)

Web page detail

このアプリは、LinkDataで公開されている新潟県十日町市の「AED設置施設、医療施設」に関連付けられて開発されています。このため、下記のデータ閲覧ページの右上端にある「メニューボタン」を押して「アプリカタログ」を開くと、このアプリを選択・起動することができます。

【データ＆アプリ】 AED設置施設、医療施設 | LinkData http://linkdata.org/view/rdf1s2334i

AED設置施設、医療施設十日町市内のAED設置施設(AED_facilities）と医療施設(medical_facilities)です。

Update: Dec 24, 2014 (Tetsuro_Toyoda)

Image detail

Update: Dec 25, 2014 (Tetsuro_Toyoda)

Text detail

アプリの動作に関する仕様は次のようになっています。 ①現在地情報が使っている端末から取得できる場合・「http://linkdata.org/resource/rdf1s2334i」でデータにアクセスすると、アプリカタログの中にこのアプリが表示され、これを開くと現在地点から近い順でポイントがリスト表示されます。・「http://linkdata.org/resource/rdf1s2334i#倉俣小学校」のようにURIでポイントを指定してアクセスすると、アプリにもこのURIが通知されて開くため、そのポイントへのルート検索がすぐに起動します。 ②現在地情報が使っている端末から取得できない場合・「http://linkdata.org/resource/rdf1s2334i」でデータにアクセスすると、アプリカタログの中にこのアプリが表示され、これを開くと全てのポイントが登録順でリスト表示されます。・「http://linkdata.org/resource/rdf1s2334i#倉俣小学校」のようにURIでポイントを指定してアクセスすると、アプリにもこのURIが通知されて開くため、そのポイントの情報がトップに表示され、その下に全ポイントが登録順でリスト表示されます。

Update: Dec 24, 2014 (Tetsuro_Toyoda)

Code detail

このアプリのJavaScriptコードです。このコードは緯度経度のあるデータであれば、どのようなデータに対しても適用することができ、同様のアプリを開発できます。創り方は簡単です： LinkDataに登録されているデータに対して、「アプリ」タブを開き、「アプリを作成」ボタンをおして、「次へ」を３回押して起動するプログラムエディタの中身を下記プログラムに置き換えれば完成です。緯度経度情報がある他のデータにこのプログラムを適用してみてはいかがでしょうか？（※注意、既にこのアプリが適用されているデータに対しては、重複してこのプログラムを適用しないでください。）

Click to Select

// Created by Tetsuro Toyoda. Ver.2014.12.26.0

window.onload = function() {
	var keyword = getParameterFromURL("subject"); // obtain keyword from the URL "?subject="
	var list = ""; // list to be displayed
	var ruteToHitPoint = "";
	var prefs = new Array();
	// Work loop
	$.each(LinkData.getWorks(), function(workKey, workValue) {
		list += "<h3>" + LinkData.getWorkName(workValue) + "の最寄検索・ルート検索アプリ</h3>";
		// File loop
		$.each(LinkData.getFiles(workValue), function(fileKey, fileValue) {
			var hit = ""; // list of subjects whose URI matches keyword
			var nHit = 0; // number of subjects whose URI matches keyword
			// Subject loop
			$.each(LinkData.getSubjects(workValue, fileValue), function(subjKey, subjValue) {
				var longitude = null;
				var latitude = null;
				var s = ""; // subject to be displayed
				if ( decodeURIComponent(subjValue).indexOf("linkdata.org/resource/") > 0 )
					s += "<hr><a href=\"" + subjValue + "\" target=\"_top\"><span class=\"subject\">【アプリカタログを表示】</span></a>";
				else
					s += "<hr><a href=\"" + subjValue + "\" target=\"_top\"><span class=\"subject\">"+decodeURIComponent(subjValue)+"</span></a>";
				$.each( LinkData.getTriplesBySubject(workValue, fileValue, subjValue), function( tripleKey, tripleValue ) {
					var prop = tripleValue.property;
					var obj = tripleValue.object;
					if ( prop == "http://www.w3.org/2003/01/geo/wgs84_pos#long" ) longitude = obj;// longitude found
					if ( prop == "http://www.w3.org/2003/01/geo/wgs84_pos#lat" ) latitude = obj;// latitude found
					if ( obj.indexOf("://www.youtube.com") != -1 && obj.indexOf("v=") != -1 ) { // Insert YouTube Thumbnail
						videoId = (obj.split("v=")[1]).split("&")[0]; // get video id
						obj = "<a href=\"" + obj + "\" target=\"_blank\"><span class=\"object\">" + highlight(decodeURIComponent(obj), keyword) + "<br><img src=\"http://img.youtube.com/vi/" + videoId + "/mqdefault.jpg\" alt=\"YouTube video\" /><br></span></a>";
						}
						else if ( obj.indexOf("http") == 0 ) {
							if ((obj.indexOf(".jpg" )>0 || obj.indexOf(".gif" )>0 || obj.indexOf(".png" )>0) || (obj.indexOf(".JPG" )>0 || obj.indexOf(".GIF" )>0 || obj.indexOf(".PNG" )>0)) // insert image
								 obj = "<a href=\"" + obj + "\" target=\"_blank\"><span class=\"object\">" +shortenURL(obj) + "<br><img src=\"" + obj + "\" alt=\"image\" /><br></span></a>";
							else
								obj = "<a href=\"" + obj + "\" target=\"_blank\"><span class=\"object\">" + shortenURL(obj) + "</span></a>"; // Make it clicable if it starts from http
					}
					else
						obj = "<span class=\"object\">" + highlight(obj, keyword) + "</span>";
					s += "<br><span class=\"propertyName\">" + getLastName(prop) + ":\t</span>" +  obj;
				});
				if ( latitude != null && longitude != null ) s += addLinkToMap( latitude, longitude );
//				list += s; //add to the list to be displayed
				prefs.push([s,latitude,longitude]);
				if ( decodeURIComponent(subjValue) == keyword ) { // found subject whose URI matches keyword
					hit += s;
					ruteToHitPoint = "http://www.google.com/maps/?daddr=" + latitude + "," + longitude;
					nHit++;
				}
				//link to map display if coordinates exist
			});
			if ( nHit > 0 ) {
				list += "<hr><h4>指定されたサブジェクトが "+nHit+" 件見つかりました。</h4>";
				list += hit + "<br><br>";
			}
		});
	});
	$("#result").append( list + "この端末からの位置情報の取得を許可してからもう一度アクセスしてください。" );

  	navigator.geolocation.getCurrentPosition(function(pos) {
    	var lat = pos.coords.latitude;
    	var long = pos.coords.longitude;
		if ( ruteToHitPoint != "" )
		{
			$('#result').empty();
			$('#result').append( list + "<hr><h4>現在地から目的地までのルートを表示します。</h4>");
			parent.location.href = ruteToHitPoint + "&saddr=" + lat + "," + long; // リダイレクト
		}
		else
		{
			$('#result').empty();
			$('#result').append( list + "<hr><h4>現在地から近い順にリスト表示します。</h4>");
    		$.each(prefs, function(i, p) {
      			p[3] = Distance(long, lat, p[2], p[1]);
    		});
    		prefs.sort(function(p1, p2) {
      			return p1[3] - p2[3];
    		});
	   		$.each(prefs, function(i, p) {
      			$('#result').append(p[0]);
     			$('#result').append(" <a target=\"_top\" href=\"http://www.google.com/maps/?saddr=" + lat + "," + long + "&daddr=" + p[1] + "," + p[2] + "\">【ここから目的地へのルートを表示】</a>");
      			$('#result').append("<br>ここから目的地までの直線距離は"+Math.floor(p[3])+"mです<br>");
			});
		}
	}, function(error) {
		$('#result').empty();
		$('#result').append( list + "<hr><h4>現在地情報が取得できないため、登録順にリスト表示します。</h4>");
	   	$.each(prefs, function(i, p) {
      		$('#result').append(p[0]);
		});
	});
};

// Get a parameter value in URL (e.g. ?paramString=value )
function getParameterFromURL( paramString )
{			
	var value = "";
	var topWindow = top.window.location.search;
	if( topWindow ){
		var q = decodeURIComponent(topWindow.substring(1,topWindow.length)).split("&");
		for ( var i = 0; i < q.length; i++ ){
			var r = q[i].split("=");
			if ( r[0] ==  paramString )
				value = r[1];
		}
	}
 	return value;
}

// Highlight keyword in the string
function highlight( string, keyword )
{
	if ( keyword.length > 0 ) {
		var ss = string.split(keyword);
		var len = ss.length;
		if ( len > 1 ) {
			string = ss[0];
			for ( i = 1; i < len; i++ )
//				string += "<font color=\"red\">"+keyword+"</font>"+ss[i];
				string += "<span class=\"highlight\">"+keyword+"</span>"+ss[i];
		}
	}
	return string;
}

// get the last name of the string separated with # and /
function getLastName( string )
{
	string = decodeURIComponent(string);
	var sharp = string.split("#");
	var slash = sharp[sharp.length-1].split("/");
	var lastName = slash[slash.length-1];
	return lastName;
}

// return a link to Google map search
function addLinkToMap( latitude, longitude )
{
	var s = "<br><a target=\"_top\" href=\"http://www.google.com/maps/?q=" + latitude + "," + longitude + "\">【地図表示】</a>";
	return s;
}

// shortening URL e.g. http://.../123.jpg
function shortenURL( url )
{
	url = decodeURIComponent(url);
	var slash = url.split("/");
	var lastName = slash[slash.length-1];
	return url.split(":")[0]+"://.../"+lastName;
}

function Distance( long1, lat1, long2, lat2 )
{
	var r = 6378137; //地球の半径(m)
	var d = r * Math.acos( Math.sin(lat1/180*Math.PI)*Math.sin(lat2/180*Math.PI) + Math.cos(lat1/180*Math.PI)*Math.cos(lat2/180*Math.PI)*Math.cos((long2-long1)/180*Math.PI) );
	return d;
}

Update: Dec 27, 2014 (Tetsuro_Toyoda)

Text detail

データ作成上の注意点としては、入力データのエクセルの１列目（サブジェクト列）は全体でユニークな文字列にしてください。RDFではサブジェクトが同じデータはそれに紐づくデータ（トリプルと呼ぶ）がマージされてしまいます。同じデータ作品の中に複数のファイルがある場合でも同様です。逆に同じサブジェクトについて複数のファイルのデータをマージしたい場合は、この仕組みを積極的に活用してください。

height	px	language	English 日本語 [Japanese]	View	Detail Summery
size

最寄のAED検索・ルート検索（アプリ＆作り方）

近くのAED設置施設、医療施設＠十日町市

Grant Information