kintoneアプリにユーザ情報のバックアップする仕組みを作ってみた

はじめに

こんにちは。Y.HAMADAです。
cybozu.com共通管理にあるユーザー情報をkintoneアプリにバックアップするカスタマイズについてご紹介します。
こちらを作成するとカスタマイズの一部を変更するだけで、組織、役職、グループ、ユーザーの所属組織などのバックアップも保存できます。

このカスタマイズを作成した経緯ですが、ユーザー情報や組織などの変更するときに事前にバックアップを手動でファイルダウンロードしてました。このファイルは変更にミスがあったときに変更前の状態にするために使いますので一定期間経過後は不要なので削除します。もしかしたら使わないファイルの管理を簡単に楽にできないかと思い作成しました。

完成イメージ

バックアップの取得方法はボタンを押すと添付ファイルにユーザー.csvのレコードが追加されます。こちらがユーザー情報のバックアップのファイルとなります。
ファイル取得にはcybozu.com共通管理者の権限が必要となり、権限がないとエラーが表示されます。
権限については引用先のサイトをご覧ください。
引用:cybozu.com共通管理者の設定

ダウンロードの形式はユーザー情報 CSVとなります。
cybozu.com共通管理者の権限がないときに表示されます

では、始めていきましょう。

利用するライブラリについて

簡単にカスタマイズをするために、利用できる部分はライブラリを使います。

  • kintone UI Component
    kintoneライクなデザインを簡単に作成できるライブラリ。
    ボタンの表示に使います。
  • SweetAlert2
    おしゃれなダイアログが表示できるライブラリ。
    ボタンを押した後に表示される確認ダイアログに使います。
  • encoding.js
    文字コードを変換するライブラリ。
    ユーザー情報のCSVをAPIから取得した文字コードはUTF8ですので、Shift JISの変換に使います。手動でユーザ情報をダウンロードの時はShift JISですので、それに合わせるための対応となります。

ライブラリのファイルを取得する

kintone UI Componentの二つのファイル取得します。SweetAlert2、encoding.jsはCybozu CDNを利用するためファイル取得の必要はありません。
https://github.com/kintone-labs/kintone-ui-component/tree/v0_devにアクセスし、Zipファイルをダウンロードします。解答した中にある以下の2つのファイルを取得します。
 kintone-ui-component-master/dist/kintone-ui-component.min.js
 kintone-ui-component-master/dist/kintone-ui-component.min.css

ユーザー情報のCSVを取得するカスタマイズを実装する

こちらがカスタマイズの全体像となります。こちらを全てコピーしてファイルに保存します。保存するときの文字コードはUTF-8にしてください。ファイル名は一旦「ユーザー情報を取得.js」としてください。

冒頭に述べたカスタマイズの一部を変更するだけで組織、役職、グループ、ユーザーの所属組織などのバックアップも保存できますという点ですが、組織の方法について説明します。
変更箇所はユーザー情報を取得.jsの38行目と65行目を以下の通りに変更してください。

変更前

変更後

その他については38行目の/v1/csv/user.csvの部分を取得したいものに変更し、65行目のユーザー.csvも同様に変更ください。
 役職       :/v1/csv/title.csv
 グループ     :/v1/csv/group.csv
 ユーザーの所属組織:/v1/csv/userOrganizations.csv

アプリを作成する

CSVを保存する添付ファイルのフィールドのみのアプリを作成します。フィールドコードは「添付ファイル」としてください。

カスタマイズを追加する

「JavaScript/CSSでカスタマイズ」に以下のように設定してください。
作成したファイルはアップロードし、Cybozu CDNはURLで追加してください。
Cybozu CDNの一覧は引用元をご覧ください。
引用元:Cybozu CDN

PC用のJavaScriptファイル
ユーザー情報を取得.js
kintone-ui-component.min.js
https://js.cybozu.com/sweetalert2/v9.15.3/sweetalert2.min.js
https://js.cybozu.com/encodingjs/1.0.30/encoding.min.js
PC用のCSSファイル
kintone-ui-component.min.css
https://js.cybozu.com/sweetalert2/v9.15.3/sweetalert2.min.css

以上で設定は終わりです。
完成イメージのようになったか確認してみてください。

最後に

いかがでしょうか。ライブラリを使うことでコード量も少なくカスタマイズができたかと思います。カスタマイズをすることで同じ作業の手間が少しでも削減すると助かりますよね。
最後まで記事を読んでいただき、ありがとうございました。

※本記事の内容に関するサポートは行っておりませんので、ご了承ください。