はじめに
本記事はエムスリーキャリア FY22 AdventCalendarの12日目の記事です。
やりたいこと
Kintoneを使うと簡単な業務アプリをノーコードで作成することができます。
ただ、開発要望が増えると、ノーコードで対応できないものが出てくると思います。
KintoneではJavascriptを使って機能を追加することができるので、複雑な処理にも対応することが可能です。
ただ、
- Javascriptで処理を書く
- Kintoneにアップロードする
- 動作確認する
- 動かなかったら1.に戻って修正する
を繰り返すのは時間がかかるので、少しだけこのサイクルを簡単にしたいと思います。
環境
主な利用ツール
- Docker
- mkcert（自己証明書）
- Vue.js 3（今回はVue.jsを利用するが、React等でも可能）
構築方法
以下の手順で構築し、Kintoneの画面に「Welcome to Your Vue.js App」を表示させてみます。
１．Docker環境を構築
Dockerfile
FROM node:18-slim
RUN apt-get -qq update && \
apt-get -qq -y install curl zip unzip wget procps libnss3-tools && \
apt-get -qq clean
RUN npm uninstall -g vue-cli && \
npm install -g @vue/cli && \
npm install -g eslint && \
npm install -g axios && \
npm install -g http-server
RUN curl -s https://api.github.com/repos/FiloSottile/mkcert/releases/latest | grep browser_download_url | grep linux-amd64 | cut -d '"' -f 4 | wget -qi - && \
mv mkcert-v*-linux-amd64 mkcert && \
chmod a+x mkcert && \
mv mkcert /usr/local/bin/
RUN mkcert -install && \
mkdir ~/cert && \
cd ~/cert/ && \
mkcert localhost 127.0.0.1
WORKDIR /opt/app
EXPOSE 8080
CMD ["/bin/bash", "-c", "http-server -c-1 ./public/ --ssl --key ~/cert/localhost+1-key.pem --cert ~/cert/localhost+1.pem"]
docker-compose.yml
version: "3"
services:
app:
image: kintone:1.0
build: .
container_name: kintone
ports:
- "8080:8080"
expose:
- "8080"
volumes:
- ./:/opt/app/
tty: true
stdin_open: true
２．DockerImageを作成および起動
$ docker-compose build
$ docker-compose up -d
３．Vueのプロジェクトを作成
$ docker-compose exec app vue create .
選択肢：
- library = Vue 3
- package manager = yarn
４．開発
設定の変更
package.jsonのscripts.buildとwatchを以下のように書き換えます。
buildは本番用、watchは開発時に利用します。
"build": "vue-cli-service build --target lib src/main.js --mode production",
"watch": "vue-cli-service build --watch --dest public/assets/ --target lib src/main.js",
vue.config.jsのdefineConfigを以下のように変更して、yarn watch実行時にホットリロードされるようにします。
configureWebpackおよびcssを追加しています。
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
watchOptions: {
poll: true,
},
},
css: {
extract: true
},
});
プログラム修正
src/main.jsに以下を追加します。
※eslintのチェックでエラーが発生するため、今回はdisableにしておく。
/* eslint-disable */
kintone.events.on(["app.record.detail.show"], (event) => {
createApp(App).mount("#user-js-hello")
})
Kintoneアプリの設定
フォームに「スペース」を設置し要素IDをhelloにします。
プログラムのuser-js-helloとKintoneの要素IDのhelloを一致させます。
そうするとKintoneのスペース部分にVueが表示されます。
５．Kintone用にBuild
Buildして、app.umd.jsおよびapp.cssを作成します。
実行中はファイルを更新すると自動でBuildされます。
$ docker-compose exec app yarn watch
６．localhostでサーバーを起動
「docker-compose up -d」コマンド実行時にサーバーは起動されていると思います。
https://localhost:8080/assets/demo.html
でアクセスすると作成されたjsが表示されます。
自己証明書のためブラウザでアラートが表示されると思いますので、許可してください。
もしサーバーが起動していない場合は以下のコマンドで起動してください。
$ docker-compose exec app /bin/bash -c "http-server -c-1 ./public/ --ssl --key ~/cert/localhost+1-key.pem --cert ~/cert/localhost+1.pem"
７．KintoneにJavascriptおよびCSSを設定
「アプリの設定」 → 「JavaScript / CSSでカスタマイズ」でURLを指定して保存します。
最後に「アプリを更新」ボタンを忘れずに。
以上で完了です。
Kintoneでレコードを作成して表示してみてください。
以下のようにVueで作成されたアプリが表示されるようになります。
こうすることで、アップロードが不要になります。
- Javascriptで処理を書く
Kintoneにアップロードする- 動作確認する
- 動かなかったら1.に戻って修正する
Tips
- HTTPでサーバーを立ち上げてもKintoneから読み込めないため、mkcertを使ってHTTPSにしています。
- yarn serve --httpsでもHTTPSでアクセスできますが、yarn watchと同時実行がうまくできなかったためhttp-serverを利用しています。
- 利用するJavascriptおよびCSSはlocalhost経由であるため、複数人が同時に作業しても問題ありません。
- 「npm install @kintone/rest-api-client」を追加すると、Kintoneの機能をフル活用できるようになります。
- yarn buildを実行するとdist/配下に本番用のjsおよびcssが作られます。