https://www.asahibeer.co.jp/enjoy/recipe/search/js/displayRecommendRecipes.js

1/*
2■使用例
3	<ul id="（対象のID）" style="right: 0px"></ul>
4	<script src="displayRecommendRecipes.js"></script>
5	<script>displayRecommendRecipes("（対象のID）")</script>
6
7 */
8
9// @param	string			id			elementId
10// @param	string			GET			基本、GETパラメータとなる
11// @param	integer|string	isWeekly	「今週のうまい」フラグ
12// @return	void						idの中にレシピリストを挿入
13function displayRecommendRecipes(id, GET, isWeekly) {
14	// @param	element		element
15	// @param	string		event	"on"なしのイベント
16	// @param	function	callback
17	// @return	event		IE8以下への互換
18	function setEvent(element, event, callback) {
19		return element.addEventListener?
20			element.addEventListener(event, callback):
21			element.attachEvent("on"+event, callback);
22	}
23
24	// @params	string	string
25	// @return	array
26	function decodeGETParams(string) {
27		GET = string.match(/^\?/)?
28			string.substring(1).split("&"): string.split("&");
29		params = new Array();
30		for(var i in GET) {
31			param = GET[i].split("=");
32			params[param[0]] = param[1];
33		}
34		return params;
35	}
36
37	// @params	array|object	obj
38	// @return	string
39	function encodeGETParams(obj) {
40		params = "?"
41		for(var i in obj) {
42			if(obj[i].length === 0) {
43				continue;
44			}
45			if(1 < params.length) {
46				params += "&";
47			}
48			params += i + "=" + obj[i];
49		}
50		return params;
51	}
52
53	// @params	string	recipexml	XMLフォーマットに類似するデータ
54	// @return	array[][]
55	function convertXMLToRecipeArray(recipexml) {
56		var items = recipexml.split("</RECIPE>");
57		var recipes = [];
58		var regex = /<(.*?)>(.*?)<\/.*?>/g;
59		for(var i = 0; i < items.length; i++) {
60			if(-1 === items[i].search("<RECIPE>")) {
61				continue;
62			}
63			recipes[i] = [];
64			while(matched = regex.exec(items[i])) {
65				recipes[i][matched[1]] = matched[2];
66				/*
67				usage: 
68					recipes[(int)]["RECIPE_CODE"]
69					recipes[(int)]["RECIPE_NAME"]
70					recipes[(int)]["RECIPE_IMAGE1"]
71				 */
72			}
73		}
74		return recipes;
75	}
76
77	// @params	string	url
78	// @params	string	content
79	// @params	string	className
80	// @params	string	target
81	// 		TODO: className含め、好きなだけ属性・値を入れたい
82	// @return	element	<a href="(url)" target="(target)">(content)</a>
83	function createAnchor(url, content, className, target) {
84		var anchor = document.createElement("a");
85		anchor.href = url;
86		anchor.innerHTML = content;
87		anchor.target = target;
88		anchor.setAttribute("class", className);
89		return anchor;
90	}
91
92	// @params	string[][]		recipes		convertXMLToRecipeArray()と併用
93	// @params	element			insertTo
94	// @return	void						string[].length分だけ挿入
95	function displayRecommendParts(recipes, insertTo) {
96		// insertToが存在しない場合
97		if(typeof insertTo == null) {
98			return;
99		}
100		for(var i = 0; i < recipes.length; i++) {
101			// PC用オススメ機能の構造に則っている
102			var li = document.createElement("li");
103			var div = document.createElement("div");
104			div.setAttribute("class", "img_recipe");
105			var p = document.createElement("p");
106			var img = document.createElement("img");
107			img.setAttribute("class", "op");
108			img.src = "/web-service/common/image_quality.psp.html?CMD=onAspect&PATH=/web-service/common/util/recipe/pic/"+recipes[i]["RECIPE_IMAGE1"]+"&W=134";
109			img.alt = recipes[i]["RECIPE_NAME"];
110			var href = "/enjoy/recipe/search/recipe.psp.html?CODE="+recipes[i]["RECIPE_CODE"];
111
112			div.insertBefore(createAnchor(href, img.outerHTML, "", "_blank"), null);
113			p.insertBefore(createAnchor(href, recipes[i]["RECIPE_NAME"], "top", ""), null);
114			li.insertBefore(div, null);
115			li.insertBefore(p, null);
116			insertTo.insertBefore(li, null);
117		}
118	}
119
120	/************************************************************
121	 * 		以下、本処理
122	 ************************************************************/
123	var xhr, connectTo;
124	if(window.XMLHttpRequest) {
125		xhr = new XMLHttpRequest;
126	} else {
127		xhr = new ActiveXObject("Microsoft.XMLHTTP");
128	}
129	connectTo = "/enjoy/recipe/search/recipexml.psp.html";
130	var locationGET = decodeGETParams(GET);
131	var params = new Array();
132	var sendGET, position;
133	for(var i in locationGET) {
134		switch(i) {
135			// カテゴリから
136			/*
137			case "FOOD":
138				params["RECIPE_FOOD_B_CODE"] = locationGET[i];
139			*/
140			// 検索文字列から
141			case "WORD":
142				params["RECIPE_WORD"] = locationGET[i];
143				break;
144			/*
145			case "WEEK_FLG": "",
146			*/
147		}
148	}
149	// 「今週のうまい」掲載フラグはGETから取得不可のため
150	// 外に出してしまっている
151	params["WEEK_FLG"] = isWeekly == 1? 1: 0;
152	sendGET = encodeGETParams(params);
153
154	xhr.onreadystatechange = function() {
155		if(xhr.readyState === 4 && xhr.status === 200) {
156			displayRecommendParts(
157				convertXMLToRecipeArray(xhr.responseText),
158				document.getElementById(id)
159			);
160		}
161	}
162	xhr.open("GET", connectTo+sendGET, false);
163	if(xhr.overrideMimeType) {
164		xhr.overrideMimeType("text/html; charset=shift_jis");
165	} else {
166		xhr.setRequestHeader("Content-Type", "text/html; charset=shift-jis");
167	}
168	xhr.send();
169}