kintoneのポータルを自由に編集できる、ポータルAPIと『Kintone Portal Designer』

kintoneにログインした直後に表示される画面を「ポータル」と呼び、スペースやアプリの一覧、掲示板などを利用できます。このポータルが、2019年7月のアップデートでカスタマイズできるようになりました。

設定でカスタマイズ

まずは、ポータルの設定画面に設定項目が増えました。ポータルを表示して、右端の設定ボタンから、「ポータルの設定」をクリックしましょう。

「ポータルに表示するコンテンツ」という設定項目で、非表示にする項目を設定できるようになりました。

JavaScriptでのカスタマイズ

kintoneのイベントAPIに「portal.show」が追加され、ポータルが表示された時に JavaScriptを発動することができます。これにより、ポータルの画面上に新たな要素、ボタンなどを追加することができるようになりました。

Kintone Portal Designerを利用したカスタマイズ

Google Chrome用の拡張機能として、「Kintone Portal Designer」がリリースされました。次のサイトからダウンロードできます。

なお、「Kintone」の先頭が大文字なのは米国での表記に合わせてあります(日本での表記は、kintone)。

プラグインをインストールすると、ポータル画面の右端に設定ボタンが表示されます。

これをクリックすると、HTMLエディターが起動します。ここで、オリジナルのHTMLを作成できます。

左上の「Default Portal」と書かれているスライドスイッチをクリックして、「Design Portal」に切り替えてHTMLを作り込んでいきます。すると、例えば次のようにポータルを変更することができます。

なお、いくつかのサンプルがエディターの右上にある「Import→Import Sample Template」から選択できます。ただし、HTMLだけで作った場合、アプリの一覧などはそのままでは表示されなくなってしまうため、手作業でのメンテナンスか、または JavaScriptとの組み合わせによる開発が必要です。

また、このツールでデザインを変更しても、変わるのは自分のブラウザー内だけなので、これを実際に kintoneに適用するには、「Export」ボタンからJavaScriptファイルをエクスポートし、kintone全体のカスタマイズでファイルをアップロードする必要があります。

kintoneのポータル画面を、自社の情報ポータルへ

kintoneのポータル画面をカスタマイズできるようになり、安全性の高い社内ポータルを構築することができます。外部のAPIと kintone内の個人情報を連携してグラフを描画したり、高度な検索システムを構築したりなども自在です。H2O spaceも今後も、これらの機能を研究し、便利なポータル構築を模索していきます。

この記事を書いた人

アバター画像

H2O space

「ちゃんとWeb」なWeb制作会社。教育機関やNPO法人、スタートアップのみなさまのサイト制作、サイトの運用をお手伝いしています。WordPressが常に最新版にアップデートされ、安心してWordPressをご利用いただける、aquanoetes Serverを運用しています。