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

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

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

＜こんなときに便利です＞

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

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

完成図

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

 

要件

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

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

kintoneアプリ(全社通達アプリ)の準備

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

フォームの設定

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

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

プロセス管理の設定

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

一覧の設定

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

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

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

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

「保存」をクリックして一覧の設定を保存し、アプリの設定全体を「アプリを更新」ボタンを押して、設定変更完了です。

仕上げに、kintone アプリを URL 内に含まれるアプリ IDと一覧IDを、今作った一覧を表示したときのURLで確認しておきます。ブラウザのURLバーで確認します。

（例：アプリ ID →△△△、一覧 ID →〇〇〇 の時 https://example.cybozu.com/k/△△△/?view=〇〇〇） 

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

リソースの準備

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

「garoon-portal3.zip」

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

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

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

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

ポイント

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

 2. Garoon の「ファイル管理」の「オプション」-「フォルダを追加する」で今回のポートレット用にフォルダを作成します。 

 3. フォルダを選択した状態で「ファイルを追加する」をクリックし、次の3つのファイルを追加します。

• bulletinsignage.js（修正済み）
• jquery.marquee.js
• marquee.css

 4. この時、追加されたファイル名をクリックして確認できるURLに含まれるhid(フォルダID),fid(ファイルID)を確認しておきます。これは、後程ポートレット作成時に使いますのでメモをしておきましょう。

 例： hid →XXX,fid →●●●の時https://example.cybozu.com/g/cabinet/view.csp?hid=XXX&fid=●●●

ガルーンポートレットの準備

今回使うHTMLポートレットを作成していきます。11行目, 12行目, 15行目の「jquery.marquee.js」「bulletinsignage.js」「marquee.css」のダウンロードリンクをリソースの準備で生成したリンクにそれぞれ書き換えます。

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

動作確認

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

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

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

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

おまけ

「ガルーンポートレットの準備」の箇所で開いたHTMLポートレットの変更画面で、「▼CSS設定▼」のcolorを指定している箇所の任意の場所のコメントを外すと…（*デフォルトの"ledtext01"クラスを使っている場合のみ)

グリーンになります(^^♪

おわりに

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

告知

2017年前半、サイボウズに蓄積されたGaroonポートレットノウハウを一気にTips化します！ 数か月に分けて少しずつアップしていきます。Garoonファンの皆さん、お楽しみに～(*´▽｀*)

更新履歴

• 2020/02/19
  jQuery の追加手順および jQuery.noConflict(true) を使うようにコードを修正

シリーズの他の回を見る 

<<ガルーンポータル活用 Tips #2 「社員紹介ポータル」

<<ガルーンポータル活用 Tips #1 「行き先案内板」