2007-10-07

近所の公園で、数日前からテント張りをやっていたのでこの連休中にイベントがあるのだろうかなと思っていたら案の定。
去年もやっていた物産展が開かれていました。

前回見たときにたいしたことがなかったので冷やかしに行く気も起きず、部屋の中で相変わらず動画を見たりUbuntuを弄ったりというようなことをしていたのですが、イベント中の音がうるさくて何をするにも集中できないという状態。
盆踊りの時みたいな音楽を大音量で垂れ流してくれるモノだから、ちょっとしんみり系のドラマなどを見ていても気がそがれる感じで何ともかんとも。
今になってようやく静かになりましたが、こういったイベントが開かれる公園の近所にいるっていうのも善し悪しですね・・・

やろうやろうと思っていながら他のことを優先しちゃっていたので、今日ようやく弄ってみましたよ。
javaScriptやCSSによる動作やデザインはどうなのかが焦点でしたが、結果からいえば何も問題なし。
通常のIEPanel同様なカスタマイズが可能なようでした。

IEDockEX.fxのクローンでExtMenuDock.fxというモノを作り、ExtMenuDock専用のフォルダを指定の場所に作成してCSSフォルダやimagesフォルダを追加。config.iniとindex.htmlを専用に作ってExtMenuDock.fxをDockに登録という流れでとりあえず一発目から成功しちゃいました。

タブの上にはサジタリウス、ビューの右側にExtMenuDockを表示させています。

アクションをいっぱい登録すると表示領域が足りなくなってきますので、javaScriptによるサブメニューのトグル表示をさせています。
今回は試験的に登録したアクションですので今のところメニューが三個しかありませんが、あとでExtendedMenuの内容をすべてこちらに移してしまおうかと考えています。
サブメニューも画像にすればかっこいいのでしょうが、視認性の問題や表示領域をあまり横に広げたくなかったということもありテキストのままでいってみました・・・（笑）

マウスオーバーで選択中のメニューの色が変わり、クリックするとトグル表示します。
初期状態で好きなメニューを表示させておくことも出来ます。

メニューにカーソルが載ると色が変わるので選択されたことがわかります	クリックでサブメニューを表示

今までは右ダブルクリックに割り当てていましたが、いまいち使い勝手が悪かったのでこのDockに登録して使った方が良い感じがしますね。
ちなみにマウスジェスチャに表示・非表示のトグルアクション（ShowExtMenuDock）を登録してあるので、じゃまなときには簡単に見えなくすることも出来ます。

あくまで試験的に設置してみただけですしCSSや画像は好みもあるでしょうから、ここではindex.htmlのソースだけ載せておきますので試されたい方は参考にしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>ExtMenuDock</title>

<link rel="stylesheet" href="css/Style_1.css" type="text/css" media="all" />

<!-- Toggle_Container -->
<script language="Javascript">	
function show_hide(id, show)
	{
	if (el = document.getElementById(id))
		{
		if (null==show) show = el.style.display=='none';
		el.style.display = (show ? '' : 'none');
		}
	}
</script>

</head>
<body>


<div class="dropdown">
<a href="javascript:show_hide('container');"><img src="images/normal.png" border="0" onmouseover="this.src='images/normal_on.png'" onmouseout="this.src='images/normal.png'"></a>

<!-- 初期状態でサブメニューを表示させておきたいときはstyle指定をしない -->

<div id="container" style="display:none;">
<hr />
<a href="action:Refresh">最新の状態に更新</a>
<hr />
<a href="action:ViewSource">ソースの表示</a>
<hr />
<a href="action:ViewSelectedSource">選択部分のソースを表示</a>
<hr />
</div>

<a href="javascript:show_hide('container2');"><img src="images/selected.png" border="0" onmouseover="this.src='images/selected_on.png'" onmouseout="this.src='images/selected.png'"></a>

<div id="container2" style="display:none;">
<hr />
<a href="action:CopySelectedLinks">リンクをコピー</a>
<hr />
<a href="action:OpenSelectedLinks">リンクを開く</a>
<hr />
<a href="action:OpenSelectedText">キーワードを URI として開く</a>
<hr />
<a href="action:SearchSelectedText">キーワードの検索</a>
<hr />

</div>

<a href="javascript:show_hide('container3');"><img src="images/dialog.png" border="0" onmouseover="this.src='images/dialog_on.png'" onmouseout="this.src='images/dialog.png'"></a>

<div id="container3" style="display:none;">
<hr />
<a href="action:PluginManager">プラグインマネージャ</a>
<hr />
<a href="action:SkinManager">スキンマネージャ</a>
<hr />
<a href="action:StyleManager">スタイルマネージャ</a>
<hr />
<a href="action:SetupUriAction">UIRアクションマネージャ</a>
<hr />
<a href="action:LinkExtraction">リンクを抽出</a>
<hr />
<a href="action:SelectedLinkExtraction">選択部分のリンクを抽出</a>
<hr />
</div>
</div>

</body>
</html>

動的なDockのリフレッシュも可能なことがわかったので、いろんなことが出来ちゃいそうですね〜
javaScriptだけではなくFlashでActionScriptを使用するとかいろんな応用が出来そうでオモシロイです。

なげやりろぐ

ﾌﾃｲｷｺｳｼﾝ

DarkSky氏のブラウザープラグイン

外は賑やか・・・

IEDockEXを弄ってみました

メニューにカーソルが載ると色が変わるので
選択されたことがわかります

クリックでサブメニューを表示

メニューにカーソルが載ると色が変わるので選択されたことがわかります

クリックでサブメニューを表示

メニューにカーソルが載ると色が変わるので
選択されたことがわかります