The YUI teamは7日(米国時間)、Yahoo UI(以下、YUIと表記)の最新版となるYUI 3.2.0をリリースした。YUIはJavaScriptフレームワークのひとつで、The BSD Licenseのもとで公開されている。豊富なユーティリティと強力なウィジェットが特徴。(マイコミジャーナル内の紹介記事「【ハウツー】待望のiPhone/Androidサポート! YUI 3.2.0のモバイル端末向け機能を試す」)

YUI 3.2.0で追加された新機能のひとつに「ScrollView」ウィジェットがある。ScrollViewはiPhoneネイティブアプリのスクロールUIをWebブラウザ上で簡単に実現するためのウィジェット。

タッチデバイスではCSSのoverflow: scrollを利用した場合、特殊な操作を要求されてしまう。たとえばiPhone上のMobile Safariの場合、overflow: scrollが設定されているレイアウトはスクロールバーが表示されない上、スクロールをしたい場合は2本指タップでスクロールする必要がある。ScrollViewウィジェットを利用すれば、クロスプラットフォーム上でもiPhone/Androidのネイティブアプリのスクロール操作感をそのままWebアプリ上で再現できるようになるというわけだ。

iPhone上Mobile SafariでのScrollView適用例。ネイティブアプリさながらのスクロールUIを実現する - YUI 3.2.0 Released: SimpleYUI, Touch Event Support, Gestures, Transitions, CSS Grids, ScrollView, Uploader, and More » Yahoo! User Interface Blog (YUIBlog)より引用

本稿ではこのScrollViewウィジェットの使い方を紹介しよう。