1.
kintone 未解決超鉄板ニーズに
準最適解を与える！
Ryu Yamashita
Kintone Corporation
ありそうでなかった
アイディアで
kintone hack 2022 予選

2.
Ryu Yamashita (Yamaroo)
80 年代ロックスター風
40 歳 男性
元ジョイゾーの人
※ 1 回目の kintone 転職先
好きな kintone の機能
• JavaScript カスタマイズ
• テーブル
Kintone Corp. サンフランシスコ勤務
kintone hack 2018 チャンプ
※ 2020 予選敗退w

3.
太陽光IoT
(2013.4)
承認・通知
(2015.10)
電源スイッチ
（2015.11）
顔認証チェックイン
（2018.8）
チャット/音声UI
(2014.12/2016.11)
IoTメガネ
（2016.6）

4.
太陽光IoT
(2013.4)
承認・通知
(2015.10)
電源スイッチ
（2015.11）
顔認証チェックイン
（2018.8）
チャット/音声UI
(2014.12/2016.11)
IoTメガネ
（2016.6）
ドローン
+
エッジコンピューティングAI
（2018.11）
先進トレンドとの組合せで
kintone の未来の活用を見せる

5.
ほぼ全てと言っていい
他サービス連携なし、
ありそうでなかったアイディアで実現する！
多くのユーザーが欲し続けてきた鉄板ニーズを

6.
ほぼ全てと言っていい
他サービス連携なし、
ありそうでなかったアイディアで実現する！
しっくりくる解が長年見出されてない・・・
kintone 最大の強みのひとつ JavaScript カスタマイズのみで実現！
難問！
多くのユーザーが欲し続けてきた鉄板ニーズを

7.
ほぼ全てと言っていい
他サービス連携なし、
ありそうでなかったアイディアで実現する！
しっくりくる解が長年見出されてない・・・
Kintone 最大の強みのひとつ JavaScript カスタマイズのみで実現！
難しい！
多くのユーザーが欲し続けてきた鉄板ニーズを
うぉー、きたキタ北！やっと来た！！
これは今すぐ使いたい！！
もっと詳しいこと聞きたい！！
なるほど、真似してみよw

8.
部分一致検索
今回のテーマ
Cy
Cybozu
Cybozu Kintone
Cybozu Groupware
Cybozu Teamwork
Cybozu Days 2022
キーワード入力に追従して
都度候補表示する

9.
クイックデモ

10.
※公開スライド用にデモ内容の説明
モバイル対応をさりげなくアピール
① この Jeffy さんを探し当てるてい
② 愛称 Jeff っぽいので、”jeff” で検索する
③ 部分一致したレコードが表示される
マッチングに寄与したフィールドと
マッチング部分を表示
他サービス連携なしなので、
通信も発生していない

11.
仕組みの解説
従来手法のおさらいから

12.
従来の kintone 検索カスタマイズ #1
①検索フレーズ
を入力
③検索結果のレコードあるいは一覧を返却
④検索結果を（一覧）表示
②検索フレーズを含むクエリを送信
Cy 検索

13.
従来の kintone 検索カスタマイズ手法 #1
①検索フレーズ
を入力
③検索結果のレコードあるいは一覧を返却
④検索結果を（一覧）表示
②検索フレーズを含むクエリを送信
Cy
Cybozu
Cybozu Kintone
Cybozu Groupware
Cybozu Teamwork
Cybozu Days 2022
シンプルで実現性が高い
kintone の検索にヒットさせる工夫が必要
kintone

14.
従来の kintone 検索カスタマイズ手法 #2
④検索結果を表示
①検索フレーズ
を入力
②検索フレーズと
検索条件を送信
③条件合致した索引を返却
（インデックス）
Cy
Cybozu
Cybozu Kintone
Cybozu Groupware
Cybozu Teamwork
Cybozu Days 2022
検索サービス
ユーザー
インターフェース

15.
従来の kintone 検索カスタマイズ手法 #2
④検索結果を（一覧）表示
①検索フレーズ
を入力
②検索フレーズと
検索条件を送信
③条件合致した索引を返却
（インデックス）
Cy
Cybozu
Cybozu Kintone
Cybozu Groupware
Cybozu Teamwork
Cybozu Days 2022
検索サービス
ユーザー
インターフェース
代表的な検索サービス

16.
従来の kintone 検索カスタマイズ手法 #2
④検索結果を（一覧）表示
①検索フレーズ
を入力
②検索フレーズと
検索条件を送信
③条件合致した索引を返却返却
（インデックス）
Cy
Cybozu
Cybozu Kintone
Cybozu Groupware
Cybozu Teamwork
Cybozu Days 2022
検索サービス
ユーザー
インターフェース
オートコンプリートを含め、高速で自由度が高い検索機能
を独自に構築できる
kintone の負担がない
従量課金の他サービスの利用が必要になる

17.
検索サービス
IndexedDB
ユーザー
インターフェース
検索に必要な要素を
kintone 検索カスタマイズ

18.
④検索結果を表示
①検索フレーズ
を入力
IndexedDB
②検索フレーズを
③条件合致した
レコードを返却
Cy
Cybozu
Cybozu Kintone
Cybozu Groupware
Cybozu Teamwork
Cybozu Days 2022
kintone 検索カスタマイズ

19.
④検索結果を表示
①検索フレーズ
を入力
IndexedDB
②検索フレーズを
全データと照合
③条件合致した
レコードを返却
Cy
Cybozu
Cybozu Kintone
Cybozu Groupware
Cybozu Teamwork
Cybozu Days 2022
s
1 万レコードに対する検索所要時間が 500 ミリ秒程度
低速通信環境（オフライン含む）でも検索速度が落ちない
他サービスなしで、kintone への負担もない
データの集中管理が難しい
アクセス権変更前のデータがデバイスに残る期間が生じる
kintone 検索カスタマイズ

20.
kintone 検索カスタマイズの性能検証
25
50120
200
450
900
1,200
2,500
5,300
0
1,000
2,000
3,000
4,000
5,000
6,000
0 10,000 20,000 30,000 40,000 50,000 60,000 70,000 80,000 90,000 100,000
500 1,000 3,000 5,000 10,000 20,000 30,000 50,000 100,000
インデックスデータサイズ [MB] 0.7 0.8 1.3 1.8 2.3 3.6 4.6 9 27
[ms] 25 50 120 200 450 900 1,200 2,500 5,300
検索レコード数 57 109 343 514 974 1,782 2,384 4,381 8,762
[ms]
*インデックス対象、検索対象フィールドは 3 フィールド
2 万レコードで
1 秒未満（悪くない）
無限スクロールの
併用で緩和できる

21.
IndexedDB とは
• ブラウザ内にデータを永続的に保存するための方法
• 各ドメイン単位アクセス
（同一オリジンポリシー、別のドメインからのアクセス不可）
• オフラインでも動作
• Key-Value 形式
• トランザクション対応
※よく見ると多くのサービスで自然に使われているので、知らぬ間に使わされてます

22.
IndexedDB を利用している代表的サービス
（メッセージング）
（タスク管理）
（ソースコード管理）

23.
現在実装済み機能
前方一致 後方一致
マッチング条件 部分一致
OR
フィールド内 AND レコード内 AND レコード内 OR
複数フレーズ検索
緩い
厳しい
AND
AND
フィールド設定 インデックス対象 検索対象 検索優先順位 タイトル
（切替選択）
（切替選択）

24.
デモンストレーション

25.
※公開スライド用にデモ内容の説明
IndexedDB のデータ更新・削除機能
レコード内 OR での検索
検索に寄与したカウント
デモ映えのためにデバッグ用のスピードメーターを残置

26.
ほぼ全てと言っていい
他サービス連携なし、
ありそうでなかったアイディアで実現する！
しっくりくる解が長年見出されてない・・・
Kintone 最大の強みのひとつ JavaScript カスタマイズのみで実現！
難しい！
多くのユーザーが欲し続けてきた鉄板ニーズを
欲しかった部分一致検索
カスタマイズ、これですよね？

27.
セキュリティに関する考察
※本トピックに限らず、サービス導入時には所属組織のセキュリティポリシーと
照らし合わせながら、リスク・対策を想定・検討して導入を進めましょう！

28.
セキュリティに関する考察の前提
PC の の
隠しフォルダに の
一部として保存される
Ryu
Ryu
IndexedDB のデータ保存場所
前提
IndexedDB のデータ取得
同一オリジンからの JavaScript による操作
/Users/yamaroo/Library/Application Support/Google/Chrome/Default/IndexedDB
（Mac/Chrome の場合）

29.
リスク想定と対策検討のステップ
1. 利用可能にする人の限定方法を考える！
2. 保存情報を他の意図しない人が閲覧出来てしまう可能性を潰す！
3. 保存情報を閲覧・取得されたことを想定した対策を考えておく！

30.
利用可能にする人の限定方法を考える！
kintone の閲覧権限と同レベルの情報が
PC のユーザーフォルダ内に保存される
CSV を
利用可能にするのが妥当そう
CSV
Ryu
Ryu
CSV ファイルがダウンロード
保存された状態と等価

31.
保存情報を他の意図しない人が閲覧出来てしまう可能性を潰す！
CSV
Ryu
Ryu
Tora
Tora
他の PC アカウントがあるケース
共用箇所に
コピー
CSV
Ryu
Ryu
Guest（共用アカウント）
Tora
PC 共用アカウントを使うケース

32.
保存情報を閲覧・取得されたことを想定した対策を考えておく！
Tora
• IndexedDB のパスワード設定
• データ暗号化
$id Name
1 %E9%9D%92%E9%87%8E
2 %E6%85%B6%E4%B9%85
3 %E8%AA%A0
パスワードやキーはデータと分離して
保存可能だが、同レベルの保存方法のため
取得される可能性があり、万全ではない
パスワード設定やデータ暗号化自体が
抑止力にはなるので、ないよりマシ？
（アイディア）
※ kintone の CSV 書き出しも暗号化対応等はないので今回は実装見送り

33.
まとめ
• IndexedDB を用いる アイディアの カスタマイズを紹介
• デバイスオフロードによるkintone に負担ない自由度の高いカスタマイズ
• ユーザー単位の個別最適化が容易
• モバイルやテーブルにもキッチリ対応済み
• もっとワクワクしてもらいたいので、本戦にはもう一味加えますw
所感
• 検索カスタマイズは用途に応じた個別最適なカスタマイズ
アプローチが良さそう
• IndexedDB は検索以外でもオフラインアプリへの利用等
kintone の活用の幅を広げてくれる可能性がある

34.
ほぼ全てと言っていい
他サービス連携なし、
ありそうでなかったアイディアで実現する！
しっくりくる解が長年見出されてない・・・
Kintone 最大の強みのひとつ JavaScript カスタマイズのみで実現！
難しい！
多くのユーザーが欲し続けてきた鉄板ニーズを
みなさん楽しんで頂けましたか？

35.
快適で楽しい kintone 活用を！

36.
ご清聴
ありがとうございました！