けグループウェア「サイボウズGaroon」のポータル活用企画第4弾。電光掲示板風のテロップが流れるポータルを作成していきます。あれ?電光掲示板はこの前もやったんじゃない?と思われるかもしれません。「電光掲示板ポータル(kintone連携編)」は電光掲示板の文字をkintoneのアプリから取得しましたが、今回はシンプル版!Garoon掲示板の最新フォローから取得してみます。複雑なロジックも少なく、よりスモールスタートしやすい版ともいえます。こんなときに便利です固定リンクがコピーされました重要な掲示を見逃す人がいて困ってませんか?また、重要な掲示がたまりすぎて空気になっていませんか?電光掲示板ならできるんです!ぜひお試しください。完成イメージ固定リンクがコピーされましたテロップだけ動画にしてみました。このポータルは電光掲示板風ポートレットの活用例としての、各部からのお知らせを表示するポータルです。今回作る部分は、トップの「全社通知ポートレット」のみです。掲示板のフォローからデータを抽出します。電光掲示板の部分以外は、標準ポートレットの「掲示板」の本文を利用しています。固定リンクがコピーされました使いたい掲示板のタイトルをクリックした際、URL内に含まれるaid(掲示ID)を確認しておきます。これは、掲示板情報の取得プログラムの修正時に使います。今回はこのような掲示板です。最新のフォローのみ取得します。固定リンクがコピーされました今回使うライブラリファイル(marquee.css、jQuery.marquee.js)は以下からダウンロードできます。サンプルコードを参考に「bulletinsignage.js」を作成します。文字コードは「UTF-8」で保存してください。データ取得元の準備で確認したaidに書き換えます。ポイント109行目で、cssファイル(marquee.css)にて定義したクラスを指定することでデザインを切り替えることができます。クラスledtext01で動作しなかった場合は、ledtext02(シンプルパターン)に書き換えてお試しください。固定リンクがコピーされました今回使うポートレットを作成していきます。新規にHTMLポートレットを作成し、「ポートレットの内容」に次のHTMLコードを記述します。CSSによるカスタマイズから以下を追加します。固定リンクがコピーされましたポートレットを作成したらポータルに配置します。固定リンクがコピーされました掲示板の最新のフォローと、電光掲示板の内容が一致しているか確認します。おわりに固定リンクがコピーされましたシンプルに実装できる電光掲示板風ポートレットを紹介しました。冒頭の完成イメージのように各部の掲示板とセットで配置すると、全社の重要な情報&各部からのリアルタイム発信をまとめて把握できる、実用的なポータルになりますね。今後も簡単に作れる凝ったポートレットをどんどん紹介していきますので、お楽しみに~。CSSによるカスタマイズ」を使用する方法に変更jQueryからJavaScriptへサンプルコードをリファクタリングこのTipsは、2024年4月版Garoonで動作を確認しています。(cybozu.cn)。