Webブラウザでフリック体験 - Cybozu Inside Out | サイボウズエンジニアのブログ

「サイボウズ・アドベントカレンダー」の3日目です（これまでの記事一覧）。

こんにちは。SlackLineを12m歩けるようになった、SI開発チームの小林俊久(@toshihisa3)です。最近はSlackLine上での方向転換の練習をしています。

サイボウズのSI開発チームでは、特定業務向けまたは特定のお客様向けのソリューションを提供させて頂いております。その１つに、Webブラウザ上でタブレットやスマートフォンのように画面をフリックする機能があります。

この「フリックする機能」は数あるjQueryプラグインの１つですが、いずれのプラグインも静的なHTMLをフリックさせるものが大半でした。業務で利用にするにあたって、数が不定な情報をあらかじめ全て出力する訳にはいきません。よくあるページング機能のように、情報を小分けにして表示する必要があります。

今回はこのプラグインの紹介と、この問題を解決するために追加した、フリック情報の動的追加機能について解説させていただきます。

jQuery.flickable の紹介

jQuery.flickableは、iPhoneやAndroidのようにマウスのフリック操作でスクロールできるようにするjQueryプラグインです。フリックする要件が挙がった時に調べた当時、フリックするプラグインは沢山ではありませんが、幾つかありました。その中でこのプラグインを選択した理由は以下の通りです。

MIT と GPL のデュアルライセンスであったこと
コードが簡潔であったこと
他のプラグインと比べて動作がスマートフォンやタブレットのフリックに近かったこと
フリック以外の余計な機能がなかったこと

使い方はjQuery.flickableに詳しく載っていますので、そちらを参照ください。

セクションの動的追加の解説

動作確認に必要なファイル一式はここからdownload出来ます。

確認済みのブラウザは InternetExploler8, 9, Firefox, Chrome です。InternetExploler7 以下は非対応です。また、タブレットやスマートフォンでの動作は未確認です。

追加した機能はフレームワークになっています。実装者はイベントハンドラを定義することでフリックする情報を制御できます。詳しくはREADMEを参照ください。以下、ポイントだけ解説します。

１．コンストラクタ

var flickObj   = $('#flick-custom').flickable({
                                      section: 'li'
                                    , isDynamicWidth: true
                                    });

flickableのコンストラクタをコールする時に isDynamicWidth を true にします。

２．イベントハンドラ

flickObj.on('flicksectionreset', function(event, eventParams)
{
    _sectionMaker(event, eventParams);
});

flickObj.on('flicksectionadd', function(event, eventParams)
{
    _sectionMaker(event, eventParams);
});

プラグイン側ではセクションの枠だけを生成します。セクションの内容はインベトハンドラを使って組み立てます。flicksectionresetイベントとflicksectionaddイベントは、セクションの枠を生成した直後に発火するイベントです。用途はほぼ同じです。違いはflicksectionresetイベントがフリックの1つ目のセクションを生成した時だけ発火するのに対して、flicksectionaddイベントは2つ目以降のフリックを生成する度に発火します。

３．フリックのリセット

var filickOptionObj =  {
                          sectionManagerClassSelecter : 'ul'
                        , jqTemplateName : 'flickSectionTemplate'
                        , eventParam : {sequenceNo : 5}
                        };

//フリックセクションリセットをコールする
flickObj.flickable('resetSection', filickOptionObj);

flickableオブジェクトの resetSection メソッドをコールすることでフリックが生成されます。引数オブジェクトでは3つのプロパティを指定します。

セクションを追加する親となる要素。セレクタでも可
セクションの枠を生成するのに使用するテンプレート(jQuery.template)
flickbeforesectionreset及び、flicksectionresetイベントへ渡すパラメータオブジェクト

４．テンプレートの定義

セクションの枠の生成にjQuery.templateを利用しています。所謂テンプレートです。詳しい使い方は本家サイトを参照ください。以下は一例です。

<script id="flickSectionTemplate" type="text/x-jquery-tmpl">
    <li id=${sectionId}>
        <div id="value-${sectionId}" class="block bgcoler-${sequenceNo % 3}">
            <h4>Section ${sequenceNo} (database record sequence number)</h4>
            <p>This is the section that was added dynamically. 
               This is a feature that has been added to the original plugin.
               This is useful for displaying information of N record in conjunction with the database.
            </p>
        </div>
    </li>
</script>

メモリに保持して利用する時はセレクタを指定して名前を付けて、その名前を指定して利用します。

//例
$('#flickSectionTemplate').template('flickSection');
var flickSectionObj1 = $.tmpl('flickSection', {'sectionId' : 'sekuction-no-7', 'sequenceNo' : 7});
var flickSectionObj2 = $.tmpl('flickSection', {'sectionId' : 'sekuction-no-8', 'sequenceNo' : 8});
$('ul').append(flickSectionObj1).append(flickSectionObj2);