カスタマイズビューと CSS フレームワークでオリジナルのビューを作る方法

著者名: 山下 竜 (External link)

目次

はじめに

kintone に CSS も適用しやすくなって、挑戦中の方もいらっしゃるのではないでしょうか?
そして、出来れば kintone らしくファストに仕上げるため、CSS フレームワーク(有名どころは Bootstrap や Foundation 等)の利用を考えられた方も少なくないと思います。
私もそうでした。

今回は、CSS フレームワークのひとつ「Foundation」をカスタマイズビューに適用してブログ風のビューに仕上げる方法を紹介します。
社内のブログや連絡掲示板としてお使いいただけると思います。

できあがりイメージ

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/171/ (External link)

ログイン情報は cybozu developer network デモ環境 で確認してください。

アプリの準備

次のフィールドを含むアプリをご準備ください。

フィールド名(例)
フィールドコード
フィールドタイプ
タイトル
title
文字列 (1行)
投稿者
author
文字列 (1行)
投稿日
postedDate
日付
内容
article
文字列 (複数行)

コードの適用方法

HTML

「一覧」の設定で「レコード一覧の表示形式」で「カスタマイズ」を選択し、「ページネーションを表示する」にチェックを入れます。
「ページネーションを表示する」にチェックを入れると、カスタマイズ形式の一覧画面で kintone JavaScript API の event.records が使用できます。

「HTML」のテキストエリアに次の「HTML ソースコード」を貼り付けます。
Foundation の 公式サンプル (External link) ドキュメント (External link) を参考にコーディングします。

1 行目で CSS を読み込んでいますが、原則としては「JavaScript / CSS でカスタマイズ」画面で CSS を適用します。
今回は「JavaScript / CSS でカスタマイズ」で CSS を読み込むと kintone 全体の CSS に影響を及ぼすため、HTML 内に 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
<!--
* 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>

JavaScript

JavaScript は以下を追加します。

今回のカスタマイズでは動的な UI を使用しないため、foundation.min.js やコード内の $(document).foundation(); がなくても動作します。

  • URL 指定で追加
    • https://js.cybozu.com/jquery/3.6.1/jquery.min.js
    • https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js
  • アップロードで追加
    • 下記ソースコードを sample.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
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
})();

JavaScriptソースコードの説明

主なポイントは次のとおりです。

  • 動的に変化する記事内容やニュースを List 要素でカスタマイズビュー(HTML)に追加
  • 「Foundation」の利用のために、jQuery をロードしていることを利用して、DOM 操作を jQuery で記述

注意事項

今回の注意点は次のとおりです。

  • 今回は CSS フレームワークとして「Foundation 6」を用いていますが、対応ブラウザー、ライセンス等利用に関する制限は各自で確認してください。
  • 今回外部ライブラリを無償 CDN からロードしていますので、継続性等については 公式サイト (External link) を確認してください。

最後に

CSS フレームワーク「Foundation 6」を用いた画面カスタマイズ、いかがでしたでしょうか?
CSS フレームワークの利用は、デザインが苦手でもそれなりの見た目を手に入れることができますし、kintone のファストさとの相性もよいと思います。

今回は簡単な例を紹介しましたが、CSS フレームワークの Grid 等基本機能と kintone の API 等を駆使すれば kintone でポータルサイトを作り上げることもできます。
皆さまの参考になれば幸いです。

information

この Tips は、2022 年 11 月版 kintone で動作を確認しています。