https://www.qab.co.jp/timetable/nowonair/nowonair.js

1/*
2 * 現在放送中の番組を表示する。
3 * 
4 * http://rakuraku2.bangumi.org/nowonair?channelIndex=1
5 * 
6 * 現在放送中の番組を表示し、以降に放送される番組を放送時間の昇順で表示する。
7 * 表示する番組が無い場合は、枠自体を非表示。
8 * 画像はサムネイル、代表カット、番組ロゴの優先順位で最上位のものを1枚表示。
9 * 画像がない場合は「NoImage」画像を表示する。
10 * 現在放送中の番組に「NOW OA」のラベルを表示する。
11 * 画像および放送日時・番組タイトルがクリックされた場合は、当初は” http://sample.rakuraku.bangumi.org/event”の静的ページに遷移する。
12 * 番組表および番組詳細のJS/CSSの実装が完了したら、番組詳細ページへのページ遷移へ切り替える。ただし、以下の場合は除く。
13 * 「関連URL」の「カテゴリID」が「KEYSTATION」の番組は、「関連URL」の「URL」にページ遷移する。
14 */
15(function($) {
16    'use strict';
17
18    // Dom loaded.
19    $(function() {
20        $.getJSON('https://rakuraku2.bangumi.org/nowonair?callback=?', {
21            // パラメータ
22            channelIndex: 1
23        }, function(response) {
24
25            var now = moment();
26            var nowYyyymmddhhmmii = now.format('YYYYMMDDHHmmss');
27
28            // 現在放送中の番組を表示し、以降に放送される番組を放送時間の昇順で表示する。
29            // 表示する番組が無い場合は、枠自体を非表示。
30            var programs = [];
31            $.each(response.programs, function(i, program) {
32                if (program.s <= nowYyyymmddhhmmii && program.e > nowYyyymmddhhmmii) { // 放送中の番組がみつかった
33                    programs.push(program);
34                    if (i + 1 <= response.programs.length - 1) {
35                        programs.push(response.programs[i + 1])
36                    }
37                    if (i + 2 <= response.programs.length - 1) {
38                        programs.push(response.programs[i + 2])
39                    }
40                    return false;
41                }
42            });
43
44            // DOM操作を行うHTMLを取得
45            var $block = $('[data-nowonair-block]');
46            var $template = $block.find('[data-program]:first').clone();
47            $block.find('[data-program]').remove();
48
49            // DOM操作で 番組を表示する
50            $.each(programs, function(i, program) {
51                var $item = $template.clone();
52                $item.find('[data-title]').text(program.title[0].string);
53                $item.find('[data-url]').attr('href', eventUrl(program));
54                $item.find('[data-img]').attr('src', eventImageUrl(program));
55                var s = moment(program.s, 'YYYYMMDDHHmmss');
56                var e = moment(program.e, 'YYYYMMDDHHmmss');
57                $item.find('[data-date]').text(s.format('HH:mm'));
58                if (i > 0) {
59                    $item.find('.now_oa').remove();
60                }
61                $block.append($item);
62            });
63            $block.fadeIn();
64        });
65    });
66
67    // 画像はサムネイル、代表カット、番組ロゴの優先順位で最上位のものを1枚表示。
68    // 画像がない場合は「NoImage」画像を表示する。
69    var eventImageUrl = function(program) {
70        if (program.pictures) {
71            for (var i in program.pictures) {
72                var picture = program.pictures[i];
73                if (picture.cid == 'THUMB') {
74                    return picture.url;
75                }
76            }
77            for (var i in program.pictures) {
78                var picture = program.pictures[i];
79                if (picture.cid == 'MainCut') {
80                    return picture.url;
81                }
82            }
83            for (var i in program.pictures) {
84                var picture = program.pictures[i];
85                if (picture.cid == 'LOGO') {
86                    return picture.url;
87                }
88            }
89        }
90        return 'https://www.qab.co.jp/timetable/nowonair/noimg.png';
91    };
92
93    // 画像および放送日時・番組タイトルがクリックされた場合は、当初は” http://sample.rakuraku.bangumi.org/event”の静的ページに遷移する。
94    // 番組表および番組詳細のJS/CSSの実装が完了したら、番組詳細ページへのページ遷移へ切り替える。ただし、以下の場合は除く。
95    // 「関連URL」の「カテゴリID」が「KEYSTATION」の番組は、「関連URL」の「URL」にページ遷移する。
96    var eventUrl = function(program) {
97        if (program.rurls) {
98            for (var i in program.rurls) {
99                var url = program.rurls[i];
100                if (url.cid == 'KEYSTATION') {
101                    return url.url;
102                }
103            }
104        }
105        return 'https://www.qab.co.jp/timetable/index.php?' + 'p=' + program.pid + '&s=' + program.sid + '&e=' + program.eid + '&ed=' + program.edt;
106    }
107
108})(jQuery);