【要約】kintoneで確認ダイアログと通知バナーを使って誤操作を防ぐUXを実装してみよう [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
kintoneのカスタマイズにおいて、以下の課題が存在する。
- ・一括登録やステータス変更など、取り消し不能な操作による誤操作リスク。
- ・長時間かかる処理中に、画面が停止したとユーザーが誤解する問題。
- ・処理の成否がユーザーに明確に伝わらないUXの欠如。
// Approach
新APIを組み合わせ、以下のフローで実装する。
1.実行可否の確認
- ・
showConfirmDialog()で単純な確認を行う。 - ・
createDialog()で入力フォームを含む複雑な対話を実現する。
2.進捗の可視化
- ・
showLoading('VISIBLE')で処理中の待機状態を表示する。
3.結果の通知
- ・
showNotification()で成功またはエラーをバナー表示する。
4.デバイス最適化
- ・
kintone.isMobilePage()を用い、モバイルではボトムシートを活用する。
// Result
「確認→進捗→結果」の設計により、ユーザーの不安を解消し、誤操作を抑制できる。デバイスに応じた最適なUI（ボトムシート等）の提供も容易になる。標準APIの活用により、高度なUXを低コストで実装可能となる。
Senior Engineer Insight
> 標準APIの拡充は、カスタマイズの保守性とUXのバランスを劇的に改善する。特に
finally ブロックでの showLoading('HIDDEN') 徹底など、エラーハンドリングを含めた実装パターンが重要だ。DOM操作を避け、提供されたAPIを組み合わせて「確認→進捗→結果」のフローを構築する設計思想は、実戦的で極めて合理的である。大規模な業務アプリにおいて、操作の透明性を確保するための必須知識と言える。