以前のサンプルをGoqoo on kintoneに移植できるか？

2019年3月3日 16:06

Goqoo on kintoneをインストールすることができた。

なので続きをやろう。

献立

vueをつかったサンプルがあるので、それを移植できるか試してみよう。一覧画面で20件表示ではなく全レコードを表示しインクリメンタルサーチができるという内容。

まず新しいアプリを作成しscaffoldを作る。

今まではJSEdit for kintoneというプラグインを使っていた。Dropboxによる連携もしていなかった。

今回Goqoo on kintoneを使ってみてカスタマイズhtmlを画面を開いて、いちいち直さなくていい点が楽だと感じた。手元のHTML(customize.html)への修正した内容で置換をして表示くれるようだ。

今までは1つのJavascriptファイル中にイベントの発生とVueのnew、レコード全件を500件ずつ取得するコード入れていた。

これをon-index-show.jsに移す。

そうするとcustomize.jsの中でもVueがnewされているので被る。

そのためエレメント・データ指定、コンピュート部分をcustomize.js側におき、全件取得関数はon-index-show.jsに置いた。

しかし、インポートとエクスポートの意味がよくわからなかったので全件取得関数はどうしているもののcustomize.jsに渡せず、普通に20件のみを取得してしまう。

結局、全件取得関数はcustomize.jsのほうに持っていきイベント発生時に呼ぶようにした。

動いた。インクリメンタルサーチも動く。

この画面キャプチャでは、連番で5000番まである疑似データにアユという検索をしてあてはまるものが表示されている。そのため番号が飛び飛びになっている。

これは便利。

※名前っぽいのは疑似個人情報データです。

5,000件ぐらいのデータを全件取得するとはっきりわかるぐらいプレースホルダーが表示される。

デベロッパーコンソールを開けると

という表示がずっとでていた。そのうち調べる。

"Invalid Host/Origin Header" warning · Issue #1604 · webpack/webpack-dev-server
https://github.com/webpack/webpack-dev-server/issues/1604

chromeのデベロッパーコンソールをあけると、Vue.js devtoolsというのがあるよといわれたので、chrome拡張を追加した。

vue.js not detectedと表示された。

疑似個人情報データ生成サービス
https://hogehoge.tk/personal/

kintoneの大量レコード取得を高速化 – cybozu developer network
https://developer.cybozu.io/hc/ja/articles/360000826766