SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

Yahoo! UI Library 3(YUI3)プラグイン

Yahoo! UI Library Ver.3 を使ってみよう(8)


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

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

対象読者

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

必要な環境

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

フォーカスマネージャー

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

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

図1:例題実行画面1
図1:例題実行画面1

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

図2:例題実行画面2
図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"の指定で、マウスクリックとエンターキーでイベントは発生し、ハンドラにかかれている内容が実行されます。

次のページ
メニューナビ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Yahoo! UI Library Ver.3 を使ってみよう連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 横塚 利津子(ヨコツカ リツコ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5377 2010/08/30 16:38

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング