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

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

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

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

• ポータル画面を表示した後のイベント
• ポータルの上側の要素を取得する

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

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

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

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

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

まずはポータル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の経験が比較的浅い方にとってもポータルの開発が容易になる方法については、次の記事を参考にしてください。

• Kintone Portal Designerを使ってポータルをデザインしよう

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

• Kintone Portal Designerを使ってポータルをデザインしよう
• kintoneのポータルデザイン開発ストーリー（Cybozu Inside Out）

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