SAPPORO OMIKUJI｜Mash up the Linked Open Data

SAPPORO OMIKUJI

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 );
}

実行画面
入力データ
概要
保存した実行結果

同じデータを使っているアプリケーション

作者:
更新日:
評価指数

データ作品	テーブルデータ
札幌の観光情報（多言語対応）作者:Sayoko Shimoyama 更新日:2016年6月8日 677 ダウンロード, 1 アプリケーション札幌の観光地データに写真のリンクを追加し、言語毎に整理しました。 5ヶ国語（日本語、英語、中文簡体、中文繁体、ハングル）に対応しています。 ---------------------- このデータは以下の著作物を改変して利用しています。・観光施設、札幌市観光文化局観光コンベンション部、クリエイティブ・コモンズ・ライセンス表示4.0 ・観光写真ライブラリー、札幌市観光文化局観光コンベンション部、http://www.welcome.city.sapporo.jp/sightseeing.photolibrary/	sapporo_spot_en sapporo_spot_ja sapporo_spot_ko sapporo_spot_zhCHS sapporo_spot_zhCHT

データ作品

テーブルデータ

札幌の観光情報（多言語対応）

作者:Sayoko Shimoyama 更新日:2016年6月8日 677 ダウンロード, 1 アプリケーション札幌の観光地データに写真のリンクを追加し、言語毎に整理しました。 5ヶ国語（日本語、英語、中文簡体、中文繁体、ハングル）に対応しています。 ---------------------- このデータは以下の著作物を改変して利用しています。・観光施設、札幌市観光文化局観光コンベンション部、クリエイティブ・コモンズ・ライセンス表示4.0 ・観光写真ライブラリー、札幌市観光文化局観光コンベンション部、http://www.welcome.city.sapporo.jp/sightseeing.photolibrary/

sapporo_spot_en

sapporo_spot_ja

sapporo_spot_ko

sapporo_spot_zhCHS

sapporo_spot_zhCHT

データ作品を追加する

Link http://app.linkdata.org/run/app1s1278i?tab=readme