スマホ専用画面を捨てた - OSやブラウザを判別して画面を出し分けせず、操作に基づいてUIを切り替える by shokai

iPad + magic keyboardやChorme OS、Surface Goなど、タブレットとノートPCのモードを切り替えて使用できるデバイスがあります。
画面を指でタッチ操作する事もできるし、トラックパッドでポインタ操作もできます。物理キーボードを切り離してスクリーンキーボードでも操作します。

そのようなデバイスに対応したwebアプリケーションを作る場合、OSやブラウザ、ontouchstartイベントの有無などからUIを出し分ける従来の方法ではうまくいきません

このトークでは、OSやブラウザを判別せず、ユーザーの操作方法に応じてUIと機能を出し分けする方法を解説します

• スマホ・タブレット・パソコンを、「タッチ操作 or マウス操作」と「小さい画面 or 大きな画面」のマトリクスで考える
• スタイルと機能を分けて考える
• Scrapboxのwikiエディタでの実装