Yahoo! UI Library 3（YUI3）プラグイン

Yahoo! UI Library Ver.3 を使ってみよう（8）

コンソールフィルター

　ログコンソールに表示すべき情報を絞り込むためのフィルタを追加します。チェックボックスのチェックを外すと、コンソールの該当するデータは非表示になります。

　ログコンソールについては、モジュールConsoleの解説も併せて参照してください。ログコンソールにコンソールフィルターを追加した例題の実行画面を以下に示します。

図5：例題実行画面

　図中のCategoriesには表示の分類（主にログレベル）を、Sourcesには表示のグループ名を表します。前回説明したコンソールの例題にフィルターを追加したものです（リスト5）。

［リスト5］コンソールフィルターの例題（DT_console.html）

YUI().use('console-filters', function(Y) {  //（1）

    basic = new Y.Console({    style: 'separate' });
    basic.plug(Y.Plugin.ConsoleFilters,{    //（2）
        defaultVisibility: true,
        category: {
            info: true,
            warn: true,
            test:true,      //（3）
            error:true
        },
        source: {
        global:true,
        sourceA:true        //（4）
        }
    });
    basic.render();


    Y.one('#info').on("click",  function(e) {
        Y.log(Y.one('#infoT').get('value'),'info','sourceA');    //（5）
    });
    Y.one('#warn').on("click",  function(e) {
        Y.log(Y.one('#warnT').get('value'),'warn');
    });
    Y.one('#error').on("click",  function(e) {
        Y.log(Y.one('#errorT').get('value'),'error');
    });
    Y.one('#test').on("click",  function(e) {
        Y.log(Y.one('#testT').get('value'),'test','sourceA');
    });
 
});

　（1）でモジュールconsole-filtersを指定します。.plug()には、Y.Plugin.ConsoleFiltersを指定します。表示枠にはcategoryとsourceがあります。categoryには、情報表示（info）／警告表示（warn）／エラー表示（error）など指定します（決められた文字ではありません）。（3）のように独自にtestなどを作成しても良いです。sourceには、イベント（event）／ソースA（sourceA）など独自にグループ分けの設定ができます。どのグループにも属さないもの（指定のないもの）はglobalになります。

　以下に2番目の引数の内容を表に示します。

Y.Plugin.ConsoleFiltersの設定項目

オプション	概要
defaultVisibility	ログデータを表示するか（true/false)
category	categoryの表示設定（表示内容を分かりやすい文字で指定します）
source	sourceの表示設定（指定がないものは、globalになります）

　上記のCategryやSourceの指定は、（5）のように、Y.log(表示データ,Categoryデータ,Sourceデータ)で指定します。

まとめ

　プラグインモジュールについて説明しました。YUI3は、バージョンアップごとに使いやすいものになっていくと思います。どんな形で成長していくか楽しみです。見守っていきたいと思います。

　本連載では、YUI3の基本から始まって、コアモジュールの説明、ユーティリティのモジュールの説明と進んできました。連載は今回で完結ですが、ここまでに紹介してきた内容をサイト作成に役立てていただけたら幸いです。