https://global.canon/01cmn/isfw/client_content/i-search/js/search_api.js

1// IE対応
2if(!Object.entries){
3  Object.entries = function(obj){
4    var ownProps = Object.keys(obj);
5    var i = ownProps.length;
6    var resArray = new Array(i); // preallocate the Array
7    while(i--){
8      resArray[i] = [ownProps[i], obj[ownProps[i]]];
9    }
10    return resArray;
11  };
12}
13
14// --------------------------------------------------
15//  検索APIのリクエストURL
16// --------------------------------------------------
17let searchApiUrl = 'https://search-canon.dga.jp/';
18
19// --------------------------------------------------
20//  検索実行処理
21// --------------------------------------------------
22function search_exec(set_hist){
23  // フラグ初期値の設定
24  if(typeof set_hist === 'undefined'){
25    set_hist = true;
26  }
27
28  // 検索入力の取得
29  let request_param = getRequestPrameters();
30
31  // リクエストURLの作成
32  let request_url = searchApiUrl + request_param;
33
34  // リクエスト実行＆結果表示
35  request(request_url);
36
37  // 入力履歴の設定
38  if(set_hist){
39    history.pushState("", "", request_param);
40  }
41}
42
43// --------------------------------------------------
44//  リクエストパラメータの作成
45// --------------------------------------------------
46function getRequestPrameters(){
47  // フォームの入力内容をパラメータに変換
48  form_input = $("form[name='iSearchForm']").serialize();
49
50  // 先頭に?を付与
51  request_param = "?" + form_input;
52
53  return request_param;
54}
55
56// --------------------------------------------------
57//  リクエスト実行
58// --------------------------------------------------
59function request(request_url){
60
61  // ローディング表示
62  $(".loader_wrapper").fadeIn();
63
64  // リクエスト実行
65  $.ajax({
66    url: request_url,
67    type: 'get',
68    dataType: 'json',
69    cache: false,
70    async: true,
71    crossDomain: true
72  })
73  .done(function(data, textStatus, jqXHR){
74    if(data.response_code == 200){
75      // レスポンスの表示
76      display(data);
77    }
78  })
79  .fail(function(jqXHR, textStatus, errorThrown){
80    // TODO:出力クリア処理
81    console.log('ajax fail');
82  })
83  .always(function( jqXHR, textStatus ){
84    $(".loader_wrapper").fadeOut();
85  });
86}
87
88// --------------------------------------------------
89//  レスポンスの表示
90// --------------------------------------------------
91function display(response){
92  let value;
93
94  // 基本情報の表示
95  $('[data="search_info-kw"]').text(response.search_info.kw);
96  $('[data="search_info-current_page"]').text(response.search_info.current_page);
97  $('[data="search_info-search_result_num"]').text(response.search_info.search_result_num);
98  $('[data="search_info-start_page_num"]').text(response.search_info.start_page_num);
99  $('[data="search_info-end_page_num"]').text(response.search_info.end_page_num);
100  $('input[name="sid"]').val(response.search_info.sid);
101
102  // 関連コンテンツの表示
103  let relation_container = $(".isfw_recommend");
104  let relation_dom = $(".isfw_recommend .search_results.dummy");
105  $('.isfw_recommend .search_results:not(".dummy")').remove();
106  if(response.related_contents.length > 0){
107    for(let key in Object.entries(response.related_contents)){
108      value = response.related_contents[key];
109      // ベースのDOMをコピー
110      let temp_dom = relation_dom.clone();
111      // 値をセットして表示
112      temp_dom.find('[data="related_contents-url"]').attr("href", value.url);
113      temp_dom.find('[data="related_contents-image_url"]').attr("src", value.image_url);
114      temp_dom.find('[data="related_contents-comment"]').text(value.comment);
115      temp_dom.removeClass("dummy");
116      temp_dom.appendTo(".recommend-content");
117    }
118    relation_container.removeClass("dummy");
119  }else{
120    relation_container.addClass("dummy");
121  }
122
123  // キーワードランキング
124  let ranking_container = $(".isfw_kwrank");
125  let ranking_dom = $(".isfw_kwrank .kwrank-item.dummy");
126  $('.isfw_kwrank .kwrank-item:not(".dummy")').remove();
127  if(response.keyword_ranking.length > 0){
128    for(let key in Object.entries(response.keyword_ranking)){
129      value = response.keyword_ranking[key];
130      // ベースのDOMをコピー
131      let temp_dom = ranking_dom.clone();
132      // 値をセットして表示

133      temp_dom.find('[data="keyword_ranking-rank"]').text(value.rank);
134      temp_dom.find('[data="keyword_ranking-rank_word"]').text(value.rank_word);
135      if(value.rank <= 3){
136        temp_dom.addClass("kwrank-no" + value.rank);
137      }
138      temp_dom.removeClass("dummy");
139      temp_dom.appendTo(".kwrank-list");
140    }
141    ranking_container.removeClass("dummy");
142  }else{
143    ranking_container.addClass("dummy");
144  }
145
146  // もしかしてワード
147  let predict_container = $(".isfw_predict_word");
148  let predict_dom = $(".isfw_predict_word .search_word-item.dummy");
149  $('.isfw_predict_word .search_word-item:not(".dummy")').remove();
150  if(response.predicted_words.length > 0){
151    for(let key in Object.entries(response.predicted_words)){
152      value = response.predicted_words[key];
153      // ベースのDOMをコピー
154      let temp_dom = predict_dom.clone();
155      // 値をセットして表示
156      temp_dom.find('[data="predicted_words-predict_word"]').text(value.predict_word);
157      temp_dom.removeClass("dummy");
158      temp_dom.appendTo(".isfw_predict_word .search_word-list");
159    }
160    predict_container.removeClass("dummy");
161  }else{
162    predict_container.addClass("dummy");
163  }
164
165  // 関連検索語
166  let related_word_container = $(".isfw_related_word");
167  let related_word_dom = $(".isfw_related_word .search_word-item.dummy");
168  $('.isfw_related_word .search_word-item:not(".dummy")').remove();
169  if(response.related_words.length > 0){
170    for(let key in Object.entries(response.related_words)){
171      value = response.related_words[key];
172      // ベースのDOMをコピー
173      let temp_dom = related_word_dom.clone();
174      // 値をセットして表示
175      temp_dom.find('[data="related_words-related_word"]').text(value.related_word);
176      temp_dom.removeClass("dummy");
177      temp_dom.appendTo(".isfw_related_word .search_word-list");
178    }
179    related_word_container.removeClass("dummy");
180  }else{
181    related_word_container.addClass("dummy");
182  }
183
184  // 検索結果ヘッダー（検索前非表示化）
185  let result_container_header = $(".results-content-header");
186  if(response.search_results.length > 0){
187    for(let key in Object.entries(response.search_results)){}
188    result_container_header.removeClass("dummy");
189  }else{
190    result_container_header.addClass("dummy");
191  }
192
193  // 検索結果
194  let result_container = $(".results-content");
195  let result_dom = $(".results-content .search_results.dummy");
196  $('.results-content .search_results:not(".dummy")').remove();
197  let tss  = $("input[name='tss']").val();  // 画像サイズ
198  if(response.search_results.length > 0){
199    for(let key in Object.entries(response.search_results)){
200      value = response.search_results[key];
201      // ベースのDOMをコピー
202      let temp_dom = result_dom.clone();
203      // 値をセットして表示
204      // temp_dom.find('[data="search_results-title"]').text(value.title); (&amp;が表示されるため1行下の記述に変更)
205      temp_dom.find('[data="search_results-title"]').html(value.title);
206      temp_dom.find('[data="search_results-body"]').html(value.body);
207      temp_dom.find('[data="search_results-uri"]').text(value.uri);
208      temp_dom.find('[data="search_results-link"]').attr("href", value.link);
209      temp_dom.find('[data="search_results-image_url"]').attr("src", value.image_url);
210      temp_dom.find('[data="search_results-image_url"]').attr("width", tss.split("x")[0]);
211      temp_dom.find('[data="search_results-image_url"]').attr("height", tss.split("x")[1]);
212      temp_dom.find('[data="search_results-score"]').text(value.score);
213      temp_dom.find('[data="search_results-mdate"]').text(value.mdate);
214      temp_dom.removeClass("dummy");
215      temp_dom.appendTo(".results-content");
216    }
217    result_container.removeClass("dummy");
218  }else{
219    result_container.addClass("dummy");
220  }
221
222
223  // ページャー
224  let total    = response.search_info.search_result_num // 検索結果件数
225  let current  = $("input[name='page']").val();         // 現在のページ
226  let dispnum  = $("input[name='cpn']").val();          // 表示件数
227  let pagerlen = Math.ceil(total / dispnum);            // 合計ページ数
228  let pagermax = 5;                                     // 最大ページャー数
229
230  if(current == ""){
231    current = "1";
232  }
233
234  // ページャーの開始番号を設定
235  let start = 1;
236  if(pagerlen <= pagermax){
237    pagermax	=	pagerlen;
238  }else if(current <= Math.ceil(pagermax / 2)){
239
240  }else if(current > pagerlen - Math.ceil(pagermax / 2)){
241    start = pagerlen - pagermax + 1;
242  }else{

243    start = current - Math.ceil(pagermax / 2) + 1;
244  }
245
246  // ページャーのDOM
247  let pager_container = $(".isfw_pager");
248  let pager_dom = {};
249  pager_dom["number"]  = $(".isfw_pager .pager-item.number.dummy");
250  pager_dom["prev"]    = $(".isfw_pager .pager-item.first.dummy");
251  pager_dom["next"]    = $(".isfw_pager .pager-item.last.dummy");
252  pager_dom["current"] = $(".isfw_pager .pager-item.current.dummy");
253  $('.isfw_pager .pager-list > .pager-item:not(".dummy")').remove();
254
255  // ページャー表示
256  if(response.search_info.search_result_num > 0){
257    // 前へ
258    let temp_dom = pager_dom["prev"].clone();
259    if(current == 1){
260      temp_dom.find('ul').addClass("disable");
261    }else{
262      temp_dom.find('ul').removeClass("disable");
263    }
264    temp_dom.removeClass("dummy");
265    temp_dom.appendTo(".isfw_pager .pager-list");
266
267    // 数字
268    for (let i = start; i < (start + pagermax); i++){
269      if(i == current){
270        temp_dom = pager_dom["current"].clone();
271      }else{
272        temp_dom = pager_dom["number"].clone();
273      }
274      temp_dom.find('[data="pager_info-number"]').text(i);
275      temp_dom.removeClass("dummy");
276      temp_dom.appendTo(".isfw_pager .pager-list");
277    }
278
279    // 次へ
280    temp_dom = pager_dom["next"].clone();
281    if(current >= pagerlen){
282      temp_dom.find('ul').addClass("disable");
283    }else{
284      temp_dom.find('ul').removeClass("disable");
285    }
286    temp_dom.removeClass("dummy");
287    temp_dom.appendTo(".isfw_pager .pager-list");
288
289    // 表示
290    pager_container.removeClass("dummy");
291  }else{
292    pager_container.addClass("dummy");
293  }
294}
295
296// --------------------------------------------------
297//  検索設定
298// --------------------------------------------------
299$(function(){
300  // 再検索時の変更対象DOM
301  let kw   = $("input[name='kw']");   // 検索ワード
302  let cpn  = $("input[name='cpn']");  // 表示件数
303  let page = $("input[name='page']"); // ページ番号
304  let ord  = $("input[name='ord']");  // 表示順
305  let tss  = $("input[name='tss']");  // 画像サイズ
306
307  // フォーム送信
308  $("form[name='iSearchForm']").on("submit", function(){
309    page.val("");
310    search_exec();
311  });
312
313  // キーワードランキング
314  $(".isfw_kwrank").on("click", "li", function(){
315    page.val("");
316    kw.val($(this).find("[data='keyword_ranking-rank_word']").text());search_exec();
317  });
318
319  // 関連検索語
320  $(".isfw_related_word").on("click", "li", function(){
321    page.val("");
322    kw.val($(this).find("[data='related_words-related_word']").text());search_exec();
323  });
324
325  // もしかしてワード
326  $(".isfw_predict_word").on("click", "li", function(){
327    page.val("");
328    kw.val($(this).find("[data='predicted_words-predict_word']").text());search_exec();
329  });
330
331  // 表示件数
332  $("select[name='cpn']").on("change", function(){
333    page.val("");
334    cpn.val($(this).val());search_exec();
335  });
336
337  // 並び替え
338  $("select[name='ord']").on("change", function(){
339    page.val("");
340    ord.val($(this).val());search_exec();
341  });
342
343  // 画像サイズ
344  $("select[name='tss']").on("change", function(){
345    page.val("");
346    tss.val($(this).val());search_exec();
347  });
348
349  // ページャー
350  $(".isfw_pager").on("click", "li.first ul:not('.disable')", function(){
351    let pagenum = page.val() == "" ? 1 : Number(page.val());
352    page.val(pagenum - 1);search_exec();
353  });
354  $(".isfw_pager").on("click", "li.number", function(){
355    page.val($(this).find("[data='pager_info-number']").text());search_exec();
356  });
357  $(".isfw_pager").on("click", "li.last ul:not('.disable')", function(){
358    let pagenum = page.val() == "" ? 1 : Number(page.val());
359    page.val(pagenum + 1);search_exec();
360  });
361
362});
363
364// --------------------------------------------------
365//  URLパラメータをフォームに反映
366// --------------------------------------------------
367function initialize_form(){
368  // URLのパラメータを取得
369  let parameter = location.search.substr("1").split("&");
370
371  // 各パラメータの内容をフォームに設定
372  $.each(parameter, function(index, data){
373    let param_name  = decodeURIComponent(data.split("=")[0]); // name属性
374    let param_value = decodeURIComponent(data.split("=")[1]); // value属性
375
376    // タグのセレクタを設定
377    let param_selector = "[name='" + param_name + "']";
378
379    // タグ名を取得
380    let node_name = $(param_selector)[0].nodeName;
381
382    // タグの種類を判定
383    let node_type = "";
384    if(node_name == "INPUT"){
385      node_type = $(param_selector).prop("type");
386    }else if(node_name == "SELECT"){
387      node_type = "select";
388    }
389
390    // タグに値を設定
391    if(node_type == "text" || node_type == "hidden" || node_type == "select"){
392      $(param_selector).val(param_value);
393    }else if(node_type == "radio" || node_type == "checkbox"){
394      $("[name='" + param_name + "'][value='" + param_value + "']").prop("checked", true);
395    }
396  });
397}
398
399// --------------------------------------------------
400//  履歴に残らないアンカーリンク
401// --------------------------------------------------
402function jump(id){
403  // フラグ初期値の設定
404  if(typeof id === 'undefined'){
405    id = "";
406  }
407
408  let position = 0;
409  if(id != ""){
410    position = $("#" + id).offset().top;
411  }
412  $(window).scrollTop(position);
413}
414
415// --------------------------------------------------
416//  初期設定
417// --------------------------------------------------
418$(function(){
419  // フォームの遷移を無効化
420  $('form').submit(function(event) {
421    // HTMLでの送信をキャンセル
422    event.preventDefault();
423  });
424
425  // パラメータが設定されている場合は最初に検索実行
426  if(location.search != ""){
427    initialize_form();
428    search_exec();
429  }
430
431  // ページ内でのブラウザバック時に検索実行
432  $(window).on("popstate", function(){
433    initialize_form();
434    search_exec(false);
435  });
436});