カテゴリー内の他の記事

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

Index

はじめに

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

標準のポータル

portal_img01.png 

カスタマイズ例

mceclip4.pngmceclip3.pngmceclip0.png 

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

ポータルカスタマイズ関連機能

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

1. ポータル系API

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

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

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

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

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

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

mceclip1.png

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

mceclip3_1.png

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

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

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

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

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

mceclip5.png 

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

mceclip0_1.png 

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

最後に

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

関連リンク

このTipsは、2022年08月版 kintoneで確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。