はじめに
kintone のアプリの見た目を、スキンを選んで整える Chrome 拡張機能「EST キンスキン」を個人で作りました（無料。Chrome ウェブストアで公開しています）。
運用の面で、画面を色で分けられると便利そうだと考えたのが出発点です。
この記事では、アプリの見た目をどういう仕組みで変えているかを中心に書きます。使い方の手順は、最後の note の記事にまとめています。
作った目的は、次の3つです。
- 業務別、機能別、運用別に、アプリの画面を区別する（スキン）
- カスタマイズで追加したボタンを、種類ごとに区別する（カスタム要素）
- 関連するフィールドを、色で結び付けて見せる（フィールドの色。フィールドのグループ機能とは別の使い方です）
できること
サイドパネルが、3つのタブに分かれています。
| タブ | できること | アプリに登録するファイル |
|---|---|---|
| スキン | 19種類のスキンから選び、メイン色・文字色、角丸、ボタンの形と高さ、文字の大きさを調整する | est-kinskin.css |
| カスタム要素 | カスタマイズで追加したボタンなど（ID の付いた要素）の色・枠・角丸・余白を整える | est-kinskin-custom.css |
| フィールド | フィールド全体・内容・フィールド名の色や太さを、kintone 公式の setFieldStyle で付ける |
est-kinskin-fields.js |
スキン「オーシャン」をプレビューで確かめたときの一覧の画面です（上が変更前）。
仕組み
全体の流れは、「パネルの値 → ファイルを生成 → プレビューで確かめる → REST API でアプリに登録」です。
どのタブも、最後は「アプリの設定の『JavaScript / CSSでカスタマイズ』にファイルを登録する」だけで、拡張機能が画面を書き換え続けるわけではありません。
1. スキン：値から CSS を生成する
kintone の画面に付いているクラスを目印にして、パネルの値から CSS を生成します。たとえば、一覧の見出しは次のような規則になります。
:where(html:not(.est-kinskin-preview)) .recordlist-header-cell-gaia {
background-color: #3498db !important;
color: #ffffff !important;
border-color: #2c81ba !important;
font-size: 14px !important;
}
規則を :where(html:not(.est-kinskin-preview)) の中に入れているのは、プレビューのためです（次の項で説明します）。:where は詳細度が 0 なので、規則の強さは変わりません。
2. プレビュー：開いている画面にだけ一時的に反映する
プレビューをオンにすると、パネルの内容から作った CSS を、開いている kintone の画面に一時的に注入します。保存はしません。
- プレビュー中は
<html>にest-kinskin-previewのクラスを付けます。すると、アプリに登録済みの CSS は上の:where(...)の条件に当てはまらなくなり、効かなくなります。つまり、パネルの内容だけで見えるので、「適用するとこうなる」がそのまま確かめられます。 - 見た目を変える対象が、その画面にあるかも確かめます。見つからないものがあると、パネルに警告を出します（kintone の更新で画面の作りが変わったときに気づくためです）。
3. 適用：REST API でアプリのカスタマイズに登録する
「適用」を押すと、次の順番で REST API を呼びます。
-
GET /k/v1/preview/app/customize.json：動作テスト環境の設定を読む。運用環境のGET /k/v1/app/customize.jsonと revision を比べ、反映していない変更があれば確認画面で知らせる -
POST /k/v1/file.json：生成したファイルをアップロードして fileKey を得る -
PUT /k/v1/preview/app/customize.json：前に登録した同じ名前のファイルだけを外し、ほかのファイルは fileKey のまま残して、新しいファイルを加える（revision を指定して、同時の変更を防ぐ） -
POST /k/v1/preview/app/deploy.json：反映する -
GET /k/v1/preview/app/deploy.json：SUCCESSになるまで待つ
認証は、ログイン中のブラウザーのセッションです。アプリのカスタマイズを変更する API は、API トークンが使えません。そのため、適用できるのは、kintone のシステム管理権限と、そのアプリの管理権限の両方を持つ人だけです。
適用の範囲（scope）は変えません。ほかのファイルにも影響するためです。確認画面に今の範囲を表示します。
「削除」は、拡張機能が登録したファイル（名前で見分けます）だけを外して、同じ手順で反映します。アプリの一般設定には触れません。
4. フィールドの色：setFieldStyle を呼ぶ JS を生成する
フィールドの色は、CSS ではなく kintone 公式の setFieldStyle で付けます。生成する JS は、表示のイ
ベントで setFieldStyle を呼ぶだけです（要点だけを抜き出した例です）。
単価、数量、金額に同じ背景色を付けた例です（プレビューで確かめた画面です）。
kintone.events.on(
['app.record.create.show', 'app.record.edit.show', 'app.record.detail.show', 'app.record.print.show'],
(event) => {
kintone.app.record.setFieldStyle('customer_name', {
background: { backgroundColor: '#ffd966' },
});
return event;
}
);
content が使えないフィールド（計算フィールドなど）では、content を除いてもう一度呼びます。
5. カスタム要素：ID のある要素だけを選べる
カスタマイズで追加したボタンなどは、kintone が API で用意している「カスタマイズ用の空白部分」の中の、ID のある要素だけを選べるようにしました。
- 一覧：
kintone.app.getHeaderMenuSpaceElement()、kintone.app.getHeaderSpaceElement() - レコード：
kintone.app.record.getHeaderMenuSpaceElement()、kintone.app.record.getSpaceElement()
対象の指定は #ID になります。kintone の標準のクラスや、自動で作られるクラス（sc-… など）は、kintone の更新で変わる可能性があるため、選べないようにしています。
ハマったところ
画面を移動しただけでは、CSS が反映されない
kintone は、アプリのカスタマイズのファイルを、ブラウザーでページを読み込んだときにだけ読みます。一覧からレコードへ移るなど、kintone の画面の中での移動では読み直されません。適用や削除のあとは、ブラウザーの再読み込みが必要です。
setFieldStyle は、渡さなかった項目を変えない
パネルでチェックを外した項目を、config から外して呼ぶと、前の色が残ります。解除したい項目には、'DEFAULT' を渡す必要があります（公式のドキュメントにも、各項目に DEFAULT を指定すると個別に解除できるとあります）。
// 背景だけ解除する
await kintone.app.record.setFieldStyle('customer_name', {
background: { backgroundColor: 'DEFAULT' },
});
この拡張機能のプレビューでは、パネルで外した項目に 'DEFAULT' を送るようにしています。
フィールドの背景色は、値の要素ではなく外側の枠に付く
getFieldElement が返す値の要素の背景を見ても、反映されていないように見えます。背景色は、外側の .control-gaia の枠に付きます。動作確認のときに、最初は「反映されていない」と誤判定しました。
ボタンの背景は background-color だけを変える
background でまとめて指定すると、kintone がアイコンを描いている背景の画像まで消えてしまい、歯車などのボタンのアイコンが消えました。background-color だけを変えるようにしています。
注意していること
- 適用の範囲が「すべてのユーザー」のアプリでは、ゲストユーザーを含むすべてのユーザーの画面に表示されます。適用の範囲は、この拡張機能では変えません。
- kintone の旧デザインの画面と、スマートフォンの画面は対象外です。
- kintone ライセンスのライトコースでは、JavaScript や CSS によるカスタマイズが使えないため、利用できません。
- kintone の定期メンテナンスで、画面に付いているクラス名が変わると、スキンが適用されなくなる場合があります。
- 開発者のサーバーは使いません。レコードのデータは読みません。パスワードや API トークンは使わず、保存もしません。
- 業務で使う前に、テスト用のアプリで確かめることをおすすめします。
詳しい使い方
操作の手順や画面は、note の記事にまとめています。
※「kintone」はサイボウズ株式会社の登録商標です。個人で開発している非公式のツールです。