ガルーンポータル活用Tips #5「社内報ポータル」

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

更新日：2023年02月01日

はじめに

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

中堅・大規模組織向けグループウェア「サイボウズGaroon」のポータル活用企画第5弾。一歩先の社内報の作り方を紹介します。

こんなときに便利です

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

社内の各部署の最新情報をまとめて表示したいが、見た目もできるだけ格好良くしたい！
社内報をもっと作業コストをかけずに作りたい！

こちらのポータルで簡単に実現できます。

完成イメージ

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

HTMLポートレットを使った社内報ポータルです。下の方だけ見ると、Garoonポータルと気付かないかもしれないくらいのメイクアップですね。

各記事の内容は、Garoonの掲示板やkintoneアプリから抽出しているので、ポータルの管理権限がない人でも直接記事を書くことができます。

ポータルの構成

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

今回は次の構成で作りました。

上段のメイン記事、下段のサブ記事左：Garoon掲示板の本文
下段のサブ記事中央：Garoon掲示板のフォローコメント
下段のサブ記事右：kintoneアプリ

各部の記事をまとめて掲載するポートレットの作成

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

データ取得元の準備

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

データを取得したいGaroonの掲示板や、kintoneアプリを用意します。
データ取得プログラムの修正時に必要なため、以下の方法でそれぞれのIDを控えます。

使いたい掲示板のタイトルをクリックした際、URL内に含まれるaid（掲示ID）を確認
例：URLが。https://sample.cybozu.com/g/bulletin/view.csp?cid=<cid>&aid=<aid> のとき、aidは <aid> です。
kintoneアプリのURL内に含まれるアプリIDをブラウザーで確認
例：URLが。https://sample.cybozu.com/k/<id> のとき、アプリIDは <id> です。

kintoneアプリのフィールドは以下のように配置していきます。

フィールド名	フィールドコード	フィールドタイプ	備考
作成日時	作成日時	作成日時	自動入力
タイトル	title	文字列（1行）
内容	content	リッチエディター

リソースの準備

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

今回使う画像ファイルおよびライブラリファイル（magazine.css）は以下からダウンロードできます。

garoon-portal5.zip

ファイルの説明

ファイル名	説明	修正が必要か	配置先
magazine.css	レイアウト調整用ファイル	必要（後述）	JavaScript / CSSによるカスタマイズ
bg_line01.png	見出しの背景装飾用の画像	不要	ファイル管理

次の手順でリソースの準備をしていきます。

JavaScriptサンプルコードを参考に、カスタマイズファイル「house_magazine.js」を作成します。
文字コードは「UTF-8」で保存してください。
このときJavaScriptサンプルコードの以下を書き換えます。
- 13行目：メインに表示する掲示板のID（aid）
- 14行目：サブに表示する掲示板のID（aid）
- 15行目：フォローコメントを表示する掲示板のID（aid）
- 16行目：「データ取得元の準備」で確認したkitnoneアプリID
ポイント

JavaScriptサンプルコード内の関数と取得するデータの関係は以下です。
- getArticle：掲示板本文のデータを取得
- getNewestFollow：掲示板フォローコメントのデータを取得
- getkintoneData：kintoneアプリのデータを取得
Garoonの「ファイル管理」で今回のポートレット用にフォルダーを作成し、以下のファイルを追加します。
- bg_line01.png
ファイルのタイトルをクリックした際、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>
「magagine.css」を開き、67行目を3で確認したIDに書き換えて保存します。
CSSサンプルコードを参考に「magazine-customize.css」を作成します。

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
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279


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

(() => {
  'use strict';

  // ---- settings ----//{{{
  const MAIN_TOPIC_ID = 1; // main topic id
  const SUB_TOPIC_ID = 2; // sub topic(article) id
  const FOLLOW_TOPIC_ID = 3; // sub topic(follow) id
  const APP_ID = 4; // kintone app id

  // function to escape html
  const escapeHtml = (str) => {
    if (!str) {
      return '';
    }
    return str
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  };

  // ---- xml settings ----//{{{

  // function to make XML Header for Garoon API
  // arg1:services:service type (base,schedule)
  // arg2:action:name of API
  // return:XML header string
  const makeXMLHeader = (services, action) => {
    let xmlns;
    switch (services) {
      case 'base':
        xmlns = 'base_services="http://wsdl.cybozu.co.jp/base/2008"';
        break;
      case 'bulletin':
        xmlns = 'workflow_services="http://wsdl.cybozu.co.jp/bulletin/2008"';
        break;
      default:
        alert('Can not select services');
        return;
    }

    const xmlHeader =
            '<?xml version="1.0" encoding="UTF-8"?>' +
            '<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://www.w3.org/2003/05/soap-envelope" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" xmlns:' + xmlns + '>' +
            '<SOAP-ENV:Header>' +
              '<Action SOAP-ENV:mustUnderstand="1" xmlns="http://schemas.xmlsoap.org/ws/2003/03/addressing">' + escapeHtml(action) + '</Action>' +
              '<Timestamp SOAP-ENV:mustUnderstand="1" Id="id" xmlns="http://schemas.xmlsoap.org/ws/2002/07/utility">' +
                  '<Created>2037-08-12T14:45:00Z</Created>' +
                  '<Expires>2037-08-12T14:45:00Z</Expires>' +
              '</Timestamp>' +
              '<Locale>jp</Locale>' +
            '</SOAP-ENV:Header>';
    return xmlHeader;
  };

  // function to set XMLHTTP
  // return xmlhttp object
  const setXMLHTTP = () => {
    let xmlhttp = false;
    if (typeof ActiveXObject !== 'undefined') {
      try {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      } catch (e) {
        xmlhttp = false;
      }
    }
    if (!xmlhttp && typeof XMLHttpRequest !== 'undefined') {
      xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
  };

  // ---- xml settings end ----//}}}

  // ---- getGrnArticleData ----//{{{
  const getArticle = (topic_id) => {
    return new Promise((resolve, reject) => {
      const xhrForArticle = setXMLHTTP();
      const url = '/g/cbpapi/bulletin/api.csp';
      const apiName = 'BulletinGetTopicByIds';

      const articleRequest =
                makeXMLHeader('bulletin', apiName) +
                '<SOAP-ENV:Body>' +
                    '<' + apiName + '>' +
                        '<parameters>' +
                          '<topics xmlns="" topic_id="' + topic_id + '" is_draft="false"></topics>' +
                        '</parameters>' +
                    '</' + apiName + '>' +
                '</SOAP-ENV:Body>' +
                '</SOAP-ENV:Envelope>';
      console.log(articleRequest);

      xhrForArticle.open('POST', url, true);
      xhrForArticle.onload = function() {
        if (xhrForArticle.readyState === 4 && xhrForArticle.status === 200) {
          resolve(xhrForArticle.responseXML.getElementsByTagName('topic')[0]);
        }
      };
      xhrForArticle.send(articleRequest);
    });
  };
  // ---- getGrnArticleData finish ----//}}}

  // ---- getGrnFollowData ----//{{{
  const getNewestFollow = () => {
    return new Promise((resolve, reject) => {
      const xhrForFollow = setXMLHTTP();
      const url = '/g/cbpapi/bulletin/api.csp';
      const apiName = 'BulletinGetFollows';

      const followRequest =
                makeXMLHeader('bulletin', apiName) +
                '<SOAP-ENV:Body>' +
                    '<' + apiName + '>' +
                        '<parameters topic_id="' + FOLLOW_TOPIC_ID + '" offset="0" limit="1"></parameters>' +
                    '</' + apiName + '>' +
                '</SOAP-ENV:Body>' +
                '</SOAP-ENV:Envelope>';
      console.log(followRequest);

      xhrForFollow.open('POST', url, true);
      xhrForFollow.onload = function() {
        if (xhrForFollow.readyState === 4 && xhrForFollow.status === 200) {
          resolve(xhrForFollow.responseXML.getElementsByTagName('follow')[0]);
        }
      };
      xhrForFollow.send(followRequest);
    });
  };
  // ---- getGrnFollowData finish ----//}}}

  // ---- getKintoneData ----//{{{
  const getKintoneData = () => {
    fetch('/k/v1/records.json?app=' + APP_ID + '&query=' + encodeURIComponent('order by $id desc limit 1 offset 0'), {
      method: 'GET',
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
      },
      cache: 'no-cache'
    })
      .then(response => response.json())
      .then(resp => {
        const records = resp.records;
        const url = '/k/' + APP_ID + '/show#record=' + records[0].$id.value;
        const title = '<a href="' + url + '" target="_blank"><b>' + records[0].title.value + '</b></a>';
        const contents = records[0].content.value;

        // データを表示
        document.querySelector('#subPost3 .postTitle').innerHTML += title;
        document.querySelector('#subPost3 .postText span').innerHTML += contents;
      });
  };
  // ---- getKintoneData finish ----//}}}

  // ---- showPortlet ----//{{{

  // ---- showMainArticle ----//{{{
  const showMainArticleData = (article) => {
    console.log(article);
    const bodyNode = article.children;
    const fileNode = bodyNode[0].children;

    const subject = '<a href="/g/bulletin/view.csp?&aid=' + MAIN_TOPIC_ID + '" target="_blank"><b>' + article.getAttribute('subject') + '</b></a>';
    let body;
    if (bodyNode[0].getAttribute('html_body') != null) {
      body = bodyNode[0].getAttribute('html_body');
      document.querySelector('.mainPost .postText span').setAttribute('class', 'html');
    } else {
      body = bodyNode[0].getAttribute('body');
      document.querySelector('.mainPost .postText span').setAttribute('class', 'text');
    }
    const fileName = fileNode[fileNode.length - 1].getAttribute('name');
    const fileId = fileNode[fileNode.length - 1].getAttribute('id');
    const fileUrl = '/g/bulletin/file_download.csp/-/' + fileName + '?fid=' + fileId + '&ticket=&.jpg';

    // show data
    document.querySelector('.mainPost .postTitle').innerHTML += subject;
    document.querySelector('.mainPost .postText span').innerHTML += body;
    const imgElement = document.createElement('img');
    imgElement.src = fileUrl;
    document.querySelector('.mainPost .photo').prepend(imgElement);
  };
  // ---- showMainArticle finish ----//}}}

  // ---- showSubArticle ----//{{{
  const showSubArticleData = (article) => {
    console.log(article);
    const bodyNode = article.children;
    const subjectLink = document.createElement('a');
    subjectLink.href = '/g/bulletin/view.csp?&aid=' + SUB_TOPIC_ID;
    subjectLink.target = '_blank';
    const subjectText = document.createTextNode(article.getAttribute('subject'));
    subjectLink.appendChild(subjectText);
    const subjectElement = document.createElement('b');
    subjectElement.appendChild(subjectLink);

    let bodyContent;
    if (bodyNode[0].getAttribute('html_body') != null) {
      bodyContent = bodyNode[0].getAttribute('html_body');
      const postTextSpan = document.querySelector('#subPost1 .postText span');
      postTextSpan.setAttribute('class', 'html');
      postTextSpan.innerHTML = bodyContent;
    } else {
      bodyContent = bodyNode[0].getAttribute('body');
      const postTextSpan = document.querySelector('#subPost1 .postText span');
      postTextSpan.setAttribute('class', 'text');
      postTextSpan.textContent = bodyContent;
    }

    // show data
    document.querySelector('#subPost1 .postTitle').appendChild(subjectElement);
  };
  // ---- showSubArticle finish ----//}}}

  // ---- showFollow ----//{{{
  const showFollowData = (subject, newestFollow) => {
    console.log(newestFollow);
    const subjectLink = document.createElement('a');
    subjectLink.href = '/g/bulletin/view.csp?&aid=' + FOLLOW_TOPIC_ID;
    subjectLink.target = '_blank';
    const subjectText = document.createTextNode(subject);
    subjectLink.appendChild(subjectText);
    const subjectElement = document.createElement('b');
    subjectElement.appendChild(subjectLink);

    let textContent;
    if (newestFollow.getAttribute('html_text') != null) {
      textContent = newestFollow.getAttribute('html_text');
      const postTextSpan = document.querySelector('#subPost2 .postText span');
      postTextSpan.setAttribute('class', 'html');
      postTextSpan.innerHTML = textContent;
    } else {
      textContent = newestFollow.getAttribute('text');
      const postTextSpan = document.querySelector('#subPost2 .postText span');
      postTextSpan.setAttribute('class', 'text');
      postTextSpan.textContent = textContent;
    }

    // show data
    document.querySelector('#subPost2 .postTitle').appendChild(subjectElement);
  };
  // ---- showFollow finish ----//}}}

  // ---- get Main Article-----//{{{
  getArticle(MAIN_TOPIC_ID).then(showMainArticleData, (e) => {
    console.log(e);
  });
  // ---- get Main Article finish -----//}}}

  // ---- get Sub Article-----//{{{
  getArticle(SUB_TOPIC_ID).then(showSubArticleData, (e) => {
    console.log(e);
  });
  // ----get Sub Article finish -----//}}}

  // ----get Sub Article(follow)-----{{{
  getArticle(FOLLOW_TOPIC_ID).then((article) => {
    const subject = article.getAttribute('subject');
    getNewestFollow().then((follow) => {
      showFollowData(subject, follow);
    });
  });
  // ----get Sub Article(follow) finish -----}}}

  // ----get Main Article-----//
  getKintoneData();
  // ----showPortlet finish----//}}}

})();

CSSサンプルコード

 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


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

/*↓ 設定変更可能 ↓*/

/*横*/
/*タイトル*/
.titleArea .title {
  color: #fff; /*文字色*/
  font-size: 38px; /*文字サイズ*/
  letter-spacing: 0.2em; /*文字間*/
  background-color: #006699; /*背景色*/
}

.titleArea .date,
.titleArea .date .days {
  border-color: #006699; /*枠線、下線の色*/
}

/*タイトル*/
#magazine .postTitle {
  border-color: #006699; /*下線の色*/
}

/*記事*/
#magazine .postText {
  font-size: 14px; /*文字サイズ*/
  line-height: 1.5; /*行間*/
}

/*メイン記事*/
.mainPost .postTitle {
  font-size: 30px; /*メイン記事タイトルの文字サイズ*/
}

/*サブ記事*/
.postWrapper {
  border-color: #006699; /*下線の色*/
}
.subPost .postTitle {
  font-size: 20px; /*サブ記事タイトルの文字サイズ*/
}

Garoonポートレットの準備

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

今回使うポートレットを作成していきます。
新規にHTMLポートレットを作成し、下記HTMLを「ポートレットの内容」に記述します。

  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
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114


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

<div id="magazine">
  <div class="header">
    <div class="title">
      <!-- ▼▼社内報タイトル▼▼ -->
      Cybozu TIMES
      <!-- ▲▲社内報タイトル▲▲ -->
    </div>
    <div class="date">
      <!-- ▼▼発行年月日▼▼ -->
      2016年11月10日（木曜日）
      <!-- ▲▲発行年月日▲▲ -->
    </div>
  </div>
  <div class="main">
    <div class="postWrapper">
      <div class="titleArea">
        <div class="title block">
          <!-- ▼▼社内報タイトル▼▼ -->
          Cybozu TIMES
          <!-- ▲▲社内報タイトル▲▲ -->
        </div>
        <div class="date block">
          <div class="days">
            <!-- ▼▼発行日▼▼ -->
            11月10日（木）
            <!-- ▲▲発行日▲▲ -->
          </div>
          <div class="vol">
            <!-- ▼▼号数（「第○号」など）▼▼ -->
            創刊号
            <!-- ▲▲号数▲▲ -->
          </div>
        </div>
      </div>
      <!-- /.titleArea -->

      <div class="mainPost">
        <div class="postTitle">
          <!-- ▼▼メイン記事のタイトル▼▼ -->
          <!-- ▲▲メイン記事のタイトル▲▲ -->
        </div>
        <div class="postText">
          <!-- ▼▼メイン記事の本文　※見た目の通りに改行、表示されます。▼▼ -->
          <span></span>
          <!-- ▲▲メイン記事の本文▲▲ -->
        </div>
        <div class="photo">
          <!-- ▼▼メイン記事の画像▼▼ -->
          <!-- ▲▲メイン記事の画像▲▲ -->
          <div class="photoText">
            <!-- ▼▼メイン記事の説明文▼▼ -->
            <!-- ▲▲メイン記事の説明文▲▲ -->
          </div>
        </div>
      </div>
      <!-- /.mainPost -->
    </div>
    <!-- /.postWrapper -->

    <!-- ▼▼記事（３分割）▼▼ -->
    <div class="postWrapper col3">
      <div class="subPost" id="subPost1">
        <div class="postTitle">
          <!-- ▼▼記事のタイトル▼▼ -->
          <!-- ▲▲記事のタイトル▲▲ -->
        </div>
        <div class="postText">
          <!-- ▼▼記事の本文　※見た目の通りに改行、表示されます。▼▼ -->
          <span></span>
          <!-- ▲▲メイン記事の本文▲▲ -->
        </div>
      </div>
      <!-- /.subPost -->

      <div class="subPost" id="subPost2">
        <div class="postTitle">
          <!-- ▼▼記事のタイトル▼▼ -->
          <!-- ▲▲記事のタイトル▲▲ -->
        </div>
        <div class="postText">
          <!-- ▼▼記事の本文　※見た目の通りに改行、表示されます。▼▼ -->
          <span></span>
          <!-- ▲▲メイン記事の本文▲▲ -->
        </div>
      </div>
      <!-- /.subPost -->

      <div class="subPost" id="subPost3">
        <div class="postTitle">
          <!-- ▼▼記事のタイトル▼▼ -->
          <!-- ▲▲記事のタイトル▲▲ -->
        </div>
        <div class="postText">
          <!-- ▼▼記事の本文　※見た目の通りに改行、表示されます。▼▼ -->
          <span></span>
          <!-- ▲▲メイン記事の本文▲▲ -->
        </div>
      </div>
      <!-- /.subPost -->
    </div>
    <!-- /.postWrapper -->
    <!-- ▲▲記事（３分割）▲▲ -->
  </div>
  <!-- /.main -->
</div>
<!-- /#magazine -->

JavaScriptファイルとCSSファイルのアップロード

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

JavaScript / CSSによるカスタマイズから以下を追加します。

JavaScriptカスタマイズ

house_magazine.js

CSSカスタマイズ

magazine.css
magazine-customize.css

ポータルに配置

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

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

動作確認

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

上段のメイン記事：Garoon掲示板の本文と、ポートレットの内容が一致しているか確認します。
下段のサブ記事左：同上
下段のサブ記事中央：Garoon掲示板の最新のフォローと、ポートレットの内容が一致しているか確認します。
下段のサブ記事右：kintoneアプリにレコードを追加し、最新レコードとポートレットの内容が一致しているか確認します。

おわりに

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

Garoon掲示板の本文、Garoon掲示板のフォロー、kintoneアプリと、各種データを取得する総まとめのようなポートレットを作りました。
今後もGaroonポータル活用シリーズは続きます。

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

ガルーンポータル活用Tips

更新履歴

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

2020/02/19
jQueryの追加手順およびjQuery.noConflict(true)を使うようにコードを修正
2024/04/16
- jQueryを使わないようにコードを修正
- JavaScriptとCSSファイルをファイル管理にアップロードする方法から、ポータルの「JavaScript / CSSによるカスタマイズ」を使用する方法に変更

このTipsは、2024年4月版Garoonで動作を確認しています。

Garoon API

ポータル