Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for おぐえもん おぐえもん
September 30, 2025
64

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

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

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

Avatar for おぐえもん

おぐえもん

September 30, 2025
Tweet

More Decks by おぐえもん

Transcript

  1. 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
  2. FEC北海道/東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん(小倉 且也) 確認してみた発表 はじめに • IME vs Input

    Field Shortcuts: Enhancing Text Input Accessibility • かみくずさん • すべてのinputに可視ラベルがあれば • maihaさん • 奥深くて厄介な「改行」と仲良くなる20分 • おぐえもん(自分) 8 フロントエンドカンファレンス東京 フロントエンドカンファレンス北海道
  3. 9 IME vs Input Field Shortcuts: Enhancing Text Input Accessibility

    フロントエンドカンファレンス東京 かみくずさん
  4. FEC北海道/東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん(小倉 且也) kintoneのコードはどうなっている!? 発表内容の振り返りと確認 • kintoneは色々なショートカットキーに対応している • ポップアップをEscで閉じる

    など • 刷新後のkintoneの共通UIパーツは kintone Design Systemという 自社製デザインシステムの中で実装される • 共通UIパーツ向けのイベント関数は今回の内容が考慮されているのか!? 12
  5. FEC北海道/東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん(小倉 且也) 発表の中に含まれていた内容 発表内容の振り返りと確認 • 原則、input欄は可視ラベルをつける必要がある • こういうUIはラベルがないがち

    • プルダウンメニュー単体(可視ラベルがない) • 分割されたinput (可視ラベルはあってもアクセシブルネームがない)など… • スライドURL:https://blog.mtdew2.com/lt-tsuketai-visible-label/ 16
  6. FEC北海道/東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん(小倉 且也) 開発中デザイン・Before kintoneのコードはどうなっている!?〜分割されたinput編〜 発表内容の振り返りと確認 21 • kintoneには「日時」というフィールドがあり、日付と時刻に入力欄が分かれる

    • 可視ラベルはあるが、アクセシブルネームは… フィールド名だけ? 日付の入力欄なのが 分からない? 「時刻」だけ? 購入日時の入力欄なのが 分からない? ※リリースまでに 変わる可能性があります
  7. FEC北海道/東京で得た知識が自社製品の実装でどこまで使えるか確かめた - おぐえもん(小倉 且也) まとめ まとめ • FEC北海道/東京の発表内容は日頃の開発にすぐ役立つ話が盛りだくさん! というのを次の発表を例にご紹介 •

    IME vs Input Field Shortcuts: Enhancing Text Input Accessibility • かみくずさん • すべてのinputに可視ラベルがあれば • maihaさん • 奥深くて厄介な「改行」と仲良くなる20分 • おぐえもん(自分) • 発表者の開発環境で発表内容が徹底されているとは限らない • (少なくとも自分は) 31