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

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

　YUI3（Yahoo! UI Library 3）は処理をモジュールという形で提供しています。前回は、プログラム作成にグラフィカルなユーザインタフェースを提供するウィジェット（Widgets）について説明しました。今回はモジュールに機能の追加を行うプラグイン（Plugins）について説明します。

はじめに

　今回はモジュールに機能の追加を行うプラグイン（Plugins）について説明していきたいと思います。取り上げる項目を以下の表にまとめます。

プラグインの項目

名前	モジュール名	内容
フォーカスマネージャー	node-focusmanager	キーやマウスの操作を使いやすくします
メニューナビ	node-menunav	メニュー表示を簡単な設定で可能にします
コンソールフィルター	console-filters	logメッセージを表示するコンソールを使いやすくします

対象読者

　Webアプリケーションに興味があり、Yahoo! User Interface Libraryに注目している人。HTMLとJavaScriptを使える人を対象にしています。

必要な環境

　HTMLとJavaScriptが作成できるエディターとインターネットにつながっているパソコンがあれば、例題の作成、確認ができます。

フォーカスマネージャー

　現在選択されているボタンや入力項目に対して、マウスのクリックやエンターキーを押されたときの動きを指定するモジュールです。

　ページの上部にボタンを並べて、メニューを作成する例題を考えましょう。以下の図が、実行して削除ボタンを押したところです。今回は、簡単化のために特に機能そのものは実装せず、ボタンに応じてダイアログメッセージを表示しています。

図1：例題実行画面1

　下図はフォーカスされたボタンを、右キーを押して次の位置に動かしている図です。

図2：例題実行画面2

　以下のリスト1を見てください。

［リスト1］FocusManagerの例題1（PL_FocusManager.html）

<style type="text/css">
    .yui3-toolbar {
        border: solid 1px #999;
        background-color: #dff7f5;
        height:25px;
    }
    .toolbar-button{
        width:60px;
        height:25px;
    }
</style>
<script type="text/javascript">
    YUI().use("node-focusmanager", function(Y) {    //（1）
        var toolbar = Y.Node.get("#toolbar1");      //（2）
        toolbar.plug(Y.Plugin.NodeFocusManager, {   //（3）
            descendants: "input",
            keys: { next: "down:39",
                previous: "down:37" },
            circular: true
             });
        toolbar.delegate("click", function (event) {    //（4）
            alert(this.query("input").get("value"));
        },".toolbar-button");
    });
</script>
</head>
<body>
 <div id="toolbar1" class="yui3-toolbar">
    <span class="toolbar-button"><input type="button" value="ファイル"></span>
    <span class="toolbar-button"><input type="button" value="編集"></span>
    <span class="toolbar-button"><input type="button" value="印刷"></span>
    <span class="toolbar-button"><input type="button" value="削除"></span>
    <span class="toolbar-button"><input type="button" value="開く"></span>
    <span class="toolbar-button"><input type="button" value="保存"></span>
</div>
</body>

　（1）でモジュールnode-focusmanagerを指定します。（2）で表示ノードを指定します。（3）はプラグインの設定と動作の設定です。以下構文で示します。

［構文］.plug関数

Y.Node.get(node).plug(plugin,{op})
    plugin：Y.Plugin.NodeFocusManager フォーカスマネージャー
        Y.Plugin.NodeMenuNav メニューナビ
        Y.Plugin.ConsoleFilters コンソールフィルター
    op:それぞれのプラグインのオプション設定

　例題ではY.Plugin.NodeFocusManagerを使用しています。2番目の引数の内容を表に示します。

Y.Plugin.NodeFocusManagerの設定項目

オプション	概要
descendants	構成属性、CSSセレクタの設定
keys	キーの設定
	値	概要
	next	次へのキー
	previous	前へのキー
circular	ツールバー内を設定キーで端に来ると折り返す（true/false）

　オプションのkeysプロパティ内のnext／previousへの設定は、以下のイベントとキー値との組み合わせで行います。

keysプロパティのnext／previousの設定（イベント）

値	概要
down	キーダウンの時
up	キーアップの時
keypress	キープレスの時

keysプロパティのnext／previousの設定（キー値）

値	概要
40	下矢印キー
39	右矢印キー
38	上矢印キー
37	左矢印キー

　例えば右矢印キーを押したときの処理を関連付けたい場合は、「down:39」と書きます。結果、（3）では次へのキーは右矢印キー、前へのキーは左矢印キーが、それぞれ関連づいており、端まで行ったらまた開始位置へ戻るようにするということを意味しています。

　（4）はイベントを設定しています。今回"click"を指定しています。構文はY.Node.get(node).delegate(イベント,ハンドラ,対象ノード)となります。"click"の指定で、マウスクリックとエンターキーでイベントは発生し、ハンドラにかかれている内容が実行されます。