GIRLS FASHION LINK App｜Mash up the Linked Open Data

about this App

GIRLS FASHION LINK App

var wName=[];
var fName = [];
var useWork;
var useWork1;
var useWork2;
var useFile;
var useFile1;
var useFile2;

//全てのRDF名とその中のファイル名を配列に格納
function loadFiles(){	
	var i=0;
	var j=0;
	
	$.each(LinkData.getWorks(),function(workKey,workValue){
		wName[i]=workValue;
		//$("#workspace").append("<h3>Work" + workKey + ":"+ workValue +"</h3>");
		
		$.each(LinkData.getFiles(workValue), function(fileKey, fileValue){
			fName[j]=fileValue;
			//$("#workspace").append("<h4>File" + fileKey + ": "+ fileValue +"</h4>");
			j++;
		});
		i++;
	});

}

window.onload = function() {
	// ***** workIDとfikeIDの取得 ********//
	loadFiles();
	
	//**** 使うWorkとFileの指定(変更可能)	*****//
	useWork=wName[0];
	useFile=fName[3];
	useWork1=wName[0];
	useFile1=fName[1];
	useWork2=wName[0]; //rdf1s563i
	useFile2=fName[2]; 
	
	/* Chrome対策イベントハンドラを呼ぶ added on 2013.2.28 */
	Events();
	
	//$("#workspace").append("<h4>useFile: " + useFile + ", useWork: "+useWork+ "</h4>");
		
	//$("#workspace").append("<h4>useFile: " + useFile1 + ", useWork: "+useWork1+ "</h4>");
	
	
};

//styleから雑誌を呼び出し、検索結果を表示する
function getMagazine(style){
	
	var work = useWork;
	var file = useFile;
	var styleProp = "http://linkdata.org/property/rdf1s575i#tableStyle";
	var magazineNameProp = "http://linkdata.org/property/rdf1s575i#magazineName";
	var magazineIdProp = "http://linkdata.org/property/rdf1s575i#magazineId";
	var magName=[];
	var magId=[];
	var i;
	var magazineResult="<div id='magazine_list' align='top'><h3>MATCH MAGAZINES</h3><h3>♡ "+style+" ♡</h3></div><div id='ResultMagazine'><br>";
	var count1=0;
	var count2=0;

//①プロパティがスタイルの時のtripleの取得
	$.each(LinkData.getTriplesByProperty(work, file, styleProp), function(tripleKey, tripleValue) {		
		
		//②オブジェクトが取得したスタイル
		if(tripleValue.object === style){	
			
			//③指定したスタイルのときのSubjectから，
			//　magazineNameとmagazineIdを取得
			
			$.each(LinkData.getObjects(work, file, tripleValue.subject, magazineNameProp), function(magKey, magValue) {	
				magName[count1]=magValue;
				count1++;
			});
			
			$.each(LinkData.getObjects(work, file, tripleValue.subject, magazineIdProp), function(magKey, magValue) {	
				magId[count2]=magValue;
				count2++;
			});
		}
	});
	//HTMLへの書き込み
	//class=magazine, id=magazineId, 中身(表示):magazineName
	
	for(i=0;i<magName.length;i++){
		
		/*****************掲載リストの存在によって分岐******************/
		/****  存在するとき　 ***/
		if(　ex_BrandList(magId[i])===true){
			//alert(magId[i]);
		magazineResult += "<div align='left' class='magazine'><center>"+ magName[i] + "</center><div align='center'><input type='button' value='掲載ブランド' class='brandlist' id='"+magId[i]+"' ><input type='button' value='ウェブサイト' class='webpage' id='"+ magId[i]+"' href=''></div></div><br>";	
		}
		else {
			/*****　　それ以外　　*******/
			magazineResult += "<div align='left' class='magazine'><center>"+ magName[i] + "</center><div align='center'><input type='button' value='ウェブサイト' class='webpage' id='"+ magId[i]+"' href=''></div></div><br>";	
		}
	}
	magazineResult+="</div>";
	var searchResult = document.getElementById("Result");
    searchResult.innerHTML = magazineResult; // 検索結果を表示する
}

//class属性がmagazineのタグがクリックされてるとき
$('.brandlist').live('click',function() {
	//そのidを変数Idに取得
	var Id  = $(this).attr("id");
	searchBrandList(Id);	
});

/******************************************
class属性がwebpageのタグがクリックされてるとき
*******************************************/
$('.webpage').live('click',function() {	
	//**** 使うWorkとFile,Propertyの指定*****/
	var work=useWork2; //rdf1s563i
	var file=useFile2; //magazine_type
	var URLprop= "http://linkdata.org/property/rdf1s575i#magazineURL";
	var URL=[];
	/********そのidを変数Idに取得******/
	var Subject="http://linkdata.org/resource/rdf1s575i#";
	var Id  = $(this).attr("id");
	Subject += Id;
	//確認用
	//alert(Id+" "+useWork+" "+useFile+" "+URLprop);
	
	$.each(LinkData.getObjects(work,file,Subject,URLprop), function(objKey, objValue) {
//		alert(objValue);
		if(objValue==="廃刊"){
			alert(objValue+"のため、リンク先がありません。");
		}else{ window.open(objValue);}
	});
	
});

/*****************************
ブランドリストの表示
******************************/
function searchBrandList(s_brand){
	
	var work = useWork1;
	var file = useFile1;
	var brandResult = "";
	var magIdProp = "http://linkdata.org/property/rdf1s575i#magazineId";
	var magNameProp = "http://linkdata.org/property/rdf1s575i#magazineName";
	var brandNameProp = "http://linkdata.org/property/rdf1s575i#brandName";
	var brandIdProp = "http://linkdata.org/property/rdf1s575i#brandId";
	var brandName = [];
	var brandId = [];
	var br1=0;
	var br2=0;

//①プロパティがmagazineIdの時のtripleの取得
	$.each(LinkData.getTriplesByProperty(work, file, magIdProp), function(tripleKey, tripleValue) {		
		//②オブジェクトが取得したbrandIdなら
		if(tripleValue.object === s_brand){	
			
			//③指定したmagIdのときのSubjectから，
			//　brandNameを取得
			$.each(LinkData.getObjects(work,file,tripleValue.subject, brandNameProp), function(brKey1, brValue1) {
				
				brandName[br1]=brValue1;
				br1++;
			});
				
			$.each(LinkData.getObjects(work, file, tripleValue.subject, brandIdProp), function(brKey2, brValue2) {
				brandId[br2]=brValue2;
				br2++;
			});
		}
	});
	
	//HTMLへの書き込み
	//class=brand, id=brandId, 中身(表示):brandName
	
	var BrandListTitle="<div id='brand_list'><h3>BRAND LIST</h3>";
	var Subject="http://linkdata.org/resource/rdf1s575i#";
	Subject+=s_brand;
	
	work=useWork2;
	file=useFile2;	
	$.each(LinkData.getObjects(work,file,Subject,magNameProp),function(objKey,objValue){
		BrandListTitle+="<center><h3>♡ "+objValue+" ♡</h3></div><div id='brandlistArea'><br><br>";
	});
	
		
	for(i=0;i<brandName.length;i++){
		brandResult +=  "<div align='left' class='brand' id='"+brandId[i]+" style ='padding:1.0px;'>" +brandName[i]+ "</div><br>";	 
	}
	
	BrandListTitle += brandResult;	
	BrandListTitle += "</div>";
	
	var searchResult = document.getElementById("BrandList");
	searchResult.innerHTML = BrandListTitle; // 検索結果を表示する

}

/****************************
掲載リストボタンのあるかないか
*****************************/
function ex_BrandList(s_brand){

/*************************
onMouseOverで写真拡大
*************************/
function imageLarge(imageName)
{
   document.images[imageName].width=130;
   document.images[imageName].height=190;
}
/**************************
onMouseoutで写真元に戻る
**************************/
function imageBack(imageName)
{
   document.images[imageName].width=120;
   document.images[imageName].height=180;
}

/*** 
Chrome対策イベントハンドラ added on 2013.2.28 
***/

/******全体*******/
body{
		font-size: 20px;
        background-image: url("http://app.linkdata.org/asset/9f913395.jpg");
        /*background-color: #dfdfdf;*/
        color: #4a4a4a;
        font-family: 'arial black', 'Tahoma', sans-serif
}
/******雑誌一覧のそれぞれについて*******/
div.magazine{
        width: 200px;
        padding: 5px;
        border: solid 2px #d1adae;
}
div.brand{
	padding:0px 0px 0px 30px;
}
/******写真について*******/
img.photo{
        cursor: pointer;
}
#photoArea{
        /*background-color: #e9e9e9;*/
        background-color: white;
        border-style: solid;
        border-color: gray;
        width: 650px;
        height 900px;
	filter:alpha(opacity=90);
    -moz-opacity: 0.9;
	    opacity: 0.9;
}
span{
	font-size: 30px;
}
#Result{
        font-size: 10px;
        color: #990000;
}
#magazine_list{
	 background-color: #f8fff0;
	width: 250px;
	 font-size: 15px;
	border-style: solid;
        border-color: #B22222;
		filter:alpha(opacity=85);
    -moz-opacity: 0.85;
	    opacity: 0.85;
}
#ResultMagazine{
        font: bold;
        border-style: solid;
        border-color: #B22222;
        background-color: #f8fff0;
        font-size: 17px;
        font-family: 'New Gulim', 'Tahoma', sans-serif;
        width: 250px;
	height: 500px;
	overflow: scroll;
	filter:alpha(opacity=85);
    -moz-opacity: 0.85;
	    opacity: 0.85;
}
}

#BrandList{
	/*background-color: white;*/
	font-size: 15px;
	color: #191970;
}
#brand_list{
	color: #191970;
	border-color: #191970;
	background-color: #f0f0ff;
	width: 250px;
	 font-size: 15px;
	border-style: solid;
	filter:alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;
	
}
#brandlistArea{
	font-family: 'New Gulim', 'Tahoma', sans-serif;
        border-style: solid;
        border-color: #191970;
        background-color: #f0f0ff;
        width: 250px;
	height: 500px;
	overflow: scroll;
		filter:alpha(opacity=85);
    -moz-opacity: 0.85;
	    opacity: 0.85;
}

#workspace{
	width: 1200px;
	font-size: 14px;
	font-family: 'New Gulim', 'Tahoma', sans-serif;
}

<div align="center">
	<br>
	<br>
	<img src="http://app.linkdata.org/asset/151bfe1f.png" >
	<br>
	好きなファッションスタイルをClick!!
	<br>
	<br>
	<center>
		<table >
			<tr align="center" valign="top">
				<td><div id="photoArea" align="center">
				<table class="photoTable">
				<tr align="center">
				<td> </td>
				<td width="130"><br><b>FEMININE</b></td>
				<td width="130"><br><b>MODE/COOL</b></td>
				<td width="130"><br><b>大人系</b></td>
				<td width="130"><br><b>STREET</b></td>
				</tr>
					<tr align="center">
					<td><b>CASUAL</b></td>
					<td width="130" height="190"><img src="http://app.linkdata.org/asset/bd6caba5.jpg" width="120" height="180" id="CasualFeminine"  class="photo" name="CasualFeminine"></td>
					<td width="130" height="190"><img src="http://app.linkdata.org/asset/391c2d87.jpg" width="120" height="180" id="CasualMode" class="photo" name="CasualMode" ></td>
					<td width="130" height="190"><img src="http://app.linkdata.org/asset/30dc3ae7.jpg" width="120" height="180" id="CasualAdult" class="photo"  name="CasualAdult"></td>
					<td width="130" height="190"><img src="http://app.linkdata.org/asset/b571f54b.jpg" width="120" height="180" id="CasualStreet"class="photo" name="CasualStreet"></td>
				</tr>
				<tr align="center">
					<td><b>GAL</b></td>
					<td width="130" height="190"><img src="http://app.linkdata.org/asset/05ddff73.jpg" width="120" height="180" id="GalFeminine" class="photo" name="GalFeminine"></td>
					<td width="130" height="190"><img src="http://app.linkdata.org/asset/93c56814.jpg" width="120" height="180" id="GalMode" class="photo" name="GalMode"></td>
					<td width="130" height="190"><img src="http://app.linkdata.org/asset/ed5967a2.jpg" width="120" height="180" id="GalAdult" class="photo" name="GalAdult"></td>
					<td width="130" height="190"><img src="http://app.linkdata.org/asset/50049a8e.jpg" width="120" height="180" id="GalStreet" class="photo" name="GalStreet"></td>
		</tr>
		<tr align="center">
			<td><b>OFFICE</b></td>
			<td width="130" height="190"><img src="http://app.linkdata.org/asset/583c648f.jpg" width="120" height="180"　id="GalStreet" class="photo" name="OfficeFeminine"></td>
			<td width="130" height="190"><img src="http://app.linkdata.org/asset/459dda8f.jpg" width="120" height="180" id="OfficeMode" class="photo" name="OfficeMode"></td>
			<td width="130" height="190"><img src="http://app.linkdata.org/asset/f1f055ba.jpg" width="120" height="180" id="OfficeAdult" class="photo" name="OfficeAdult"></td>
			<td width="130" height="190"><b>No Image</b></td>
		</tr>
	</table>
	</div></td>
	<td>
	
		<div id="Result" valign="top">
		
		</div>
	</td>
	<td><div id="BrandList" valign="top">
		</div>
			</td>
	</tr>
	</table>
		<div align="right" id="workspace">Copyright &copy; 2013 Ayami Dobuchi, Kyoko Nakao All Rights Reserved.</div>
	</center>
</div>

Preview
Input Data
ReadMe
Snapshots

Applications using the same data

Contributor:
Update:
Rating

LinkData Work	Table Data
Girls_Fashion Contributor:Ayami_Dobuchi Update:Jan 31, 2013 1424 Downloads, 2 Applications	BrandList BrandListbyMagazine magazineType photo_to_magazine

Add LinkData work(LinkData)

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