kintone のスペースを API を使ってカスタマイズしてみよう

Index

• はじめに
• スペース API でできること
• 完成イメージ
• JavaScript を利用したスペースのカスタマイズ
• おわりに

はじめに

kintone のスペーストップ画面は、「お知らせ」欄にスペースの説明を表示したり、
アプリを貼り付けてレコードの一覧を表示するなど、使用用途に合わせて自由に設定することができます。
さらにスペースをカスタマイズする API を使うと、ポータルカスタマイズのように文字を表示したり、ボタンを設置したりすることができます。
本記事では、kintone JavaScript API のスペース API を使ったかんたんな kintone カスタマイズをご紹介します。

スペース API でできること

スペース API を使うことで、ボタンを設置したり、リンクを動的に設置するなどのカスタマイズができます。

スペース系 API

スペースに関する JavaScript API は2021年10月現在、以下のものがあります。

• スペース表示イベント
• PC 版でスペースのトップ画面の上側の空白要素を取得する
• モバイル版でスペースのトップ画面の上側の空白要素を取得する

完成イメージ

スペースの上側部分に出勤・退勤ボタンを設置します。それぞれのボタンを押すと、タイムカードアプリにレコードが追加・更新されます。

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

この Tips のカスタマイズは、kintone 全体にカスタマイズを適用します。
そのため、kintone システム管理者の権限が必要です。

事前準備

1. kintone のポータル画面からスペースを作成します。
   
   • 作成するスペースは、「スペースのポータルと複数にスレッドを使用する」を有効にしてください。
   • 作成したスペース ID を控えておきます。JavaScript カスタマイズで使用します。
     スペース ID は、ブラウザでスペースを表示した際の URL で確認できます。
     以下の URL の場合、スペース ID は 8 です。
     https://{subdomain}.cubozu.com/k/#/space/8
2. 1. で作成したスペース内にタイムカードアプリを作成します。
   
   • タイムカードアプリは、kintone アプリストアから追加してください。
   • タイムカードアプリのフィールド「承認者」を次のように設定します。
     • 「必須項目にする」のチェックを外す
   • 作成したアプリ ID を控えておきます。JavaScript カスタマイズで使用します。
     アプリ ID は、ブラウザでアプリを表示した際の URL で確認できます。
     以下の URL の場合、アプリ ID は 245 です。
     https://{subdomain}.cybozu.com/k/245/

ライブラリの入手

• kintone UI Component v1.1.1
  ファイルは https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.1.1 よりダウンロードしてください。
  1. 「Assets」の「kintone-ui-component-1.1.1.tgz」をダウンロードします。
  2. アーカイブファイルを解凍し、「umd」ディレクトリ下の kuc.min.js を利用します。
• Luxon v2.0.2
  Cybozu CDN で配信されている Luxon を使用します。
  本記事では、2021年10月8日時点での Cybozu CDN で配信されている最新バージョンの URL で動作を確認しています。
  Luxon を導入する際は、Cybozu CDN のページで配信されているバージョンを確認し、必要に応じて変更してください。
• SweetAlert2 v11.1.7
  ファイルは https://github.com/sweetalert2/sweetalert2/releases/tag/v11.1.7 よりダウンロードしてください。
  「Assets」の「sweetalert2.min.js」と「sweetalert2.min.css」を利用します。

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

それではさっそく、スペースの上側に出勤・退勤ボタンを設置し、タイムカードアプリに登録するカスタマイズをしていきましょう。

kintone へのカスタマイズ適用

スペースのカスタマイズは、kintone システム管理画面から行います。
詳しい設定方法については、kintone ヘルプ「JavaScript / CSS ファイルを取り込む」をご確認ください。
設定は以下のようになります。

• PC 用の JavaScript ファイル
  • https://js.cybozu.com/luxon/2.0.2/luxon.min.js
  • sweetalert2.min.js
  • kuc.min.js
  • sample.js
• PC 用の CSS ファイル
  • sweetalert2.min.css
  • sample.css

サンプルコード

注意事項

• サンプルプログラムは、その動作を保証するものではありません
• サンプルプログラムの技術的なサポート等は行っていません

sample.js
出勤・退勤ボタンを設置し、ボタンを押したときにタイムカードアプリへレコードを追加・更新するためのスクリプトファイルです。
※ 12行目の「{YOUR_CUSTOM_SPACE_ID}」を「事前準備1.」で控えたスペース ID に変更してください。
※ 13行目の「{TIMECARD_APP_ID}」を「事前準備2.」で控えたタイムカードアプリの ID に変更してください。

sample.css
出勤・退勤ボタンの表示位置を調整するための CSS です。

JavaScript カスタマイズのポイント

• 11〜14行目
  スペース表示イベントが実行されたときに、ボタンを表示したいスペース ID であるかどうかを判断します。
  スペースカスタマイズでは kintone 全体にカスタマイズを適用しているため、if 文を使ってボタンの表示／非表示を切り替えています。
• 30〜56行目
  スペースの上側の空白要素を取得し、今日の日付と出勤・退勤ボタンをセットしています。
  出勤・退勤ボタンは、kintone UI Component v1 を利用して kintone ライクなボタンを設置しています。
• 61〜62行目
  Luxon を使って、出勤ボタンを押したときの時間を時刻フィールドの書式にフォーマットしています。
• 135〜153行目
  出勤ボタンを押し忘れて退勤ボタンだけを押した場合、退勤時刻のみ登録されます。
  ユーザーに出勤時刻を登録してもらうようにメッセージを追加しています。
  ボタンを押したあとに表示されるメッセージは SweetAlert2 を使用して表示しています。

おわりに

スペース API を使って、出退勤のボタンを設置するカスタマイズをご紹介しました。
部署やグループごとでスペースを使い分けて、出退勤を管理したいシーンにおすすめです。
cybozu developer network ではポータルに出勤・退勤ボタンをカスタマイズする方法もご紹介しています。
スペース API を活用して、お好みのスペースカスタマイズをお試しください。

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