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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

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

(($) => {
  'use strict';

  // ---- settings ----//{{{

  const TOPIC_ID = 1;

  // function to escape html
  function escapeHtml(str) {
    if (!str) {
      return '';
    }
    return str
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  // ---- settings ----//}}}


  // ---- xml settings ----//{{{

  // function to make XML Header for Garoon API
  // arg1:services:service type (base,schedule)
  // arg2:action:name of API
  // return:XML header string
  function makeXMLHeader(services, action) {
    let xmlns;
    switch (services) {
      case 'base':
        xmlns = 'base_services="http://wsdl.cybozu.co.jp/base/2008"';
        break;
      case 'bulletin':
        xmlns = 'workflow_services="http://wsdl.cybozu.co.jp/bulletin/2008"';
        break;
      default:
        alert('Can not select services');
        return;
    }

    const xmlHeader =
      '<?xml version="1.0" encoding="UTF-8"?>' +
      '<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://www.w3.org/2003/05/soap-envelope" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" xmlns:' + xmlns + '>' +
      '<SOAP-ENV:Header>' +
        '<Action SOAP-ENV:mustUnderstand="1" xmlns="http://schemas.xmlsoap.org/ws/2003/03/addressing">' + escapeHtml(action) + '</Action>' +
        '<Timestamp SOAP-ENV:mustUnderstand="1" Id="id" xmlns="http://schemas.xmlsoap.org/ws/2002/07/utility">' +
            '<Created>2037-08-12T14:45:00Z</Created>' +
            '<Expires>2037-08-12T14:45:00Z</Expires>' +
        '</Timestamp>' +
        '<Locale>jp</Locale>' +
      '</SOAP-ENV:Header>';
    return xmlHeader;
  }

  // ---- xml settings end ----//}}}


  // ---- getGrnData ----//{{{

  function getNewestFollow() {
    const url = '/g/cbpapi/bulletin/api.csp';
    const apiName = 'BulletinGetFollows';
    const followRequest = makeXMLHeader('bulletin', apiName) +
      '<SOAP-ENV:Body>' +
      '<' + apiName + '>' +
      '<parameters topic_id="' + TOPIC_ID + '" offset="0" limit="1"></parameters>' +
      '</' + apiName + '>' +
      '</SOAP-ENV:Body>' +
      '</SOAP-ENV:Envelope>';

    return fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'text/xml', // SOAP APIのためのContent-Type設定
      },
      body: followRequest // リクエストボディ
    })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok.');
        }
        return response.text(); // レスポンスをテキストとして返す
      })
      .then(str => (new window.DOMParser()).parseFromString(str, 'text/xml'))
      .then(data => data.getElementsByTagName('follow')[0])
      .catch(error => console.error('Fetch error:', error));
  }

  // ---- getGrnData finish ----//}}}


  // ---- showPortlet ----//{{{

  // ---- makeHtml ----//{{{
  function makeSignageHtml(newestFollow) {
    const text = escapeHtml(newestFollow.getAttribute('text'));
    const divElement = document.createElement('div');
    divElement.className = 'marquee ledText01';
    const pElement = document.createElement('p');
    pElement.textContent = text;
    divElement.appendChild(pElement);
    return divElement;
  }

  // ---- makeHtml end ----//}}}

  function showSignage(newestFollow) {
    const signageElement = makeSignageHtml(newestFollow);
    document.getElementById('signage').appendChild(signageElement);
    $('.marquee p').marquee(); // Assuming marquee() is a valid jQuery plugin/function
  }

  // ----showPortlet finish----//}}}

  getNewestFollow()
    .then(showSignage)
    .catch(e => console.error(e));

})(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

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

<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;   /*←フォントサイズ設定*/
}
/*オリジナルの配色設定*/
.ledText02.marqueeColorScheme {
    color: #fff;   /*←フォントカラー設定*/
    background: #333;   /*←背景色設定*/
}
-->
</style>

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