kintone ポータルのカスタマイズをしてみよう!

目次

はじめに

kintone のポータル画面のお知らせ掲示板には、グラフやアプリの数レコードを表示できます。
JavaScript を使うと、任意のボタンの設置や独自のデザインを適用するなど、ポータル全体を自由にカスタマイズできます。

標準のポータル

カスタマイズ例

このように、業務に必要なことだけを表示したり、独自のグラフを表示したりさまざまなことができます。
モバイルにも同じく適用できます。

ポータルカスタマイズ関連機能のポイントを説明します。

ポータル表示イベントやポータルの上の空白部分の要素を取得する API で、ボタンを置く、リンクを動的に設置する、などのカスタマイズができます。

2. ポータルデザインツール「kintone Portal Designer」

上記の API を使えば自由なカスタマイズが可能ですが、HTML と CSS、JavaScript のすべての知識が必要になります。
kintone Portal Designer を使うと、JavaScript の知識がなくても、HTML と CSS だけでカスタマイズできます。

kintone Portal Designer の使い方については、下記記事で詳しく紹介していますのでぜひ確認してください!
Kintone Portal Designer を使ってポータルをデザインしよう

3. ポータルに表示されるコンテンツ

ポータルの設定画面で、ポータルに表示されるコンテンツ(お知らせ掲示板、通知、未処理、スペース、アプリ)を、それぞれ個別に表示するかを設定できます。

表示、非表示の設定はユーザーごとではなく、ドメインごとに保存されます。

この設定により、不要なコンテンツを非表示にしてカスタマイズしたポータルを表示する、という使い方もできます。

JavaScript を利用したポータルのカスタマイズ方法

カスタマイズ例: ポータルの上部に出勤・退勤ボタンを設置する

まずはポータル API を使って、ライトなカスタマイズからやってみましょう。
すでに kintone で出退勤管理システムがある、という想定で、そのアプリを開かずともポータル画面から操作できるような「ボタン」を設置してみます。

 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
/*
 * kintone Portal sample program
 * Copyright (c) 2022 Cybozu
 *
 * Licensed under the MIT License
 */

(() => {

  'use strict';

  // ポータル表示時のイベント
  kintone.events.on('portal.show', () => {

    // ポータルの上側の空白部分の要素を取得する
    const el = kintone.portal.getContentSpaceElement();

    // 出勤ボタン作成
    const clockInButton = document.createElement('button');
    clockInButton.textContent = '出勤';
    clockInButton.style.margin = '5px 0 0 16px';
    clockInButton.onclick = () => {
      // 出勤の処理
      alert('出勤ボタンを押しました');
    };
    el.appendChild(clockInButton);

    // 退勤ボタン作成
    const clockOutButton = document.createElement('button');
    clockOutButton.textContent = '退勤';
    clockOutButton.style.margin = '5px 0 0 8px';
    clockOutButton.onclick = () => {
      // 退勤の処理
      alert('退勤ボタンを押しました');
    };

    el.appendChild(clockOutButton);
  });
})();

kintone 全体のカスタマイズに JavaScript の設定を追加します。
今回は PC 用にボタンを表示するので、「PC 用の JavaScript ファイル」に上記コードのファイルをアップロードします。

出勤・退勤ボタンが設置できました。

JavaScript の経験が比較的浅い方にとってもポータルの開発が容易になる方法については、次の記事を参考にしてください。

最後に

ポータル API により、kintone を社内のポータルとして充実させるためのカスタマイズができます。
今後、いくつかサンプルを公開・紹介していく予定ですので、参考にしながら、社内に適したカスタマイズがないか試してみてください!

関連リンク

information

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