和田憲幸のブログ

WebsiteToolKit.jsの続報です。やっぱモバイルビューをどうするかッスよね。ということでMobileNavigationSupportというのを付けてみた。が、中身はいま検討中です。さぁスマホユーザの皆さん、ぜひともご意見を。

試作段階ですが。

通常表示
モバイル表示
プレーン表示

スマートフォンでのheaderの扱い

基本的に今の流れでいけばfixedでいいと思うんですが、知らない方も多いかもしれませんが多くのスマートフォン初期ではfixedは未対応だったんですね。iOSもたしかiOS5未満は非対応だったと記憶しています。まぁ非対応といってもstaticとして扱われるなら閲覧に致命的な支障を来すことも無いですしね。スマホブラウザのバージョン分岐なんてゾッとするし、bottom使わなければ問題ないでしょう。ということで基本ベースはfixed前提でいこうかなと。

ちなみに同じwebkitを使っているAndroid ChromeとPS VITAブラウザですが、fixedの扱いが変なんですよ。スクロールするとピクピク動くんです。absoluteをonscrollで追従させていたIE6時代を彷彿させます。はやくしっかり対応させてほしいですね。

MobileNavigationSupport

今では各アプリでお馴染みになったヘッダにあるタップするとスラッとナビゲーションが出てくるアレです。基本的にこの部分はjsによってタグを追加する仕様なのでHTMLに別途なにかを用意する必要はありません。問題はタップしたときにどういう挙動にすべきかという点を悩んでいます。左からズルッと出すか、上からペロッと出すか、単純にグローバルメニューにジャンプするに留めるか。

「えー左からベロッと出せばいいじゃーん」と思う方もいらっしゃると思うのですが、各モバイルブラウザ互換でそれを実現しようとなると結構な制約を使用者に義務付けなくてはならなかったりします。「支援スクリプト」という位置づけとしてそれはさすがにどうかなーって思うんですよね。なので悩んでいます。ナビゲーションの数によってもいろいろ調整が必要ですしね。

スマートフォンでもやっぱり互換問題

Javascriptを活用する以上、互換問題は決して避けて通れませんが、モバイル市場に関して事はそう単純ではなく、来年にはFirefox OS、Windows Phone、Black Berry OS（日本では売れないだろうが）も控えているという現実があります。後々になって「このブラウザで動かなかった」とか切ないですからねどれだけ利便性が高かろうと。IE10問題と同じ轍を踏まないためにもいい妥協点を探りたいところです。

と、いうことでスマートフォン表示などでご要望等あればぜひコメントでもどうぞ。