Vue.js+Vuetify.jsを使って、レコードの一覧と詳細をシングルページで作成しよう！
https://developer.cybozu.io/hc/ja/articles/360027347212
を参考に、カスタマイズビュー＋Vue.jsで検索窓付きのデータ一覧画面を作成しています。
データ件数が少ない場合は問題ないのですが、上記ページにも
このサンプルでは、取得した１００件までのレコードに対するレコードの検索絞り込みやページネーションのみ有効になります。
とあるとおり、データ件数が多い場合にうまくいきません。たとえば、必要なデータが1000番目以降にあるような場合、画面表示はゼロ件になります。
どのような対処をすれば良いか、アドバイスいただけないでしょうか。
1443424833
以下の記事が参考になるかなと思います。
ありがとうございます。複数ユーザーが開くビューなのでカーソルAPIではなくoffsetを利用する方法でトライしてみました。
顧客リスト.appを使って1000件のデータを登録したところ良い感じに動いたのですが、3000くらいから画面を開いた時の待ち時間がつらくなりはじめました。実際に使いたいデータは6万件ほどあり、全件を先に取得する運用はちょっと難しい印象です。
ビューを開いた時は検索指定がないのでとりあえず先頭100件を取得、検索窓に文字を入れると該当する文字を含むデータを取得して表示というのができたらと考えているのですが（会員コードの先頭文字という想定で、view側の絞り込み「～を含む」で絞ることができません）、データの再取得、というあたりで詰まっています。Vue.jsすごいな！と思って試し始めたのですが他の方法でもかまわないのでアドバイスいただけたら助かります。
1443424833
> 会員コードの先頭文字という想定で、view側の絞り込み「～を含む」で絞ることができません
kintone の レコードの一括取得 のクエリーに like が使えると思うのですが、そういうことではなくでしょうか？
https://developer.cybozu.io/hc/ja/articles/202331474-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%8F%96%E5%BE%97-GET-#step2
私なら初回で１００件だけGETして表示し、その後のデータは「もっと表示」などのボタンを設置して、それを押すと101件から200件までを表示するということをするかなーと思いました。
「もっと表示」ボタンを準備しなくてもスクロールバーが一番下まで来たタイミングで自動で101件から200件までを再度取得するでも良いかもしれないですね。
クエリーのlikeは画面でいうところの「次のキーワードを含む」かと思います。
こちらは単語単位？のようで、「A0001」、「A0002」、「B0001」～というデータがあったときに「Aを含む」では「A0001」「A0002」がヒットしない（「A-0001」であればヒットする）ので、当方のデータではkintoneのクエリが活用できません。。。最初からkintone用に作っていればハイフンを多めに入れるなど何か工夫ができたかもしれないのですがそれは難しいです。そういったわけで何らかの手段で文字単位の絞り込みができないかと模索しています。
現状だと最初の100件に該当データがないと「該当データなし」という扱いになってしまうので、最初の100件になければ次の100件を読み込む（そこにもなければ次～）という処理ができればいいのかなあと思ったのですがやり方がいまひとつわからず詰んでしまいました。このような場合どうすればよいのでしょう。
エクセルか何かで、会員コード先頭文字を切り出してkintoneの項目に追加するのはどうでしょうか？
会員番号先頭文字のフィールドを作って、AとかBなどだけを保存して検索する。会員番号はそのままにしておくとか
1443424833
> こちらは単語単位？のようで、「A0001」、「A0002」、「B0001」～というデータがあったときに「Aを含む」では「A0001」「A0002」がヒットしない（「A-0001」であればヒットする）ので、当方のデータではkintoneのクエリが活用できません。。。
なるほどです。
これですね（ https://jp.cybozu.help/k/ja/id/040315.html#general_search_qa_10 ）
> 「A0001」、「A0002」、「B0001」
このような形式のコードであれば、検索するときに
Aを入れたら、プログラムの方で0001と9999を付与して、A0001 <= 番号 and A9999 >= 番号 って感じでクエリーを指定してみるのはどうでしょうか？？？
実際に試してないので、期待した結果になるかはわからないですが。
picol様
いままでのやり取りを整理しておきます．
・データは6万件程度
・offsetでレコード取得を試行(重くなるので断念)
・「ビューを開いた時は先頭100件を取得」はできる
・検索窓に文字を入れた後の絞り込み(再取得)ができない
・kinotneの仕様により絞り込みしたい文字が絞り込めない
まず，やはり細谷 崇様が提案していたレコード全件取得は必要かと思います．
offsetを試していますが，offsetはどうしても速度が遅くなるのと，1万件を超えるとつかえません．
kintone API レコード一括取得APIのoffsetの上限値制限について（2020/4/15更新）
かといって，ドメイン単位で回数制限があるカーソルもちょっと使いづらいので，
レコードIID順に全件取得する方法が良いかと思います．
offset の制限値を考慮した kintone のレコード一括取得について
（…のレコードIDを利用する方法）
少なくともOffsetよりは早いですし，複数ユーザーによる制限もありません．
（リクエスト回数には注意が必要ですが）
なお，レコードID順に全件取得するなら，rest/api-clientのgetAllRecordsWithIdが簡単でお勧めです．
kintone JavaScript Client (@kintone/rest-api-client)
getAllRecordsWithId(Referense，英語)
ビューを最初に開いたときに全件取得して，sessionStrageに格納することで，
そのセッション中(ブラウザを開いている間)は取得情報を保持し続けることもできます．
一番最後については，全件取得とフィルター用の関数を用意することで1文字からでも検索できると思います．
computed: {
// フィルターするための関数作成
filteredRecords: function() {
var self = this;
return self.records.filter(function(record) {
return record.campanyName.value.indexOf(self.searchText) !== -1;
});
}
引用：kintoneとVue.jsは相性がいい？Vue.jsで独自のビューと検索フォームを作ってみよう
全件取得したものをrecords等の配列に格納して，フィルター関数を利用すれば絞り込みができて，
その結果をreturnすることでやりたいことが実現できるかもしれません．
ちょっと大変かもしれませんが，参考になれば幸いです．
ありがとうございます！
レコードID順での全件取得で試してみます。"sessionStrageに格納"というのも、今回の要件に必要そうなのでこちらも取り入れる前提で進めます。ちょっと時間がかかりそうなので先に御礼を入れさせていただきました。
お礼とご報告です。sessionStrageへの格納はまだできていないのですが
https://developer.cybozu.io/hc/ja/articles/360031191791#use_id
こちらの、
var getRecords = function(_params) { }
の部分を使用し、こちらの
Vue.js+Vuetify.jsを使って、レコードの一覧と詳細をシングルページで作成しよう！
https://developer.cybozu.io/hc/ja/articles/360027347212
kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘GET’, {‘app’: appId, ‘query’: query}, function(resp) {
const vm = new Vue({
el: ‘#app’, …
の部分に、paramsの定義を追加した上で
var params = {
app: appId,
query: query,
fields: [ 取得したいフィールドのリスト ],
condition: ‘’
};
getRecords(params).then(function(resp) {
const vm = new Vue({
el: ‘#app’, …
と置き換える事で無事全件取得できるようになりました。取得後は検索も可能です。
可能なのですが、やはり、6万件となると、取得までの待ち時間で軽く不安になるし、検索文字を入力する際も、入力した文字が表示されるまで時間がかるので（入力した文字が表示されると、検索結果も表示される）、全件取得して何かを行うのは1万件が限界かな、という印象です。
sessionStrageに格納すれば、検索文字を入力するあたりの操作は速くなったりするのかな？とは思うのですが、別の方法を模索する必要があるーー取得時に文字単位での絞り込みを行うなど、の必要があるかもなと感じています。
picol様
sessionStrageは、取得した情報を格納しておく箱のようなイメージです。
どのタイミングで全件取得するかにもよりますが、ここにいれておけば極端な話、ブラウザを閉じるまでは全件取得する必要はなくなります。
なので、全件取得のタイミングを絞ってあるなら、sessionStrageの効果はさほど出ないかもしれません。
一方で、全件取得についてはid順かどうかで結構違うみたいなので、その点留意ください。
ありがとうございます！ もう少し少ない件数が前提のAppもあるので、そちらで試してみます。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。