ガルーンポータル活用 Tips #6 社内の物知りになれるポータル

Garoon 開発 Tips

ガルーンポータル活用 Tips #6 社内の物知りになれるポータル

固定リンクがコピーされました

はじめに

固定リンクがコピーされました

中堅・大規模組織向けグループウェア「サイボウズ Garoon」のポータル活用企画第 6 弾。まるでン十年もいるベテラン社員のような、社内の物知りになれるポータルを紹介します。

こんなときに便利です

固定リンクがコピーされました

個人として、社内用語や普段かかわらない部署の人をよく知ることで、仕事をやりやすくできる。
組織として、部署をまたいでお互いのことを良く知ることで風通しが良くなり、働きやすくなる。

完成イメージ

固定リンクがコピーされました

今回作成手順を紹介するのは、右上の「社内用語」ポートレットのみです。ガルーンポータル活用 Tips #2 「社員紹介ポータル」で紹介したランダムに表示される「社員紹介」ポートレットも合わせて表示するとよいでしょう。

ポイント

社内用語、社員紹介とも kintone と連携することで、データのメンテナンスが容易です。
スケジュールなど普段使いのポートレットと同時に使うことで、日々の業務の中で自然に社内のことに詳しくなれます。
コーポレートブログや製品ブログも一緒に表示してみるとよいでしょう。ポートレットの記述に以下の記述するだけで、ポートレットに埋め込むことができます。

1

<iframe src="https://(対象 URL)/" width="800" height="600" frameborder="0"></iframe>

社内用語ポートレットの作成

固定リンクがコピーされました

データ取得元の準備

固定リンクがコピーされました

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

フィールド名	フィールドコード	フィールドタイプ	備考
用語	vocabulary	文字列（1行）
説明	description	文字列（複数行）
説明資料	tempfile	添付ファイル
作成者	作成者	作成者	自動入力
更新者	更新者	更新者	自動入力
更新日時	更新日時	更新日時	自動入力
作成日時	作成日時	作成日時	自動入力

認証は基本的にログインユーザーの権限を使います。アプリの内容を確認したうえで、この kintone アプリのレコードの閲覧権限はすべてのユーザーで閲覧できるように設定しておくことをおすすめします。

kintone アプリを URL 内に含まれるアプリ ID をブラウザーで確認しておきます。これは、アプリデータ取得プログラムの修正時に使います。

例：URL が https://sample.cybozu.com/k/<id> のとき、アプリ ID は <id> です。

リソースの準備

固定リンクがコピーされました

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

JavaScript サンプルコードを参考に、カスタマイズファイル「kinranrec_bozupedia.js」を作成します。
このとき JavaScript サンプルコードの以下を書き換えます。
- 31 行目：「データ取得元の準備」で確認したアプリ ID
- 32 行目：表示件数を変更したい場合は、ここを変更します。
Garoon の「ファイル管理」で今回のポートレット用にフォルダーを作成します。
フォルダーを選択した状態で「ファイルを追加する」をクリックし、以下のファイルを追加します。
- kinranrec_bozupedia.js（修正済み）
ファイルのタイトルをクリックした際、URL 内に含まれる hid（フォルダー ID）、fid（ファイル ID）を確認しておきます。
png ファイルの ID は css ファイルの修正時、js ファイルの ID はポートレット作成時に使います。

例：URL が https://sample.cybozu.com/g/cabinet/view.csp?hid=<hid>&fid=<fid> のとき、hid と fid は以下になります。
- hid：<hid>
- fid：<fid>

JavaScript サンプルコード

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85



/*
 * Garoon white board sample program
 * Copyright (c) 2019 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/

(function($) {
  'use strict';

  // generate randum numbers.
  function generateRandomx(count) {
    const generated = [];
    let generatedCount = generated.length;
    for (let i = 0; i < count; i++) {
      let candidate = Math.floor(Math.random() * count);
      for (let j = 0; j < generatedCount; j++) {
        if (candidate === generated[j]) {
          candidate = Math.floor(Math.random() * count);
          j = -1;
        }
      }
      generated[i] = candidate;
      generatedCount++;
    }
    return generated;
  }

  const APP_ID = 1; // kintoneアプリIDに書き換える
  const DISPLAY_COUNT = 2; // 表示件数
  $.ajax({
    type: 'GET',
    url: '/k/v1/records.json',
    data: {app: APP_ID},
    cache: false,
    dataType: 'json'
  }).done((resp) => {
    const records = resp.records;
    let contentsEle;
    let innerTable;
    let innerDiv;
    const randomAray = generateRandomx(records.length);
    const forNum = (records.length < DISPLAY_COUNT) ? records.length : DISPLAY_COUNT;

    for (let i = 0; i < forNum; i++) {
      contentsEle = $('#kintone_random_record_frame-' + i);
      const url = '/k/' + APP_ID + '/show#record=' + records[randomAray[i]].$id.value;
      const title = [
        '<a href="' + url + '" target="_blank" class="kintone_random_record_top_title">',
        '<b>' + records[randomAray[i]].vocabulary.value + '</b>',
        '</a> - らんだむ社内用語'
      ].join('');

      const contents = records[randomAray[i]].description.value;

      // create title
      innerTable = $('<table></table>', {
        class: 'top_title'
      });
      innerTable.append($('<tbody><tr><td></td></tr></tbody>'));
      innerTable.append(title);

      // create contents
      innerDiv = $('<div></div>', {
        class: 'kintone_random_record_portal_frame'
      });
      innerDiv.append($('<table>', {
        class: 'list_column'
      }));
      innerDiv.append($('<tbody><tr>/tr></tbody>'));
      innerDiv.append(contents);

      // create block
      contentsEle.append(innerTable);
      contentsEle.append(innerDiv);
    }
    if (forNum < DISPLAY_COUNT) {
      for (let j = forNum; j <= DISPLAY_COUNT; j++) {
        $('#kintone_random_record_frame-' + j).remove();
      }
    }
  });// end of done
})(jQuery.noConflict(true));

Garoonポートレットの準備

固定リンクがコピーされました

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


<!--
* Garoon Portal sample program
* Copyright (c) 2016 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
-->

<div id="kintone_random_record_frame-0" class="template-box">
</div>
<div id="kintone_random_record_frame-1" class="template-box">
</div>
<div id="kintone_random_record_frame-2" class="template-box">
</div>
<div id="kintone_random_record_frame-3" class="template-box">
</div>
<div id="kintone_random_record_frame-4" class="template-box">
</div>

<script type="text/javascript" src="https://js.cybozu.com/jquery/3.4.1/jquery.min.js"></script>
<script src="/g/cabinet/download.csp/-/kinranrec_bozupedia.js?hid=8&fid=24&ticket=&.js"></script>

<style type="text/css">
<!--

.template-box{
  margin-bottom: 10px;
  /*padding: 20px 30px;*/
  background: #fff;
}

.kintone_random_record_portal_frame{
  padding: 5px 10px;
}

.kintone_random_record_top_title{
  padding: 5px 5px;
}

-->
</style>

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

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

動作確認

固定リンクがコピーされました

kintone アプリにレコードをいくつか追加します。
Garoon を開いて設置したポータルを確認します。

おわりに

固定リンクがコピーされました

データのメンテナンスも楽々で、社内の長老クラスにじわじわとなっていけそうなポータルを作ってみました。環境が許せば、自分で作った kintone アプリと連携して、ランダムに好きな写真や情報を表示してみてもおもしろそうですね。今後も Garoon ポータル活用シリーズは続きます。お楽しみに！

固定リンクがコピーされました

ガルーンポータル活用 Tips

更新履歴

固定リンクがコピーされました

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

Garoon 開発 Tips