ガルーンポータル活用 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