[js,css] テンキーがついているスマートフォンの罠

Androidを爆発し隊・投げ捨て隊に所属するみなさん、
ますますスマホ戦線が活発化する中いかがお過ごしでしょうか。

スマホといえばiPhoneがその美しいデザインでこれぞスマホ!という概念を決定的に印象づけた
3〜4インチ前後のタッチパネルのものが主流ですが、
テンキーとか十字キーとかがついている狂った機種をお忘れじゃありませんか?

007sh

狂気の007SH
ぱっと見ガラケーなのに中身はAndroid。
画面はタッチパネル対応だから触ればタッチイベントが発生する。
007SHはソフトバンクから出てるものですが、シャープはaudocomoにもテンキー付きAQUOS PHONEを出してます。なんてことしやがる。
私はこのデバイスに触れて初めてスマホをへし折りたいと思いました。

幸い今の会社はテスト端末が豊富なのでスマケー()も実機で見る事が出来たんですが、
手元に無ければこんな機種絶対頭から抜け落ちるだろうと思うので
この機種に関する注意事項をちょっと書いておこうと思います。

操作は主に十字キーと決定ボタンである

全ての悪の元凶。

スライド式で出てくるのとは違い、この二つ折りはガワが完全にガラケーなので
操作はタッチよりテンキーがメインになるだろうと想定出来ます。
実際に触ってみると、開いた状態(ガラケースタイル)でのタップ操作はとてもとてもやり辛いです。
画面を回転させてキーを隠せばXPERIA RAYくらいのサイズのタッチパネルだけに
なりはするものの、キーを使わない事は期待出来ません。
これが最大の問題。

tap-highlight-colorを透明にするとフォーカスが見えない

Androidにはz-indexに関する致命的なバグがあるので
tap-highlight-colorを透明にして回避するテクニックを使ったりすると思います。

iPhoneでもタップした時にグレーになるからやっぱり透明にした方がいいよね?
みたいな感じになってると思うんだけど、
tap-highlight-colorを透明にしているとフォーカスの枠が表示されないので
007SHで十字キー移動するとどこをフォーカスしているのかがパッと見分かりません。

それなら:focus指定しとけばいいじゃない?って思うじゃないですか。
ところがどっこいPCだとtabでフォーカス移動した時の疑似クラスは:focusなんだけど
007SHの場合はなぜか:hoverなのです。
意味が分からない。

auやdocomoで出てる姉妹機はまだ未確認ですが
同じメーカーなら中身も同じなんだろうなぁ…

まとめ

tap-highlight-colorを弄るなら:focus、:hoverの設定
もしくはそれに変わるクラスの付与を忘れずに。

決定ボタン押下時に発生するのはClickイベント

スマートフォンはマルチタップかどうかを判別する為に数ミリ秒待機するので
Clickイベントだと何かもっさり感があって、
さくさく感を実現する為にTouchイベントを使う事が多いと思います。

で問題なのは007SHでキー移動して決定ボタンを押したときで、
拾えるのはClickイベントだけなのでTouchイベントで実装してると当然何も起きません
(ブラウザだけじゃなくてアプリでも同じ)

PCだとTouch=Mouseなので、Tabでフォーカス移動してEnter押したとき
Mouseイベントが発生しないのはごくごく当たり前の事なんですが
タッチ操作が主流のスマートフォン界隈では非常に迷惑な仕様です。

ハイブリッドアプリでネイティブアプリ側がTouch操作に限っているのなら
ブラウザアプリでもTouch操作に限ってしまうのは問題ないと思うんですが、
そうでないならClickイベントを使っておいた方が無難です。

まとめ

Touchイベントで実装するとテンキー操作が完全に死亡する。
スマケー()を仲間に入れたいならClickイベントを使おう。

購入を検討中でこのページにたどり着いた人向けの情報

海外でも似たような機種が一応出てるんだけど、二つ折りなスマホは世界的には超マイナーなデバイスです。
上にも書いてますが、キー操作時はタッチイベントが発生しないので
アプリがキーで操作出来ない確率が高いです。(特にゲーム)

画面を回転させればタッチパネルも使えるとは言っても、いちいち持ち方変えなきゃいけないのは不便w
文字を書く事メインだとしても慣れればフリックの方が速いし
アプリが普通に使えないというのはかなりのハンデですから
普通のタッチパネル型スマートフォン(特にiPhone)の購入をおすすめしておきます。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください