いきいきすざか OPEN_DATA

オープンデータだけで須坂市ホームページを作成してみました。スマートフォン利用を念頭に、「最新情報を見る」「担当部署を調べる」「連絡する」という機能に限定して作成しました。【更新履歴】2015.6.11市役所からのお知らせ表示件数を８件から10件に増やしました。自治会情報の検索機能をメニュー内に入れました。統計情報関係のレイアウト変更を行いました。2015.6.18統計情報レイアウトを変更しました。自治会情報の人口表示を追加しました。2015.10.7人口一覧へのリンクを追加しました。2015.10.29市民バスへのリンクを追加しました。2015.11.16iphone等でセレクトボックスを選択する際に、画面が拡大されて元に戻らない現象を修正しました。2016.3.1要介護認定情報ほかへのリンクを追加しました。

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

//アコーディオン//
$('.accordion_dl dd').hide();
$('.accordion_dl dt').click(function(){
    $(this).toggleClass("active");  
    $(this).siblings("dt").removeClass("active");
    $(this).next("dd").slideToggle();
    $(this).next("dd").siblings("dd").slideUp();
});

//RSS取得//
//google.load("feeds", "1");
function initialize() {
	var ti = "", li = "";
	$.ajax({
		url: 'https://opendata.city.suzaka.nagano.jp/rss/suzaka.xml',
		async: true,
		cache: false,
		dataType:"xml",
		success: function(xml){
			$(xml).find('item').each(function(){
				ti = $(this).find('title').text();
				li = $(this).find('link').text();
				var title = '<li><a href="' + li + '"\ target=_blank>' + ti + '</a></li>';
				$('#feed').append('<li class="post"><ul>' + title + '</ul></li>');
			});
		}
	});
}
google.setOnLoadCallback(initialize);

//単語検索//
if (!KOW) {
	var KOW = {};
}

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

KOW.main.prototype = {
	
	_infoList : null,
	_property : null,
	_subjectList : null,
	
	_cons : {
		MAX_ITEM_COUNT			: 300,
		INFO_SELECTOR			: ".info",
		KEY_WORD_SELECTOR		: "#keyword",
		INFO_LIST_SELECTOR		: "#infoList",
		TAG_SELECTOR			: ".tag",
		EXPAND_ALL_SELECTOR		: ".expandAll",
		EXTRA_INFO_SELECTOR		: ".extraInfo",
		SEARCH_IMAGE_SELECTOR	: ".searchImage",
		PAGE_TITLE_SELECTOR		: ".pageTitle",
		
	},
	
	_init : function() {
		this._infoList = [];
		this._property = new KOW.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 KOW.info();
			info.setName(LinkData.getObjects(workId, fileName, subject, self._property.getNameProperty())[0]);
			info.setKana(LinkData.getObjects(workId, fileName, subject, self._property.getKanaProperty())[0]);
			info.setTel(LinkData.getObjects(workId, fileName, subject, self._property.getTelProperty())[0]);
			info.setMail(LinkData.getObjects(workId, fileName, subject, self._property.getMailProperty())[0]);
			info.setFax(LinkData.getObjects(workId, fileName, subject, self._property.getFaxProperty())[0]);
			info.setUrl(LinkData.getObjects(workId, fileName, subject, self._property.getUrlProperty())[0]);
			info.setWork(LinkData.getObjects(workId, fileName, subject, self._property.getWorkProperty())[0]);
			self._infoList.push(info);
		}
	},
	
	_initView : function() {
	
	},
	
	_initListener : function() {
		this._initPageTitleListener();
		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);
		});
	},
	_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: 1,
			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 KOW.info();
			info.setName(LinkData.getObjects(workId, fileName, subject, self._property.getNameProperty())[0]);
			info.setKana(LinkData.getObjects(workId, fileName, subject, self._property.getKanaProperty())[0]);
			info.setTel(LinkData.getObjects(workId, fileName, subject, self._property.getTelProperty())[0]);
			info.setMail(LinkData.getObjects(workId, fileName, subject, self._property.getMailProperty())[0]);
			info.setFax(LinkData.getObjects(workId, fileName, subject, self._property.getFaxProperty())[0]);
   	        info.setUrl(LinkData.getObjects(workId, fileName, subject, self._property.getUrlProperty())[0]);
            info.setWork(LinkData.getObjects(workId, fileName, subject, self._property.getWorkProperty())[0]);
			list.push(info);
		}
		return list;
	},
	
	_getMatchWordListByKeyword : function(keyword) {
		
		var self = this, list = [];
		var infoList = self._getInfoListByIndex(2, 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.getKana().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getKana(), list)) {
				list.push(info.getKana());
			} 
			if (info.getTel().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getTel(), list)) {
				list.push(info.getTel());
			} 
			if (info.getUrl().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getUrl(), list)) {
				list.push(info.getUrl());
			}
			if (info.getMail().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getMail(), list)) {
				list.push(info.getMail());
			}
            if (info.getFax().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getFax(), list)) {
				list.push(info.getFax());
		    }
		    if (info.getWork().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getWork(), list)) {
				list.push(info.getWork());
			}
		});
		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.getKana().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getTel().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getUrl().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getMail().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getFax().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getWork().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='profileInfoKana left'>";
			sb[sb.length] = ""+"<div class='name'>" +self._getHighLightKeywordHtml(info.getName(), keyword) +"<br/>(" + self._getHighLightKeywordHtml(info.getKana(), keyword) +")<br/>TEL:<a href=tel:" + self._getHighLightKeywordHtml(info.getTel(), keyword) + ">" + self._getHighLightKeywordHtml(info.getTel(), keyword)+ "</a><br/>FAX:" + self._getHighLightKeywordHtml(info.getFax(), keyword)  +"<br/>E-MAIL:<a href=mailto:" + self._getHighLightKeywordHtml(info.getMail(), keyword) + ">" + self._getHighLightKeywordHtml(info.getMail(), keyword)+ "</a><br/>URL:<a href=" + self._getHighLightKeywordHtml(info.getUrl(), keyword) + "\ target=_blank>こちらをクリック</a>";
						sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='cf'>";
			sb[sb.length] = "<div class='expandAll right'>&gt;&gt; もっと見る</div>";
			sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='extraInfo hide'>";
			if (info.getWork().trim().length != 0) {
				sb[sb.length] = "<br><span class='nextTo'>" + self._getHighLightKeywordHtml(info.getWork(), keyword) + "</span>";
			}
　　　　　　　
			sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='cf'>";
			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'>見つかりませんでした</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("");
	}
};

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

KOW.property.prototype = {
	
	_workId : null,
	_fileName : null,
	_nameProperty : null,
	_kanaProperty : null,
	_telProperty : null,
	_mailProperty : null,
	_faxProperty : null,
	_urlProperty : null,
	_workProperty : null,

_cons : {
		NAME			: "department_name",
		KANA			: "kana",
		TEL				: "telephone_number",
		FAX			    : "fax_number",
		MAIL			: "email_address",
		URL			    : "page_url",
		WORK		    : "work"

},
	
	_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.NAME) > -1) {
						self._nameProperty = propValue;
					} else if (propValue.indexOf(self._cons.KANA) > -1) {
						self._kanaProperty = propValue;
					} else if (propValue.indexOf(self._cons.TEL) > -1) {
						self._telProperty = propValue;
					} else if (propValue.indexOf(self._cons.MAIL) > -1) {
						self._mailProperty = propValue;
					} else if (propValue.indexOf(self._cons.FAX) > -1) {
						self._faxProperty = propValue;
					} else if (propValue.indexOf(self._cons.URL) > -1) {
						self._urlProperty = propValue;
					} else if (propValue.indexOf(self._cons.WORK) > -1) {
						self._workProperty = propValue;
					}
				});
				return false;
			});
			return false;
		});
	},
	
	getWorkId : function() {
		return this._workId;
	},
	
	getFileName : function() {
		return this._fileName;
	},
	
	getNameProperty : function() {
		return this._nameProperty;
	},
	
	getKanaProperty : function() {
		return this._kanaProperty;
	},
	
	getTelProperty : function() {
		return this._telProperty;
	},
	
	getMailProperty : function() {
		return this._mailProperty;
	},
	
	getFaxProperty : function() {
		return this._faxProperty;
	},
	
	getUrlProperty : function() {
		return this._urlProperty;
	},
	
	getWorkProperty : function() {
		return this._workProperty;
	}
};

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

KOW.info.prototype = {
	_name : null,
	_kana : null,
	_tel : null,
	_mail : null,
	_fax : null,
	_url : null,
    _work : null,

_init : function() {},
	
	getName : function() {
		if (!this._name) {
			this._name = "";
		}
		return this._name;
	},
	
	setName : function(name) {
		this._name = name;
	},
	
	getKana : function() {
		if (!this._kana) {
			this._kana = "";
		}
		return this._kana;
	},
	
	setKana : function(kana) {
		this._kana = kana;
	},
	
	getTel : function() {
		if (!this._tel) {
			this._tel = "";
		}
		return this._tel;
	},
	
	setTel : function(tel) {
		this._tel = tel;
	},
	
	getMail : function() {
		if (!this._mail) {
			this._mail = "";
		}
		return this._mail;
	},
	
	setMail : function(mail) {
		this._mail = mail;
	},
	
	getFax : function() {
		if (!this._fax) {
			this._fax = "";
		}
		return this._fax;
	},
	
	setFax : function(fax) {
		this._fax = fax;
	},
	
	getUrl : function() {
		if (!this._url) {
			this._url = "";
		}
		return this._url;
	},
	
	setUrl : function(url) {
		this._url = url;
	},
	
	getWork : function() {
		if (!this._work) {
			this._work = "";
		}
		return this._work;
	},
	
	setWork : function(work) {
		this._work = work;
	}

};

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

//施設一覧//
//infoウィンドウの初期化
var currentwindow=null;

window.onload = function() {
//LinkDataからのデータ取得
	var fileValue = 'suzakacity_kind_of_work_section';
	var　tmp_a_data =  new Array();

$.each(LinkData.getWorks(), function(workKey, workValue) {
		$.each(LinkData.getFiles(workValue), function(fileKey, fileValue) {
			$.each(LinkData.getSubjects(workValue,fileValue),function(subjKey,subjValue) {
				var tmp_data = {}
				tmp_data["id"] = subjValue;
					$.each(LinkData.getProperties(workValue, fileValue), function(propKey, propValue) {
						$.each(LinkData.getObjects(workValue, fileValue, subjValue, propValue), function(objKey, objValue) {
							if(propValue == "http://linkdata.org/property/rdf1s2885i#department_name"){
								tmp_data["name"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#work"){
							tmp_data["work"] = objValue;	
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#telephone_number"){
							tmp_data["tel"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#fax_number"){
							tmp_data["fax"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#email_address"){
							tmp_data["mail"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#page_url"){
							tmp_data["url"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#post_number"){
							tmp_data["post"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#address"){
							tmp_data["address"] = objValue;
							} else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#lat"){
							tmp_data["lat"] = objValue;
							} else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#long"){
							tmp_data["long"] = objValue;
							} else if(propValue == "http://linkdata.org/property/rdf1s2885i#kana"){
							tmp_data["kana"] = objValue;
							} 
					});
				});
				tmp_a_data.push(tmp_data);
			});
		});
	});
	//全データ
	all_data = tmp_a_data;
	//課のデータを表示
	$(".selectka").append("<option value='-1' selected='selected'>部署を選択してください。         </option>");
	for (var i in all_data){
		if (all_data[i].name ){ 
                var all_id=all_data[i].name;

$(".selectka").append("<option value='"+ all_data[i].id +"'>" + all_data[i].name+ "</option>");
		}
		}

//課が選択、変更された時の処理
	$(".selectka").change(function() {
		//詳細データのリセット
		$("#result2").empty();
		
		//選択された課の詳細データの表示
		var sectionKaKey = $("option:selected", $(this)).val();
		if (sectionKaKey == -1) {
			//$("#result2").html("");
			return;
		}
		$("#result2").append();
		for (var i in all_data){
			var detail_c = sectionKaKey;
			if (all_data[i].id === detail_c){
				$("#result2").append("<br/><div>よみかた:" + all_data[i].kana + "<br/>TEL:" + "<a href=tel:" +　all_data[i].tel + ">" + all_data[i].tel + "</a><br/>" + "FAX:" + all_data[i].fax + "<br/>Mail:"  + "<a href=mailto:" + all_data[i].mail +  ">" + all_data[i].mail + "</a><br/>" + "URL:"+ "<a href="+ all_data[i].url +  "\ target=_blank>こちらをクリック" + "</a><br/>"+"〒:" + all_data[i].post + "　" +  all_data[i].address + "　" + "<a href=\"http://www.google.com/maps/?q=" + all_data[i].lat + "," + all_data[i].long + "\" target=_blank>（地図を見る）" + "</a>"+"<br/><br/></div>");
	}
		}
	});
}

//行政区一覧//
//infoウィンドウの初期化

// データをLinkDataから取得 
	var fileValue2 = 'suzakacity_gyoseiku';
	var workId = "rdf1s3230i";
	var　tmp_a_data_machi =  new Array();
	
	$.each(LinkData.getWorks(), function(workKey, workValue) {
		//$("#result3").append("<h3>Work: " + workValue + "</h3>");
		$.each(LinkData.getFiles(workValue), function(fileKey, fileValue2) {
			$.each(LinkData.getSubjects(workValue, fileValue2), function(subjKey, subjValue) {
				var tmp_data_machi = {}
				tmp_data_machi["id3"] = subjValue;
				$.each(LinkData.getProperties(workValue, fileValue2), function(propKey, propValue) {
					$.each(LinkData.getObjects(workValue, fileValue2, subjValue, propValue), function(objKey, objValue) {
						if(propValue == "http://imi.ipa.go.jp/ns/core/rdf#町名"){
							tmp_data_machi["machimei"] = objValue;
						}else if(propValue == "http://imi.ipa.go.jp/ns/core/rdf#カナ表記"){
							tmp_data_machi["machikana"] = objValue;
						}else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#lat"){
							tmp_data_machi["lat2"] = objValue;
						}else if(propValue == "http://www.w3.org/2003/01/geo/wgs84_pos#long"){
							tmp_data_machi["longitude2"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("area_community_hall")){
							tmp_data_machi["hall"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("elementary_school")){
							tmp_data_machi["e_sch"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("ｌower_secondary_school")){
							tmp_data_machi["l_sch"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("volunteer_fire_department")){
							tmp_data_machi["fire"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("larger_section")){
							tmp_data_machi["oaza"] = objValue;
						}else if(propValue == "http://imi.ipa.go.jp/ns/core/rdf#郵便番号"){
							tmp_data_machi["yubin"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("refuge")){
							tmp_data_machi["hinanjo"] = objValue;
						}else if(propValue == "http://imi.ipa.go.jp/ns/core/Core22.html#標準日付型"){
							tmp_data_machi["kijunbi"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("household")){
							tmp_data_machi["setai"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("total")){
							tmp_data_machi["total"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("male")){
							tmp_data_machi["male"] = objValue;
						}else if(propValue == "http://linkdata.org/property/rdf1s3230i#" + encodeURIComponent("female")){
							tmp_data_machi["female"] = objValue;
							
						}
					});
				});
				tmp_a_data_machi.push(tmp_data_machi);
			});
		});
	});

//全データ
	all_data_machi = tmp_a_data_machi;
	//自治会のデータを表示
	$(".selectmachi").append("<option value='-1' selected='selected'>自治会（町）を選んでください。</option>");
	for (var i in all_data_machi){
		if (all_data_machi[i].machimei ){ 
                var all_id3=all_data_machi[i].machimei;

$(".selectmachi").append("<option value='"+ all_data_machi[i].id3 +"'>" + all_data_machi[i].machimei+ "</option>");
		}
		}

//行政区が選択、変更された時の処理
	$(".selectmachi").change(function() {
		//詳細データのリセット
		$("#result3").empty();
		
		//選択された行政区の詳細データの表示
		var sectionmachiKey = $("option:selected", $(this)).val();
		if (sectionmachiKey == -1) {
			//$("#result3").html("");
			return;
		}
		$("#result3").append();
		for (var i in all_data_machi){
			var detail_c = sectionmachiKey;
			if (all_data_machi[i].id3 === detail_c){
				$("#result3").append("<br/><div>【読み方】:" + all_data_machi[i].machikana + "<br/>【大字】:" + all_data_machi[i].oaza + "<br/>【郵便番号】:" + all_data_machi[i].yubin+"<br/>(注：墨坂は382-0099、墨坂南は382-0098、臥竜は382-0028です)<br/>【小学校】:" + all_data_machi[i].e_sch + "<br/>" + "【中学校】:" + all_data_machi[i].l_sch + "<br/>【地域公民館】:"  +　all_data_machi[i].hall + "<br/>【消防団】:"+ all_data_machi[i].fire + "<br/>【避難所】:"  +　all_data_machi[i].hinanjo + "<br/>【人口（"  +　all_data_machi[i].kijunbi +"時点)】<br/>　世帯:"  +　all_data_machi[i].setai +"世帯<br/>　男性:"  +　all_data_machi[i].male +"人<br/>　女性:"  +　all_data_machi[i].female + "人<br/>　合計:"  +　all_data_machi[i].total + "人</div>");
				
// 地図センター緯度経度の初期値は「須坂市役所」
    
	var latlng = new google.maps.LatLng(all_data_machi[i].lat2,all_data_machi[i].longitude2);
    var myOptions = {
    zoom: 16,
    center: latlng,
	 mapTypeId: google.maps.MapTypeId.ROADMAP
    };
   var map = new google.maps.Map(document.getElementById("result4"), myOptions);

//* アイコン設定 *//
  var icon = new google.maps.MarkerImage('http://app.linkdata.org/asset/7c83d9be.png',
    new google.maps.Size(100,100),
    new google.maps.Point(0,0),
    new google.maps.Point(19,51)
  );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
     };
  var marker = new google.maps.Marker(markerOptions);
				
			
			}
		}
	});

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

.left {
	float: left;
}

.right {
	float: right;
}

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

.hide {
	display: none;
}

.nextTo {
	padding-right: 2em;
}

#pageContainer {
	background-color: #ffffcc;
	min-width: 100px;
	width: 100%;
	min-height: 500px;
	font-size:120%;
}

#pageContainer .body {
	height: auto;

}

#pageContainer .body .bodyContainer {
	width: 100%;
}

#pageContainer .header .headerContent {
	width: 100%;
}

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

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

#pageContainer .header .headerContent .contact,
#pageContainer .header .headerContent .about,
#pageContainer .header .headerContent .pageTitle {
	font-size: 140%;
	padding: 5px;
}

#pageContainer .header .headerContent .pageTitle{
	cursor: pointer;
	margin: 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 {
	height: auto;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#pageContainer .selectka {/* 部署選択セレクト */
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	background: #FFF;
	width: 100%;
	margin: 5px auto;
	border-radius: 5px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
	font-size:16px;
}
#pageContainer .body .selectmachi {/* 町選択セレクト */
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	background: #FFF;
	width: 100%;
	margin: 5px auto;
	border-radius: 5px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
	font-size:16px;
}

#pageContainer .body .bodyContainer .searchBox {/* 検索窓自体の設定 */
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	background: #FFF;
	width: 70%;
	margin: 2px auto;
	border-radius: 10px;
	padding: 5px 5px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
	font-size:16px;
}

#pageContainer .body .bodyContainer .searchBox #keyword { /* 検索窓内の設定 */
	width: 80%;
	font-size: 1.0em;
	line-height: 100%;
	float: left;
	border: none;
	font-size:16px;
}

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

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

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

#pageContainer #infoList .info { /* 情報ウィンド内の設定 */
	margin: 7px 7px;
	padding: 2px 5px;
	text-align: left;
	background-color: #FFFFFF;
	word-break:break-all;
}

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

#pageContainer #infoList .info .tagList {
	width: 100%;
}

#pageContainer #infoList .info .highlight {
	color: #0084F7;
}

#pageContainer .bodyContainer .moreInfo,
#pageContainer #infoList .info {
	border: 1px solid #666666;
	border-radius: 3px;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileImageArea {
	margin-right: 1px;
	min-width: 100px;
	position: relative;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileInfoArea {
	width: 100%;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileInfoArea .name {
	font-size: 1.0em;
	position: relative;
	word-wrap: break-word;
}

#pageContainer #infoList .info .profileInfoArea .orgName {
	margin-right: 3px;
	word-wrap: break-word;
}

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

#pageContainer #infoList .info .profileInfoArea .expandAll, 
#pageContainer #infoList .info .callButton {
	background-color: #F7DA00;
	border: 1px solid #E6CB00;
	border-radius: 5px;
	color: #FFFFFF;
	padding: 0 5px;
	margin: -20px 0 0 0;
	cursor: pointer;
	font-size: 0.9em;
}

#pageContainer #infoList .info .profileInfoArea .mainPaper {
	max-width: 80%;
	margin: 0 0 3px;
	word-wrap: break-word;
}

/* table幅の指定・隣接するセルのボーダーを重ねて表示 */
#contents table.style {
        width: 90%;
        border-collapse: collapse;
	    font-size: 1em;
}

/* thの指定 */
#contents table.style th {
        font-weight: normal;
　　　　 font-size: 1.0em;
        background-color: #F0F0F0;
        border:1px solid #BFBFBF;
        text-align: center;
        padding: 3px;
}

/* tr tdの指定 */
#contents table.style tr td {
        font-size: 1.0em;
        background-color: #FFFFFF;
        border:1px solid #BFBFBF;
        text-align: right;
        padding: 3px;
}

/* アコーディオンメニューの設定 */
section h1,
dt {
    background-color: #ffcccc;
    border-bottom: solid 1px #ffffff;
    margin-bottom: 1px;
    padding: 10px;
    color: #000000;
    cursor: pointer;
    position: relative;
	font-size:130%;
	text-align: left;
}

section h1:before,
dt:before {
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  background: #FFF;
}
 
section h1:after,
dt:after {
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -13px;
  background: #ffcccc;
}
 
section h1.active:before,
dt.active:before {
  margin-top: -2px;
}
 
section h1.active:after,
dt.active:after {
  margin-top: 3px;
}
 
section li,
dd {
    background-color: #ffffcc;
    border-bottom: solid 0px #D6D6D6;
    padding: 0px 0 8px 0px;
}
 
section li a {
    position: relative;
    display: block;
}
 
section li a:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 17px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #9CF;
}
 
section li a:after{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 22px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #F2F2F2;
}

ul {
  margin: 0; /* 上下左右のマージンを0 */
  padding: 0; /* 上下左右のパディングを0 */
}
li {
 list-style-type: none; /* リストマーカーを表示しない */ 
}

<div id="pageContainer">
	<div class="header">
		<div class="headerContent cf">
			<div class="pageTitle">いきいきすざか OPEN_DATA</div>
		</div>
	</div>
	<p>【開庁日】平日 8:30～17:15<br/>
       【休日】土曜日、日曜日、祝祭日、年末年始（12/29～1/3）<br/>
       【時間外窓口】<a href="https://www.city.suzaka.nagano.jp/contents/item.php?id=5930c1ac6aebe" target="_blank">こちらから</a>ご確認ください。</p>

<dl class="accordion_dl">
	<dt>　市役所からのお知らせ</dt>
	<dd>
				
		  <ul id="feed"></ul><br/>須坂市ホームページ<a href="http://www.city.suzaka.nagano.jp/" target="_blank">「いきいきすざか」</a></dd>
	<dt>　単語で担当課を調べる</dt>
      <dd><div class="body">
		  <div class="bodyContainer">
          <div>調べたい単語を入力してください
			<span class="searchBox">
					<input id="keyword" type="text" name="myext"/>
					<img class="searchImage" src="http://app.linkdata.org/asset/95f23270.png"/>
	            </span>	<br>
		</div>
		  <div id="infoBox">
			<div id="infoList"></div>
			  
		  </div>
		</div>
		</div>
	  </dd>
	<dt>　各課の連絡先を調べる</dt>
	  <dd><div class="body">
           <h3><div class="left"><select class="selectka"></select></div></h3><br/><br/>
           <div id="result2"></div>
          </div>
	  </dd>

<dt>　　須坂市の基本情報</dt>
	  <dd>
		  <a href="https://www.city.suzaka.nagano.jp/jinko/index.php" target="_blank">【人口と世帯】</a>	
<br/>
		  <a href="https://www.city.suzaka.nagano.jp/contents/item.php?id=59262f829d558" target="_blank">【須坂市の統計】</a>
	</dd>
	<dt>　　自治会（町）を調べる</dt>
	<dd><div class="body">
		<h3><div class="left"><select class="selectmachi"></select></div></h3><br/>
		  <div id="result3"></div>
	<style type="text/css">
      html { height: 60% }
	  body { height: 60%; width: 95%; margin: 3px; padding: 3px }
      #map_canvas { height: 60% }
   </style>
       <div id="result4" style="width:95%; height:100%"></div>
	  </div>
		</dd>
	<dt>　　オープンデータアプリ new!</dt>
	  <dd>オープンデータを利用したアプリをご紹介します。<br/><br/>
  	    <a href="http://app.linkdata.org/run/app1s1312i" target="_blank">【須坂市介護保険認定情報】NEW！</a>
		<br/>H18以降の各月介護保険認定情報が表示されるアプリ<br/>
		  <a href="http://app.linkdata.org/run/app1s1310i" target="_blank">【長野県内保険者別要介護認定率】NEW！</a>
		<br/>H18以降の県内保険者別で要介護認定率が比較できるアプリ<br/>
		  <a href="http://app.linkdata.org/run/app1s1311i" target="_blank">【長野県内保険者別平均要介護度】NEW！</a>
		<br/>H18以降の県内保険者別で平均要介護度が比較できるアプリ<br/>
   		<a href="http://app.linkdata.org/run/app1s1298i" target="_blank">【須坂市自治会別高齢化率】NEW！</a>
		<br/>H14以降の自治会（町）別の高齢化率がグラフ表示されるアプリ<br/>
		  <a href="http://app.linkdata.org/run/app1s1125i" target="_blank">【すざか市民バス】</a>
		<br/>市民バスのバス停情報が表示されるアプリ<br/>
		  <a href="http://app.linkdata.org/run/app1s1119i" target="_blank">【須坂市自治会別人口】</a>
		  <br/>S47以降の自治会（町）別の人口がグラフ表示されるアプリ<br/>
		<a href="http://app.linkdata.org/run/app1s1023i" target="_blank">【須坂市自治会（町）一覧】</a>
		  <br/>市内の自治会（町）の各種情報が表示されるアプリ<br/>
		<a href="http://app.linkdata.org/run/app1s728i" target="_blank">【須坂市避難場所】</a>
		  <br/>市内の避難所がGoogleMap上に表示されるアプリ<br/>
<a href="http://app.linkdata.org/run/app1s746i" target="_blank">【須高地域AED設置場所】</a>
		  <br/>市内のAED設置施設がGoogleMap上に表示されるアプリ<br/>
		<a href="http://app.linkdata.org/run/app1s978i" target="_blank">【須坂市どこでも図書館】</a>
		  <br/>市内で本を読めるスペースをご提供頂いている施設「どこでも図書館」が、GoogleMap上に表示されるアプリ<br/>
		<a href="http://app.linkdata.org/run/app1s903i" target="_blank">【クマ目撃情報】</a>
		  <br/>3年間のクマ出没情報がGoogleMap上に表示されるアプリ<br/>
<a href="http://app.linkdata.org/run/app1s889i" target="_blank">【須坂の歴史～できごとけんさく】</a>
		  <br/>紀元前から須坂市に関連がある出来事を検索できるアプリ<br/>
		<a href="http://app.linkdata.org/run/app1s846i" target="_blank">【須坂の歴史年表～すざかのできごと】</a>
		  <br/>紀元前から須坂市で起きた出来事を検索できるアプリ<br/>
		<a href="http://suzaka.5374.jp/" target="_blank">【5374(ゴミナシ).jp for Suzaka】</a>
		  <br/>「いつ、どのゴミが収集されているのか？」「どうやって捨てるのか？」がすぐに分かるアプリ<br/>
		</dd>

</dl>
	<div class="footer">このアプリは長野県須坂市のオープンデータ<br/>
		<a href="http://opendata.city.suzaka.nagano.jp/" target="_blank">
			須坂市役所業務一覧</a> を利用しています。</div>
</div>

Fork this app as your new one download

Web Search

Contributor Send Message	長野県須坂市
Run count	3730
Website
License
Fork count	2
Created date	Mar 16, 2015
Last update date	Nov 25, 2022

Forked (Child App)

すざか市民バス Contributor: 長野県須坂市 Update: Jun 24, 2020 1628 runs

すざか市民バス_仙仁線S10 Contributor: 長野県須坂市 Update: Oct 29, 2015 529 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: 長野県須坂市 Update: Nov 25, 2022
2822 Downloads
,

2 Applications

suzakacity_gyoseiku
須坂市役所業務一覧 Contributor: 長野県須坂市 Update: Apr 16, 2020
2945 Downloads
,

1 Applications

suzakacity_kind_of_work

suzakacity_kind_of_work_section

suzakacity_kind_of_work_unit
Add New Data

News Feed

linkdata.org に関するツイート

Publish your application as JavaScript

that mashes up the Linked Open Data

Application Information

いきいきすざか OPEN_DATA

Application

Forked (Child App)

News Feed