Closed2024/02/18にクローズ22

VanJS で kintone プラグインを作る

リポジトリを作る。

ドキュメント見る感じ vite で構成するのが良さそう。

https://vanjs.org/start

パッケージマネージャは bun を使う。

設定はこれだけにしておく。

bunfig.toml

[install]
exact = true

TypeScript は適当に vite でよく見る設定にしておく。

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

vite, typescript, vanjs-core を入れる。

bun install -D vite typescript vanjs-core

ルートに index.html を作る。
あとで kintone 設定の HTML にしたいな〜と思っているので div と script だけ置いておく。

index.html

<script type="module" src="src/index.ts"></script>
<div id="kintone-vanjs"></div>

ドキュメント読んでないけど昔読んだ Zenn の記事の記憶を辿りつつコードを書く。

src/index.ts

import van from "vanjs-core";

const { div } = van.tags;
const Hello = () => div("Hello, VanJS!");
van.add(document.querySelector("#kintone-vanjs")!, Hello());

script かくの忘れてたので、追加する。

package.json

{
  "scripts": {
    "dev": "vite"
  }
}

実行したら Hello, VanJS! が表示された。

現時点でできていること

Vite を使って VanJS で Hello World する。
ここまでのコミット
https://github.com/koyasaeki/kintone-vanjs/tree/86b1b473864f0b6d30713319eb0f972afa488247

次は kintone にアップロードするファイル作り。
今日は設定ページ側だけ作る。
つまり以下があればよい。

manifest.json
設定ページの HTML と JS

manifest.json はおきまり。
適当に取ってくる。

manifest.json

{
  "type": "APP",
  "manifest_version": 1,
  "version": "0.1.0",
  "name": {
    "en": "kintone plugin vanjs sample",
    "ja": "kintone plugin vanjs sample"
  },
  "description": {
    "en": "This is a sample plugin.",
    "ja": "This is a sample plugin."
  },
  "icon": "assets/icon.png",
  "config": {
    "html": "index.html",
    "js": [
      "index.js"
    ]
  }
}

desktop とかいらないのでいったん削った。

アイコンはここで作った。

https://icon.kitchen/

試行錯誤してたらメモ残すの忘れてた...
kintone プラグインの zip が作成できるようになったのはこのコミット

上のコードを zip 化してアップロードした。うまくいってそう。

アプリ側

とりあえずさっきまでの作業で気になったこと。

prebuild, postbuild でシェルスクリプト呼び出してるけどこれでいいのか。
設定画面だけなら vite.config.ts 一つでいいけど、どうやら rollup は chunking なしの 1 ファイルで、複数アプリのビルドをしてくれないらしいのでそこをどうするか。 vite の config を 2 つ書いてビルドを 2 回やる？

公式のサンプルが terser でバンドルサイズ小さくしてたから真似した。

このスクラップは2024/02/18にクローズされました