カテゴリー内の他の記事

kintoneとVue.jsは相性がいい?Vue.jsで独自のビューと検索フォームを作ってみよう

フォローする

(著者:kintone エバンジェリスト 村濱 一樹

Vue.jsは非常にシンプルなJavaScriptフレームワークで、kintoneと相性がよく、私自身kintoneのカスタマイズではVue.jsを使うことも多いです。
先日、CybozuCDNにVue.jsが公開されましたので、kintoneとVue.jsについて少しまとめます。

他のフレームワークとの比較

まず、同じくCybozuCDNで公開されている、Angularなどのフレームワークと何が違うのか、ということですが、公式サイトに下記まとめられております。
https://jp.vuejs.org/guide/comparison.html
例えば、AngularJSはフルスタックなフレームワークで何でもできますが、その分学習コストが高いです。Vue.jsは双方向データバインディングに特化しており、単体での機能はAngularJSやKnockout.jsなどのフレームワークよりは少ないですが、その分シンプルで学習コストは低く、簡単なものであればVue.jsの方が書きやすいと思います。

双方向データバインディングとは、わかりやすくいえば、データの変更があったらUIの変更を更新し、UIの変更があったらデータの更新をする処理を自動的に行う機能を指します。例えば、普通のJavaScript開発だとテキストボックスが変更されたイベントを検知して関数を実行させなければいけませんが、Vue.js内で管理するデータについてはそれが自動的に行われることになります。

サンプル(データ表示、検索)

実際にいくつかサンプルを作ってみます。
今回は、顧客名簿をVue.jsを使って表示するのと、検索まで実装してみたいと思います。

前準備

下記のアプリを作って、サンプルデータを入れておいてください。

フィールド名 フィールドコード
顧客名 campanyName
顧客電話番号 tel

Cybozu CDN

Cybozu CDNからvue.jsのURLをコピーする。

https://js.cybozu.com/vuejs/v1.0.28/vue.min.js

※今回はバージョン1.0.28を使用する。

Vue.jsの簡単な使い方

まず、kintoneのデータは使わず、とりあえずkintone上でVue.jsを使ってみましょう。

カスタマイズビューの作成

顧客企業名と、電話番号を表示するカスタマイズビューを作成してみます。
カスタマイズビューの作り方はこちら

v-for と記述されたところと、二重の波括弧 {{}} で括られた部分がVue.jsで利用される部分です。

JavaScriptカスタマイズ

下記のJavaScriptファイルを作成し、kintoneにアップロードしましょう。

下記のように表示されます。

kintoneのデータを読みこませる

上記のカスタマイズビューとJavaScriptをサイド編集して、今度はkintoneのレコードを表示させてみましょう。

カスタマイズビュー

JavaScriptカスタマイズ

event.recordsの配列をそのままVueのdataに利用することで、forも使わずに一覧を出すことが出来ました。 すごくシンプルにかけますね。

レコード検索

独自の検索フォームをつけてみましょう。簡単にインクリメンタルサーチが実装できます。
なんと、カスタマイズビュー側を編集するだけで実現できます。

カスタマイズビュー

検索用のinput要素を作り、v-for内でフィルタをかけています。
kintoneの検索の弱点として、1文字での検索が出来ない、英数字は単語単位でしか検索できないなどの制限がありますが、このインクリメンタルサーチを応用すれば、それらの弱点も克服することができます。(最初でデータを読み込んでおく必要はあるので、レコード数が多すぎると難しいですが)

まとめ

これだけ簡単に、独自のカスタマイズビューを作ることができるのは魅力的ですよね。他にも、独自のフォームを作ったり、レコード詳細画面でスペースフォームと活用して表示をカスタマイズしたりなど、フルスクラッチで書いたり、jQuery単体でやるよりは楽にできると思います。さらに算出プロパティコンポーネントなどの機能も使いこなすとkintoneでやりにくい、かゆいところまで手が届きます。学習コストも比較的低いので、是非ためしてみてください。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
Nori Moro

お世話になります。 はじめまして 森岡と申します。 event.recordsの配列とjavascriptの変数を同時にVue.jsに受け渡す方法を教えてください。

 

Avatar
村濱一樹

Vue.jsは複数のdataを保持できるので、別の変数も渡したい場合は、下記のようにすれば可能ですが、如何でしょうか。
もしくはrecordsに任意のデータを挿入する場合は、vueに渡す前に自前にそういうデータを作ってから渡してあげればいいと思います。

     var hoge = "任意のデータ";
var vm = new Vue({ el: "#app", data: { records: records, // kintoneのrecords配列をそのまま利用
variable: hoge } });

 

回答になってなければ教えて下さい。

Avatar
kamewo

アプリAにアプリBの関連レコード一覧を設置している場合に、

アプリAの一覧画面に、関連レコードの値を表示することも可能でしょうか?

Avatar
cybozu Development team

kamewo様

こちらのコメント欄は、基本的に、cybozu developer 事務局が記事への不具合報告など、フィードバックを受け付けるための欄です。質問に著者が回答している場合もありますが、常に監視しているわけではありません。

このような質問については有志ユーザーが回答が可能なcybozu developer コミュニティをご活用いただければと思います。

Avatar
村濱一樹

 kamewoさま


今回のような質問は記事と直接関係ないため、
運営チームの投稿にありますようにDeveloperコミュニティをつかっていただくほうがいいですが、回答しますと、

 

一覧画面に関連レコードの値を表示するのは不可 ですね。。
一覧画面を独自にカスタマイズするほか現状はありません。。

ログインしてコメントを残してください。
Powered by Zendesk