kintone 未解決超鉄板ニーズに準最適解を与える！ - kintone hack 2022 予選
•
0 likes•713 views
kintone hack 2022 予選 2022.9.20
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to kintone 未解決超鉄板ニーズに準最適解を与える！ - kintone hack 2022 予選
Similar to kintone 未解決超鉄板ニーズに準最適解を与える！ - kintone hack 2022 予選 (20)
More from Ryu Yamashita
More from Ryu Yamashita (20)
kintone 未解決超鉄板ニーズに準最適解を与える！ - kintone hack 2022 予選
- 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
- 6. ほぼ全てと言っていい 他サービス連携なし、 ありそうでなかったアイディアで実現する！ しっくりくる解が長年見出されてない・・・ kintone 最大の強みのひとつ JavaScript カスタマイズのみで実現！ 難問！ 多くのユーザーが欲し続けてきた鉄板ニーズを
- 7. ほぼ全てと言っていい 他サービス連携なし、 ありそうでなかったアイディアで実現する！ しっくりくる解が長年見出されてない・・・ Kintone 最大の強みのひとつ JavaScript カスタマイズのみで実現！ 難しい！ 多くのユーザーが欲し続けてきた鉄板ニーズを うぉー、きたキタ北！やっと来た！！ これは今すぐ使いたい！！ もっと詳しいこと聞きたい！！ なるほど、真似してみよw
- 8. 部分一致検索 今回のテーマ Cy Cybozu Cybozu Kintone Cybozu Groupware Cybozu Teamwork Cybozu Days 2022 キーワード入力に追従して 都度候補表示する
- 9. クイックデモ
- 10. ※公開スライド用にデモ内容の説明 モバイル対応をさりげなくアピール ① この Jeffy さんを探し当てるてい ② 愛称 Jeff っぽいので、”jeff” で検索する ③ 部分一致したレコードが表示される マッチングに寄与したフィールドと マッチング部分を表示 他サービス連携なしなので、 通信も発生していない
- 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 の負担がない 従量課金の他サービスの利用が必要になる
- 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 形式 • トランザクション対応 ※よく見ると多くのサービスで自然に使われているので、知らぬ間に使わされてます
- 23. 現在実装済み機能 前方一致 後方一致 マッチング条件 部分一致 OR フィールド内 AND レコード内 AND レコード内 OR 複数フレーズ検索 緩い 厳しい AND AND フィールド設定 インデックス対象 検索対象 検索優先順位 タイトル （切替選択） （切替選択）
- 24. デモンストレーション
- 25. ※公開スライド用にデモ内容の説明 IndexedDB のデータ更新・削除機能 レコード内 OR での検索 検索に寄与したカウント デモ映えのためにデバッグ用のスピードメーターを残置
- 26. ほぼ全てと言っていい 他サービス連携なし、 ありそうでなかったアイディアで実現する！ しっくりくる解が長年見出されてない・・・ Kintone 最大の強みのひとつ JavaScript カスタマイズのみで実現！ 難しい！ 多くのユーザーが欲し続けてきた鉄板ニーズを 欲しかった部分一致検索 カスタマイズ、これですよね？
- 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 カスタマイズのみで実現！ 難しい！ 多くのユーザーが欲し続けてきた鉄板ニーズを みなさん楽しんで頂けましたか？
- 36. ご清聴 ありがとうございました！