https://www.billboard-japan.com/common/js/chart_insight/global/mod…/request/chartRequest.js?date=202510301000

1'use strict';
2
3//------------------------------------------------------------
4// 引数のデータ元(datapoint)とパラメータ(params)を元にchart.jsonをリクエストし、app.chartJsonに格納。
5// その後コールバック(callback)があれば実行。
6//------------------------------------------------------------
7app.chartRequest = function (datapoint, params, callback) {
8  if (app.chartJqxhr) app.chartJqxhr.abort(); // 二重リクエスト防止
9
10  const url = datapoint;
11  // const url = `${app.domain}/${datapoint}/chart.json?${params}`;
12
13  $('body').addClass('-loading');
14
15  app.chartJqxhr = $.ajax({
16    type: 'GET',
17    url: url,
18    xhrFields: { withCredentials: true },
19    success: function (result) {
20      let d = new $.Deferred();
21      app.chartJson = result;
22
23      // 重複回避
24      $('body').removeClass('-loading');
25
26      // データ取得数0の場合
27      if (result.length === 0) {
28        let v1_y = $priodDate2.find('.w_year').val();
29        let v1_m = $priodDate2.find('.w_month').val() - 1;
30        let v1_w = $priodDate2.find('.w_week').val();
31        let v2_y = $priodDate3.find('.w_year').val();
32        let v2_m = $priodDate3.find('.w_month').val() - 1;
33        let v2_w = $priodDate3.find('.w_week').val();
34        const date1 = new Date(v1_y, v1_m, v1_w);
35        const date2 = new Date(v2_y, v2_m, v2_w);
36        if (date1 > date2) {
37          return alert('日付を正しく選択してください');
38        }
39      }
40
41      // テーブルヘッダーのdata属性に入っているユーザーステートを取得
42      let dataDate = $rankingNav.attr('data-date'); // 「表示週」の日付
43      let dataFrom = $rankingNav.attr('data-from'); // 「表示期間」の始まり

44      let dataTo = $rankingNav.attr('data-to'); // 「表示期間」の終わり
45      let dataSort = $rankingNav.attr('data-act'); // 並び順
46
47      if ($rankingWrap.hasClass('show-point')) app.rank_or_point = 'point'; // .ranking-sct-wrapが.show-pointクラスを持っていたらポイント表示モードに
48
49      if (dataSort === 'list-rank') dataSort = '';
50      if (dataSort === 'list-chartin') dataSort = 'chartin';
51
52      // 2025/1 配列処理効率化
53      app.sorts.forEach((sort, index) => {
54        if (index !== 0) {
55          if (dataSort === 'list-index' + index) {
56            dataSort = sort.id;
57          }
58        }
59      });
60
61      const paramDate = dataDate === '' ? '' : `&date=${app.dateFormat(dataDate)}`;
62      const paramFrom = dataFrom === '' ? '' : `&from=${app.dateFormat(dataFrom)}`;
63      const paramTo = dataTo === '' ? '' : `&to=${app.dateFormat(dataTo)}`;
64      const paramSort = dataSort === '' ? '' : `&sort=${dataSort}`;
65
66      for (let i = 0; i < result.length; i++) {
67        // YouTubeサムネイルのソース作成(YouTubeIDがなければダミーに)
68        let youtubeSrc = ''; // YouTubeソース
69        if (result[i].youtubeid != null) {
70          youtubeSrc = `<a href="#" class="yt-show" data-id="${result[i].youtubeid}"><img src="https://img.youtube.com/vi/${result[i].youtubeid}/1.jpg" alt="" width="120" height="80"></a>`;
71        } else {
72          youtubeSrc = `<a href="#" class="yt-show -noId"><img src="/common/img/chart_insight/responsive/dummy_youtube.jpg" alt="" width="120" height="80"></a>`;
73        }
74
75        const values = {
76          url: `/chart_insight_global/detail${app.extension}?main=${result[i].id}${paramDate}${paramFrom}${paramTo}${paramSort}#rank_or_point=${app.rank_or_point}`,
77          title: result[i].title === undefined ? result[i].artist : result[i].title, // insight_artistリクエスト時はタイトルにアーティスト名を入れる(グローバル未使用)
78          artist: result[i].artist,
79          youtubeSrc: youtubeSrc,
80          arrowSrc: app.checkRankArrow(app.checkRankLimit(result[i].rank_chart), app.checkRankLimit(result[i].rank_chart_prev)),
81          chartinNumber: result[i].chartin_number,
82
83          rankPrev: app.checkRankLimit(result[i]['rank_chart_prev']),
84          rankChart: app.checkRankLimit(result[i]['rank_chart']),
85
86          pointPrev: app.checkPointLimit(result[i]['point_chart_prev']),
87          pointChart: app.checkPointLimit(result[i]['point_chart']),
88        };
89
90        function capitalize(str) {
91          if (typeof str !== 'string' || !str) return str;
92          return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
93        };
94
95        // 2025/1 配列処理効率化
96        // トップのHTMLで使うrankIndexとpointIndexを生成
97        app.sorts.forEach((sort, index) => {
98          if (index !== 0) {
99            values[`rank${capitalize(sort.id)}`] = app.checkRankLimit(result[i][`rank_${sort.id}`]);
100            values[`point${capitalize(sort.id)}`] = app.checkPointLimit(
101              result[i][`point_${sort.id}`]
102            );
103          }
104        });
105
106        const tbodyTemplate = Handlebars.compile($('#tbody-template').html()); // 各指標(国)の最新週順位テンプレート作成
107        $rankCont.append(tbodyTemplate(values)); // テンプレートにデータを当てはめてHTMLを出力
108
109        if (i === result.length - 1) d.resolve(); // 非同期処理の成功
110      }
111
112      // 並び替えた指標によって曲の順位クラスを付与
113      $rankCont.find('.ranking-list > li:not(.list-rank,.list-ttl,.list-chartin)').each(function () {
114        // 曲の順位の数値を取得
115        const num = Number($(this).find('span.rank').text());
116        //  1位、2位〜10位、11位〜20位、21位〜の順位によって見た目を変える
117        if (num === 1) $(this).addClass('li-rank1');
118        if (num > 1 && num < 11) $(this).addClass('li-rank2');
119        if (num > 10 && num < 21) $(this).addClass('li-rank3');
120      });
121
122      // リクエスト完了後処理。
123      d.then(function () {
124        if (callback !== undefined) callback(); // コールバック実行
125
126        const actClassName = `.${$rankingNav.attr('data-act')}`; // 並び替え中の指標・国をクラス名に
127        $document.find(actClassName).addClass(CLASS_LIST.act); // 上記のクラス要素に.activeを付与
128
129        // チャート表示後にテーブル内スクロール位置を戻す
130        $rankSct.scrollLeft(tableScrollLeft);
131        $rankingTtl.scrollLeft(tableScrollLeft);
132
133        $rankingWrap.css('min-height', '0'); // 高さをリセット
134
135        if (app.sp) $('.ranking-sct').scrollLeft(spScrollPos); // スマホのスクロール位置を戻す
136        if (initFlag) initFlag = false; // 初期状態フラグ
137
138        app.changeUrlCsv(`${paramDate}${paramFrom}${paramTo}${paramSort}`); // 「CSVダウンロード」ボタンのURLを変更
139        app.changeUrlSns(`${paramDate}${paramFrom}${paramTo}${paramSort}`); // SNSシェアボタンのURLを変更
140
141        // position: stickyのIE向け処理
142        if (!detectSticky() && ieInit) {
143          new StickyState(document.querySelector('.ranking-ttl-wrap'));
144          ieInit = false;

145        }
146      });
147    },
148    error: function () {
149      console.error(`error ${url}`);
150      $loadTgt.removeClass('inview');
151    },
152  });
153};