GIRLS FASHION LINK App

fullscreen

kyoko.nakao

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

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>

女性ファッションは種類も多く好みも分かれるため，おしゃれしたいと思っても情報が混在しており，情報を得るのが困難です。

そこで，簡単におしゃれの情報を得るためのアプリケーションを開発しました。

女性がファッションを選択する際に役立つことを願っています。

＜アプリの概略＞

まず写真の中から好きなファッションスタイルを選びます。
すると、近いスタイルが掲載された雑誌の一覧が表示されます。
その雑誌の中から見たいと思うWebサイトと掲載ブランドリストを参照することができます。
結果から，雑誌は違うけれど，同じブランドが掲載されたり，スタイルごとに内容が重なっている雑誌が違うといった曖昧な部分に対応できると考えています。

※full screenでの実行を推奨します

Fork this app as your new one download

Web Search

Contributor Send Message	kyoko.nakao
Forked from (Parent App)	Ayami_Dobuchi 's GFL App0129 (仮)
Run count	1145
Website
License
Fork count	1
Created date	Jan 30, 2013
Last update date	Feb 28, 2013

Forked from (Parent App)

GFL App0129 (仮) Contributor: Ayami_Dobuchi Update: Jan 30, 2013 17 runs

Forked (Child App)

forked:GIRLS FASHION LINK App Contributor: fukushiba Update: Sep 25, 2014 153 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.

Girls_Fashion Contributor: Ayami_Dobuchi Update: Jan 31, 2013
1424 Downloads
,

2 Applications

BrandList

BrandListbyMagazine

magazineType

photo_to_magazine
Add New Data

News Feed

linkdata.org に関するツイート

Publish your application as JavaScript

that mashes up the Linked Open Data

Application Information