ガルーンポータル活用 Tips #5 社内報ポータル

中堅・大規模組織向けグループウェア「サイボウズ ガルーン」のポータル活用企画第5弾。一歩先の社内報の作り方をご紹介します。

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

• 社内の各部署の最新情報をまとめて表示したいが、見た目もできるだけかっこよくしたい！
• 社内報をもっと作業コストをかけずに作りたい！

こちらのポータルで簡単に実現できます。

完成イメージ

 

HTMLポートレットを使った社内報ポータルです。下の方だけ見ると、ガルーンポータルと気づかないかもしれないくらいのメイクアップですね。

各記事の内容は、Garoonの掲示板や、kintoneアプリから抽出しているので、ポータルの管理権限がない人でも直接記事を書くことができます。

 

ポータルの構成

今回は次の構成で作りました。

• 上段のメイン記事、下段のサブ記事1 ：ガルーン掲示板の本文

• 下段のサブ記事中央  ：ガルーン掲示板のフォローコメント

• 下段のサブ記事右  ：kintoneアプリ

各部の記事をまとめて掲載するポートレットの作成

データ取得元の準備 

データを取得したいガルーンの掲示板や、kintoneアプリを用意します。

データ取得プログラムの修正時のために必要なIDを控えます。

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

（例：aid →〇〇〇の時 https://example.cybozu.com/g/bulletin/view.csp?cid=XXX&aid=〇〇〇）

kintoneアプリをURL内に含まれるアプリIDをブラウザで確認しておきます。

（例：アプリID →△△△の時 https://example.cybozu.com/k/〇〇〇）

kintoneアプリのフィールドは以下のように配置していきます。

フィールド名	フィールドコード	フィールドタイプ	備考
作成日時	作成日時	作成日時	自動入力
タイトル	title	文字列（1行）
内容	content	リッチエディター

リソースの準備

今回使う画像ファイルおよびライブラリファイル （magagine.css）は以下からダウンロードできます。

garoon-portal5.zip

ファイルの説明

ファイル名	説明	修正が必要か	配置先
magagine.css	レイアウト調整用ファイル	不要	ファイル管理
bg_line01.png	見出しの背景装飾用画像	不要	ファイル管理

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

(1)カスタマイズファイルとして、「house_magagine.js」を作成します（文字コードは「UTF-8」で保存してください）。
このとき以下を書き換えます。

• 13行目：メインに表示する掲示板のID（aid）
• 14行目：サブに表示する掲示板のID（aid）
• 15行目：フォローコメントを表示する掲示板のID（aid）
• 16行目：「データ取得元の準備」で確認したitnoneアプリID

ポイント

• 掲示板本文は getArticle()で、掲示板フォローコメントは getNewestFollow()で、kintone アプリは getKintoneData()でそれ ぞれ最新のデータを取得しています。

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

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

• house_magagine.js （修正済み）
• bg_line01.png

(4) ファイルのタイトルをクリックした時に、URL内に含まれるhid(フォルダID),fid(ファイルID)を確認しておきます。

png ファイルの ID は css ファイルの修正時に、js ファイルの ID はポートレット作成時に使います。(例: hid →△△△,fid →◇◇◇の 時 https://example.cybozu.com/g/cabinet/view.csp?hid=△△△&fid=◇◇◇)

(5) 「magazine.css」を作成します（文字コードは「UTF-8」で保存してください）。ここで、67 行目を(4)で確認した ID に書き換えます。

(6) 修正した magazine.css もファイル管理に追加します。同様に ID を確認しておきます。

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

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

11, 14 行目の「house_magazine.js」「magagine.css」のダウンロードリンクをリソースの準備で生成したリンクにそれぞれ書き換えます。

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

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

動作確認

• 上段のメイン記事 ：ガルーン掲示板の本文と、ポートレットの内容が一致しているか確認します。
• 下段のサブ記事1  ：同上
• 下段のサブ記事2  ：ガルーン掲示板の最新のフォローと、ポートレットの内容が一致しているか確認します。
• 下段のサブ記事3  ：kintone アプリにレコードを追加し、最新レコードとポートレットの内容が一致しているか確認します。

おわりに

ガルーン掲示板の本文、ガルーン掲示板のフォロー、kintoneアプリと、各種データを取得する総まとめのようなポートレットを作りました。ご参考ください。今後もガルーンポータル活用シリーズは続きます。

更新履歴

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

シリーズの他の回を見る