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

<!--
* Customize view using CSS framework
* Copyright (c) 2014 Cybozu
*
* Licensed under the MIT License
-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<div id="kintone-costum-view" name="kintone-custom-view" style="margin-top:25px;">
  <div class="grid-container">
    <!-- Nav Bar -->
    <div class="grid-x">
      <div class="large-12 cell">
        <h1>ブログ・連絡掲示板 <small>情報共有・連絡</small></h1>
        <hr />
      </div>
    </div>
    <!-- End Nav -->
   
    <!-- Main Page Content -->
    <div class="grid-x">
      <!-- Main Blog Content -->
      <div id ="articles" name="articles" class="large-12 cell" role="content"> 
      </div> 
      <!-- End Main Content -->
    
    </div>
    <!-- End Main Content -->
    
    <!-- Footer -->
    <footer class="grid-x">
      <div class="large-12 cell">
        <hr />
        <div class="grid-x">
          <div class="large-6 cell">
            <p>© Copyright Ryu Yamashita</p>
          </div>
        </div>
      </div>
    </footer>  
    <!-- End Footer -->
  </div>
</div>

 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

/*
 * Customize view using CSS framework
 * Copyright (c) 2014 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  'use strict';

  kintone.events.on('app.record.index.show', (event)=> {
    // カスタムビューでなければここで終了
    const check = document.getElementsByName('kintone-custom-view');
    if (check.length === 0) {
      return event;
    }
    // 今回のカスタマイズでは動的なUIを利用しないためコメントアウト
    // $(document).foundation();

    const rec = event.records;

    // イベントの多重化による要素生成に対応
    $('#articles').empty();

    const appId = kintone.app.getId();
    const recUrl = `/k/${appId}/show#record=`;

    // 記事の中身を作成
    for (let i = 0; i < rec.length; i++) {
      if (i !== 0) {
        $('#articles').append('<hr />');
      }
      $('#articles').append(`<article id="article${i}" class="articles"></article>`);
      $(`#article${i}`).append(`<h3><a href="${recUrl}${rec[i].$id.value}">${rec[i].title.value}</a></h3>`);
      $(`#article${i}`).append(`<h6>投稿者：${rec[i].author.value} 投稿日：${rec[i].postedDate.value}</h6>`);
      $(`#article${i}`).append('<br>');
      $(`#article${i}`).append(`<div id="articleRaw${i}"></div>`);
      $(`#articleRaw${i}`).append(`<p>${rec[i].article.value.replace(/\r?\n/g, '<br />')}</p>`);
    } // for i
    return event;
  }); // kintone.events
})();