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

Garoon開発Tips

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

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

更新日：2023年02月01日

はじめに

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

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

電光掲示板の文字はkintoneのアプリから取得しており、kintoneのプロセス管理機能を利用して「承認」ステータスの情報のみがテロップとして流れます。

こんなときに便利です

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

重要な掲示を見逃す人がいて困ってませんか？
また、重要な掲示がたまりすぎて空気になっていませんか？
上長が内容を確認してからでないと掲示できない運用で困ってませんか？

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

完成図

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

画像だと少し見づらいため、一部動画にしてみました。（動画キャプチャだと暗めですが、実際はもう少し明るく映ります）

要件

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

この記事でできることは次のとおりです。

GaroonのHTMLポートレットにkintoneのレコードから取得した情報を表示する。
表示対象データ
- 公開範囲（公開開始日、公開終了日）を設定して、現在日付がその範囲にあるもの
- かつ、kintoneのプロセス管理を設定したレコードで「承認」ステータスのもの
- テロップの文字は、kintoneアプリのレコードの「タイトル」と「内容」フィールドを連結したもの
- 複数レコードが対象の場合、ランダムの順番ですべてを表示する。
テロップをクリックすると、kintoneアプリの一覧画面へ遷移する（複数レコードの場合を考慮して一覧画面としています）
対象データが存在しない場合は電光掲示板そのものを表示しない。

kintoneアプリ（全社通達アプリ）の準備

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

Garoonのポータルからデータを参照させるためのkintoneアプリを作成していきます。

フォームの設定

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

フォームのフィールドは以下のように配置していきます。

フィールド名	フィールドコード	フィールドタイプ	備考
通達番号	レコード番号	レコード番号	自動入力
公開開始日	公開開始日	日付
公開終了日	公開終了日	日付
作成者	作成者	作成者	自動入力
承認者	承認者	ユーザー選択
タイトル	title	文字列（1行）	テロップに掲載されます
内容	content	文字列（複数行）	テロップに掲載されます
添付ファイル	添付ファイル	添付ファイル	お好みで追加してください

プロセス管理の設定

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

また、「設定」タブから「プロセス管理」の設定画面に進み、以下の画面のように設定します。

一覧の設定

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

Garoonのテロップをクリックすると見られるリンク先の一覧を作成します。「設定」タブから「一覧」タブに進み、右端の「＋」ボタンをクリック。

以下の条件に合致するレコードだけが表示される一覧を作ります。

公開範囲（公開開始日、公開終了日）を設定して、現在日付がその範囲にあるもの
「承認」ステータスのもの

以下の画面を参考に設定してください。

「保存」をクリックして一覧の設定を保存し、アプリの設定全体を「アプリを更新」ボタンを押して、設定変更完了です。
仕上げに、kintoneアプリのURL内に含まれるアプリIDと一覧IDを、今作った一覧を表示したときのURLで確認しておきます。
ブラウザーのURLバーで確認します。

たとえば、URLがhttps://sample.cybozu.com/k/<appid>/?view=<viewid> の場合、アプリIDと一覧IDは以下になります。

アプリID：<appid>
一覧ID：<viewid>

kintoneアプリ側の設定ができました！次はプログラムです。

リソースの準備

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

これまでと同様に、静的ファイル置き場としてGaroonの「ファイル管理」を使います。
今回使うライブラリファイル（jQuery.marquee.js、marquee.css）は以下です。

「 garoon-portal3.zip 」

展開されたファイルとその説明です。

#	ファイル名	環境に合わせた修正	説明
1	jQuery.marquee.js	基本的には不要	マーキーの動作を実装するためのJavaScriptファイルです。速度変更などの動作設定を調整したい場合はこちらを編集します。今回はオープンソースを利用しています。
2	marquee.css	基本的には不要	マーキーのデザインを実装するためのCSSファイルです。見た目を調整したい場合はこちらを編集します。

Garoonの「ファイル管理」を使って次の手順でリソースの準備をしていきます。

サンプルコードを参考に、「bulletinsignage.js」と「bulletinsignage.css」を作成します（文字コードは「UTF-8」で保存してください）。このとき、「bulletinsignage.js」の12行目のAPPIDと16行目のVIEWIDを、kintoneアプリの準備で確認したIDに書き換えます。

ポイント

19行目からの関数generateRandomxにて乱数を生成し、毎回ランダムに表示する順番をかえています。（前回の「社員紹介ポータル」の流用です）
63行目にて、cssファイル（marquee.css）で定義したクラスを指定するとデザインを切り替えることができます。
クラスledtext01で動作しなかった場合は、ledtext02（シンプルパターン）に書き換えてお試しください。

サンプルコード

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

JavaScript

 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


/*
 * Garoon Portal sample program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(($) => {
  'use strict';

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

  // generate randum numbers
  const 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作成する
  const makeSignageHtml = (records) => {
    let text = '【' + APPNAME + '】';
    const randomArray = generateRandomx(records.length);
    if (records.length > 0) {
      for (let i = 0; i < records.length; i++) {
        text += records[randomArray[i]][TITLECODE].value + ' - ';
        text += records[randomArray[i]][CONTENTCODE].value;
        text += ' / ';
      }
    }
    const url = '/k/' + APPID + '/?view=' + VIEWID;
    const div = document.createElement('div');
    div.className = 'marquee ledText01';
    const a = document.createElement('a');
    a.href = url;
    a.target = '_blank';
    const p = document.createElement('p');
    p.textContent = text;
    a.appendChild(div);
    div.appendChild(p);
    return a;
  };
  // HTML出力する
  const showSignage = (records) => {
    if (records.length > 0) {
      const signageElement = document.getElementById('signage');
      signageElement.appendChild(makeSignageHtml(records));
      const marqueeElement = document.querySelector('.marquee p');
      $(marqueeElement).marquee(); // Keeping the marquee jQuery plugin
    }
  };

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

    return fetch(pathWithQuery, {
      method: 'GET',
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(response => {
      return response.json();
    }).then(json => {
      return json.records;
    });
  };

  fetchApprovingRecords().then(records => {
    // 電光掲示板風のテロップを表示する
    showSignage(records);
  });

})(jQuery.noConflict(true));

CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


/*↓設定変更可能↓*/
/*電光掲示板風*/
.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;   /*←フォントサイズ設定*/
}

Garoon ポートレットの準備

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

今回使うHTMLポートレットを作成していきます。

1
2
3
4
5
6
7
8


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

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

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

JavaScript / CSSによるカスタマイズから、以下のように各ファイルをアップロードします。

JavaScriptカスタマイズ	CSSカスタマイズ
jQuery.marquee.js	marquee.css
bulletinsignage.js	bulletinsignage.css

ポートレットの配置

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

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

動作確認

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

kintoneにいくつかのレコードを登録します。次の条件を両方満たしていないとテロップに表示されないためご注意ください。

公開開始日を過去、公開終了日は未来に設定します。
ステータスを「承認」に進めます。

Garoonを開いて設置したポータルを確認します。テロップは流れているでしょうか。

試しに、ブラウザーを何度かリロードしてみましょう。複数の対象レコードがある場合は、ランダムの順番で表示されます。

おまけ

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

「bulletinsignage.css」のcolorを指定している箇所の任意の場所のコメントを外すと、フォントカラーを変更できます。
（デフォルトのledtext01クラスを使っている場合のみ）
たとえば、以下のようにグリーンに変更したい場合は、color: #00FF00;のコメントを外してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


/*電光掲示板風*/
.ledText01 {
    margin: 0 auto 20px;  /*周りの余白を調整*/
    padding:5px 0;   /*文字周りの余白を調整*/
    /*color: #FFB400;   /*←フォントカラー設定*/
    /*color: #FF51A8;*/   /*フォントカラー例：ピンク*/
    color: #00FF00;   /*フォントカラー例：グリーン*/
    /*color: #00D9FF;*/   /*フォントカラー例：ブルー*/
    font-size: 40px;   /*←フォントサイズ設定*/
}

グリーンになります。

おわりに

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

kintoneのデータを利用して、今回もおもしろいポートレットができました。
パッと目を引くテロップには厳選された情報を載せたいため今回は「全社通達」にしましたが、社内メンテナンス情報や総務からのお知らせなど、いろいろなシーンでも使えそうです。
お好みでデザインや動作、データの表示のし方を変えてみたりして、いろいろ工夫してみてください。

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

ガルーンポータル活用Tips

更新履歴

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

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

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

Garoon開発Tips