SAPPORO OMIKUJI

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

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

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

Get your lucky place in Sapporo!!

札幌は見所が多いため、どこへ行こうか選べないという方へ。

日本には古来から「迷った時の神頼み」という言葉があります。

おみくじで行き先を決めてみませんか？

「SAPPORO OMIKUJI」は札幌の観光名所からランダムに１つを選んで表示します。

日本語・英語・中文簡体・中文繁体・ハングルの五ヶ国語に対応しています。

利用しているデータについてはこちらをご覧ください。http://linkdata.org/work/rdf1s4174i

Fork this app as your new one download

Web Search

Contributor Send Message	Sayoko Shimoyama
Forked from (Parent App)	Sayoko Shimoyama 's オープンデータおみくじ
Run count	470
Website
License	https://opensource.org/licenses/MIT
Fork count	0
Created date	Jan 21, 2016
Last update date	Jan 26, 2016

Forked from (Parent App)

オープンデータおみくじ Contributor: Sayoko Shimoyama Update: Jan 24, 2016 491 runs

Input Data
Related Ideas

LinkData work list used as input data in this application.
You can change input data and execute application if you change the checkbox.

札幌の観光情報（多言語対応） Contributor: Sayoko Shimoyama Update: Jun 8, 2016
549 Downloads
,

1 Applications

sapporo_spot_en

sapporo_spot_ja

sapporo_spot_ko

sapporo_spot_zhCHS

sapporo_spot_zhCHT
Add New Data

News Feed

linkdata.org に関するツイート

Publish your application as JavaScript

that mashes up the Linked Open Data

Application Information

SAPPORO OMIKUJI

Application

Forked from (Parent App)

News Feed