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

目次

はじめに

中堅・大規模組織向けグループウェア「サイボウズ 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 リッチエディター

リソースの準備

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

garoon-portal5.zip

ファイルの説明

ファイル名 説明 修正が必要か 配置先
magagine.css レイアウト調整用ファイル 不要 ファイル管理
bg_line01.png 見出しの背景装飾用の画像 不要 ファイル管理

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

  1. JavaScript サンプルコード を参考に、カスタマイズファイル「house_magagine.js」を作成します。
    文字コードは「UTF-8」で保存してください。
    このとき JavaScript サンプルコードの以下を書き換えます。

    • 13 行目:メインに表示する掲示板の ID(aid)
    • 14 行目:サブに表示する掲示板の ID(aid)
    • 15 行目:フォローコメントを表示する掲示板の ID(aid)
    • 16 行目:「データ取得元の準備」で確認した kitnone アプリ ID

    ポイント

    JavaScript サンプルコード 内の関数と取得するデータの関係は以下です。

    • getArticle:掲示板本文のデータを取得
    • getNewestFollow:掲示板フォローコメントのデータを取得
    • getkintoneData:kintone アプリのデータを取得
  2. Garoon の「ファイル管理」で今回のポートレット用にフォルダーを作成します。

  3. フォルダーを選択した状態で「ファイルを追加する」をクリックし、以下のファイルを追加します。

    • house_magagine.js(修正済み)
    • bg_line01.png
  4. ファイルのタイトルをクリックした際、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>
  5. CSS サンプルコード を参考に、「magazine.css」を作成します。
    文字コードは「UTF-8」で保存してください。
    ここで、67 行目を 4 で確認した ID に書き換えます。

  6. 修正した「magazine.css」もファイル管理に追加します。同様に ID を確認しておきます。

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

(function($) {
  '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
  function 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
  function 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
  function 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 ----//{{{
  function 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 ----//{{{
  function 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 ----//{{{
  function getKintoneData() {
    $.ajax({
      type: 'GET',
      url: '/k/v1/records.json',
      data: {app: APP_ID, query: 'order by $id desc limit 1 offset 0'},
      cache: false,
      dataType: 'json'
    }).done((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;

      // show data
      $('#subPost3 .postTitle').append(title);
      $('#subPost3 .postText span').append(contents);
    });// end of done
  }
  // ---- getKintoneData finish ----//}}}

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

  // ---- showMainArticle ----//{{{
  function 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');
      $('.mainPost .postText span').attr('class', 'html');
    } else {
      body = bodyNode[0].getAttribute('body');
      $('.mainPost .postText span').attr('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
    $('.mainPost .postTitle').append(subject);
    $('.mainPost .postText span').append(body);
    $('.mainPost .photo').prepend('<img src="' + fileUrl + '">');
  }
  // ---- showMainArticle finish ----//}}}

  // ---- showSubArticle ----//{{{
  function showSubArticleData(article) {
    console.log(article);
    const bodyNode = article.children;
    const subject = '<a href="/g/bulletin/view.csp?&aid=' + SUB_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');
      $('#subPost1 .postText span').attr('class', 'html');
    } else {
      body = bodyNode[0].getAttribute('body');
      $('#subPost1 .postText span').attr('class', 'text');
    }

    // show data
    $('#subPost1 .postTitle').append(subject);
    $('#subPost1 .postText span').append(body);
  }
  // ---- showSubArticle finish ----//}}}

  // ---- showFollow ----//{{{
  function showFollowData(subject, newestFollow) {
    console.log(newestFollow);
    const title = '<a href="/g/bulletin/view.csp?&aid=' + FOLLOW_TOPIC_ID + '" target="_blank"><b>' + subject + '</b></a>';
    // const text = (newestFollow.getAttribute('html_text') != null) ? newestFollow.getAttribute('html_text') : newestFollow.getAttribute('text');
    let text;
    if (newestFollow.getAttribute('html_text') != null) {
      text = newestFollow.getAttribute('html_text');
      $('#subPost2 .postText span').attr('class', 'html');
    } else {
      text = newestFollow.getAttribute('text');
      $('#subPost2 .postText span').attr('class', 'text');
    }

    // show data
    $('#subPost2 .postTitle').append(title);
    $('#subPost2 .postText span').append(text);
  }
  // ---- 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----//}}}

})(jQuery.noConflict(true));
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
 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
/*
 * Garoon Portal sample program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

@charset "UTF-8";

/*基本設定*/
a img {
  border: none;
}

/*clearfix*/
#magazine .header:after,
#magazine .mainPost:after,
#magazineL .postWrapperTopL:after,
#magazineL .titleAreaL:after,
#magazineL .mainPostL:after,
#magazineL .postWrapperL:after {
  content: "";
  display: block;
  clear: both;
}

/*共通*/
#magazine,
#magazineL {
  position: relative;
  width: 1000px;
  margin: 0 auto;
}
.header .title {
  text-align: center;
  font-size: 11px;
  letter-spacing: 2em;
}
.header .date {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 11px;
}
.main {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


/*横*/
/*タイトル*/
#magazine .titleArea {
  display: table;
  width: 100%;
}
#magazine .titleArea .title {
  display: table-cell;
  width: 80%;
  padding: 10px;
  text-align: center;
  background-image: url(/g/cabinet/download.csp/-/bg_line01.png?hid=37&fid=194&ticket=&.png);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  vertical-align: middle;
}
#magazine .titleArea .date {
  display: table-cell;
  width: 20%;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid #000;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  vertical-align: middle;
}
#magazine .titleArea .date .days {
  border-bottom: 1px solid #000;
}
#magazine .titleArea .date .vol {
  margin-top: 5px;
  font-size: 24px;
}

/*記事タイトル*/
#magazine .postTitle {
  margin-bottom: 8px;
  font-size: 20px;
  text-align: center;
  border-bottom: 1px solid #000;
}
/*記事*/
#magazine .postText {
  word-break: break-all;
}
#magazine .postText .text {
  white-space: pre-wrap;
}
#magazine .postText .html {
}

/*写真設定*/
#magazine .photo {
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.3);
  -moz-box-shadow 0 0 8px rgba(0,0,0,0.3);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#magazine .photo img {
  width: 100%;
  height: auto;
}
#magazine .photo .photoText {
  font-size: 12px;
}
/*メイン記事*/
#magazine .mainPost {
  margin: 10px 0;
  padding-bottom: 12px;
}
#magazine .mainPost .postTitle {
  margin-bottom: 12px;
}
#magazine .mainPost .postText {
  float: left;
  width: 50%;
}
#magazine .mainPost .photo {
  float: right;
  width: 50%;
}
/*サブ記事ブロック*/
#magazine .postWrapper {
  border-bottom: 1px dashed #000;
}
#magazine .postWrapper:last-child {
  border-bottom: none;
}
/*3分割*/
#magazine .postWrapper.col3 {
  display: table;
}
#magazine .postWrapper.col3 .subPost {
  display: table-cell;
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/*2分割*/
#magazine .postWrapper.col2 {
  display: table;
}
#magazine .postWrapper.col2 .subPost {
  display: table-cell;
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Garoon ポートレットの準備

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

11、14 行目の「house_magazine.js」、「magagine.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
 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
<!--
* Garoon Portal sample program
* Copyright (c) 2016 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
-->

<!-- ▼Javascript設定▼ -->
<script type="text/javascript" src="https://js.cybozu.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/g/cabinet/download.csp/-/house_magazine.js?hid=7&fid=21&ticket=&.js"></script>

<!-- ▼CSS設定▼ -->
<link rel="stylesheet" href="/g/cabinet/download.csp/-/magazine.css?hid=7&fid=22&ticket=&.css" type="text/css"/>
<style type="text/css">
  <!--
  /*↓設定変更可能↓*/
  /*横*/
  /*タイトル*/
  .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; /*サブ記事タイトルの文字サイズ*/
  }

  -->
</style>

<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 -->

    <!-- ▼▼記事(3分割)▼▼ -->
    <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 -->
    <!-- ▲▲記事(3分割)▲▲ -->
  </div>
  <!-- /.main -->
</div>
<!-- /#magazine -->

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

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

動作確認

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

おわりに

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

ガルーンポータル活用 Tips

更新履歴

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