ガルーンポータル活用 Tips #2 「社員紹介ポータル」 – cybozu developer network

今回は、大企業向けグループウェア「サイボウズガルーン」のポータル活用企画第二弾として、「社員紹介ポータル」を作成していきたいと思います。
（キャプチャの左下のポートレットが今回作成していくポートレットです）

完成図

特定の期間内に入社した人を紹介するポータルとして活用していきます。
kintoneアプリからデータを取得し、ランダムに決められた数の社員を紹介する処理を加えるので、毎回違った社員が表示され多くの社員紹介を目にすることができます。

基本的には前回の記事と同じテクニックでkintoneのレコードを取得し、HTMLポートレットに表示していきます。

kintoneアプリ(自己紹介アプリ)の準備

Garoonのポータルからデータを参照させるためのアプリを作成していきます。
kintoneアプリのフィールドは以下のように配置していきます。

フィールド名	フィールドコード	フィールドタイプ	備考
氏名	name	文字列(1行)
入社日	hire_date	日付
写真	attachment	添付ファイル
配属部署	department	文字列(1行)
座右の銘	motto	文字列(1行)
自己紹介	self_introduction	文字列(複数行)

認証は基本的にログインユーザーの権限を使います。社員紹介なので問題ないかと思いますが、このkintoneアプリのレコードの閲覧権限はすべてのユーザーで閲覧できるように設定しておくことをお勧めします。

リソースの準備

第一弾と同様に、静的ファイル置き場としてガルーンの「ファイル管理」を使います。
今回使う画像ファイル及びJavaScript,CSSファイル一式は以下です。

「garoon-kin2.zip」

では、ファイル管理を使ってリソースの準備をしていきたいと思います。

1.分りやすいようにポートレット用にフォルダを作成します。今回は「新入社員紹介用」とします。
2.画像ファイル「icn_link.png」及びjavascriptファイル「jquery.jtruncsubstr-1.0rc.js」を保存します。
3.次に「icn_link.png」「jquery.jtruncsubstr-1.0rc.js」を選択した時に、リンク内に含まれるhid(フォルダID),fid(ファイルID)を確認しておきます。これは、後程ポートレット作成時に使いますのでメモをしておきましょう。

例： hid →XXX,fid →〇〇〇の時https://example.cybozu.com/g/cabinet/view.csp?hid=XXX&fid=〇〇〇

4.次にレイアウト調整用ファイル「main.css」を作成します。このとき、3でコピーしたリンクを224行目に記載します。

[main.css]

5.次に、garoon-kin-integration.jsの以下の項目を書き換えます。