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

フォローする

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

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

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

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

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

完成イメージ

 
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 リッチエディター  


リソースの準備

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

ファイルのダウンロード

ファイルの説明

ファイル名 説明 修正が必要か 配置先
house_magaginze.js 掲示板やkintoneアプリから最新データを取得しHTMLに出力するプログラム 必要 ファイル管理
magagine.css レイアウト調整用ファイル 不要  ファイル管理
bg_line01.png 見出しの背景装飾用画像 不要  ファイル管理


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

(1) house_magagine.js を環境に合わせて修正します。5,6,7,8行目を、「データ取得元の準備」で確認したアプリID、kitnoneアプリ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 を修正します。59 行目を(4)で確認した ID に書き換えます。

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

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

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

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

 

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

 

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

動作確認

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

おわりに

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

シリーズの他の回を見る

 

 

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

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

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