はじめに
kintoneカスタマイズにおいて、
・データバインディングを使いたいとき
・ちょっと凝ったUIを作りたいとき
そんなときに便利なのがVue.jsです。
今回はそんなVue.jsを使ったワンランク上の開発手法を紹介します。
今回使うもの
- Node.js
- Vue.js
- https://jp.vuejs.org/index.html
- Javascriptフレームワーク
- データバインディングなどができる
- kintone開発との相性が良い
- Element-ui
- https://element.eleme.io/
- UIフレームワーク
- kintoneのデザインに溶け込むうえに、既存のレイアウトが崩れない
- Webpack
- 複数jsファイルを一つのjsにコンパイルしてくれるモジュール
- グローバル変数を汚さずに開発ができる
テンプレートを用意したよ
git clone https://github.com/tonio0720/kintone-apptemplate
cd kintone-apptemplate
npm i # パッケージのインストール
npm run build # ビルド処理
kintoneカスタマイズ
Javascript
- https://js.cybozu.com/vuejs/v2.5.17/vue.min.js
- https://unpkg.com/element-ui/lib/index.js
- main.js(ビルド処理で作成されたファイル)
CSS
- https://unpkg.com/element-ui/lib/theme-chalk/index.css
- https://unpkg.com/element-ui/lib/index.js
- main.css(ビルド処理で作成されたファイル)
フォルダ構成
|--.eslintrc.json
|--build
| |--main.css
| |--main.css.map
| |--main.js
| |--main.js.map
|--package.json
|--src
| |--app.js
| |--components
| | |--Button.vue
| |--style.scss
|--webpack.config.js
build/
ビルドされたJavascript、CSSが生成される場所。
ここに生成されたmain.js, main.cssをkintoneに添付してください。
app.js
ここで、各コンポーネントをしかるべき場所に配置していきます。
下記の例では、Button.vueを一覧画面のヘッダーに配置しています。
import locale from 'element-ui/lib/locale/lang/ja';
import Button from './components/Button.vue';
import './style.scss';
Vue.use(ELEMENT, { locale });
let vm1;
kintone.events.on('app.record.index.show', (event) => {
const headerMenuEl = kintone.app.getHeaderMenuSpaceElement();
if (vm1) {
vm1.$destroy();
vm1.$el.parentNode.removeChild(vm1.$el);
}
const el = document.createElement('div');
headerMenuEl.appendChild(el);
vm1 = new Vue({
el,
render: h => h(Button, {
props: { event }
})
});
return event;
});
components/Button.vue
Vueは基本的にコンポーネント単位で作成するので、
components/の下にVueファイルを作成していきます。
https://element.eleme.io/#/en-US/component/installation
ElementはUIが豊富ですので、ドキュメントを参考にしながら作成していきましょう。
下記、一例です。
<template>
<div>
<el-button type="primary" @click="dialog = true">ボタン</el-button>
<el-dialog title="ダイアログ" :visible.sync="dialog" width="30%">
<el-form ref="form" :model="form" label-width="160px">
<el-form-item label="テキスト">
<el-input v-model="form.text"></el-input>
</el-form-item>
<el-form-item label="セレクト">
<el-select v-model="form.select">
<el-option label="セレクト1" value="1"></el-option>
<el-option label="セレクト2" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="日時">
<el-col :span="11">
<el-date-picker type="date" v-model="form.date" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker v-model="form.time" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="スイッチ">
<el-switch v-model="form.switch"></el-switch>
</el-form-item>
<el-form-item label="チェックボックス">
<el-checkbox-group v-model="form.check">
<el-checkbox label="チェック1" name="check"></el-checkbox>
<el-checkbox label="チェック2" name="check"></el-checkbox>
<el-checkbox label="チェック3" name="check"></el-checkbox>
<el-checkbox label="チェック4" name="check"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="ラジオボタン">
<el-radio-group v-model="form.radio">
<el-radio label="ラジオ1"></el-radio>
<el-radio label="ラジオ2"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="テキストエリア">
<el-input type="textarea" v-model="form.textarea"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialog = false">キャンセル</el-button>
<el-button type="primary" @click="dialog = false">OK</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: [
'event'
],
components: {},
data() {
return {
dialog: false,
form: {
text: '',
select: '',
date: '',
time: '',
switch: '',
check: [],
radio: '',
textarea: ''
}
};
},
computed: {
},
watch: {
},
methods: {
},
mounted() {
}
}
</script>
<style lang="scss" scoped>
</style>
その他ファイル
基本いじらなくてOKですが、お好みに合わせてカスタマイズしてください。
こんなことができます
（余談）kintoneでBootstrapが使えないワケ
kintoneでBootstrapなどのCSSフレームワークを使うと、既存のレイアウトが崩れちゃったりします。
原因はbox-sizing: border-boxです。
box-sizingとは
例えば、CSSでwidth,heightを200pxとした際に、
box-sizing: border-boxではpaddingやborderを含めて200pxとするが、
box-sizing: content-boxではpaddingやborderを含めずに200pxとする。
Bootstrapではbox-sizing: border-boxがグローバルに適応してしまうため、既存のレイアウトが崩れちゃうわけですね。
その点Element-uiはCSSのグローバルな指定が少なく、レイアウトが崩れないので便利ですね。
（余談2）公式Vueコンポーネント？
https://github.com/kintone/vue-kintone-component
kintoneのGithubリポジトリにあるvue-kintone-componentってのが気になりますね。
使ってみたいですが、ドキュメントが見当たらない・・・