chromeでスペーススクロールが効かない理由

chromeで検証するときに、スペースを押してページ推移をするんだけど、たまにうまく推移しないことがある。普段はスムーズに変わるのに、ふと気づいた時、何度スペースキーを押してもうんともすんとも言わなくなる。こういう経験のある人は多いのではないだろうか。

Chrome 6 より前のバージョンでは「半角/全角」に関わらず，スペースキーを押すことで下スクロールが行えたのですが，バージョンが 6 になってからは「全角入力」になっている状態でスペースキーを押しても下スクロールする事ができなくなりました．

by デジタルライフ部　Chrome 6 からスペースキーでスクロールできない問題をとりあえず解決する方法

このサイトによると、かな入力がオンの状態でスペースキーを押すと反応しなくなる。そのため、スクロールするにはかな入力を解除するか、コントロールキー＋スペースキーを押すとうまく反応するという。

この記事の日付が２０１１年７月。未だに改善されないところを見ると、バグではなく仕様のようだ。全角スペースキーでもスクロールしてくれる拡張機能が出れば人気が出そうだな〜・・・。

user agent stylesheetとは何か

GoogleのデベロッパーツールでCSSを解析すると、オリジナルで作られたCSSの他に、user agent stylesheetなんてものが見つかる。

これは、ブラウザごとに定義されたデフォルトのCSS設定を指している。通常、ページデザインにリセットCSSをかませないと、ブラウザごとにタグのマージンやパディングが微妙に異なるが、その理由の一つに、このuser agent stylesheetにある。safariやchromeはwebkit系列の設定、つまりはuser agent stylesheetを使っている。

WebKit（ウェブキット）は、アップルが中心となって開発されているオープンソースのHTMLレンダリングエンジン群の総称である。HTML、CSS、JavaScript、SVGなどを解釈する。

by wikipedia http://ja.wikipedia.org/wiki/WebKit

web-kitはChromeやSafariがデフォルトで使用しているスタイルシートの定義書みたいなもので、ここを参考にしてデフォルト設定の微妙なレイアウトが決まってくる。ブラウザ間にちょっとした表示の差異があるのは、このweb-kitが原因だ。

リセットCSSを効かせたつもりでブラウザ間の表示を見比べたら、数ピクセルズレがある、なんてことはよくある話。その時はこのuser agent stylesheetを疑うといい。

readAsDataURL()とIE10

ファイルをアップロードする際の画像確認として、選択した画像を一度ブラウザに表示する必要があるが、そのプレビューのために普通は一度ローカルからサーバー上にアップロードしなければいけない。

ここでreadAsDataURL()という便利なメソッドがある。この関数を使えば、ローカルのデータを表示することができる。加えてリロードの必要がなく、ページ推移なく動的に表示をしてくれるという、何ともお手軽なJSメソッドだ。

画像のアップロード一つでも、1から書くとなるとやたらプログラムを打ち込む必要がある。そこにセキュリティ対策やら例外対策やらを仕込まなければいけない。面倒な作業が、この関数を使えば一発解決。なんたってローカル参照だから、サーバーであーだこーだする必要がない。

しかし、対応ブラウザがとにかく少ない。まずIEがアウト。safariもアウト。スマホもアウト。便利なのにデフォルトのブラウザには全て対応していないという孤高のメソッドだった。対応していない理由は、たぶんセキュリティ面での配慮なのかもしれない。

ちなみに、IEでは次の10から対応するそうだ。いつの日か誰でも簡単に画像プレビュー出来る日が来るかもしれない。