customize-uploader是CLI工具，可將kintone自定義的CSS和JavaScript文件應用到kintone中。
使用此工具，無需從介面上傳檔，提高了kintone自定義的開發效率。

它以 npm 包的形式提供，因此可以在 Windows/macOS/Linux 環境中使用。

https://github.com/kintone/js-sdk/tree/main/packages/customize-uploader/

MIT 授權

https://github.com/kintone/js-sdk/blob/main/packages/customize-uploader/README.md

要運行 customize-uploader，您需要 Node.js 和 npm（一個包管理工具）。
安裝 Node.js 時，會自動安裝 npm。

1. Node.js 從官方網站下載安裝程式。
   Node.js官方網站
   對於所需的 Node.js 版本，請確認以下存儲庫中的 engines 屬性。
   packages/customize-uploader/package.json
   例如，以下要求Node.js版本 14 或更高版本。

   1 2 3

   "engines": { "node": ">=14" },

2. 運行下載的安裝程式並按照畫面上的說明進行設置。

使用cutsomize-uploader將記錄清單功能表右側以紅色字母顯示「Hello World」的自定義設置應用到kintone中。

1. 在不設置欄位的情況下創建kintone應用。

2. 在您創建的應用的 URL 中，找到應用 ID。
   URL 中 https://sample.cybozu.com/k/123 末尾的數位是應用ID。
   在上述情況下，應用ID為「123」。

安裝 customize-uploader。
本節以全域安裝customize-uploader為例進行說明。

1

npm install -g @kintone/customize-uploader

1. 創建工作目錄。在此示例中，目錄名稱為「sample」。

   1	mkdir sample

2. 轉到您建立的工作目錄。

   1

   cd sample

3. 以下命令創建一個清單檔。

   1	kintone-customize-uploader init

4. 以交互方式輸入要應用的kintone應用的應用ID和範圍。
   這一次，請指定以下值：

   • 應用 ID：在Step1 中找到的應用 ID
   • 定製範圍：「ALL」（適用於所有使用者）

   1 2 3 4 5

   kintone-customize-uploader init ? アプリIDを入力してください: 123 ? カスタマイズの適用範囲を選択してください: ALL dest/customize-manifest.json を生成しました

在「dest」目錄下，生成一個「customize-manifest.json」。

1. 在「sample」目錄下為自訂建立包含以下內容的 JavaScript 檔：
   將字元編碼設置為「UTF-8」，將檔擴展名設置為「. js」並保存檔。
   在本文中，檔名為「desktop.js」。

   1 2 3 4 5 6 7 8 9 10 11 12

   (() => { 'use strict'; kintone.events.on('app.record.index.show', (event) => { const divElement = document.createElement('div'); divElement.className = 'kintone-customize'; divElement.textContent = 'Hello World'; const element = kintone.app.getHeaderMenuSpaceElement(); element.appendChild(divElement); return event; })(); })();

2. 在「sample」目錄下，使用以下內容為自訂項建立 CSS 檔案：
   將字元編碼設置為「UTF-8」，將檔擴展名設置為「. css」並保存檔。
   在本文中，檔名為「desktop.css」。

   1 2 3

   .kintone-customize { color: #ff0000; }

建立自訂檔後，目錄結構如下：

1
2
3
4
5

sample
├── desktop.css
├── desktop.js
└── dest
    └── customize-manifest.json

編輯「dest」目錄下的「customize-manifest.json」，如下所示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
  "app": "123",
  "scope": "ALL",
  "desktop": {
    "js": ["desktop.js"],
    "css": ["desktop.css"]
  },
  "mobile": {
    "js": [],
    "css": []
  }
}

執行以下命令，將自定義項應用到kintone中。
變更以下值以適合您的環境：

• sample.cybozu.com：需要申請的kintone網域名稱
• 登入名稱：kintone登錄名
• 密碼：kintone密碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

kintone-customize-uploader \
  --base-url https://sample.cybozu.com --username 登錄名 --password 密碼 dest/customize-manifest.json

カスタマイズのアップロードを開始します
desktop.js をアップロードしました!
desktop.css をアップロードしました!
JavaScript/CSS ファイルをアップロードしました!
JavaScript/CSS カスタマイズの設定を変更しました!
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境に反映しました!

1. 打開已應用自定義的應用程式的清單畫面。
   在功能表的右側，確保它以紅色字母顯示「Hello World」。

   

2. 在「使用JavaScript/CSS進行自定義」畫面中，確認已應用自定義。

   

您可以下載已應用的自定義檔，並將其反映在清單檔中。

1
2

kintone-customize-uploader import dest/customize-manifest.json \
  --base-url https://sample.cybozu.com --username 登錄名 --password 密碼

確認CHANGELOG以獲取 customize-uploader 的更新日誌。
CHANGELOG

本文介紹的示例代碼已經過kintone和@customize-uploader v6.0.0的2022年5月版本測試。