SDK & Tools

51-modern-default

目次

51-modern-default とは

固定リンクがコピーされました

51-modern-default は、kintone のデザインと調和する UI パーツのスタイルシート（CSS）です。

GitHub

固定リンクがコピーされました

https://github.com/kintone-samples/plugin-samples/blob/master/stylesheet/51-modern-default.css (External link)

ライセンス

固定リンクがコピーされました

MIT ライセンス (External link)

ドキュメント

固定リンクがコピーされました

Quick Start

固定リンクがコピーされました

レコード一覧のメニューの右側へ、kintone に調和したボタンを追加するカスタマイズです。

Step1：kintone アプリの準備

固定リンクがコピーされました

kintone アプリを作成します。
フィールドを配置する必要はありません。

Step2：サンプルコードの作成

固定リンクがコピーされました

  1. 次の内容をテキストエディタに貼り付けます。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

    /*
* 51-modern-default sample
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
*/

(() => {
  'use strict';
  kintone.events.on('app.record.index.show', async (event) => {
    // レコード一覧のメニューの右側の要素を取得する
    const headerSpace = kintone.app.getHeaderMenuSpaceElement();

    const button = document.createElement('button');
    button.textContent = 'Hello kintone';
    button.className = 'kintoneplugin-button-normal';
    headerSpace.appendChild(button);

    return event;
  });
})();

  2. 文字コードを「UTF-8」、ファイルの拡張子を「.js」にしてファイルを保存します。
    この記事ではファイル名を「kintone-like-css-sample.js」としています

Step3：51-modern-default.css のダウンロード

固定リンクがコピーされました

  1. 51-modern-default.css (External link) の内容を、テキストエディタに貼り付けます。

  2. 文字コードを「UTF-8」、ファイルの拡張子を「.css」にして、ファイルを保存します。
    この記事ではファイル名を「51-modern-default.css」としています。

Step4：kintoneアプリに適用

固定リンクがコピーされました

STEP1 で作成したアプリに、kintone カスタマイズファイルを適用します。
手順の詳細は、 JavaScriptやCSSでアプリをカスタマイズする (External link) を確認してください。

  1. 次の内容で、カスタマイズファイルを指定します。

    • PC 用の JavaScript ファイル
      • サンプルコード（kintone-like-css-sample.js）
    • PC 用の CSS ファイル
      • 51-modern-default.css

  2. 「アプリの設定」画面で、【アプリを更新】をクリックします。

Step5：動作確認

固定リンクがコピーされました

  1. カスタマイズを適用したアプリの一覧画面を開きます。

  2. kintone に調和するスタイルが、メニュー右のスペースへ挿入されたボタンに適用されていることを確認します。

ドキュメント

固定リンクがコピーされました

アラートメッセージ

固定リンクがコピーされました

注意書きの表示
クラス名
kintoneplugin-alert
表示例

利用例
1
2
3

<div class="kintoneplugin-alert">
<p>このメッセージは注意書きです。</p>
</div>

ラベル

固定リンクがコピーされました

設定項目の行
クラス名
kintoneplugin-row
表示例

利用例
1
2

<div class="kintoneplugin-row">設定項目の行A</div>
<div class="kintoneplugin-row">設定項目の行B</div>
設定項目の見出し
クラス名
kintoneplugin-label
表示例

利用例
1

<div class="kintoneplugin-label">設定項目の見出し</div>
設定項目名
クラス名
kintoneplugin-title
表示例

利用例
1

<div class="kintoneplugin-title">設定項目名</div>
必須項目マーク
クラス名
kintoneplugin-require
表示例

利用例
1

<div class="kintoneplugin-title">設定項目名<span class="kintoneplugin-require">*</span></div>
設定項目の説明
クラス名
kintoneplugin-desc
表示例

利用例
1

<div class="kintoneplugin-desc">設定項目の説明</div>

テキストボックス

固定リンクがコピーされました

テキストボックス
クラス名
kintoneplugin-input-outer
kintoneplugin-input-text
表示例

利用例
1
2
3

<div class="kintoneplugin-input-outer">
  <input class="kintoneplugin-input-text" type="text">
</div>

チェックボックス

固定リンクがコピーされました

チェックボックス
クラス名
kintoneplugin-input-checkbox
kintoneplugin-input-checkbox-item
表示例

利用例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input type="checkbox" name="checkbox" value="0" id="checkbox-0" checked="">
    <label for="checkbox-0">チェックボックスA</label>
  </span>
</div>
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input type="checkbox" name="checkbox" value="1" id="checkbox-1">
    <label for="checkbox-1">チェックボックスB</label>
  </span>
</div>
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input type="checkbox" name="checkbox" value="2" id="checkbox-2" checked="" disabled="">
    <label for="checkbox-2">チェックボックスC</label>
  </span>
</div>
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input type="checkbox" name="checkbox" value="3" id="checkbox-3" disabled="">
    <label for="checkbox-3">チェックボックスD</label>
  </span>
</div>

固定リンクがコピーされました

クラス名
kintoneplugin-dropdown-outer
kintoneplugin-dropdown
kintoneplugin-dropdown-selected
表示例

利用例
1
2
3
4
5
6
7

<div class="kintoneplugin-dropdown-outer">
  <div class="kintoneplugin-dropdown">
    <div class="kintoneplugin-dropdown-selected">
      <span class="kintoneplugin-dropdown-selected-name">ドロップダウン</span>
    </div>
  </div>
</div>
クラス名
kintoneplugin-dropdown-list
kintoneplugin-dropdown-list-item
kintoneplugin-dropdown-list-item-selected
kintoneplugin-dropdown-list-item-name
表示例

利用例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div class="kintoneplugin-dropdown-list">
  <div class="kintoneplugin-dropdown-list-item kintoneplugin-dropdown-list-item-selected">
    <span class="kintoneplugin-dropdown-list-item-name">オプションA</span>
  </div>
  <div class="kintoneplugin-dropdown-list-item">
    <span class="kintoneplugin-dropdown-list-item-name">オプションB</span>
  </div>
  <div class="kintoneplugin-dropdown-list-item">
    <span class="kintoneplugin-dropdown-list-item-name">オプションC</span>
  </div>
</div>
クラス名
kintoneplugin-select-outer
kintoneplugin-select
表示例

利用例
1
2
3
4
5
6
7
8
9

<div class="kintoneplugin-select-outer">
<div class="kintoneplugin-select">
    <select>
      <option>セレクトA</option>
      <option>セレクトB</option>
      <option>セレクトC</option>
    </select>
</div>
</div>

ラジオボタン

固定リンクがコピーされました

ラジオボタン
クラス名
kintoneplugin-input-radio
kintoneplugin-input-radio-item
表示例

利用例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div class="kintoneplugin-input-radio">
<span class="kintoneplugin-input-radio-item">
  <input type="radio" name="radio" value="0" id="radio-0" checked="">
  <label for="radio-0">ラジオボタンA</label>
</span>
<span class="kintoneplugin-input-radio-item">
  <input type="radio" name="radio" value="1" id="radio-1">
  <label for="radio-1">ラジオボタンB</label>
</span>
</div>

テーブル

固定リンクがコピーされました

テーブル
クラス名
kintoneplugin-table
kintoneplugin-table-th
kintoneplugin-table-th-blankspace
kintoneplugin-table-td-control
kintoneplugin-table-td-control-value
kintoneplugin-table-td-operation
kintoneplugin-button-add-row-image
kintoneplugin-button-remove-row-image
表示例

利用例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<table class="kintoneplugin-table">
  <thead>
    <tr>
      <th class="kintoneplugin-table-th"><span class="title">列タイトル</span></th>
      <th class="kintoneplugin-table-th-blankspace"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="kintoneplugin-table-td-control">
          <div class="kintoneplugin-table-td-control-value">
            <div class="kintoneplugin-input-outer">
              <input class="kintoneplugin-input-text" type="text">
            </div>
          </div>
        </div>
      </td>
      <td class="kintoneplugin-table-td-operation">
        <button type="button" class="kintoneplugin-button-add-row-image" title="Add row"></button>
        <button type="button" class="kintoneplugin-button-remove-row-image" title="Delete this row"></button>
      </td>
    </tr>
  </tbody>
</table>

ボタン

固定リンクがコピーされました

通常のボタン
クラス名
kintoneplugin-button-normal
表示例

利用例
1

<button class="kintoneplugin-button-normal">通常のボタン</button>
利用不可のときのボタン
クラス名
kintoneplugin-button-disabled
表示例

利用例
1

<button class="kintoneplugin-button-disabled">利用不可のボタン</button>
ダイアログの OK ボタン
クラス名
kintoneplugin-button-dialog-ok
表示例

利用例
1

<button class="kintoneplugin-button-dialog-ok">ダイアログのOKボタン</button>
ダイアログのキャンセルボタン
クラス名
kintoneplugin-button-dialog-cancel
表示例

利用例
1

<button class="kintoneplugin-button-dialog-cancel">ダイアログのキャンセルボタン</button>

注意事項

固定リンクがコピーされました

  • ブラウザーの設定によって、表示例と異なる見た目になることがあります。
  • kintone のアップデートによって、提供するスタイルのレイアウトが崩れる可能性や、kintone のデザインと調和しなくなる可能性があります。
    information

    この記事で紹介しているサンプルコードは、2022 年 5 月版 kintone で動作を確認しています。