kintone 従業員名簿アプリのタブ表示例

kintone アプリで項目数が多いと、タブ表示で項目を整理したいですね。
kintone で提供されている人事労務パックの従業員名簿アプリをタブ表示してみます。
使用するのは、[rex0220 タブ表示プラグイン](https://qiita.com/rex0220/items/1af3527d60fbaecbfceb)です。

# 従業員名簿アプリのタブ表示例

項目を基本情報、業務情報、配属・異動の記録、給与、交通費のタブで分類しています。

レコード詳細画面
<img width="1128" alt="2019-07-11_10h53_14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/4fbd9c75-6e80-9a37-7670-f91cccdf66cc.png">
レコード編集画面
<img width="1128" alt="2019-07-11_11h40_00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/f713b1b9-f89b-809b-1cdf-15e40b4a9590.png">

# モバイル版タブ表示例

<img width="715" alt="2019-09-22_15h11_45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/85dd5da9-2578-5523-ca67-a5bebb91b99d.png">

# モバイル版タブ表示操作例

![2019-09-22_22h55_09.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/9bf3e9f9-6349-feb1-beeb-3ce6779e9efe.gif)


# アプリの作成手順

簡単にアプリ作成出来るように、kintoneアプリストアにいろいろなアプリが公開されています。
人事労務パックには、サンプルデータも用意されていますので、それを使ってタブ表示カスタマイズします。

- kintone 環境
- スペース作成
- 人事労務パックのアプリ作成
- 従業員名簿アプリのカスタマイズ
- タブ表示プラグインの準備
- タブ表示プラグインのインストール
- 従業員名簿アプリへのプラグイン追加
- タブ表示プラグインのアプリ設定

# kintone環境

kintone には、一定期間無料で試用できる試用環境や開発環境がありますので、手軽にお試しできます。初めての方は、下記のどちらかの環境を準備しましょう。
既にkintone 導入済みまたは今後も活用予定の方は、開発者ライセンスがお勧めです。

[30日間無料お試し](https://kintone.cybozu.co.jp/trial/)
[kintone 開発者ライセンス 案内](https://developer.cybozu.io/hc/ja/articles/200720464)


# スペース作成

サンプルアプリを作成する場合、お試し用スペースを作成しスペース内にアプリを作成します。
アプリが不要になった場合、お試し用スペースごと削除できますので、後始末が簡単になります。

<img width="1128" alt="2019-07-11_12h28_49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/e7b194a4-8357-0bc2-d190-8c0af73ab47e.png">
「はじめから作る」をクリックし、スペース名を指定して作成します
<img width="907" alt="2019-07-11_12h31_18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/135985bf-7f99-005d-f673-31c830d0e817.png">


# 人事労務パックのアプリ作成

「アプリを追加」メニューからアプリストアを表示して、人事労務パックを選択します。
<img width="1749" alt="2019-07-11_12h37_22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/164f1794-2436-734d-98df-3391414d2864.png">
「このアプリを追加」をクリック
<img width="846" alt="2019-07-11_12h46_30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/158acc65-a5a7-ba34-df19-455eaf7bfd06.png">


# 従業員名簿アプリのカスタマイズ

タブ表示のフッター部の例として、作成日時・作成者・更新日時・更新者を下部に配置します。
なおフッター部は、無くても問題ありません。
<img width="846" alt="2019-07-11_13h02_50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/5f7790ce-9e65-a456-45b6-454ec8b08a89.png">


# タブ表示プラグインの準備

[rex0220 stores](https://rex0220.stores.jp/) で、タブ表示プラグイン試用版を入手します。
試用版は、無料でプラグインのお試しが出来ます。

[kintone タブ表示プラグイン試用版](https://rex0220.stores.jp/items/589fb8079821cc61ad00b11e)
<img width="787" alt="2019-07-11_13h11_49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/5bb73358-2bfa-7a7c-b844-30a152dc7c48.png">


# タブ表示プラグインのインストール
kintone システム管理から「プラグイン」をクリックし、プラグイン画面で「読み込む」をクリック
タブ表示プラグイン試用版ファイルを指定します。
インストールは、kintone 環境に1回行えばOKです。

<img width="938" alt="2019-07-11_13h17_52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/5edf7e00-43eb-4e0b-db0c-925472127921.png">

# 従業員名簿アプリへのプラグイン追加

従業員名簿アプリのアプリ設定画面で、「プラグイン」を選択

<img width="846" alt="2019-07-11_13h25_15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/4fe36351-2cd0-7ffb-0585-79a4119df007.png">

「プラグインを追加」をクリックして、タブ表示プラグインを追加します。
<img width="628" alt="2019-07-11_13h23_47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/f0b41388-51ef-c70c-d8c3-ff6c615ab5d9.png">

# タブ表示プラグインのアプリ設定
タブ設定、タブ名・表示行数を設定します。

<img width="846" alt="2019-07-11_13h29_30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/03562a43-74c2-eb32-485c-caef642ba8ee.png">

- 表示幅：900 タブの枠幅
- ヘッダ部固定表示行数：4
- 全表示タイトル：全表示

左のAPPレイアウトを見ながら、タブ名と行数を指定します。

- 基本情報	4
- 業務情報	4
- 配属・異動の記録	2
- 給与	3
- 交通費	2

***「運用環境に反映」をチェックして「保存する」をクリックすると、即アプリに反映されます。***

設定が終わったら「保存する」をクリック後、「アプリの更新」をクリックすると反映されます。
<img width="846" alt="2019-07-11_13h37_29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/fa73db86-4690-5df9-9dd0-69d1d5665dce.png">


# 参考

- [kintone タブ表示プラグイン](https://qiita.com/rex0220/items/1af3527d60fbaecbfceb)
- [rex0220 stores](https://rex0220.stores.jp/)


# あとがき

kintoneアプリは、手軽に作成できますが、項目が多くなると目的の項目を探すのも大変です。
タブ表示で項目を整理すると、アプリがより使いやすくなると思います。