カテゴリー内の他の記事

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

フォローする

Index

はじめに

kintoneのポータル画面は、表示される情報やアプリを数レコード表示するなど、
今までも柔軟ではありましたが、任意のボタンを設置するなど一部できないことがありました。
2019年7月のアップデートでボタンの設置だけでなく、自由にカスタマイズすることができるようになりました。

標準のポータル

portal_img01.png 

カスタマイズ例

mceclip4.pngmceclip3.pngmceclip0.png 

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

追加されたポータルカスタマイズ関連機能

今回新たに追加されたポータルカスタマイズ関連機能のポイントを説明します。

1. ポータル系APIの追加

ポータルに関するAPIが公開されました。このAPIで、ボタンを置く、リンクを動的に設置する、などのカスタマイズが公式にできるようになりました。

2. 新ツール「Kintone Portal Designer」の公開

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

Kintone Portal Designer については別の記事で詳しくご紹介しています。

3. ポータルの設定項目の追加

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

mceclip1.png

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

mceclip3_1.png

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

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

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

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

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

mceclip5.png 

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

mceclip0_1.png 

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

最後に

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

関連リンク

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

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

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