チュートリアル

カスタマイズのマニフェストファイルを作成してkintone環境に適用してみよう

目次

はじめに

カスタマイズのマニフェストファイルとは、JavaScript/CSSカスタマイズをkintone環境に適用するための設定ファイルです。
今回は、cli-kintoneを使ってJavaScript/CSSカスタマイズ用のマニフェストファイルを作成し、kintone環境に適用する方法を紹介します。

STEP1:kintoneアプリの準備

今回は、kintoneの一覧画面にボタンを追加するカスタマイズを例に、マニフェストファイルの作成と適用の方法を紹介します。
次のURLを参考に、kintoneアプリを作成して、JavaScriptファイルとCSSファイルを準備します。

cli-kintone実行ファイルが含まれるフォルダーにhello-cli-kintoneフォルダーを作成し、その中にJavaScriptファイルとCSSファイルを配置します。
例として次のような構成にしましょう。

1
2
3
4
5
hello-cli-kintone
├── js
│   └── sample.js
└── css
    └── sample.css

STEP2:マニフェストファイルを作成する

マニフェストファイルは、JavaScript/CSSカスタマイズの内容や適用するアプリなどを記述するJSON形式のファイルです。
次のように、hello-cli-kintoneフォルダーをカレントディレクトリとして、cli-kintoneのcustomize initコマンドを実行します。

1
2
cd hello-cli-kintone
cli-kintone.exe customize init

するとhello-cli-kintoneフォルダーに、空のマニフェストファイルcustomize-manifest.jsonが作成されます。

STEP1で準備したJavaScriptファイルとCSSファイルのパスをマニフェストファイルに記述して、カスタマイズの内容を定義して上書き保存しましょう。

マニフェストファイルの記述例は次のとおりです。
mobileのjsとcssがなくても空の配列を記述する必要があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{
    "scope": "ALL",
    "desktop": {
        "js": [
            "./js/sample.js"
        ],
        "css": [
            "./css/sample.css"
        ]
    },
    "mobile": {
        "js": [],
        "css": []
    }
}

customize initコマンドの詳細は次のURLを参照してください。
customize init (External link)

STEP3:マニフェストファイルをkintone環境に適用する

マニフェストファイルをkintone環境に適用するには、customize applyコマンドを実行します。
このコマンドを実行すると、マニフェストファイルの内容をもとに、JavaScript/CSSカスタマイズが適用されます。

サブドメインがsampleで、アプリIDが123のkintone環境に適用する場合のコマンド例は次のとおりです。

1
cli-kintone.exe customize apply --base-url https://sample.cybozu.com/ --app 123 --username <ログイン名> --password <パスワード> --input customize-manifest.json

customize applyコマンドの詳細は次のURLを参照してください。
customize apply (External link)

STEP4:動作確認

マニフェストファイルをkintone環境に適用したら、実際にカスタマイズが反映されているかを確認してみましょう。

一覧画面にCSSのデザインが適用されたボタンが表示されていることを確認してください。

マニフェストファイルをエクスポートする

マニフェストファイルをエクスポートするには、customize exportコマンドを実行します。
このコマンドを実行すると、kintone環境に適用されているカスタマイズの内容をマニフェストファイルとして出力できます。

サブドメインがsampleで、アプリIDが123のkintone環境からエクスポートする場合のコマンド例は次のとおりです。

1
cli-kintone.exe customize export --base-url https://sample.cybozu.com/ --app 123 --username <ログイン名> --password <パスワード> --output exported-manifest.json

customize exportコマンドの詳細は次のURLを参照してください。
customize export (External link)

おわりに

今回は、cli-kintoneを使ってkintoneのJavaScript/CSSカスタマイズ用のマニフェストファイルを作成し、kintone環境に適用する方法を紹介しました。
マニフェストファイルを活用することで、カスタマイズの内容を管理しやすくなり、複数の環境に同じカスタマイズを適用することも簡単になります。
ぜひ、cli-kintoneを活用して、kintoneのカスタマイズを効率的に管理してみてください。

information

このTipsは、cli-kintone Ver 1.19.1と2026年3月版kintoneで動作を確認しています。