Yokohama Opendata hackathon's Participants Yellow Page

fullscreen

Sayoko Shimoyama

横浜オープンデータハッカソンのイエローページです。検索ボックスにキーワードを入力すると、人物を名前、所属、メールアドレス、技能で検索することができます。

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

if (!YP) {
	var YP = {};
}

YP.main = function() {
	this._init.apply(this, arguments);
};

YP.main.prototype = {
	
	_infoList : null,
	_property : null,
	_subjectList : null,
	
	_cons : {
		MAX_ITEM_COUNT			: 5,
		INFO_SELECTOR			: ".info",
		KEY_WORD_SELECTOR		: "#keyword",
		INFO_LIST_SELECTOR		: "#infoList",
		MORE_INFO_SELECTOR		: ".moreInfo",
		TAG_SELECTOR			: ".tag",
		SEARCH_IMAGE_SELECTOR	: ".searchImage",
		EXPAND_ALL_SELECTOR		: ".expandAll",
		EXTRA_INFO_SELECTOR		: ".extraInfo",
		PAGE_TITLE_SELECTOR		: ".pageTitle",
		SHOW_ALL_BUTTON_SELECTOR: ".showAllButton"
		
	},
	
	_init : function() {
		this._infoList = [];
		this._property = new YP.property();
		this._initInfoList();
		this._initView();
		this._initListener();
	},
	
	_initInfoList : function() {
		var self = this, workId = self._property.getWorkId(), fileName = self._property.getFileName();
		var subjectList = LinkData.getSubjects(workId, fileName);
		for (var i = 0; i < subjectList.length; i++) {
			var subject = subjectList[i];
			var info = new YP.info();
//			info.setTitle(LinkData.getObjects(workId, fileName, subject, self._property.getTitleProperty())[0]);
			info.setName(self._getLabel(subject));
			info.setEmail(LinkData.getObjects(workId, fileName, subject, self._property.getEmailProperty())[0]);
			info.setOrgName(LinkData.getObjects(workId, fileName, subject, self._property.getOrgNameProperty())[0]);
			info.setDescription(LinkData.getObjects(workId, fileName, subject, self._property.getDescriptionProperty())[0]);
			info.setDepiction(LinkData.getObjects(workId, fileName, subject, self._property.getDepictionProperty())[0]);
			info.setHomePage(LinkData.getObjects(workId, fileName, subject, self._property.getHomePageProperty())[0]);
			info.setAchievements(LinkData.getObjects(workId, fileName, subject, self._property.getAchievementsProperty())[0]);
			info.setCapabilityList(LinkData.getObjects(workId, fileName, subject, self._property.getCapabilitiesProperty()));
			info.setMainPaperList(LinkData.getObjects(workId, fileName, subject, self._property.getMainPaperProperty()));
			self._infoList.push(info);
		}
	},
	
	_initView : function() {
		var self = this;
		var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT);
		self._addHtml(infoList);
		$(self._cons.KEY_WORD_SELECTOR).val("");
	},
	
	_initListener : function() {
		this._initPageTitleListener();
		this._initShowAllButtonListener();
		this._initMoreInfoListener();
		this._initAutoCompleter();
		this._initKeywordListener();
		this._initSearchImageListener();
	},
	
	_initPageTitleListener : function() {
		var self = this;
		$(self._cons.PAGE_TITLE_SELECTOR).click(function() {
			$(self._cons.KEY_WORD_SELECTOR).val("");
			var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT);
			self._addHtml(infoList);
		});
	},
	
	_initShowAllButtonListener : function() {
		var self = this;
		$(self._cons.SHOW_ALL_BUTTON_SELECTOR).click(function() {
			$(self._cons.KEY_WORD_SELECTOR).val("");
			var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT);
			self._addHtml(infoList);
		});
	},
	
	_initMoreInfoListener : function() {
		var self = this, page = 2;
		$(self._cons.MORE_INFO_SELECTOR).unbind("click");
		$(self._cons.MORE_INFO_SELECTOR).click(function() {
			var keyword = $(self._cons.KEY_WORD_SELECTOR).val();
			var infoList = self._getInfoListByIndex(page, self._cons.MAX_ITEM_COUNT, keyword);
			if (infoList.length != 0) {
				self._appendHtml(infoList, keyword);
				page++;
			} else {
				$(this).hide();
			}
		});
	},
	
	_initAutoCompleter : function() {
		var self = this;
		$(self._cons.KEY_WORD_SELECTOR).autocomplete({
			minLength: 2,
			source: function(req, res) {
				var keyword = req.term;
				res(self._getMatchWordListByKeyword(keyword));
			},
			select : function(event, ui) {
				var keyword = ui.item.value;
				var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
				self._addHtml(infoList, keyword);
			}
		})
	},
	
	_initKeywordListener : function() {
		var self = this;
		$(self._cons.KEY_WORD_SELECTOR).keydown(function(evt) {
			if (evt.which == 13) {
				$(self._cons.KEY_WORD_SELECTOR).autocomplete("close");
				var keyword = $(this).val();
				var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
				self._addHtml(infoList, keyword);
			}
		});
	},
	
	_initSearchImageListener : function() {
		var self = this;
		$(self._cons.SEARCH_IMAGE_SELECTOR).click(function() {
			$(self._cons.KEY_WORD_SELECTOR).autocomplete("close");
			var keyword = $(self._cons.KEY_WORD_SELECTOR).val();
			var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
			self._addHtml(infoList, keyword);
		});
	},
	
	_initTagListener : function() {
		var self = this;
		$(self._cons.INFO_LIST_SELECTOR + " " + self._cons.TAG_SELECTOR).unbind("click");
		$(self._cons.INFO_LIST_SELECTOR + " " + self._cons.TAG_SELECTOR).click(function() {
			var keyword = $(this).text().trim();
			$(self._cons.KEY_WORD_SELECTOR).val(keyword);
			var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
			self._addHtml(infoList, keyword);
		});
	},
	
	_initExpandAllListener : function() {
		var self = this;
		$(self._cons.INFO_LIST_SELECTOR + " " + self._cons.EXPAND_ALL_SELECTOR).unbind("click");
		$(self._cons.INFO_LIST_SELECTOR + " " + self._cons.EXPAND_ALL_SELECTOR).click(function() {
			var parent = $(this).closest(self._cons.INFO_SELECTOR);
			$(parent).find(self._cons.EXTRA_INFO_SELECTOR).show();
			$(this).hide();
		});
	},
	
	_addHtml : function(infoList, keyword) {
		var self = this;
		if (infoList.length != 0) {
			var html = self._getContentHtml(infoList, keyword);
			$(self._cons.INFO_LIST_SELECTOR).html(html);
			self._initMoreInfoListener();
			self._initTagListener();
			self._hideUnNecessaryExpandAllButton();
			self._initExpandAllListener();
			$(self._cons.MORE_INFO_SELECTOR).show();
		} else {
			var html = self._getNotFoundHtml();
			$(self._cons.INFO_LIST_SELECTOR).html(html);
			$(self._cons.MORE_INFO_SELECTOR).hide();
		}
	},
	
	_appendHtml : function(infoList, keyword) {
		var self = this;
		var html = self._getContentHtml(infoList, keyword);
		$(self._cons.INFO_LIST_SELECTOR).append(html);
		self._initTagListener();
		self._hideUnNecessaryExpandAllButton();
		self._initExpandAllListener();
	},
	
	_hideUnNecessaryExpandAllButton : function() {
		var self = this;
		$.each($(self._cons.INFO_LIST_SELECTOR + " " + self._cons.EXPAND_ALL_SELECTOR), function() {
			var parent = $(this).closest(self._cons.INFO_SELECTOR);
			var html = $(parent).find(self._cons.EXTRA_INFO_SELECTOR).html();
			if (!html || html.trim().length == 0) {
				$(this).hide();
			}
		});
	},
	
	_getInfoList : function(start, itemCount) {
		var self = this, list = [];
		var workId = self._property.getWorkId(), fileName = self._property.getFileName();
		var sList = self._getSubjectList(start, itemCount);
		for (var i = 0; i < sList.length; i++) {
			var subject = sList[i];
			var info = new YP.info();
//			info.setTitle(LinkData.getObjects(workId, fileName, subject, self._property.getTitleProperty())[0]);
			info.setName(self._getLabel(subject));
			info.setEmail(LinkData.getObjects(workId, fileName, subject, self._property.getEmailProperty())[0]);
			info.setOrgName(LinkData.getObjects(workId, fileName, subject, self._property.getOrgNameProperty())[0]);
			info.setDescription(LinkData.getObjects(workId, fileName, subject, self._property.getDescriptionProperty())[0]);
			info.setDepiction(LinkData.getObjects(workId, fileName, subject, self._property.getDepictionProperty())[0]);
			info.setHomePage(LinkData.getObjects(workId, fileName, subject, self._property.getHomePageProperty())[0]);
			info.setAchievements(LinkData.getObjects(workId, fileName, subject, self._property.getAchievementsProperty())[0]);
			info.setCapabilityList(LinkData.getObjects(workId, fileName, subject, self._property.getCapabilitiesProperty()));
			info.setMainPaperList(LinkData.getObjects(workId, fileName, subject, self._property.getMainPaperProperty()));
			list.push(info);
		}
		return list;
	},
	
	_getMatchWordListByKeyword : function(keyword) {
		var self = this, list = [];
		var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
		$.each(infoList, function(key, info) {
			if (info.getName().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getName(), list)) {
				list.push(info.getName());
			} 
			if (info.getEmail().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getEmail(), list)) {
				list.push(info.getEmail());
			}
			if (info.getOrgName().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getOrgName(), list)) {
				list.push(info.getOrgName());
			}
			var capabilityList = info.getCapabilityList();
			$.each(capabilityList, function(key, value) {
				if (value.trim().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(value, list)) {
					list.push(value.trim());
				}
			});
		});
		return list;
	},
	
	_getInfoListByIndex : function(page, itemCount, keyword) {
		var self = this, list = [], count = 0;
		var end = (page * itemCount) - 1;
		var start = end - itemCount + 1;
		for (var i = 0; i < self._infoList.length; i++) {
			var info = self._infoList[i];
			if ((!keyword || keyword.trim().length == 0) || self._isHitInfo(info, keyword)) {
				if (count >= start && count <= end) {
					list.push(info);
				}
				count++;
			}
			if (list.length == itemCount) {
				return list;
			}
		}
		return list;
	},
	
	_isHitInfo : function(info, keyword) {
		if (!keyword || keyword.trim().length == 0) {
			return false;
		}
		if (info.getName().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getEmail().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getOrgName().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if ($.inArray(keyword, info.getCapabilityList()) > -1) {
			return true;
		}
		var capabilityList = info.getCapabilityList();
		for (var i = 0; i < capabilityList.length; i++) {
			var capability = capabilityList[i];
			if (capability.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
				return true;
			}
		}
		return false;
	},
	
	_getContentHtml : function(infoList, keyword) {
		var self = this, sb = [];
		for (var i = 0; i < infoList.length; i++) {
			var info = infoList[i];
			sb[sb.length] = "<div class='info cf'>";
			sb[sb.length] = "<div class='profileImageArea left'>";
			sb[sb.length] = "<img class='profileImage' src='" + info.getDepiction() + "'/>";
			sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='profileInfoArea left'>";
			sb[sb.length] = "<div class='name'>" + self._getHighLightKeywordHtml(info.getDisplayName(), keyword) + "</div>";
			sb[sb.length] = "<div>";
			if (info.getOrgName().trim().length != 0) {
				sb[sb.length] = "<span class='orgName'><i class='icon icon-briefcase'></i>" + self._getHighLightKeywordHtml(info.getOrgName(), keyword) + "</span>";
			}
			if (info.getEmail().trim().length != 0) {
				sb[sb.length] = "<i class='icon icon-envelope'></i><a href='mailto:" + info.getEmail() + "' class='email'>" + self._getHighLightKeywordHtml(info.getEmail(), keyword) + "</a>";
			}
			sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='cf'>";
			sb[sb.length] = "<div class='tagList cf left'>" + self._getTagListHtml(info.getCapabilityList(), keyword) + "</div>";
			sb[sb.length] = "<div class='expandAll right'>&gt;&gt; more</div>";
			sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='extraInfo hide'>";
			if (info.getDescription().trim().length != 0) {
				sb[sb.length] = "<div><i class='icon icon-comment'></i>" + info.getDescription() + "</div>";
			}
			if (info.getHomePage().trim().length != 0) {
				sb[sb.length] = "<div>";
				sb[sb.length] = "<i class='icon icon-user'></i><a href='" + info.getHomePage() + "' target='_blank' class='homePage'>" + info.getHomePage() + "</a>";
				sb[sb.length] = "</div>";
			}
			var mainPaperHtml = self._getMainPaperHtml(info.getMainPaperList());
			if (mainPaperHtml.trim().length != 0) {
				sb[sb.length] = "<div class='cf'>";
				sb[sb.length] = "<div class='left'><i class='icon icon-list'></i></div>";
				sb[sb.length] = "<div class='left'>" + mainPaperHtml + "</div>";
				sb[sb.length] = "</div>";
			}
			if (info.getAchievements().trim().length != 0) {
				sb[sb.length] = "<div>";
				sb[sb.length] = "<a href='" + info.getAchievements() + "' class='achievement' target='_blank'>&gt;&gt; show more achievements..</a>";
				sb[sb.length] = "</div>";
			}
			sb[sb.length] = "</div>";
			sb[sb.length] = "</div>";
			sb[sb.length] = "</div>";
		}
		return sb.join("");
	},
	
	_getHighLightKeywordHtml : function(text, keyword) {
		if (!keyword || keyword.trim().length == 0) {
			return text;
		}
		var regex = new RegExp('(' + keyword + ')', 'gi');
		return text.replace(regex, "<span class='highlight'>$1</span>");
	},
	
	_getNotFoundHtml : function() {
		var sb = [];
		sb[sb.length] = "<div class='info error'>No Participant Found</div>";
		return sb.join("");
	},
	
	_getTagListHtml : function(tagList, keyword) {
		var self = this, sb = [];
		for (var i = 0; i < tagList.length; i++) {
			var tag = tagList[i];
			sb[sb.length] = "<span class='tag left'>" + self._getHighLightKeywordHtml(tag.trim(), keyword) + "</span>";
		}
		return sb.join("");
	},
	
	_getMainPaperHtml : function(paperList) {
		var sb = [];
		for (var i = 0; i < paperList.length; i++) {
			var paper = paperList[i];
			sb[sb.length] = "<div class='mainPaper'>" + paper + "</div>";
		}
		return sb.join("");
	},
	
	_getLabel : function(subject) {
		var label = subject;
		var arr = subject.split("#");
		if (arr.length > 1) {
			label = decodeURIComponent(arr[1]);
		}
		return label;
	}
	
};

YP.property = function() {
	this._init.apply(this, arguments);
};

YP.property.prototype = {
	
	_workId : null,
	_fileName : null,
//	_titleProperty : null,
	_emailProperty : null,
	_orgNameProperty : null,
	_descriptionProperty : null,
	_depictionProperty : null,
	_homePageProperty : null,
	_achievementsProperty : null,
	_capabilitiesProperty : null,
	_mainPaperProperty : null,
	
	_cons : {
//		TITLE				: "#title",
		EMAIL				: "#email",
		ORGANIZATION_NAME	: "#organization-name",
		DESCRIPTION			: "description",
		DEPICTION			: "depiction",
		HOME_PAGE			: "homepage",
		ACHIEVEMENT			: "#achievements",
		CAPABILITIES		: "#capabilities",
		MAIN_PAPER			: "#mainpaper"
	},
	
	_init : function() {
		this._initProperty();
	},
	
	_initProperty : function() {
		var self = this;
		$.each(LinkData.getWorks(), function(workKey, workId) {
			$.each(LinkData.getFiles(workId), function(fileKey, fileName) {
				self._workId = workId;
				self._fileName = fileName;
				$.each(LinkData.getProperties(workId, fileName), function(propKey, propValue) {
//					if (propValue.indexOf(self._cons.TITLE) > -1) {
//						self._titleProperty = propValue;
//					} else 
					if (propValue.indexOf(self._cons.EMAIL) > -1) {
						self._emailProperty = propValue;
					} else if (propValue.indexOf(self._cons.ORGANIZATION_NAME) > -1) {
						self._orgNameProperty = propValue;
					} else if (propValue.indexOf(self._cons.DESCRIPTION) > -1) {
						self._descriptionProperty = propValue;
					} else if (propValue.indexOf(self._cons.DEPICTION) > -1) {
						self._depictionProperty = propValue;
					} else if (propValue.indexOf(self._cons.HOME_PAGE) > -1) {
						self._homePageProperty = propValue;
					} else if (propValue.indexOf(self._cons.ACHIEVEMENT) > -1) {
						self._achievementsProperty = propValue;
					} else if (propValue.indexOf(self._cons.CAPABILITIES) > -1) {
						self._capabilitiesProperty = propValue;
					} else if (propValue.indexOf(self._cons.MAIN_PAPER) > -1) {
						self._mainPaperProperty = propValue;
					}
				});
				return false;
			});
			return false;
		});
	},
	
	getWorkId : function() {
		return this._workId;
	},
	
	getFileName : function() {
		return this._fileName;
	},
	
//	getTitleProperty : function() {
//		return this._titleProperty;
//	},
	
	getEmailProperty : function() {
		return this._emailProperty;
	},
	
	getOrgNameProperty : function() {
		return this._orgNameProperty;
	},
	
	getDescriptionProperty : function() {
		return this._descriptionProperty;
	},
	
	getDepictionProperty : function() {
		return this._depictionProperty;
	},
	
	getHomePageProperty : function() {
		return this._homePageProperty;
	},
	
	getAchievementsProperty : function() {
		return this._achievementsProperty;
	},
	
	getCapabilitiesProperty : function() {
		return this._capabilitiesProperty;
	},
	
	getMainPaperProperty : function() {
		return this._mainPaperProperty;
	}
	
};

YP.info = function() {
	this._init.apply(this, arguments);
};

YP.info.prototype = {
	
//	_title : null,
	_name : null,
	_email : null,
	_orgName : null,
	_description : null,
	_depiction : null,
	_homePage : null,
	_achievement : null,
	_capabilityList : null,
	_mainPaperList : null,
	
	_init : function() {},
	
//	getTitle : function() {
//		if (!this._title) {
//			this._title = "";
//		}
//		return this._title;
//	},
	
//	setTitle : function(title) {
//		this._title = title;
//	},
	
	getName : function() {
		if (!this._name) {
			this._name = "";
		}
		return this._name;
	},
	
	setName : function(name) {
		this._name = name;
	},
	
	getDisplayName : function() {
		return this._name;
	},
	
	getEmail : function() {
		if (!this._email) {
			this._email = "";
		}
		return this._email;
	},
	
	setEmail : function(email) {
		this._email = email;
	},
	
	getOrgName : function() {
		if (!this._orgName) {
			this._orgName = "";
		}
		return this._orgName;
	},
	
	setOrgName : function(orgName) {
		this._orgName = orgName;
	},
	
	getDescription : function() {
		if (!this._description) {
			this._description = "";
		}
		return this._description;
	},
	
	setDescription : function(description) {
		this._description = description;
	},
	
	getDepiction : function() {
		if (!this._depiction) {
			this._depiction = "http://app.linkdata.org/asset/d4a3f83b.png";
		}
		return this._depiction;
	},
	
	setDepiction : function(depiction) {
		this._depiction = depiction;
	},
	
	getHomePage : function() {
		if (!this._homePage) {
			this._homePage = "";
		}
		return this._homePage;
	},
	
	setHomePage : function(homePage) {
		this._homePage = homePage;
	},
	
	getAchievements : function() {
		if (!this._achievements) {
			this._achievements = "";
		}
		return this._achievements;
	},
	
	setAchievements : function(achievements) {
		this._achievements = achievements;
	},
	
	getCapabilityList : function() {
		return this._capabilityList;
	},
	
	setCapabilityList : function(capabilityList) {
		this._capabilityList = capabilityList;
	},
	
	getMainPaperList : function() {
		return this._mainPaperList;
	},
	
	setMainPaperList : function(mainPaperList) {
		this._mainPaperList = mainPaperList;
	}
	
};

$(document).ready(function() {
	new YP.main();
});

body {
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

.left {
	float: left;
}

.right {
	float: right;
}

.cf:after {
	display: block;
	content: "";
	clear: both;
}

.hide {
	display: none;
}

.icon {
	height: 14px;
	width: 14px;
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
	background-repeat: no-repeat;
}

.icon-about,
.icon-contact {
	background-image: url("http://app.linkdata.org/asset/c0b5a191.png");
	margin-right: 0px;
}

.icon-list,
.icon-user,
.icon-comment,
.icon-briefcase,
.icon-envelope {
	background-image: url("http://app.linkdata.org/asset/d84209e9.png");
}

.icon-about {
	background-position: -96px -96px;
}

.icon-contact {
	background-position: -72px 0;
}

.icon-briefcase {
	background-position: -432px -144px;
}

.icon-envelope {
	background-position: -72px 0;
}

.icon-comment {
	background-position: -240px -120px;
}

.icon-user {
	background-position: -168px 0;
}

.icon-list {
	background-position: -264px -24px;
	margin-top: 3px;
}

#pageContainer {
	background-color: #FFF38C;
	min-width: 940px;
	width: 100%;
}

#pageContainer .body {
	min-height: 700px;
	text-align: center;
}

#pageContainer .header {
	background: #999999; /* Old browsers */
	background: -moz-linear-gradient(top,  #999999 0%, #888888 11%, #666666 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(11%,#888888), color-stop(100%,#666666)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #999999 0%,#888888 11%,#666666 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #999999 0%,#888888 11%,#666666 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #999999 0%,#888888 11%,#666666 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #999999 0%,#888888 11%,#666666 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
	-moz-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.4);
	box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.4);
}

#pageContainer .footer {
	background: #999999; /* Old browsers */
	background: -moz-linear-gradient(top,  #999999 0%, #888888 11%, #666666 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(11%,#888888), color-stop(100%,#666666)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #999999 0%,#888888 11%,#666666 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #999999 0%,#888888 11%,#666666 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #999999 0%,#888888 11%,#666666 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #999999 0%,#888888 11%,#666666 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
}

#pageContainer .body .bodyContainer {
	width: 940px;
}

#pageContainer .header .headerContent {
	width: 900px;
}

#pageContainer .header,
#pageContainer .footer {
	background-color: #999999;
	height: 50px;
	color: #FFFFFF;
	text-align: center;
}

#pageContainer .header .headerContent {
	margin-left: auto;
	margin-right: auto;
}

#pageContainer .header .headerContent .contact,
#pageContainer .header .headerContent .about,
#pageContainer .header .headerContent .pageTitle {
	font-size: 22px;
	font-weight: bold;
	text-shadow: 0 2px 3px #555555;
}

#pageContainer .header .headerContent .pageTitle{
	cursor: pointer;
	margin: 7px 0 0 0;
}

#pageContainer .header .headerContent .contact,
#pageContainer .header .headerContent .about{
	cursor: pointer;
	margin: 7px 0 0 20px;
}

#pageContainer .header .headerContent .contact a,
#pageContainer .header .headerContent .about a {
	text-decoration: none;
	color: #FFFFFF;
}

#pageContainer .body .bodyContainer {
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

#pageContainer .body .bodyContainer .searchBox {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	background: #FFF;
	width: 500px;
	margin: 50px auto;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 4px 15px;
	-moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
	-webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
}

#pageContainer .body .bodyContainer .searchBox #keyword {
	width: 470px;
	font-size: 1.8em;
	line-height: 100%;
	float: left;
	border: none;
}

#pageContainer .body .bodyContainer .searchBox input:focus {
	border: none;
	outline:none;
}

#pageContainer .body .bodyContainer .searchBox .searchImage {
	vertical-align: middle;
	cursor: pointer;
	padding: 5px 0;
    width: auto;
}

#pageContainer .body .bodyContainer .showAllButton {
	margin: 0;
	padding: 10px;
	font-size: 1.4em;
	color: #666666;
	cursor: pointer;
	text-decoration: underline;
}

#pageContainer #infoBox {
	margin: 0 20px;
}

#pageContainer #infoList .info {
	margin: 10px 0;
	padding: 20px;
	text-align: left;
	background-color: #FFFFFF;
}

#pageContainer #infoList .error {
	text-align: center;
}

#pageContainer #infoList .info .tagList {
	width: 650px;
}

#pageContainer #infoList .info .highlight {
	color: #FF0000;
}

#pageContainer .bodyContainer .moreInfo,
#pageContainer #infoList .info {
	border: 1px solid #666666;
	border-radius: 10px;
}

#pageContainer #infoList .info .profileImageArea {
	margin-right: 20px;
	min-width: 70px;
}

#pageContainer #infoList .info .profileImageArea .profileImage {
	width: 70px;
	border: solid 1px #BBB;
	background-color: #fff;
	padding: 2px;
}

#pageContainer #infoList .info .profileInfoArea {
	width: 750px;
}

#pageContainer #infoList .info .profileInfoArea .name {
	font-size: 1.5em;
	font-weight: bold;
}

#pageContainer #infoList .info .profileInfoArea .orgName {
	margin-right: 15px;
}

#pageContainer #infoList .info .profileInfoArea .achievement,
#pageContainer #infoList .info .profileInfoArea .homePage,
#pageContainer #infoList .info .profileInfoArea .email {
	text-decoration: underline;
	color: #CCB400;
}

#pageContainer #infoList .info .profileInfoArea .achievement:hover,
#pageContainer #infoList .info .profileInfoArea .homePage:hover,
#pageContainer #infoList .info .profileInfoArea .email:hover {
	text-decoration: none;
}

#pageContainer #infoList .info .profileInfoArea .tag {
	background-color: #FFFCE2;
	border: 1px solid #CCB400;
	color: #CCB400;
	margin: 3px 3px 3px 0;
	padding: 0 3px;
	border-radius: 5px;
	cursor: pointer;
}

#pageContainer #infoList .info .profileInfoArea .expandAll{
	background-color: #DEC400;
	border: 1px solid #CCB400;
	border-radius: 5px;
	color: #FFFFFF;
	font-weight: bold;
	padding: 0 5px;
	margin: 3px 3px 3px 0;
	cursor: pointer;
}

#pageContainer #infoList .info .profileInfoArea .mainPaper {
	max-width: 700px;
	margin: 0 0 7px;
}

#pageContainer .bodyContainer .moreInfo {
	margin: 20px 0;
	padding: 10px;
	background-color: #CCCCCC;
	color: #666666;
	font-weight: bold;
	cursor: pointer;
}

#pageContainer .bodyContainer .dlExcel {
	margin: 20px;
	display: block;
}

#pageContainer .bodyContainer .dlExcel a {
	color: #666666;
}

#pageContainer .bodyContainer .dlExcel a:hover {
	font-weight: bold;
}

<div id="pageContainer">
	<div class="header">
		<div class="headerContent cf">
			<div class="pageTitle left">横浜オープンデータハッカソン参加者イエローページ</div>
			<div class="contact right">
				<i class="icon icon-contact"></i>
				<a href="mailto:ocean3fish@gmail.com">Contact</a>
			</div>
			<div class="about right">
				<i class="icon icon-about"></i>
				<a href="http://app.linkdata.org/run/app1s176i?key=11257add755bf4c61874dffd4363b55ee16b1c187ec8469dd2e54ce4d99904a73d1a2314a559fd85&tab=readme"
					target="_top">About</a>
			</div>
		</div>
	</div>
	<div class="body">
		<div class="bodyContainer">
			<div>
				<span class="searchBox">
					<input id="keyword" type="text"/>
					<img class="searchImage" src="http://app.linkdata.org/asset/95f23270.png"/>
				</span>
				<span class="showAllButton">Show All</span>
			</div>
			<div id="infoBox">
				<div id="infoList"></div>
				<div class="moreInfo">参加者をもっと見る..</div>
			</div>
			<span class="dlExcel">
				こちらのスプレッドシートから参加者情報を追加できます→ <a href="https://docs.google.com/spreadsheet/ccc?key=0AswBe-oIvKzndFk4bnVraGdHR3hPNnpPanBiREM4T3c" target="_blank">GoogleDriveで開く</a>
			</span>
		</div>
	</div>
	<div class=footer></div>
</div>

このページでは、横浜オープンデータハッカソンの参加者リストを掲載しています。

検索ボックスにキーワードを入力すると、人物を

名前
所属
メールアドレス
持っているスキル

で検索することができます。

Created by S.Shimoyama

Fork this app as your new one download

Web Search

Contributor Send Message	Sayoko Shimoyama
Forked from (Parent App)	DeveloperScines 's RIKEN Bioinformatician Yellow Page
Run count	492
Website
License
Fork count	2
Created date	Jan 20, 2013
Last update date	Jan 26, 2013

Forked from (Parent App)

RIKEN Bioinformatician Yellow Page Contributor: DeveloperScines Update: Feb 1, 2013 600 runs

Forked (Child App)

forked:Yokohama Opendata hackathon's Participants Yellow Page Contributor: 大石康晴 Update: Dec 13, 2013 144 runs

千葉県流山市議会議員のイエローページ Contributor: Sayoko Shimoyama Update: Feb 20, 2013 379 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: Jan 31, 2013
373 Downloads
,

2 Applications

participant_list
Add New Data

News Feed

linkdata.org に関するツイート

Publish your application as JavaScript

that mashes up the Linked Open Data

Application Information