ViteでkintoneをReactカスタマイズする

パルメニオン

はじめに

前回、kintone-cliを用いてReact18プロジェクトを作成する方法を書いた。しかし触っているうちに以下の点に気づいた。

  • CSSのaspect-ratioが使えない

  • 書いたはずのCSSがカスタマイズファイルとしてアップロードされていない（スタイルは適用されている）

  • カスタマイズした画面のロードが少し遅い

おそらくは書いたCSSもデプロイ時にはJavaScriptに変換されていて、その変換時に一部非対応のものがこぼれ落ちているのだろう。簡単なカスタマイズでもロードが体感でわかる程度に遅くなるのは好ましくない。

そうこうしているうちに、Viteをnpmで使うと変なエラーが出ないことに気づいた。筆者はyarnで使っていたために大量のエラーで蕁麻疹が出ていたが、npmで使えば綺麗な画面でコーディングできる。Viteはその名の通りプロジェクトの開始やビルドが早く、CSSはバンドル化されはするもののCSSファイルとして生成される。Viteを使えば上記kintone-cliの問題が解決できるのではないかと考えた。

Viteを起動する

ターミナルを起動し、プロジェクトを作成したいフォルダに移動する。デスクトップに作るなら以下の通り。

$ cd desktop

Viteで新規プロジェクトを起動する。Node.jsをインストールしていない方は先にそちらを済ませてください。

$ npm create vite@latest

projetct nameを入力し、React、TypeScriptを選択。今回私はデフォルトのvite-projectとしました。そして作成したフォルダに移動。vite-project部分はご自身で先ほど入力したproject nameに変更してください。

$ cd vite-project

エディタを開きます。私はCursorを使っているので、以下の通り。おすすめなのでもしよかったら試してみてください。

$ cursor .

VS Codeを使っている方は代わりにこっち。

$ code .

手動で開いても大丈夫です。CursorかVS Codeで先ほど作成したフォルダを開いてください。

そして次はdependencyのインストールを行います。エディタ上でターミナルを開いてください。

$ npm install

ここまで上手くいっているか試してみましょう。開発モードを起動しましょう。

$ npm run dev

ターミナル上に生成されたURLをcmd +クリック。windowsの方はctrl +クリックでしょうか。マウスをホバーしたらわかるので確認してその通りに。

真ん中のカウントボタンをクリックしたら数が増えます。

起動できましたね。できなかった方は一旦立ち止まってここまでどうにかどうにかしてから次に進みましょう。

Viteをお掃除する

以下のフォルダやファイルは不要なので削除します。

  • publicフォルダ

  • src/assetsフォルダ

  • src/App.cssファイル

  • src/Index.cssファイル

App.tsxを最小限にします。面倒であればApp.tsx内部を全て削除して以下のコードを貼り付けてもいいです。

function App() {
  return <h1>Hello Vite!</h1>;
}

export default App;

スッキリ！

main.tsxから不要なindex.cssのインポートを削除しましょう。削除した結果はこちら。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

ブラウザで先ほどの開発者モードを開いてみましょう。

Hello Vite!

最小限になりました！

最小限のkintoneカスタマイズをする

kintoneでアプリを作成します。もともとあるものでもOK。

名前もアイコンもなんでもいいです。

Viteに戻りましょう。エディタのターミナルの開発者モードを起動しているタブに行き、終了します。

^C

main.tsxをkintone用に書き換えていきます。以下main.tsx変更後の全文。

import { createRoot } from 'react-dom/client';
import App from './App.tsx';

(() => {
  kintone.events.on('app.record.index.show', (event: unknown) => {
    const container = document.createElement('div');
    kintone.app.getHeaderSpaceElement().append(container);
    const root = createRoot(container);
    root.render(<App />);
    return event;
  });
})();

名前 'kintone' が見つかりません。ts(2304)というエラーが出るので対処しましょう。src配下にglobal.d.tsを作成して以下を記述します。

declare let kintone: any;

main.tsxのエラーが消えたと思います。

ここで一度kintoneにカスタマイズを投げ込んでみましょう。

エディタのターミナルに戻り、ビルドします。

$ npm run build

distが作成され、dist/asset/hogehoge.jsが作成されます。hogehogeは毎度名前が変わります。

kintoneにアップロードします。

手動アップロードは面倒ですね。
kintoneカスタマイズを適用できました！

kintone-customize-uploaderを使う

開発にあたり、いちいち細かな動作確認の時まで手動でカスタマイズをアップロードするのは面倒です。できればViteの開発者モードの用に変更がつどつど反映されてくれれば最高なのですが、せめてビルド＆デプロイくらいはエディタ上で済ませたいです。
kintone-customize-uploaderを使用することでそれを実現できます。せってしていきましょう。

まずはインストール。エディタ上でターミナルを開き、以下のコマンドを入力してください。

$ npm install -g @kintone/customize-uploader

次に、プロジェクト上でアップローダーを起動します。

$ kintone-customize-uploader init

対話式でアプリIDとカスタマイズの適用対象を指定します。

destフォルダが作成され、jsonファイルが中に入っていると思います。以下のように書き換えます。hogehogeは実際のファイル名を指定してください。

{
  "app": "159",
  "scope": "ALL",
  "desktop": {
    "js": ["dist/assets/hogehoge.js"],
    "css": []
  },
  "mobile": {
    "js": [],
    "css": []
  }
}

アップロードを試してみます。一度kintoneアプリからカスタマイズファイルを消去して、カスタマイズがなくなっていることを確認してからアップロードしましょう。

kintone-customize-uploader \
  --base-url https://sample.cybozu.com --username ログイン名 --password パスワード dest/customize-manifest.json

できましたね。

文字変えておけばよかったかな

やることは残り3つです。疲れてきたかと思いますが、頑張っていきましょう。

  • ビルド時に生成されるファイル名を指定する

  • .envファイルにログイン情報を書いて.gitignoreする

  • package.jsonにdeployコマンドを書く

ビルド時に生成されるファイル名を指定する

現状では、Viteがビルド時に作成するjsファイルのファイル名は毎度違う名前になります。これではkintone-customize-uploaderがどのファイルをアップロードしたらいいかわかりません。ワイルドカードが使えたら楽なのにね。

そこで、Viteでビルドする際のファイル名を指定しておき、それをkintone-customize-uploaderに設定することにしましょう。

vite.config.tsを開き、設定を追記します。追記後のコードは以下の通り。build以下が追記部分です。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/bundle.js',
        assetFileNames: 'assets/bundle.css',
      },
    },
  },
});

ビルドしてみましょう。エディタでターミナルを開き、以下のコードを実行します。

$ npm run build

distの中のjsファイルのファイル名がbundle.jsになっているのが確認できると思います。ついでなのでCSSファイルもバンドルされるか確認してみましょう。

index.cssを作成します。（消さなきゃよかったかも）

せっかくなのでgoogle fontsでも使ってみましょうか

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

* {
  font-family: 'Noto Serif JP', serif;
}

一応Main.tsxでインポートしつつ

import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css'

(() => {
  kintone.events.on('app.record.index.show', (event: unknown) => {
    const container = document.createElement('div');
    kintone.app.getHeaderSpaceElement().append(container);
    const root = createRoot(container);
    root.render(<App />);
    return event;
  });
})();

ビルドしましょう。

$ npm run build

bundle.cssが作成されましたね。

.envファイルにログイン情報を書いて.gitignoreする

ルートフォルダに以下の情報を書きましょう。内容は貴方のログイン情報に直してください。あとで使いますので、間にスペースを入れないとか""で囲むとかには注意しといてください。

URL="https://hogehoge.cybozu.com"

USER="hogehoge@hogehoge.com"

PASS="hogehoge"

.gitignoreに.envを追記しましょう。うっかりログイン情報をgitにアップしたら悪用されるので未然に防ぎます。.gitignoreの下の方に以下を追記しておけばいいです。

.env

package.jsonにdeployコマンドを書く

package.jsonの中のscriptsの一番下にdeployコマンドを書いておきましょう。

もし他の部分が違っても気にしなくていいです。deploy部分の行だけコピペして、previewの行末に,を打っておけばよし。

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "deploy": "source .env && kintone-customize-uploader --base-url $URL --username $USER --password $PASS dest/customize-manifest.json"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }
}

customize-manifest.jsonに戻り、設定を変えておきましょう。

{
  "app": "159",
  "scope": "ALL",
  "desktop": {
    "js": ["dist/assets/bundle.js"],
    "css": ["dist/assets/bundle.css"]
  },
  "mobile": {
    "js": [],
    "css": []
  }
}


あとはビルドアンドデプロイを試してみるだけ。

$ npm run build
$ npm run deploy
なんか怪しいサイトみたいなフォント

CSSも無事適用されていて、いい感じですね！

終わりに

Viteを使ってkintoneをReactカスタマイズするためのセットアップができました。ここまで大変だったかと思いますが、それでもビルドの速さやCSSがCSSファイルとして生成される点など、Viteを使うメリットはあると思います。

気がついたら敬語になっていましたが、書き直すのも面倒なのでそのまま公開します。

kintoneで印刷物を作成する方法に関しては、ブラウザの印刷ボタンを使う方法を試していますが謎マージンで微妙に左側がズレてしまう問題に苦戦しています。React-PDFもビルドに失敗するし。

なんかちょうど良さそうな方法が見つかるか気持ちの折り合いがついたあたりで記事にしたいですが、まだ苦戦しています。

いいなと思ったら応援しよう！