Publish your application｜Mash up the Linked Open Data

var PG = PG || {};

// プロパティの設定
PG.property = {
	image : "http://schema.org/image",
	label : "http://purl.org/dc/elements/1.1/title",
	detail : "http://purl.org/dc/elements/1.1/description",
	address : "http://uidcenter.org/vocab/ucr/ug#address",
	long : "http://www.w3.org/2003/01/geo/wgs84_pos#long",
	lat : "http://www.w3.org/2003/01/geo/wgs84_pos#lat"
}
	
// デフォルト言語
PG.language = "ja";
	
$(function() {
	// オーバーレイを追加
	$('body').append('<div class="modal-overlay"></div>');
	// オーバーレイをフェードイン
	$('.modal-overlay').fadeIn('slow');

// モーダルコンテンツを追加
	var modal = '<div class="modal-content"><div id="comment"><p>Click Here!</p><ul><li id="ja">日本語</li><li id="en">English</li><li id="zhCHS">简体中文</li><li id="zhCHT">繁體中文</li><li id="ko">한국어</li></ul></div><img id="cat" src="http://app.linkdata.org/asset/79eaad8f.png" /></div>';
	$('body').append(modal);
	// モーダルコンテンツの表示位置を設定
	modalResize();
	
	// 猫出現
	setTimeout(function(){
		$('.modal-content').fadeIn('slow');
	}, 500);
	
	// コメントボックスの操作
	$("#comment, #cat").on('click', function() {
		$("#comment li").toggle(500);
	});

// .modal-overlayをクリック
	$('#comment li').off().click(function(){
		PG.language = $(this).attr("id");
		// モーダルコンテンツとオーバーレイをフェードアウト
		$('.modal-content').fadeOut('slow');
		$('.modal-overlay').fadeOut('slow',function(){
			// オーバーレイを削除
			$('.modal-overlay').remove();
		});
	});

// リサイズしたら表示位置を再取得
	$(window).on('resize', function(){
		modalResize();
	});

// モーダルコンテンツの表示位置を設定する関数
	function modalResize(){
		// ウィンドウの横幅、高さを取得
		var w = $(window).width();
		var h = $(window).height();
		console.log("w:" + w + "h:" + h);

// モーダルコンテンツの表示位置を取得
		var x = (w / 2) -120;
		var y = (h / 2) -200;
		console.log("x:" + x + "y:" + y);

// モーダルコンテンツの表示位置を設定
		$('.modal-content').css({'left': x + 'px','top': y + 'px'});
	}
	
	// スマホでもボタンがへこむ効果を付ける
	var $elm = $('#push');
	$elm.bind('touchstart', function() {
    	$(this).addClass('tch-active');
	});
	$elm.bind('touchend', function() {
    	$(this).removeClass('tch-active');
	});
});

$("#push").click(function () {
	var list = "";
	$("#result").empty();
	$("#omikuji, #showAll").remove();
	// 指定されたworkを全件取得
	$.each(LinkData.getWorks(), function(workKey, workValue) {
		// workに含まれるfileを全件取得
		var propUri = stringToUri(PG.property, workValue);
		$.each(LinkData.getFiles(workValue), function(fileKey, fileValue) {
			var filename = fileValue.split("_");
			if (filename[filename.length-1]==PG.language) {
				var index = 0;
				var random = 0;
				var subList = [];
				// subjectを全件取得
				$.each(LinkData.getSubjects(workValue, fileValue), function(subjKey, subjValue) {
					var image = "";
					var label = "";
					var detail = "";
					var address = "";
					var longitude = "";
					var latitude = "";
					var str = "";
					$.each( LinkData.getTriplesBySubject(workValue, fileValue, subjValue), function( tripleKey, tripleValue ) {
						var prop = tripleValue.property;
						var obj = tripleValue.object;
						if ( prop == propUri.image)  image = obj;
						else if ( prop == propUri.label ) label = obj ;
						else if ( prop == propUri.detail ) detail = obj ;
						else if ( prop == propUri.address && obj.length != 0) address = "<p class=\"address\"><img src=\"http://app.linkdata.org/asset/831091f7.png\" />" + obj + "</p>" ;
						else if ( prop == propUri.long ) longitude = obj;
						else if ( prop == propUri.lat ) latitude = obj;
					});
					if (image == "") return;
					subList.push(subjValue);
					str += "<li class=\"flipImage\"><div class=\"front\"><a href='#'><img src=\"" + image + "\" alt=\"image\" /></a></div><div class=\"back\"><p class=\"label\">" + label + "<p class=\"detail\">" + detail  + "</p>" + address + "<span class=\"button\">" + addLinkToMap(latitude, longitude) + "</span></div></li>"
					list += str;
					index += 1;
				});
				var image = "";
				var label = "";
				var detail = "";
				var address = "";
				var longitude = "";
				var latitude = "";
				var str = "";
				random = Math.floor( Math.random() * index);
				$.each( LinkData.getTriplesBySubject(workValue, fileValue, subList[random]), function( tripKey, tripValue ) {
					var prop = tripValue.property;
					var obj = tripValue.object;
					if ( prop == propUri.image)  image = obj;
					else if ( prop == propUri.label ) label = obj ;
					else if ( prop == propUri.detail ) detail = obj ;
					else if ( prop == propUri.address && obj.length != 0) address = "<p class=\"address\"><img src=\"http://app.linkdata.org/asset/831091f7.png\" />" + obj + "</p>" ;
					else if ( prop == propUri.long ) longitude = obj;
					else if ( prop == propUri.lat ) latitude = obj;
				});
				$("#omikujibox").append('<div id="omikuji"><div id="omikujiInner"><p class=\"label\">Your Lucky Place：</p><h4>' + label + '</h4><img src="' + image + '" alt="image" /><p class="detail">' + detail  + '</p>' + address + '<span class="button" id="showMap">' + addLinkToMap(latitude, longitude) + '</span></div></div>');
			}
		});
	});
	$("#result").append( list );
	
	// 画像を正方形にトリミング
	$(".front").imgLiquid();
	
	// 画像が読み込めなかった時の処理
	$("img").error(function(){
		$(this).before("No Image");
	});
	
	$( 'a' )
	  .bind( 'touchstart', function(){
 	   $( this ).addClass( 'hover' );
	}).bind( 'touchend', function(){
	    $( this ).removeClass( 'hover' );
	});
	
	$("#omikuji").fadeIn(500, function(){
		// 画像を折りたたむエフェクト
		var $folded = $('#omikuji').oriDomi({
			hPanels: 8,
			speed: 0,
			shadingIntesity: .6
		});
		$folded.oriDomi('reveal', 1000, 'top');
		setTimeout(function(){
			$folded.oriDomi('reveal', 0, 'top')
				.oriDomi('setSpeed', 2000);
		}, 2000);
	});
	
	setTimeout(function(){
		$('html,body').animate({ scrollTop: 400 }, 2000);
	}, 1000);
	
	$("#omikujibox").after('<div id="showAll"><p>Show All</p><p class="off">Hide</p></div>');

$("#showAll").on('click', function() {
		$("#showAll p").toggleClass("off")
		$('.photo-grid').toggle(500);
	});

});

// Google Mapのルート検索へのリンクを追加
function addLinkToMap( latitude, longitude )
{
	var str = "";
	if (latitude.length != 0 && longitude.length != 0) {
		str = "<a target=\"_blank\" class=\"object\" href=\"http://maps.google.co.jp/maps?daddr=" + latitude + "," + longitude + "\">Show Map</a>"
	}
	return str;
}

function stringToUri (p, workId) {
	$.each (p, function(propKey, propVal){
		if(propVal.indexOf("http") != 0){
			p[propKey] = "http://linkdata.org/property/" + workId + "#" + encodeURIComponent(propVal);
		}
	})
	return p;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
	font-family: sans-serif;
}

body { 
	background-image: url("http://app.linkdata.org/asset/bee56f61.jpg"); /* ※背景画像 */
	background-repeat: repeat;
}

h4 {
	font-size: 120%;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wrapper {
 text-align: center;
}

.container {
	width: 100%;
	max-width: 320px;
	background: #DE2900;
	text-align: center;
	margin: 0 auto;
	padding: 20px 20px 100px 20px;
}

.modal-content {
    position:fixed;
    z-index:2;
    margin:0;
	text-align: center;
	display:none;
}

.modal-overlay {
    z-index:1;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.6);
}

.modal-open {
    color:#00f;
    text-decoration:underline;
}

.modal-open:hover {
    cursor:pointer;
    color:#f00;
}

.modal-close {
    color:#00f;
    text-decoration:underline;
}

.modal-close:hover {
    cursor:pointer;
    color:#f00;
}

#omikujibox {
	width: 100%;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
}

#push {
	cursor: pointer;
	border-radius: 50px;
	box-shadow: 0 8px 0 rgb(121, 45, 33);
	margin-left: 20px;
}

#push:active, .tch-active {
	box-shadow : none;
	transform : translate3d(0, 8px, 0);
}

#slot {
	display: inline-block;
	background: #000;
	height: 60px;
	width: 100%;
	margin: 30px 0;
}

#omikuji {
	display: none;
	background: #FFF;
	width: 240px;
	margin: 0 10px;
	padding: 10px;
	font-size: 11pt;
}

#omikujiInner {
	border: solid 1px #000;
}

#showAll {
	background: #FFF;
    color: #000;
    margin: 0 20px 20px;
    padding: 5px 0;
    cursor: pointer;
}

.off {
	display: none;
}

.button a {
	color: #FFF;
    text-decoration: none;
    font-weight: bold;
	display: block;
	background: #000000;
	padding: 5px;
}

#comment {
	position: relative;
	display: block;
	padding: 5px 0;
	width: 200px;
	margin: 0 20px;
	color: #000;
	text-align: center;
	background: #FFF;
	z-index: 0;
	border-radius: 20px;
	cursor: pointer;
}

#comment:after {
	content: "";
	position: absolute;
	bottom: -10px; left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #FFF transparent transparent transparent;
}

#comment li {
    background: #888;
    color: #FFF;
    margin: 7px 10px;
	display: none;
	padding: 3px 0;
	line-height: 25px;
}

#cat {
	width: 100px;
	cursor: pointer;
	margin: 20px;
}

.photo-grid {
	display:none;
	text-align: center;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.photo-grid {
  position: relative;
  max-width: 100%;
  word-wrap: break-word;
}

.flipImage{ 
	margin: 20px;
    display: block;
    cursor: pointer;
    width: 240px;
    height: 240px;
}

.flipImage > .front{
	position:absolute;
	transform: perspective( 500px ) rotateY( 0deg );
	-webkit-transform: perspective( 500px ) rotateY( 0deg );
	background: #E39E83; 
	width:240px;
	height: 240px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform .5s linear 0s;
	-webkit-transition: transform .5s linear 0s;
}

.flipImage .front a {
	color: #dddddd;
    font-size: 180%;
    font-weight: bold;
    text-align: center;
	line-height: 250px;
	text-decoration: none;
}

.flipImage > .back{
	position:absolute;
	transform: perspective( 500px ) rotateY( 180deg );
	-webkit-transform: perspective( 500px ) rotateY( 180deg );
	background: #8C1A00; /* ※写真の裏側の背景色 */
	background-image: url("http://app.linkdata.org/asset/a98f21d5.jpg");
	color: #FFFFFF;
	width: 240px;
	height: 240px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform .5s linear 0s;
	-webkit-transition: transform .5s linear 0s;
}

.flipImage p {
	margin: 5px 10px;
	font-size: 9pt;
}

.flipImage .detail {
    background: #650000;
    color: #FFF;
    padding: 5px;
	max-height: 130px;
}

p.address img {
	margin: 0 5px;
}

.flipImage p.label {
	font-weight: bold;
	font-size: 14pt;
}

.flipImage .button {
    display: block;
    text-align: center;
    width: 100%;
}

.flipImage .button a {
    display: inline-block;
    width: 92%;
    text-decoration: none;
    padding: 7px;
	margin: 0 10px;
    font-weight: bold;
}

.flipImage:hover > .front{
	transform: perspective( 600px ) rotateY( -180deg );
	-webkit-transform: perspective( 600px ) rotateY( -180deg ); 
}

.flipImage:hover > .back{
	transform: perspective( 600px ) rotateY( 0deg );
	-webkit-transform: perspective( 600px ) rotateY( 0deg );
}

Select Input Data

LinkData Work	Table Data
札幌の観光情報（多言語対応）	sapporo_spot_en sapporo_spot_ja sapporo_spot_ko sapporo_spot_zhCHS sapporo_spot_zhCHT

Add LinkData work(LinkData)

Click the Browse button or drag and drop to choose files to upload

The Maximum upload size is 1MB.(bmp,gif,jpeg,jpg,png)

Edit Application

Please enter information for the application to be registered.

*Required field

Account Name

Application Name*: Remove; Add name for another language

Collaborators

Image: Change image

You can upload jpg, gif, png file formats

Website: x

Add website

Tag

License

API version

Initial Cost: ￥

Annual Cost: ￥

Description: Get your lucky place in Sapporo!! There's too many tourist spots to see in Sapporo. "Sapporo Omikuji" helps you to choise the destination by providence. [Multilingual Support] English, Japanese, Simplified Chinese, Traditional Chinese, Korean Remove; Get your lucky place in Sapporo!! 札幌は見所が多いため、どこへ行こうか選べないという方へ。日本には古来から「迷った時の神頼み」という言葉があります。おみくじで行き先を決めてみませんか？「SAPPORO OMIKUJI」は札幌の観光名所からランダムに１つを選んで表示します。日本語・英語・中文簡体・中文繁体・ハングルの五ヶ国語に対応しています。利用しているデータについてはこちらをご覧ください。http://linkdata.org/work/rdf1s4174i Remove; Add description for another language

Security Level: public limited private

: finish Editing

Select Input Data

Edit Application

Please enter information for the application to be registered.

History