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

フォローする

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

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

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

<こんなときに便利です>

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

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

※このポートレットはIEでは動作しません。IE以外のブラウザでご利用ください。

完成イメージ

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

https://gyazo.com/eb85b2b3920538ee788ceecd334f8b35 

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

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

データ取得元の準備

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

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

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

リソースの準備

今回使うJavaScript,CSSファイル一式は以下からダウンロードできます。

bulletinsignage.zip

ファイルの説明

 ファイル名  説明  修正が必要か 配置先
marquee.css テロップ部分のデザイン設定用ファイル 不要 ファイル管理
jquery.marquee.js テロップ部分の動きの設定用ファイル 不要  ファイル管理
bulletinsignage.js 掲示板から最新フォローを取得しHTMLに出力するプログラム  必要 ファイル管理


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

(1) bulletinsignage.js を環境に合わせて修正します。7行目を、「データ取得元の準備」で確認したaidに書き換えます。

ポイント

  • 126行目で、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=◇◇◇)

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

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

 

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

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

動作確認

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

おわりに

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

 

シリーズの他の回を見る

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

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

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk