forked:GIRLS FASHION LINK App

fullscreen

fukushiba

評価指数

アプリケーション

Play
JavaScript
CSS
HTML
概要
保存した実行結果

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して新しいアプリを作るダウンロード

このアプリ作品をwebから探す

作者メッセージ送信	fukushiba
Fork元のアプリ	kyoko.nakao 's GIRLS FASHION LINK App
実行回数	152
ウェブサイト
ライセンス
Fork count	0
作成日	2014年9月25日
最終更新日	2014年9月25日