読者です 読者をやめる 読者になる 読者になる

Webブラウザでフリック体験

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


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

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

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

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

jQuery.flickable の紹介

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

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

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

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

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

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

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

1.コンストラクタ

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

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

2.イベントハンドラ

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

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

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

3.フリックのリセット

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

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

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

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

4.テンプレートの定義

セクションの枠の生成に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);

5.デモ

結果どうなるかというと、画像だと分かりにくいですがこうなります。

フリックの初期状態画像です
最初は4ページから6ページまでのセクションがあります。スクロールバーのサイズで判断してください。ちなみに、この3つのセクションも動的に生成したものです。
左へフリックしている瞬間の画像
左にフリックしてみます。すると、、、
3ページ目にフリックした画像
3ページ目が生成されています。スクロールバーの位置とサイズに注目。
3ページ目が生成されていることを確認している画像
3ページ目です。あ、2ページ目が生成されちゃいました(^^;)

お手元で実際に動かしたい方はここからdownloadしてみてください。

最後に

コードを見てお気づきの方もいらっしゃると思いますが、課題がたくさんあります。

・追加したセクションを個別に削除する機能がない

・際限なくセクションを追加していった場合のガベージコレクション的な機能がない

・不要と思われる変数、ハードコーディング、隠ぺいすべき処理など、リファクタリングが不十分

・flickableのコンストラクタの時点で動的セクションにならない

などなど、挙げると切りが無いです。これら課題については今後対応していきますが、使ってみようと考えている方はどうぞいくらでも改善して下さい。こんな不具合があった。こんな改善をした。などありましたらぜひご連絡ください。

それでは、ここまでお付き合い頂きありがとうございました。


明日は「数独の高速化」をお送りします。お楽しみに。