{"id":25694153,"url":"https://github.com/colorfulcompany/kintone-custom-devkit","last_synced_at":"2026-04-29T16:06:09.664Z","repository":{"id":225596171,"uuid":"690945475","full_name":"colorfulcompany/kintone-custom-devkit","owner":"colorfulcompany","description":"A management tool for Kintone Customization Codes","archived":false,"fork":false,"pushed_at":"2024-03-03T20:43:24.000Z","size":69,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-24T23:51:23.793Z","etag":null,"topics":["framework","javascript","kintone","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/colorfulcompany.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-13T07:42:33.000Z","updated_at":"2024-04-27T23:49:34.000Z","dependencies_parsed_at":"2024-03-03T05:28:12.551Z","dependency_job_id":"f2f6e681-0284-41bf-8fe7-bc76817e3b8c","html_url":"https://github.com/colorfulcompany/kintone-custom-devkit","commit_stats":null,"previous_names":["colorfulcompany/kintone-custom-devkit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/colorfulcompany/kintone-custom-devkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colorfulcompany%2Fkintone-custom-devkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colorfulcompany%2Fkintone-custom-devkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colorfulcompany%2Fkintone-custom-devkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colorfulcompany%2Fkintone-custom-devkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colorfulcompany","download_url":"https://codeload.github.com/colorfulcompany/kintone-custom-devkit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colorfulcompany%2Fkintone-custom-devkit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281731373,"owners_count":26551804,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-29T02:00:06.901Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framework","javascript","kintone","vite"],"created_at":"2025-02-24T23:51:13.052Z","updated_at":"2025-10-30T01:40:03.583Z","avatar_url":"https://github.com/colorfulcompany.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kintone Custom Devkit\n\n## できること\n\n * 指定ディレクトリ以下のアプリの一覧を自動生成\n * それぞれの app ごとのタスクを自動定義\n    * lint ( 予定 )\n    * deploy\n    * proxy\n    * build ( opt-in )\n    * test ( 予定 )\n\n## 特徴\n\n * 複数のアプリのカスタマイズコードを効率的に集中管理しやすい\n * 開発中のコードを deploy することなく Kintone 環境に適用するための development proxy を持っており、運用を妨げず、かつ小さいサイクルでの開発を容易にする\n\n## 準備\n\n### 0. アプリを管理できるアカウント\n\n開発する対象のアプリの管理権限のあるアカウントの username, password を取得しておくこと。つまり SSO でしかログインできないアカウントでは本ツールは利用できないので注意。\n\nただし**本ツールを利用して deploy しない場合は不要**。\n\nKintone の権限管理にはさまざまな方法があり、OAuth でも `@kintone/customize-uploader` は利用できるが、開発時、各種 API を叩く必要が出た場合など\n\n**Kintoneの開発時の利用については結局パスワード認証が最強**\n\nなので、SSO環境の場合は管理者と相談しパスワード認証を有効にしてもらう。\n\n### 1. Jakefile\n\n本ツールは Kintone カスタマイズの開発を助けるタスクを自動定義するために\n\n[jakejs/jake: JavaScript build tool, similar to Make or Rake\\. Built to work with Node\\.js\\.](https://github.com/jakejs/jake)\n\nを利用している。Jake を適切に動作させるために以下のような内容の Jakefile をプロジェクトルートに置く必要がある。\n\n```javascript\nconst { resolve } = require('path')\nconst { defineDevkitTasks } = require('@colorfulcompany/kintone-custom-devkit/jakelib/builder')\ndefineDevkitTasks(resolve(__dirname, 'apps'))\n```\n\n上記の Jakefile はプロジェクト全体で以下のようなディレクトリ構成になっていることを期待している。\n\n```\nプロジェクトルート/\n  Jakefile\n  apps/\n    アプリ1/  \u003c- アプリごとのカスタマイズコード\n    アプリ2/  \u003c- アプリごとのカスタマイズコード\n    ...\n```\n\n注意事項として、**Jakefile は v10 の時点で CommonJS 形式でしか動作しない**。\n\n### 2. 環境変数\n\n`.env` ファイルを用意し、以下の環境変数をセット\n\n * `KINTONE_BASE_URL`\n * `KINTONE_USERNAME`\n * `KINTONE_PASSWORD`\n\n直接 deploy しない場合は `KINTONE_USERNAME`, `KINTONE_PASSWORD` は不要\n\n下記の Kintone Dev Proxy を利用する場合は\n\n * `PROXY_DEBUG` を true に\n\nすると anyproxy およびそこから読み込むカスタムスクリプトのログが表示される。\n\n### 3. deploy用のツールを別途global install\n\nこれも**本ツールで直接 deploy しない場合は不要**。\n\n[@kintone/customize\\-uploader \\- npm](https://www.npmjs.com/package/@kintone/customize-uploader)\n\n**@kintone/customize-uploader を global install してください**。\n\nこのツールは `@kintone/customize-uploader` を利用しているが、`@kintone/customize-uploader` は project 以下にインストールすると cwd の計算がどうしても project root になってしまう。この影響で customize manifest ファイルに含まれるパスも project root 以下からのものにせざるを得ない。\n\n例えば以下のようにカスタマイズのコードを置いたとして\n\n```\n\u003c指定ディレクトリ\u003e/ \u003c- カスタマイズするアプリを置く場所\n  アプリ1/\n  アプリ2/\n  ...\n```\n\nアプリ1の manifest は以下のファイルになるが、\n\n`\u003c指定ディレクトリ\u003e/アプリ1/customize-manifest.json`\n\nこの内容は以下のようになる。\n\n```json\n{\n  \"app\": \"アプリ1\", \u003c- 実際にはID(数字)\n  \"scope\": \"ALL\",\n  \"desktop\": {\n    \"js\": [\n      \"\u003c指定ディレクトリ\u003e/アプリ1/desktop/js/foobar.js\", // \u003c-\n      ..\n    ]\n  }\n}\n```\n\nこれでは実際のディレクトリ構成と manifest ファイル内に二重に情報が保存されてしまって扱いにくいが、global install した場合はこのような問題は起きないので、global install で解決することとした。\n\n### 4. ブラウザのproxyのセットアップ\n\ndevelopment proxy として [alibaba/anyproxy: A fully configurable http/https proxy in NodeJS](https://github.com/alibaba/anyproxy) を利用している。開発中は Kintone の workspace への request を local proxy に向けることで開発中のコードを deploy することなく Kintone 環境に適用できる。\n\nそのためブラウザの proxy 設定で\n\n`KINTONE_BASE_URL` -\u003e `localhost:8001`[^1]\n\nへ向ける設定を行う。開発時には頻繁にこの設定を ON/OFF することになるので、何らかのブラウザ拡張の利用を推奨する。\n\n[^1]: localhost:8001 は anyproxy のデフォルト\n\n## 開発手法\n\n### buildプロセスがあるもの\n\n`\u003c指定ディレクトリ\u003e/\u003cname\u003e/` 以下に `meta.yaml` を置き、その中で\n\n```yaml\nbuild: true\n```\n\nと設定する。build プロセスの実行には `vite` を利用する。\n\n#### 具体的なディレクトリ構成とvite.config.jsの例\n\n例えば\n\n```\n\u003c指定ディレクトリ\u003e/\n  アプリ1/ \u003c- ここでビルドが必要な場合\n  アプリ2/\n  ...\n```\n\nの場合、以下のような構成になる。\n\n```\n\u003c指定ディレクトリ\u003e/\n  アプリ1/ \u003c- ここでビルドが必要な場合\n    desktop/  \u003c- PC用のコード（deploy用）\n    meta.yaml \u003c- build: true\n    mobile/   \u003c- モバイル用のコード（deploy用）\n    src/      \u003c- 開発中のコード\n      index.html\n      js/\n    vite.config.js\n```\n\n例えば Vue2 を利用している場合の vite.config.js は以下のようになる。\n\n```javascript\nimport path from 'path'\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue2'\n\nconst root = path.resolve(__dirname, './src')\n\nexport default defineConfig (({ command, mode }) =\u003e {\n  const isProduction = mode === 'production'\n\n  return {\n    root,\n    plugins: [\n      Vue()\n    ],\n    build: {\n      outDir: '..',\n      modulePreload: false,\n      minify: isProduction,\n      rollupOptions: {\n        output: {\n          format: 'iife',\n          entryFileNames: '[name].js',\n          assetFileNames: '[name].js'\n        },\n        input: {\n          'desktop/js/app': path.resolve(root, 'index.html')\n        }\n      }\n    }\n  }\n})\n```\n\nKintone カスタマイズのコードは以下のように type=\"module\" ではない形で読み込まれる[^2]ので、\n\n```\n\u003cscript src=\"https://\u003cKINTONE_BASE_URL\u003e/k/api/js/download.do?app=xxx...\"\u003e\u003c/script\u003e\n```\n\nVite でビルドする際には **「ESM でない形式」で出力する必要がある**。上記の例では IIFE で出力している。\n\n[^2]: これはカスタマイズのコードの互換性と、アプリそのものの情報へのアクセスしやすさを考えると恐らくそう簡単に変わらない\n\n### buildプロセスがないもの\n\nカスタマイズに適用する構成をそのまま local に置く。\n\n## meta.yamlの文法\n\n```yaml\nname: \u003cアプリの名前\u003e ( not ID )\napp_id:\n  production: 本運用中のアプリケーションID\n  staging: 動作確認に利用するアプリケーションID\nbuild: boolean\n```\n\napp_id は Kintone Dev Proxy で利用する。ここに書かれた環境ごとに jake -T でタスクが並び、例えば\n\n```\njake applyLocal:\u003cアプリ名\u003e:production\n```\n\nなら production のアプリケーションIDに対して proxy が有効になる。deploy の際は customize-manifest.json に書かれている ID を利用しているので、deploy のために meta.yaml を書かなければいけないわけではない。\n\n## Kintone Dev Proxyについて\n\n### 目的\n\n開発環境のコードのみをカスタマイズとして適用する。\n\n * production の attachment の読み込みを block （強制 404）\n * 開発用に追加した URL `https://kintone-dev.local` 以下は local のファイルを読み込む\n\nこれによって他のユーザーの環境に影響を与えずに開発者だけ開発途中のカスタマイズのコードを利用できる。\n\n### 使い方\n\n 1. 該当アプリの dev タスクを起動する\n 2. ブラウザの proxy 設定で Kintone のワークススペースの URL への request を local proxy ( localhost:8001 ) へ向ける\n 3. 開発中で適用したいコードがある場合は `https://kintone-dev.local` 以下の URL として該当アプリに追加\n\n3 の URL は local の deploy に利用するファイルを参照するので、例えば\n\n`https://kintone-dev.local/desktop/js/foobar.js`\n\nをリンクとして「アプリ1」に追加した場合は、\n\n```\n\u003c指定ディレクトリ\u003e/\n  アプリ1/\n    desktop/\n      js/\n        foobar.js\n  アプリ2/\n  ...\n```\n\nのような位置に適用したいファイルを置く。\n\n### 構成\n\n```mermaid\ngraph\n  dev((Developer))\n  subgraph browser\n    proxy_config(e.g. SmartProxy)\n  end\n\n  subgraph anyproxy\n    script\n  end\n\n  subgraph domain\n    attachment\n    URL\n  end\n  local\n\n  browser --\u003e anyproxy\n  anyproxy -. block .- attachment\n  anyproxy -. replace .- URL\n  script --\u003e local\n\n  dev --\u003e browser\n  dev --\u003e local\n\n  style attachment color: #666,stroke: #999,stroke-dasharray: 3 3\n  style URL stroke-width: 3px\n  style local stroke-width: 3px\n```\n\n### 依存\n\n * [alibaba/anyproxy: A fully configurable http/https proxy in NodeJS](https://github.com/alibaba/anyproxy)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolorfulcompany%2Fkintone-custom-devkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolorfulcompany%2Fkintone-custom-devkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolorfulcompany%2Fkintone-custom-devkit/lists"}