ScrollViewには現在、2種類のプラグインが用意されている。

  • ScrollBar Plugin: スクロールインジケータを表示する
  • Paginator Plugin: ページ送り機能をサポートする

ScrollBarプラグインはスクロールUIの横に、スクロール位置を示すインジケータを表示する。PaginatorプラグインはおもにScrollViewをカルーセルのように横形式で利用したい場合に重宝する。どちらも簡単に使える便利なプラグインだ。

たとえばScrollBarプラグインをさきほどのscrollview.htmlにくわえてみよう。変更後のJavaScriptコードは次のとおり。

YUI().use('scrollview-base', 'scrollview-scrollbars', function(Y)
{
    var scrollView = new Y.ScrollView
    (
        {
            srcNode: '#scrollable',
            height: 310
        }
    );
    scrollView.plug(Y.Plugin.ScrollViewScrollbars);
    scrollView.render();
});

YUI().use()で"scrollview-scrollbars"をインクルードし、レンダリングの前でプラグインを使用する1行を追加している。そのほかはscrollview.htmlとおなじ。

scrollview_scrollbar.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>MJ Channel x ScrollView</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style>
        <!--
        html, body {
            margin:0;
            padding:0;
            font-family: arial,helvetica,clean,sans-serif;
        }

        #scrollheader
        {
            background-color:#6d83a1;
            border:1px solid #000;
            margin:10px 10px 0 10px;

            height:44px;
            width:400px;

            background: -webkit-gradient
            (
                linear,
                left top,
                left bottom,
                from(#d8dee6),
                color-stop(0.01, #b0bccc),
                color-stop(0.49, #889bb3),
                color-stop(0.50, #8094ae),
                to(#6d83a1)
            );

            float:left;
        }

        #scrollheader h1
        {
            color: #fff;

            margin:0;
            padding:10px 0;

            text-align:center;

            font-size:150%;
            font-weight:bold;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.7);
        }

        #scrollable li
        {
            border-bottom: 1px solid #ccc;
            padding: 8px;
            font-size: 140%;
            font-weight: bold;
        }

        #scrollable.yui3-scrollview-loading
        {
            display:block;
            visibility:hidden;
        }

        .yui3-scrollview
        {
            margin:0 10px 10px 10px;
            border:1px solid #000;
            border-top:0;

            width:400px;

            clear:left;
            float:left;
        }
        -->
        </style>
        <link media="handheld, only screen and (max-device-width: 480px)" href="http://developer.yahoo.com/yui/3/examples/scrollview/assets/examples-smallscreen.css" type="text/css" rel="stylesheet" charset="utf-8">
        <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body class="yui-skin-sam">
        <div id="scrollheader">
            <h1>MJ Channel x ScrollView</h1>
        </div>
        <div id="scrollable" class="yui3-scrollview-loading">
            <ul>
                <li>ネット</li>
                <li>経営</li>
                <li>エンタープライズ</li>
                <li>クリエイティブ</li>
                <li>ビジネスPC</li>
                <li>パソコン</li>
                <li>携帯</li>
                <li>家電</li>
                <li>ホビー</li>
                <li>エンタテイメント</li>
                <li>ライフ</li>
                <li>ブック</li>
            </ul>
        </div>

        <script type="text/javascript" charset="utf-8">
        <!--
        YUI().use('scrollview-base', 'scrollview-scrollbars', function(Y)
        {
            var scrollView = new Y.ScrollView
            (
                {
                    srcNode: '#scrollable',
                    height: 310
                }
            );
            scrollView.plug(Y.Plugin.ScrollViewScrollbars);
            scrollView.render();
        });
        -->
        </script>
    </body>
</html>

scrollview_scrollbar.htmlを各環境で確認する。

Safari上での表示。画面横にスクロール位置を示すインジケータが表示された

操作すると自動的にスライド。端まで操作しても伸び縮みする

iPhone/iPadのMobile Safari上での表示。パッと見ではiPhoneアプリかWebアプリなのか区別がつかないくらいの見栄え

高機能なモバイルデバイスが続々と登場している中、既存Webアプリの機能を一部削除/カスタマイズし、iPhoneやAndorid, iPadといったモバイルデバイスで動作するようにしたいという要望はこれから増えていく可能性が高い。iPhoneでスケジュールや既存システムの一部を一覧形式でパッと見せたい場合、ScrollViewだけで手軽なWebアプリが構築できそうだ。まだβ版あつかいのScrollView、これからの動向に注目しておきたい。