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

フォローする

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

完成図

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

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

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

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

フィールド名 フィールドコード フィールドタイプ 備考
氏名  name 文字列(1行)   
入社日 hire_date 日付  
写真 attachment 添付ファイル   
座右の銘 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の以下の項目を書き換えます。

  • 39行目APP_ID を作成した「自己紹介アプリ」のアプリ番号に書き換えます。
  • 40行名DATE_NUM で、何日前以降に入社した人を抽出するかを設定します。

[garoon-kin-integration.js]

ポイント

  • 関数 generateRandomx にて乱数を生成し、毎回ランダムに表示する順番をかえています。
  • 関数 textTrimerにて自己紹介が100文字以上の場合はトリミングして末尾に「…」をつけています。

※また、今回のサンプルは、blobオブジェクトを取り扱っているためIE9では画像の取得をおこなえません。

最後に、main.css及び、garoon-kin-integration.jsをファイル管理に保存します。このとき、手順3と同様にそれぞれのファイルのダウンロードリンクをのちほどポートレット作成時に使うのでひかえておいてください。

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

今回使うポートレットを作成していきます。
15,16,17行目の「main.css」「jquery.jtruncsubstr-1.0rc.js」「garoon-kin-integration.js」のダウンロードリンクをリソースの準備で生成したリンクにそれぞれ書き換えます。

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

動作確認

kintoneにいくつかのレコード登録します。

javascriptで50日前以降に入社した日を、ガルーンポートレットで絞り込んで表示するように指定します。(実行日は、2016/07/15です)。

ガルーンを開いて設置したポータルを確認します。

おわりに

無事に社員紹介ポートレットができました!

今回は、ガルーンポートレットをkintoneと連携させて動的に社員紹介を掲示するポートレットを作成しました。 応用すれば、他にもいろいろなパターンで動的なポートレットを作成できると思うのでぜひチャレンジしてみてください!

シリーズの他の回を見る

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

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

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

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