touchOverflow

touchOverflowによるページ切替の劇的な向上と、本当の「固定ツールバー」実装

現在のところ、表示されているページと、このあと遷移するページはビューポートに、デバイスがサポートする限りの広さを使って隣同士並べられています。ページ遷移が始まると、まず遷移先のページを先頭までスクロールし、横方向に並べられたページをアニメーションさせます。このアプローチの良くない点は、この時に両方のページが同時に同じビューポートを共有してしまうことです。また「戻る」ボタンを押した場合は、またスクロールアップし、遷移を行い、次に以前のスクロールポジションを復元しなければなりません。携帯端末のブラウザなどはかなり遅いため、こうしたスクロールの動きはユーザにストレスを与えることになります。

この状況を根本的に改善するには、両方のページが別々のコンテナに入り、それぞれ独立したスクロールバーを持つことです。ドキュメントが一度スクロールし、再びまたその位置を復元するような必要がなくなれば、動きはかなりスムーズになります。このことは同時に、固定ツールバーの実装を非常にシンプルにします。内部的にスクロールするコンテナ要素の外側に、ツールバーを置くだけになります。

動作原理

iOS5でサポートされた overflow:auto は、ネイティブの慣性の働くスクロールを矩形内部に実装することを可能にします。この新たなCSSを仕様した追加機能は、touchOverflowと呼ばれます。これによって本当の意味での固定ツールバーと、素晴らしくスムーズなページ遷移がiOS5上で、わずかなコードを追加することで実装できます。

今後主流になっていくであろうCSSによるオーバーフロースクロールの機能を使うには taouchOverflowEnabled を設定します。この機能は、初期状態ではOFFになっています。充分なテストやパフォーマンスのチューニングが済んでいないと判断したためですが、いずれデフォルトでONにできるよう期待されています。このグローバル設定を有効にする方法は、次のコードを見て下さい。

この機能が有効になると、フレームワークはブラウザが overflow: と -webkit-overflow-scrolling:touch のCSS機能が共にサポートされているかを確認します。ブラウザが両方をサポートしていれあｂ，ネイティブな overflow: スクロールを持ったページコンテナを2つ使ったスムーズな遷移モードに切り替わります。iOS上では既にハードウェアアクセラレータを用いた切替が、ネイティブ機能のパフォーマンスとほぼ同等のレベルで実装されています。

デモを見るには、iOS5上で このページ を見てみてください。

デメリット

特に新しい機能に関しては、良いことずくめではありません。この機能を有効にした際のデメリットを、ここに挙げておきます。

• iOS5上で overflow: を使い埋め込まれたリストやフォーム要素が、時折描画されない場合があります。これは再現性が非常に低いのですが、無視できない問題です。そこでCSSには translate-z が埋め込まれ、それによってiOSに対しコンテンツの再描画を強制的に行なうようにしています。このことによる問題は、ページ遷移時に全ての要素に一度 position:relative が指定されてしまうことです。これはレイアウト上問題を招く原因になるでしょう。
• ステータスバーの時間部分がタップされた場合の、ページトップへのスクロールが行われた場合、どうやら -webkit-overflow-scrolling:touch プロパティは無効になってしまうようです。この問題は、Appleによって修正されることを願います。
• overflow: と -webkit-overflow-scrolling:touch が設定されている場合、iOSは、その親要素の overflow:hidden を無視するようになります。そのため、たとえばビューポートより大きな画像やコードブロックを持つページでは、横スクロールバーが表示されてしまいます。
• この機能が有効になっている際、ビューポート指定のメタ要素によるユーザズームは使えないようになります。なぜなら、ツールバーもページも共にすぐ奇妙なサイズにズームされてしまい、なかなか戻せなくなるためです。ユーザによるズーム機能は重要ですが、ユーザビリティの観点から固定ツールバーやオーバーフローを安定させることの方が更に重要だと判断されました。
• 既にロードされているペ0－地へ戻った場合に、スクロール位置が失われている場合があります。DOMキャッシュが有効になっているならば、このことは起こりません。
• これはまだ実験的な機能です。未だ全ての問題が解決されているわけではないので、注意深く確認してください。

他にサポートしている端末は無いの？

ありますが、条件付きです。Android HoneycombとBlackBerry PlayBook は overflow: をサポートしていますが、どちらもテストしてみると充分にスムーズな実装がされているとは言えません。ページは途切れ途切れに引っかかるような、おかしなスクロールをするようになってしまいます。開発チームはデバイスメーカーと協力しながら、充分なパフォーマンスが保証されるよう作業を続けていることろです。

更に重要なことは、overflowを適切なターゲットに適用させることです。単純に overflow:auto のCSSルールをページ上に適用すると、古いバージョンのAndroidやiOSではコンテンツが切り落とされてアクセスできなくなってしまいます(実はiOS上では二本指スクロールで動かせますが、そんなことは誰もわかりません)。AppleによるiOS5での実装がスマートなのは、CSSプロパティに -webkit-overflow-scrolling:touch を追加することでタッチスクロールがあるかをテストして、もしサポートしていれば overflow ルールを追加してくれることです。これは複雑でメンテナンスの効かないユーザエージェントを調べる方法を使わずに安全に対象を選ぶ唯一の方法です。

開発チームは、デバイスとブラウザ両方のメーカーと協力しながら、これらのCSSベースの機能が実装されるよう作業しています。なぜなら、この機能はリッチなモバイルウェブアプリを構築するために必要不可欠なものだと思っているからです。今後、たとえばOpera、Firefox、Microsoftなどがこうしたタッチスクロール機能をサポートしていく都度、ベンダープレフィックスを付けた指定を追加していく予定です。一度iOS5上でのページ切替や固定ツールバーを体験してもらえれば、他のブラウザでもすぐに対応してくれるであろうことを期待しています。現在のJSベースのスクロールスクリプトは、依然として新たなCSSによる機能をサポートしていないブラウザ用のポリフィルとして残るでしょう。しかし、これはモバイルウェブの進化によってすぐに消えていくべきものだと思われます。