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

Cybozu GoogleI/O 2022 LT会 - Input for all screens

Avatar for Jake Jake
June 24, 2022
Programming
0
1.6k

Cybozu GoogleI/O 2022 LT会 - Input for all screens

Avatar for Jake

Jake

June 24, 2022
Tweet

Other Decks in Programming

See All in Programming
NPOでのDevinの活用
Avatar for みんなのコード codeforeveryone
0
450
git worktree × Claude Code × MCP ～生成AI時代の並列開発フロー～
Avatar for hisuzuya hisuzuya
1
510
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
Avatar for Akira Kobori koboriakira
0
460
Node-RED を（HTTP で）つなげる MCP サーバーを作ってみた
Avatar for High U highu
0
110
Create a website using Spatial Web
Avatar for Akio Itaya akkeylab
0
310
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
3
210
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
570
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
Avatar for nrs nrslib
1
500
「ElixirでIoT!!」のこれまでとこれから
Avatar for takasehideki takasehideki
0
370
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
Avatar for Kentaro Yoshida y_ken
0
320
エラーって何種類あるの？
Avatar for Takuma Kajikawa kajitack
5
320
CursorはMCPを使った方が良いぞ
Avatar for taiga taigakono
1
190

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
Done Done
Avatar for chrislema chrislema
184
16k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k

Transcript

  1. Input for all screens // あらゆる画面への入力 by Jake

  2. Keyboard Mouse Pen

  3. Touch以外の各Inputに合わせる 適切なアクセス方法をサポートする必要

  4. 「Jetpack Compose」から 多様な入力方法を実現するかについて

  5. None

  6. Implement accessibility for keyboards // キーボードの入力方法を実装する時の確認事項 Keyboard

  7. キーボードの場合、 1. ショットカットを注意 2. 可能であれば、仮装キーボードだけじゃなくて、ハードウェアーも テスト Keyboard

  8. Jetpack ComposeのEditTextは、CopyhPasteなどの基本的 なショットカットに対応 Keyboard

  9. しかし、Ctrl＋OなどをFile Open機能に対応する必要も https://youtu.be/XtImpP23uhE?t=319 Keyboard

  10. そして、Enterキ⑲やEscapeキ⑲がよく作動するように対応する必要も https://youtu.be/XtImpP23uhE?t=350 Keyboard

  11. Tab、→キーで画⾯内ナビゲーションが可能なことが⼀般的 Keyboard

  12. キーボードナビゲーションの実装のための確認事項 1. ユーザーが必要なすべての要素にアクセス可能か 2. その要素が適切な順番で並んでいるか 3. そのナビゲーションが効果的か Keyboard

  13. テスト キーボードナビゲーションの実装のための確認事項 1. ユーザーが必要なすべての要素にアクセス可能か 2. その要素が適切な順番で並んでいるか 3. そのナビゲーションが効果的か Keyboard

  14. Tabで移動することは以下の修正で対応可能 https://youtu.be/XtImpP23uhE?t=525 Keyboard

  15. ComposeならfocusPropertiesを利用して https://youtu.be/XtImpP23uhE?t=534 Keyboard

  16. Implement accessibility for mouses // マウスの入力方法を実装する時の確認事項 Mouse

  17. マウスの場合、 ホバーステートを考えてみましょう Mouse

  18. マウスオーバーの時、 適切なレベルで対象を強調する必要 Mouse

  19. ホーバーステートを適切に実装 https://youtu.be/XtImpP23uhE?t=636 Mouse

  20. Composeなら、以下のhoverable modifierを使って実装可能！ https://youtu.be/XtImpP23uhE?t=650 Mouse

  21. Implement accessibility for stylus // スタイラスペンの入力方法を実装する時の確認事項 Pen

  22. スタイラスペンを対応する？ // スクロール、クリックがよくできるかを確認 // 描く、オブジェクトの移動などの機能は対応しなくても、 タッチやドラグする⾏動と同じように実装する必要 Pen

  23. その以外にも 1. ファイルブラウザーなどを対応する場合は、 Drag & Dropを対応する必要 2. ビデオプレイヤーなどを対応する場合は、 キーボードのMultimediaキーを対応する必要 。。。

  24. ユーザーインプット経験はUXの直接影響を上げます。 良い品質のため、適切な対応を通じて改善しましょう！

  25. Reference https://io.google/2022/program/a55aec14-5bda-47e0-b259-7a1f7bb366b8/intl/ja/ ありがとうございます！