ガルーンポータル活用Tips #4「電光掲示板ポータル（ガルーン掲示板編）」

Garoon開発Tips

ガルーンポータル活用Tips #4「電光掲示板ポータル（ガルーン掲示板編）」

固定リンクがコピーされました

更新日：2023年02月01日

はじめに

固定リンクがコピーされました

中堅・大規模組織向けグループウェア「サイボウズGaroon」のポータル活用企画第4弾。電光掲示板風のテロップが流れるポータルを作成していきます。

あれ？電光掲示板はこの前もやったんじゃない？と思われるかもしれません。

…違うんです！「電光掲示板ポータル（kintone連携編）」は電光掲示板の文字をkintoneのアプリから取得しましたが、今回はシンプル版！
Garoon掲示板の最新フォローから取得してみます。複雑なロジックも少なく、よりスモールスタートしやすい版ともいえます。

こんなときに便利です

固定リンクがコピーされました

重要な掲示を見逃す人がいて困ってませんか？
また、重要な掲示がたまりすぎて空気になっていませんか？

電光掲示板ならできるんです！ぜひお試しください。

完成イメージ

固定リンクがコピーされました

テロップだけ動画にしてみました。

このポータルは電光掲示板風ポートレットの活用例としての、各部からのお知らせを表示するポータルです。
今回作る部分は、トップの「全社通知ポートレット」のみです。掲示板のフォローからデータを抽出します。

なお、電光掲示板の部分以外は、標準ポートレットの「掲示板」の本文を利用しています。
本文からデータを取得するパターンはまた別のTipsで紹介します！

データ取得元の準備

固定リンクがコピーされました

使いたい掲示板のタイトルをクリックした際、URL内に含まれるaid（掲示ID）を確認しておきます。
これは、掲示板情報の取得プログラムの修正時に使います。

たとえばURLがhttps://sample.cybozu.com/g/bulletin/view.csp?cid=<cid>&aid=<aid> の場合、aidは <aid> の部分です。

今回はこのような掲示板です。最新のフォローのみ取得します。

リソースの準備

固定リンクがコピーされました

今回使うライブラリファイル（marquee.css、jQuery.marquee.js）は以下からダウンロードできます。

garoon-portal4.zip

ファイルの説明

ファイル名	説明	修正が必要か	配置先
marquee.css	テロップ部分のデザイン設定用ファイル	不要	JavaScript / CSSによるカスタマイズ
jQuery.marquee.js	テロップ部分の動きの設定用ファイル	不要	JavaScript / CSSによるカスタマイズ

カスタマイズファイルとして、サンプルコードを参考に「bulletinsignage.js」を作成します。
文字コードは「UTF-8」で保存してください。
このとき、14行目のTOPIC_IDを、データ取得元の準備で確認したaidに書き換えます。

ポイント

109行目で、cssファイル（marquee.css）にて定義したクラスを指定することでデザインを切り替えることができます。
クラスledtext01で動作しなかった場合は、ledtext02（シンプルパターン）に書き換えてお試しください。

サンプルコード

固定リンクがコピーされました

  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, '&amp;')
      .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));

Garoonポートレットの準備

固定リンクがコピーされました

今回使うポートレットを作成していきます。
新規にHTMLポートレットを作成し、「ポートレットの内容」に次のHTMLコードを記述します。

 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>

JavaScriptファイルとCSSファイルのアップロード

固定リンクがコピーされました

JavaScript / CSSによるカスタマイズから以下を追加します。

JavaScriptカスタマイズ

https://js.cybozu.com/jquery/3.7.1/jquery.min.js
jQuery.marquee.js
bulletinsignage.js

CSSカスタマイズ

marquee.css

ポータルに配置

固定リンクがコピーされました

ポートレットを作成したらポータルに配置します。

動作確認

固定リンクがコピーされました

掲示板の最新のフォローと、電光掲示板の内容が一致しているか確認します。

おわりに

固定リンクがコピーされました

シンプルに実装できる電光掲示板風ポートレットを紹介しました。
冒頭の完成イメージのように各部の掲示板とセットで配置すると、全社の重要な情報＆各部からのリアルタイム発信をまとめて把握できる、実用的なポータルになりますね。
今後も簡単に作れる凝ったポートレットをどんどん紹介していきますので、お楽しみに～。

固定リンクがコピーされました

ガルーンポータル活用Tips

更新履歴

固定リンクがコピーされました

2020/02/19
jQueryの追加手順およびjQuery.noConflict(true)を使うようにコードを修正
2024/04/02
- JavaScriptとCSSファイルをファイル管理にアップロードする方法から、ポータルの「JavaScript / CSSによるカスタマイズ」を使用する方法に変更
- jQueryからJavaScriptへサンプルコードをリファクタリング

このTipsは、2024年4月版Garoonで動作を確認しています。

Garoon開発Tips