ガルーンポータル活用 Tips #7 情シスへの問い合わせを減らすポータル

中堅・大規模組織向けグループウェア「サイボウズ ガルーン」のポータル活用企画第7弾。これまでの一覧はこちら。
今回は、情シスへの問い合わせを減らすようなポータルの作り方をご提案します。

＜このポータルの利用メリット＞

• 情シスへの問い合わせが減ることで、他の改善業務などに集中ことができる
• すぐ問い合わせるのではなく、自分達同志でシェアしたり情報収集したりする習慣をつけることで、ユーザーの自立を促進する

完成イメージ

このポータルを構成する以下の2つのポートレットの作成手順をご紹介します。

• ガルーンTipsポートレット：掲示板のフォローから最新のコメントをランダムで表示しています。
• ＜おまけ＞あなたのブラウザポートレット：HTMLポートレットに現在のブラウザ情報を表示します。
  ※ Chromium 版 Edge を使っている場合、Chrome と表示されます。

ポイント

• 今回はガルーンの掲示板からの情報取得ですが、社内システムのFAQのようなkintoneアプリもあれば、一緒に表示してみると良いでしょう。ポートレットの内容に以下の記述をするだけで、ポートレットに埋め込むことができます。 

ガルーンTipsポートレットの作成

データ取得元の準備

このポートレット用に以下のような掲示板を1つ作成し、コメント欄にユーザーが自由に書き込めるようにします。GaroonのTips を画像付きで投稿すれば、コメントと画像の両方が表示されます。

その掲示板のタイトルをクリックした時に、URL 内に含まれる aid(掲示 ID)を確認しておきます。 これは、掲示板情報取得プログラムの修正時に使います。(例:aid →〇〇〇の時 https://example.cybozu.com/g/bulletin/view.csp?cid=XXX&aid=〇〇〇)

リソースの準備

今回使うライブラリファイル （tablecloth.js）は以下からダウンロードできます。

garoon-portal7.zip

ファイルの説明

ファイル名	説明	修正が必要か	配置先
tablecloth.js	マウスオーバー時の動きを設定するプログラム	不要	ファイル管理

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

(1)「garoon_tips.js」を作成します（文字コードは「UTF-8」で保存してください）。このとき、15 行目を、「データ取得元の準備」で確認した aid に書き換えます。

ポイント

• 書き込まれたフォローの中から、ランダムで 5 件を表示するプログラムです。表示件数は 16行目で変更できます。

(2) 「main.css」を作成します（文字コードは「UTF-8」で保存してください）。

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

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

• main.css
• garoon_tips.js(修正済み)
• tablecloth.js

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

これは、ポートレット作成時に使います。（例： hid →△△△,fid →◇◇◇の時https://example.cybozu.com/g/cabinet/view.csp?hid=△△△&fid=◇◇◇）

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

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

54〜56 行目をリソースの準備で生成したリンクにそれぞれ書き換えます。

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

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

動作確認

掲示板のフォローと、設置したポータルの内容が一致しているか確認します。

＜おまけ＞ブラウザの情報を表示するには？

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

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

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

おわりに

今回は情シスですが、総務やその他の社内問い合わせを受ける部署でも応用が効くと思います。お試しあれ！

更新履歴

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

シリーズの他の回を見る