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

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

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

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

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

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

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

完成イメージ

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

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

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

データ取得元の準備

使いたい掲示板のタイトルをクリックした時に、URL内に含まれるaid（掲示ID）を確認しておきます。

これは、掲示板情報取得プログラムの修正時に使います。（例：aid →〇〇〇の時 https://example.cybozu.com/g/bulletin/view.csp?cid=XXX&aid=〇〇〇）

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

リソースの準備

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

garoon-portal4.zip

ファイルの説明

ファイル名	説明	修正が必要か	配置先
marquee.css	テロップ部分のデザイン設定用ファイル	不要	ファイル管理
jquery.marquee.js	テロップ部分の動きの設定用ファイル	不要	ファイル管理

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

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

ポイント

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

(2) ガルーンの「ファイル管理」で今回のポートレット用にフォルダを作成します。

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

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

(4) それぞれのファイルのタイトルをクリックした時に、URL内に含まれるhid(フォルダID),fid(ファイルID)を確認しておきます。これは、ポートレット作成時に使います。（例： hid →△△△,fid →◇◇◇の時https://example.cybozu.com/g/cabinet/view.csp?hid=△△△&fid=◇◇◇）

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

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

新規にHTMLポートレットを作成し、「ポートレットの内容」に記述します。

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

動作確認

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

おわりに

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