1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100

/*
 * Garoon Portal sample program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(function($) {
  'use strict';

  // 情報を取得するアプリを設定する
  const APPID = 1;
  const APPNAME = '全社通達';
  const TITLECODE = 'title';
  const CONTENTCODE = 'content';
  const VIEWID = 1;

  // API実行のため、XMLHttpRequestをセットする
  const XMLHTTP = function() {
    let xmlhttp = false;
    if (typeof ActiveXObject !== 'undefined') {
      try {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      } catch (e) {
        xmlhttp = false;
      }
    }
    if (!xmlhttp && typeof XMLHttpRequest !== 'undefined') {
      xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
  };
    // generate randum numbers
  function generateRandomx(count) {
    const generated = [];
    let generatedCount = generated.length;
    for (let i = 0; i < count; i++) {
      let candidate = Math.floor(Math.random() * count);
      for (let j = 0; j < generatedCount; j++) {
        if (candidate === generated[j]) {
          candidate = Math.floor(Math.random() * count);
          j = -1;
        }
      }
      generated[i] = candidate;
      generatedCount++;
    }
    return generated;
  }
  // HTML作成する
  function makeSignageHtml(records) {
    let text = '【' + APPNAME + '】';
    const randomAray = generateRandomx(records.length);
    if (records.length > 0) {
      for (let i = 0; i < records.length; i++) {
        text += records[randomAray[i]][TITLECODE].value + ' - ';
        text += records[randomAray[i]][CONTENTCODE].value;
        text += ' / ';
      }
    }
    const url = '/k/' + APPID + '/?view=' + VIEWID;
    const $myParts = $('<a href="' + url + '" target="_blank"><div class="marquee ledText01"><p>' +
        text + '</p></div></a>');
    return $myParts;
  }
  // HTML出力する
  function showSignage(records) {
    if (records.length > 0) {
      $('#signage').append(makeSignageHtml(records));
      $('.marquee p').marquee();
    }
  }

  // 対象のアプリから、対象のレコードを取得する
  const kintoneNewestRecord = function() {
    const xhr = XMLHTTP();
    let url = '/k/v1/records.json?app=' + APPID;
    const query = 'ステータス = "承認" and 公開開始日 <= TODAY() and 公開終了日 >= TODAY() order by 更新日時';
    url += ['&query=' + encodeURIComponent(query),
      '&fields[0]=' + encodeURIComponent('$id'),
      '&fields[1]=' + encodeURIComponent('title'),
      '&fields[2]=' + encodeURIComponent('content')
    ].join('');

    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const respJson = JSON.parse(xhr.responseText);
        showSignage(respJson.records);
      }
    };
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.send(null);
  };

  // 関数を実行する
  kintoneNewestRecord();

})(jQuery.noConflict(true));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!--
* Garoon Portal sample program
* Copyright (c) 2016 Cybozu
* 
* Licensed under the MIT License
* https://opensource.org/license/mit/
-->

<!-- ▼Javascript設定▼ -->
<script type="text/javascript" src="https://js.cybozu.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/g/cabinet/download.csp/-/jquery.marquee.js?fid=XX&ticket=&hid=X&.js"></script>
<script src="/g/cabinet/download.csp/-/bulletinsignage.js?fid=XX&ticket=&hid=X&.js"></script>

<!-- ▼CSS設定▼ -->
<link rel="stylesheet" href="/g/cabinet/download.csp/-/marquee.css?fid=XX&ticket=&hid=X&.css" type="text/css" />
<style type="text/css">
<!--
/*↓設定変更可能↓*/
/*電光掲示板風*/
.ledText01 {
    margin: 0 auto 20px;  /*周りの余白を調整*/
    padding:5px 0;   /*文字周りの余白を調整*/
    color: #FFB400;   /*←フォントカラー設定*/
    /*color: #FF51A8;*/   /*フォントカラー例：ピンク*/
    /*color: #00FF00;*/   /*フォントカラー例：グリーン*/
    /*color: #00D9FF;*/   /*フォントカラー例：ブルー*/
    font-size: 40px;   /*←フォントサイズ設定*/
}

/*シンプルパターン*/
.ledText02 {
    margin: 0 auto 20px;  /*周りの余白を調整*/
    padding:5px 0;   /*文字周りの余白を調整*/
    font-size: 20px;   /*←フォントサイズ設定*/
}
-->
</style>

<div id="signage"></div>