kintone の画面上でガントチャートの動作確認を行うため、とりあえず https で画面表示を行います。
概要
Claude Code でガントチャート作成２（テーマ対応）では、vite で提供されているローカル認証局なしの http://localhost:5173/ で動作確認をしていました。
kintone の画面上で、簡単にコードを修正しながら即画面に反映させるには、JavaScript カスタマイズにURL で https を追加するのが便利です。
Claude Code に https の検証環境を頼むと簡単に構築してくれました。
ただし URL に直接 https を指定してもダメで、URLのコードをローダーを利用する必要がありました。
またガントチャートは、動作はするけどデザインが崩れていたり、タスクバーのサイズをドラッグできなかったり、問題点はいっぱいありそうです。
kintone ガントチャート 開発環境」は、CLaude Code にマークダウン形式で作ってもらったものです。
- https で表示
- kintone 一覧で表示
- kintone 一覧での操作例
kintone ガントチャート 開発環境
全体構成
起動手順
ファイル構成
CSS が適用される仕組み
ポイント・注意事項
| 項目 | 内容 |
|---|---|
| 証明書 | mkcert で生成。kintone が HTTPS のため必須 |
| CORS |
cors: true で kintone ドメインからのアクセスを許可 |
| CSS変数 |
#rexgt-root に rexgt クラスが必要。main.jsx で自動付与 |
| 初回手順 | kintone を開く前に https://localhost:5174 で証明書を信頼する |
| HMR | ファイル保存で kintone 画面が自動更新される |
| 本番ビルド |
npm run build → dist/assets/ の JS を kintone にアップロード |
環境作成手順
vite で https を使えるのを知らなかっため、VSCode の Live Server を使うにはどうするのか Claude Code に聞いたところ、「vite でできるよ」とのことでした。
Claude Code とのやり取り
https が必要と言ったら、必要なものをインストール・実行までやってくれます。
あとは、kintone 画面で見てみろということでした。
kintone 画面上で確認したいので、https が必要
kintone カスタマイズ開発の典型的なパターンですね。
- mkcert で証明書を作成（ブラウザ警告なし）
- vite.config.js を修正
- dev server を起動
- kintone 画面を開いて確認
... 省略
1,2,3 を実行して
- まず現在の設定を確認します。
- Step 1: mkcert インストール & 証明書生成
- Step 2: vite.config.js を修正
- Step 3: dev server 起動
... 省略
結果
次のステップ（Step 4）
intone アプリ設定 → JavaScript / CSS でカスタマイズ → URL で追加：
https://localhost:5174/src/main.jsx
注意： kintone 画面を開く前に、ブラウザで https://localhost:5174 に一度アクセスして証明書を信頼させてください。
kintone アプリ
カスタマイズ一覧
とりあえず、ガントチャートを表示するカスタマイズ一覧を用意します。
JavaScript カスタマイズ
直接 https://localhost:5174 にリンクしても CSS が読み込めないなどがあるようで、
いろいろトラブって customize-loader.js で作成したガントチャートの JavaScriptコードをロードして実行する形になった。
問題点と対策
- CORS policy で、エラー
Access to script at 'https://localhost:5174/src/main.jsx' from origin 'https://xxxxxx.cybozu.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解決策：ローダースクリプトを使う
Vite の CORS 設定を追加します。
Vite の React プリアンブルが挿入されていないために起こるエラーです。ローダーに HMR クライアントと React Refresh ランタイムを追加します。
Download the React DevTools for a better development experience: https://react.dev/link/react-devtools
Tooltip.jsx:9 Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.
at Tooltip.jsx:9:32
- CSS が適用されていない
Download the React DevTools for a better development experience: https://react.dev/link/react-devtools
Vite の CSS はモジュール経由で <style> タグとして挿入されますが、kintone の CSP がインラインスタイルをブロックしている可能性があります。ローダーで <link> タグを明示的に追加します。
ガントチャートの表示
何とかガントチャートを kintone 一覧に表示できた。
ただし kintone の基本的な CSS の影響をうけて、文字の大きさや色などが変わっています。
そこらへんは、地道に対応していくしかありませんね。
- CSS が無い状態
- CSS が適用された状態
- ローカルで表示させた状態
