カテゴリー内の他の記事

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

Index

はじめに

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

スペース API でできること

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

スペース系 API

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

完成イメージ

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

customize-image.gif

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 へのカスタマイズ適用

スペースのカスタマイズは、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

customize-file.png

サンプルコード

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

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で確認したものになります。

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

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

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