FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた

FEC北海道／東京で発表を聞いた後「へ〜」と感心して終わっていませんか？
知識は使ってなんぼ。この発表では、自社製品「kintone」のフロントエンド実装を点検して、イベントで得られた実装テクを適用できる余地を探してみた結果をお届けします。

※本資料は、2025年9月30日に東京都千代田区・Datadog Japan Tokyo オフィスで開催されたイベント「余熱NIGHT from FEC北海道＆東京2025」における登壇資料です。
https://gaudiy.connpass.com/event/366599/

Transcript

1. FEC北海道／東京で得た知識が 自社製品の実装で どこまで使えるか確かめた 2025.09.30 1 余熱NIGHT from FEC北海道＆東京2025 サイボウズ株式会社 開発本部 おぐえもん（小倉 且也） #FEC余熱NIGHT
2. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） 自己紹介 はじめに • サイボウズ株式会社 開発本部 フロントエンドエンジニア • 2022年9月入社／kintoneのフロントエンド刷新に従事 • 2024年からkintoneの主要機能の1つである 「アプリ」機能のUI刷新をリード 2 おぐえもん（小倉 且也） @oguemon_com https://oguemon.com/ ← 今日の昼にできたてホヤホヤの記事も見てね！ Cybozu Inside Out https://blog.cybozu.io/entry/2025/09/30/150000
3. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） みなさんこんなことになってませんか？ はじめに イベント当日 3 うおお！ これは有料級！ ためになるぞ〜
4. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） みなさんこんなことになってませんか？ はじめに 数日後… 4 そういや イベントを受けて 何かしたっけ
5. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） この発表について はじめに • 私がFEC北海道/東京の発表で得た新しい知識をもとに、 サイボウズ製品「kintone」のフロントエンド実装を再確認しました • 使えそうなところはガンガン取り入れます 5
6. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneって何？ サービスとプロジェクトの概要 • サイボウズの主力製品 • 37,000社が利用（2025年1月時点） • 業務のシステム化や効率化を実現する アプリが「シュシュッと」つくれる ノーコードツール 6
7. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneのフロントエンド刷新 サービスとプロジェクトの概要 • kintoneは、開発初期（2010年前後）のFE実装がレガシー化している • →2021年頃から脱レガシー（React + TypeScript化）に着手 7 従来の画面 開発中の画面 ※リリースまでに変わる可能性があります
8. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） 確認してみた発表 はじめに • IME vs Input Field Shortcuts: Enhancing Text Input Accessibility • かみくずさん • すべてのinputに可視ラベルがあれば • maihaさん • 奥深くて厄介な「改行」と仲良くなる20分 • おぐえもん（自分） 8 フロントエンドカンファレンス東京 フロントエンドカンファレンス北海道
9. 9 IME vs Input Field Shortcuts: Enhancing Text Input Accessibility フロントエンドカンファレンス東京 かみくずさん
10. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） 発表の中に含まれていた内容 発表内容の振り返りと確認 • かみくずさんの発表資料より転載 https://ef81sp.github.io/ime-vs-input-keyboard-shortcut/ 10 IMEの例→
11. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） 発表の中に含まれていた内容 発表内容の振り返りと確認 11
12. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneのコードはどうなっている！？ 発表内容の振り返りと確認 • kintoneは色々なショートカットキーに対応している • ポップアップをEscで閉じる など • 刷新後のkintoneの共通UIパーツは kintone Design Systemという 自社製デザインシステムの中で実装される • 共通UIパーツ向けのイベント関数は今回の内容が考慮されているのか！？ 12
13. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneのコードはどうなっている！？ 発表内容の振り返りと確認 • 発表資料そのままの記法ではないものの、先人が考慮してくれてました 13
14. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneのコードはどうなっている！？ 発表内容の振り返りと確認 • kintoneの共通UIパーツに使うイベントでは対応済 • 共通UIパーツ以外のキー操作イベントは これから自前で実装することになるので、 この発表の知見を活かしたいと思います！ 14 かみくずさん、ありがとう！
15. 15 すべてのinputに可視ラベルがあれば フロントエンドカンファレンス北海道 maihaさん
16. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） 発表の中に含まれていた内容 発表内容の振り返りと確認 • 原則、input欄は可視ラベルをつける必要がある • こういうUIはラベルがないがち • プルダウンメニュー単体（可視ラベルがない） • 分割されたinput （可視ラベルはあってもアクセシブルネームがない）など… • スライドURL：https://blog.mtdew2.com/lt-tsuketai-visible-label/ 16
17. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） 発表の中に含まれていた内容 発表内容の振り返りと確認 17
18. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneのコードはどうなっている！？ 発表内容の振り返りと確認 • kintoneはデータの蓄積・閲覧に関する細やかなニーズに応えるため、 あちこちに入力欄・選択欄がある • 今まで作ったUIは今回の内容が考慮されているのか！？ 18
19. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneのコードはどうなっている！？〜プルダウンメニュー編〜 発表内容の振り返りと確認 19 現行デザイン
20. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneのコードはどうなっている！？〜プルダウンメニュー編〜 発表内容の振り返りと確認 20 開発中デザイン ※リリースまでに変わる可能性があります • 刷新にあたり、 デザイナーさんが可視ラベルの ことを考慮してました
21. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） 開発中デザイン・Before kintoneのコードはどうなっている！？〜分割されたinput編〜 発表内容の振り返りと確認 21 • kintoneには「日時」というフィールドがあり、日付と時刻に入力欄が分かれる • 可視ラベルはあるが、アクセシブルネームは… フィールド名だけ？ 日付の入力欄なのが 分からない？ 「時刻」だけ？ 購入日時の入力欄なのが 分からない？ ※リリースまでに 変わる可能性があります
22. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） 開発中デザイン・After kintoneのコードはどうなっている！？〜分割されたinput編〜 発表内容の振り返りと確認 22 • この機会に、「フィールド名 日付」「フィールド名 時刻」に アクセシブルネームを変えてみました ※リリースまでに 変わる可能性があります
23. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneのコードはどうなっている！？〜分割されたinput編〜 発表内容の振り返りと確認 23 • aria-labelledbyに複数のidを指定できること、 idの自己参照ができることを利用すればスマートにできます！
24. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneのコードはどうなっている！？ 発表内容の振り返りと確認 • フォームパーツについてる 可視ラベル・アクセシブルネームを意識する機会になりました 24 maihaさん、ありがとう！
25. 25 奥深くて厄介な「改行」と仲良くなる20分 フロントエンドカンファレンス北海道 おぐえもん（自分）
26. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） 発表の中に含まれていた内容 発表内容の振り返りと確認 • 改行のあれこれの中で、CSSの改行系プロパティの内容を解説 • スライドURL：https://speakerdeck.com/oguemon/vs-new-line 26
27. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） 発表の中に含まれていた内容 発表内容の振り返りと確認 • “word-break: break-word;”は今や非推奨！ 27
28. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneのコードはどうなっている！？ 発表内容の振り返りと確認 • 自分が開発してるコードに紛れてるワケないよなぁ！？ 28
29. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneのコードはどうなっている！？ 発表内容の振り返りと確認 29
30. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） kintoneのコードはどうなっている！？ 発表内容の振り返りと確認 30 • この機会に修正しました おぐえもんさん、ありがとう！
31. FEC北海道／東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん（小倉 且也） まとめ まとめ • FEC北海道／東京の発表内容は日頃の開発にすぐ役立つ話が盛りだくさん！ というのを次の発表を例にご紹介 • IME vs Input Field Shortcuts: Enhancing Text Input Accessibility • かみくずさん • すべてのinputに可視ラベルがあれば • maihaさん • 奥深くて厄介な「改行」と仲良くなる20分 • おぐえもん（自分） • 発表者の開発環境で発表内容が徹底されているとは限らない • （少なくとも自分は） 31
32. ©️ Cybozu, Inc. 32