Proto.Menuを使って、右クリックメニューをカスタマイズする

　Proto.Menuは右クリックメニューを自分で好きなようにカスタマイズできるJSライブラリです。 実際にはコンテキストメニュー自体を編集するわけではなく、右クリック時のデフォルト・イベントを停止して、 代わりにHTML要素で作成したメニューを見かけ上、コンテキストメニューのように表示しているだけです。 しかし、手軽に右クリックメニューを自分仕様にできるため、扱い方によってはサイトのユーザビリティ改善に 役立つと思います。WIZ-CODE.blogにあるBGMプレーヤーもProto.Menuを使用しています。 ただし、Operaなど一部のブラウザではまったく対応していないか、バージョンによって対応していないものもあるので、 あくまで補助的な用途に使うのがよさそうです。
　また、Proto.Menuは毎度ながらPrototypeに依存しているため、使用する場合はPrototypeを読み込む必要があるます。IE8対策 の最新版をダウンロードしてください。

Prototypeはここから、
ProtoMenuはこのページからダウンロードできます。
 
　ProtoMenuに関しては、JavaScriptファイル とCSSファイルがそれぞれ必要になります。

準備すること

　PrototypeとProto.Menu、Proto.MenuのCSSファイルをアップロードし、 HTMLのheadタグ内に二つのJSファイルと、proto.menuのCSSファイルを記述します。

  <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/proto.menu.js"></script>   <link type="text/css" rel="stylesheet" href="css/proto.menu.css" />  

メニュー内容を編集する

メニュー項目をJSON形式でまとめる

　メニューの内容はJavaScriptで以下のように記述します。

  var myMenuItems = [ { name: 'Edit', className: 'edit', callback: function() { alert('Forward function called'); } },{ name: 'Copy', className: 'copy', callback: function() { alert('Copy function called'); } },{ name: 'Delete', disabled: true, className: 'delete' },{ separator: true },{ name: 'Save', className: 'save', callback: function() { alert('Saving...'); } } //注：最後の{}の後に","はつけないでください。コンマをつけてしまうとIEで正常に動作しない恐れがあります。 ];  

　このようにmyMenuItemsという配列（配列名は任意）に、中カッコ{}でくくられたオブジェクトに各メニューを追加していきます。 まずメニューの表示名、たとえば「編集」、「コピー」などを"name"プロパティに設定します。個別にCSSを適用したい場合は "className"プロパティにクラス名を入れます。ただ、メニュー全体のデザインは別途設定するので、これを利用するのは、 メニュー名の左側に小さいアイコンをつけたいときなどです。"disabled"プロパティをtrueにすると、そのメニュー名の フォント色がグレーに変わり、クリックしても反応しなくなります。メニューの見出しに使うのがいいでしょう。"separator" プロパティをtrueにすると、メニューリストを区切る線が入ります。なお、同メニューのオブジェクトには"separator"以外のプロパティは 追加しません。"callback"プロパティは、このメニューがクリックされた際に呼び出す関数を記述します。

Proto.Menuを初期化する

　Proto.Menuを機能させるには、new演算子でProto.Menuクラスを呼び出します。このスクリプトは画面のロード終了後に 呼び出す必要があります。

  <script type="text/javascript"> //<![CDATA[ new Proto.Menu({ selector: '#contextArea', // メニュー用に作成した要素のセレクタを指定 className: 'menu desktop', // メニューデザインを選択 menuItems: myMenuItems // メニューデータを格納した配列 }); //]]> </script>  

　"selector"には文字通りCSSのセレクタを指定します。たとえば"my_menu"というID名の要素をクリックした際、 メニューを表示させたいなら、"#my_menu"とします。"wiz_menu"というクラス名の要素すべてに適用したいならば、 ".wiz_menu"とし、その他、すべてPタグ要素に適用するなら"p"、ページ全体に適用したいなら"body"などとします。 次に"className"ですが、ここでメニュー全体のデザインを決めます。デフォルトでは三タイプのデザインが用意してあり、 それぞれdesktop,firefox,googleのなかから選ぶことができます。もちろん自分自身でデザインすることも可能です。 これらのデザインに加えて、共通デザインとなる"menu"を追加して記述してください。"menuItems"プロパティには先ほど 編集した配列を入れます。
　必須となるのは上記の三項目ですが、その他にいくつか設定できるプロパティがあります。"fade"プロパティをtrueにすると、 メニューが表示される際にフェード効果がかかります。デフォルトではfalseです。ただし、エフェクトにscript.aculo.usを利用しているため、effects.jsが インクルードされていなければなりません。また、z-indexは初期設定で100となっていますが、"zIndex"プロパティで変更可能です。 また、コールバック関数として"beforeShow"、"beforeHide"、"beforeSelect"の設定ができます。"beforeShow"は右クリック された直後に、"beforeHide"はメニューが隠れた直後に呼び出されます。これらは第一引数にメニューリスト要素のイベント・オブジェクト が渡されます。一方、"beforeSelect"は各メニュー項目がクリックされたときに呼び出されます。第一引数はクリックされた各メニュー要素 のイベント・オブジェクトです。"beforeSelect"コールバックは前述のBGMプレイヤーで使われており、後ほど使用例を解説します。

メニューリスト用のタグを配置

　メニューリスト用の要素を忘れていましたね。HTML上の任意の場所に、"selector" プロパティに指定したセレクタ（要素名やID属性、クラス名など）の要素を配置します。この要素を右クリックしたときに メニュー表示されます。

  <div id="my_menu"></div>  

"beforeSelect"コールバックの使い道

　リストの数だけ異なるコールバック関数をわざわざ書くのは面倒です。もしそれぞれのメニューのコールバックが、同じような処理をする内容 ならば、"beforeSelect"コールバックを使って簡略化することができます。

  var myMenuItems = [ { name: 'メニュー１', callback: function() { alert('メニュー１を押しました！'); } },{ name: 'メニュー２', callback: function() { alert('メニュー２を押しました！'); } },{ name: 'メニュー３', callback: function() { alert('メニュー３を押しました！'); } } ];  

　上記のメニューには、クリックするとそのメニュー名をアラートするコールバックが設定されています。しかし、コールバックのコードはそれぞれ 微妙に違います。リスト数がこのくらいならいいですが、もっと多くのリストを扱うならば編集や修正が面倒になります。 そこで、先ほどの"beforeSelect"コールバックを使って、クリックした要素のメニュー名を取得するスクリプトを書いてみます。

  var selectedName; //グローバル名前空間に変数を用意しておく。 ......... new Proto.Menu({ ......... ......... beforeSelect: function(e) { selectedName = e.element().firstChild.nodeValue; //element()はイベント・オブジェクトから要素を取得するPrototypeのメソッド //要素のテキストノードからメニュー名を取得し、selectedNameに代入する。 } });  

  var myMenuItems = [ { name: 'メニュー１', callback: function() { alert(selectedName + 'を押しました！'); } },{ name: 'メニュー２', callback: function() { alert(selectedName + 'を押しました！'); } },{ name: 'メニュー３', callback: function() { alert(selectedName + 'を押しました！'); } } ];  

　メニュー名は変数selectedNameに格納されるので、各メニューのコールバックを統一できました。

メニューデザインのカスタマイズ

　メニューのデザインをカスタマイズしたい場合、proto.menu.cssを開きます。デフォルトのままでも十分ではありますが、 設定を修正したほうがいい箇所がいくつかあります。

  ......... ......... div.menu { position: absolute; top: 0; left: 0; font-family: verdana; } ......... .........  

　フォントファミリーはデフォルトでverdanaのみになっています。メニュー名が英数字のみなら十分ですが日本語にするなら、 日本語フォントを追加しておくほうが親切です。下の例はフォントを「メイリオ」優先にしています。

  ......... ......... div.menu { ......... ......... font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, arial, sans-serif; } ......... .........  

　また、フォントサイズはデフォルトで11pxと、やや小さめになっているので、変更する場合は次の個所を修正します。

  ......... ......... div.menu a { display: block; text-decoration: none; cursor: default; outline: none; font-size: 11px; /* この部分を変更すると全体に反映される。 */ } ......... .........  

　メニュー要素の幅の変更は各デザインのCSSを修正する必要があります。ここでは、"desktop"デザインを使って変更箇所を見ていきます。 設定するセレクタは大きく分けて6つあり、これはfirefoxやgoogleデザインでも変わりません。オリジナルデザインを作るときは、これらの スタイルをコピペして使うといいでしょう。

  ......... ......... .menu.desktop { width: 14em; /* ここでメニューの横幅を設定します。初期設定は14emになっています。 */ background: #f9f8f7; /* メニューの背景色を設定します。 */ border: 1px solid #999; padding: 0; } .menu.desktop ul, .menu.desktop li { margin: 0; padding: 0; } .menu.desktop li.separator { height: 1px; } .menu.desktop a { //font-size、font-weightなど、文字フォントを個別に変えたいときはこのセレクタ内に記述・追加します。 color: #555; /* メニューのリンク色です。 */ padding: 3px 0 3px 25px; margin: 0; border: 1px solid #f9f8f7; } .menu.desktop a.disabled { /* メニューを"disabled"にしたときの設定です。デフォルトでは文字色を半透明にしています。 */ opacity: 0.25; filter: alpha(opacity=25); zoom: 1; } .menu.desktop li.separator { /* もし区切り線のスタイルを変えたいなら、ここを変更します。 */ border-bottom: 1px solid #fff; background: #aaa; margin: 1px 1px 0 1px; line-height: 1px !important; } ......... .........  

よく見ると"desktop"デザインではマウスオーバー時の設定がないですね。マウスを合わせた際の背景色を設定する場合は、次のコードを追加します。

  ......... ......... .menu.desktop a:hover { background: #D3E3FE; /* ここに好きな背景色を入れます。 */ } ......... .........  

オリジナル・メニューのサンプル

サンプルとしてオリジナル・メニューを作ってみたので、参考にしてください。

  /* MY STYLES */ .menu.mystyle { width: 250px; /* 横幅をpx単位に変更 */ background: #FFE4E1; /* 背景をピンク系に */ border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #777; border-bottom: 1px solid #777; padding: 2px 0; } .menu.mystyle a { color: #4169E1; /* リンクの色を青系に */ font-weight: bold; /* 太文字に変更 */ padding: 4px 15px; margin: 0 2px; } .menu.mystyle a:hover { background: #FFC0CB; /* マウスオーバー時の背景色をピンクに */ color: #3333FF; /* マウスオーバー時のフォント色は黒系に */ } .menu.mystyle a.disabled { color: #777; /* disabledの文字色はもう少し濃い目に */ } .menu.mystyle a.disabled:hover { background: #FFE4E1; /* メニューの背景色を変更したら、ここの背景色も同じ色に合わせます */ color: #777; /* マウスオーバー時のdisabled文字色を合わせるのも忘れずに */ } .menu.mystyle .separator { border-bottom: 1px solid #eee; background: #777; margin: 2px 4px; } ......... .........  

  var myMenuItems4 = [ { name: 'メニューリスト', disabled: true }, { separator: true }, { name: 'トップページへ', callback: function() { //リンクさせたいときは単純にlocation.hrefで飛ばす。 window.location.href = 'http://wiz-code.digick.jp/'; } }, { name: 'ここへマウスを置いてください' //beforeShowコールバックのコードを参照のこと。 }, { name: '右クリックメニューを解除', callback: function() { //メニュー機能を解除させたいときは、右クリック要素のイベントを停止するだけでいい。 $('mymenu7').stopObserving(); } } ]; ......... .........  

  var subMenuItems = [ //サブメニューを設定し、subMenuItemsに代入する { name: 'WIZARD-CODEブログへ', href: 'http://wiz-code.digick.jp/blog/', title: 'ブログへ飛びます' }, { name: 'リンクページへ', href: 'http://wiz-code.digick.jp/link.html', title: 'リンクページへ飛びます' } ]; var menuObj; //コード内部でProto.Menuのインスタンスを参照するので、グローバル変数を作っておく。 ......... menuObj = new Proto.Menu({ selector: '#mymenu7', className: 'menu mystyle', menuItems: myMenuItems4, beforeShow: function() { //上から「4番目」のメニューにマウスを合わせると、さらにサブメニューが表示されるようにする。 //サブメニューのコンテナを作成 var listDiv = new Element('DIV').addClassName('menu mystyle') .setStyle('top:70px;left:240px;'); //サブメニューの表示先を調整 var list = new Element('UL'); subMenuItems.each(function(elm) { list.insert(new Element('LI').insert(new Element('A', { href: elm.href || '#', title: elm.title || '' }).update(elm.name) ) ); }); //down()はPrototypeのメソッド。メニューリストの子要素のなかから、 //LI要素で上から4番目（インデックスは0から始まる）の要素を取得する var childList = menuObj.container.down('LI', 3); childList.insert(listDiv.insert(list).hide()); //マウスオーバーでサブメニュー表示、マウスアウトで隠す。 childList.observe('mouseover', function() { listDiv.show(); }); childList.observe('mouseout', function() { listDiv.hide(); }); } }); ......... .........