https://www2.myjcom.jp/tv/magazine/js/index.js

1function trace(val){
2  //console.log(val);
3  //window.alert(val);
4}
5
6// accordion
7$(function(){
8  $('.accordion_header').click(function(){
9    $(this).next('.accordion_inner').slideToggle();
10    $(this).toggleClass("open");
11  });
12
13  // ユーザーエージェントを見てアプリかサイトか判別する
14  initSiteApp();
15
16  //  マガジン設定
17  setMagazine();
18  
19  //  JMAGAZINE読み込み
20  initJMagazineLanes();
21});
22
23/*--------------------------------------------------------------
24
25	ユーザーエージェントを見てアプリかサイトか判別する
26
27--------------------------------------------------------------*/
28function initSiteApp() {
29  var userAgent = navigator.userAgent;
30    
31  flg_app = false;
32  // ユーザーエージェントに特定のテキストが含まれているかチェック
33  if (userAgent.indexOf("JcomAppCx") !== -1 ) {
34    // JcomAppCxが含まれている場合の処理
35    flg_app = true ;
36  }
37  
38  const urlParams = new URLSearchParams(window.location.search);
39  if(urlParams.get('app')!=null){
40    flg_app = true;
41  }
42  
43  if(flg_app){
44    $("body").addClass("view_in_webview");
45  }else{
46    $("body").addClass("view_in_browser");
47  }
48  
49}
50
51
52/*--------------------------------------------------------------
53  initJMagazineLanes
54--------------------------------------------------------------*/
55var slickOptions;
56function initJMagazineLanes(){
57  slickOptions = window.jp.myjcom.www2.tv.common.slickOptions;// 修正
58    // slick 初期化後に表示
59    const $slickTargets = [
60      $('.js-slick-jmagagine_new'),
61      $('.js-slick-jmagagine_movie'),
62      $('.js-slick-jmagagine_foreigndrama'),
63      $('.js-slick-jmagagine_japanesedrama'),
64      $('.js-slick-jmagagine_asiadrama'),
65      $('.js-slick-jmagagine_sports'),
66      $('.js-slick-jmagagine_anime'),
67      $('.js-slick-jmagagine_music'),
68      $('.js-slick-jmagagine_entertainment'),
69      $('.js-slick-jmagagine_documentary'),
70
71    ];
72   window.jp.myjcom.www2.tv.common.slickInit($slickTargets);
73
74   initJmagazine();
75}
76
77
78/*--------------------------------------------------------------
79	initJmagazine
80--------------------------------------------------------------*/
81
82function initJmagazine(){
83	trace("initJmagazine----------------------");
84	var json_url = '/tv/assets/js/jmagazine_json.php';
85	//json_url = '/tv/assets/js/jmagazine_test.json';
86
87  // PHPファイルからJSONデータを取得する
88  $.ajax({
89  url: json_url,
90      type: 'GET',
91      dataType: 'json',
92      success: function(data) {
93    jmagazineDataLoaded(data);
94      },
95      error: function(xhr, status, error) {
96          // エラーハンドリング
97        trace('JSONデータの読み込みに失敗しました:', error);
98        trace(error);
99        $('.section-jmagagine_new').hide();
100      }
101  });
102
103}
104
105function jmagazineDataLoaded(data){
106	trace("jmagazineDataLoaded ----------------------")
107	var json_data = JSON.parse(data);
108	var count = 0;
109	var html = '';
110	$.each(json_data, function(index, item) {
111		var rank = item.rank;
112		if(rank == "高" || rank == "中"){
113			var date_str = formatJmagagineDates(item.startdate,item.enddate);
114			var new_icon = "";
115			if (isWithinXDays(item.startdate, 7)) {
116				new_icon = "<span class='icon_new'>NEW</span>";
117			}
118			var type = '<p class="c-card_text">'+date_str+new_icon+'</p>';
119			
120			var obj = {
121				type:type,
122				linkUrl:item.url,
123				imageUrl:item.images,
124				title:item.title,
125				label:item.genre,
126				linkUrl:item.url,
127				copyright:item.copyright,
128				blank:"blank"
129			}
130
131			if(count < 10){
132				html += htmlTagGenerater(obj);
133				addCopyrightSection(obj.copyright);
134			}
135			count++;
136		}
137	});
138
139	var option = slickOptions.slickNormal;
140	if(count != 0){
141		$('.js-slick-jmagagine_new').html(html).slick(option);
142	}else{
143		$('.section-jmagagine_new').hide();
144	}
145
146  //  各カテゴリ
147  initMagazineGenreLane(json_data);
148}
149
150function isWithinXDays(startdate, days) {
151    // 現在の日付を取得
152    var currentDate = new Date();
153	currentDate.setHours(0, 0, 0, 0);
154    // 開始日をDateオブジェクトに変換
155    var start = new Date(startdate);
156    // X日後の日付を計算
157	var futureDate = new Date(currentDate);
158    futureDate.setDate(currentDate.getDate() - days);
159    // 開始日が本日からX日以内かどうかを判定
160    return start >= futureDate;
161}
162
163function formatJmagagineDates(dateString) {
164	const daysOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
165    const date = new Date(dateString);
166    
167    const year = date.getFullYear();

168    const month = date.getMonth() + 1; // JavaScriptの月は0から始まるので+1
169    const day = date.getDate();
170    const dayOfWeek = daysOfWeek[date.getDay()];
171
172    return `${year}年${month}月${day}日(${dayOfWeek})`;
173}
174
175/*--------------------------------------------------------------
176  各ジャンルレーン設定
177--------------------------------------------------------------*/
178var magazine_datas = [
179  /*
180    {'genre':'[02]','genre_en':'[01]'},
181  */
182    {'genre':'映画','genre_en':'movie'},
183    {'genre':'海外ドラマ','genre_en':'foreigndrama'},
184    {'genre':'国内ドラマ','genre_en':'japanesedrama'},
185    {'genre':'韓国・アジアドラマ','genre_en':'asiadrama'},
186    {'genre':'スポーツ','genre_en':'sports'},
187    {'genre':'アニメ','genre_en':'anime'},
188    {'genre':'音楽・K-POP','genre_en':'music'},
189    {'genre':'エンタメ','genre_en':'entertainment'},
190    {'genre':'ドキュメンタリー','genre_en':'documentary'},    
191];
192function initMagazineGenreLane(json_data){
193  //trace("各ジャンルレーン設定");
194  var magazineData = json_data;
195  var len = magazine_datas.length;
196  for(var i=0;i<len;i++){
197    var genre_data = magazine_datas[i];
198    setMagazineGenreLane(genre_data,json_data);
199  }//	for
200  
201}
202/*--------------------------------------------------------------
203  各レーン作成
204--------------------------------------------------------------*/
205function setMagazineGenreLane(genre_data,json_data){
206
207  var genre = genre_data.genre;
208  var genre_en = genre_data.genre_en;
209  var section = $('.section-jmagagine_'+genre_en);
210  var slick_html = $('.js-slick-jmagagine_'+genre_en);
211  //trace("各レーン作成 "+genre+"  "+genre_en);
212
213	var count = 0;
214	var html = '';
215	$.each(json_data, function(index, item) {
216		var data_genre = item.genre;
217		if(genre == data_genre){
218			var date_str = formatJmagagineDates(item.startdate,item.enddate);
219			var new_icon = "";
220			if (isWithinXDays(item.startdate, 7)) {
221				new_icon = "<span class='icon_new'>NEW</span>";
222			}
223			var type = '<p class="c-card_text">'+date_str+new_icon+'</p>';
224			
225			var obj = {
226				type:type,
227				linkUrl:item.url,
228				imageUrl:item.images,
229				title:item.title,
230				label:item.genre,
231				linkUrl:item.url,
232				copyright:item.copyright,
233				blank:"blank"
234			}
235
236			if(count < 10){
237				html += htmlTagGenerater(obj);
238				addCopyrightSection(obj.copyright);
239			}
240			count++;
241		}
242	});
243
244	if(count == 1){
245		slick_html.html(html).slick(slickOptions.slickOnlyOne);
246  }else if(count == 2){
247    slick_html.html(html).slick(slickOptions.slickOnlySP);
248  }else if(count > 2){
249    if(count <= 5){
250      var html2 = html+html;
251      slick_html.html(html2).slick(slickOptions.slickNormal);
252    }else{
253      slick_html.html(html).slick(slickOptions.slickNormal);
254    }
255	}else{
256		section.hide();
257	}
258}
259
260/*--------------------------------------------------------------
261  setMagazine
262--------------------------------------------------------------*/
263// クエリパラメータから日付を取得　YYYYMMMDDHHmm
264//  https://stage-www2.myjcom.jp/tv/magazine/?date=202409261101
265function getQueryParam(param) {
266  var urlParams = new URLSearchParams(window.location.search);
267  return urlParams.get(param);
268}
269
270// 特定の日付（前倒しで切り替え）
271var exception_date = ['2026/01/23','2026/04/24','2026/07/24','2026/10/23'];
272
273// 先月号を出す月（YYYY/MM形式）
274var show_past_month = ['2026/01'];//['2026/01','2026/05'];
275
276function setMagazine(){
277  var queryDate = getQueryParam('date');
278  var today = new Date();
279  // 実運用時は以下コメントアウトする
280  //today = new Date('2026/01/23 10:00');
281
282  function parseQueryDate(queryDate) {
283    var year = parseInt(queryDate.slice(0, 4));
284    var month = parseInt(queryDate.slice(4, 6)) - 1;
285    var day = parseInt(queryDate.slice(6, 8));
286    // var hours = parseInt(queryDate.slice(8, 10));
287    // var minutes = parseInt(queryDate.slice(10, 12));
288
289    var hours = queryDate.length >= 10 ? parseInt(queryDate.slice(8, 10)) : 10;
290    var minutes = queryDate.length >= 12 ? parseInt(queryDate.slice(10, 12)) : 0;
291
292
293    return new Date(year, month, day, hours, minutes);
294  }
295
296  if (queryDate) {
297    today = parseQueryDate(queryDate);
298  }
299
300  trace("queryDate "+queryDate);
301
302  var currentYear = today.getFullYear();
303  var currentMonth = today.getMonth() + 1;
304  var currentDay = today.getDate();
305  var currentHour = today.getHours();
306
307  var nextMonth = currentMonth + 1;
308  var nextYear = currentYear;
309  if (nextMonth === 13) {
310    nextMonth = 1;
311    nextYear += 1;
312  }
313
314  // 先月の計算
315  var prevMonth = currentMonth - 1;
316  var prevYear = currentYear;
317  if (prevMonth === 0) {
318    prevMonth = 12;
319    prevYear -= 1;
320  }
321
322  var thisMonthText = `${currentYear}年${currentMonth}月号`;
323  var nextMonthText = `${nextYear}年${nextMonth}月号`;
324  var prevMonthText = `${prevYear}年${prevMonth}月号`;
325
326  var thisMonthPath = `${currentYear}${('0' + currentMonth).slice(-2)}`;
327  var nextMonthPath = `${nextYear}${('0' + nextMonth).slice(-2)}`;
328  var prevMonthPath = `${prevYear}${('0' + prevMonth).slice(-2)}`;
329
330  // 書式化
331  var formattedToday = `${today.getFullYear()}/${('0' + (today.getMonth() + 1)).slice(-2)}/${('0' + today.getDate()).slice(-2)}`;
332  var formattedYearMonth = `${today.getFullYear()}/${('0' + (today.getMonth() + 1)).slice(-2)}`;
333
334  var isExceptionDate = exception_date.includes(formattedToday);
335  var isShowPast = show_past_month.includes(formattedYearMonth);
336
337  // メイン表示処理
338  if ((isExceptionDate && currentHour >= 10) || (currentDay === 25 && currentHour >= 10) || currentDay > 25 || (currentDay === 1 && currentHour < 0)) {
339    // 今月号＋来月号を表示
340    $(".next_manth .magazine_title").text(nextMonthText);
341    $(".next_manth a").attr("href", `./${nextMonthPath}/`);
342    $(".next_manth img").attr("src", `./${nextMonthPath}/sp/images/cover.jpg`);
343
344    $(".this_manth .magazine_title").text(thisMonthText);
345    $(".this_manth a").attr("href", `./${thisMonthPath}/`);
346    $(".this_manth img").attr("src", `./${thisMonthPath}/sp/images/cover.jpg`);
347
348    $(".next_manth").show();
349    $(".this_manth").show();
350  } else {
351    // 来月号のみ（＝今月号は非表示）
352    $(".next_manth .magazine_title").text(thisMonthText);
353    $(".next_manth a").attr("href", `./${thisMonthPath}/`);
354    $(".next_manth img").attr("src", `./${thisMonthPath}/sp/images/cover.jpg`);
355
356    $(".next_manth").show();
357    $(".this_manth").hide();
358  }
359
360  // ▼ 先月号の出し分け
361  if (isShowPast) {
362    $(".past_manth .magazine_title").text(prevMonthText);
363    $(".past_manth a").attr("href", `./${prevMonthPath}/`);
364    $(".past_manth img").attr("src", `./${prevMonthPath}/sp/images/cover.jpg`);
365    $(".past_manth").show();
366  } else {
367    $(".past_manth").hide();
368  }
369}