勉強会やイベント用にブラウザのレイアウト変更を試みる (Kanasansoft Web Lab.)

Kanasan.JSではプロジェクタにUstreamやLingrを表示している。
この時に困るのは、気になったcodeがあっても試しに実行するのをためらってしまう事だ。
もし実行するには、他のタブを開くかFirebugやJashを使うことになる。
しかし、新しいタブだとLingrが隠れてしまうし、FirebugやJashだとglobal環境を汚染してしまう。
新規ウィンドウでの対応や、globalを汚染しない記述する対応も考えられるが意外と面倒である。
自分が使うマシンとプロジェクタ用のマシンをわけられれば一番良いが、結局code実行の環境は必要だと思う。
致し方ないと諦めていたが、「分割ブラウザ」というアドオンを見つけた。
もしかすると、これまでの不満点を補ってくれる可能性があると感じたので試用してみた。
尚、ここでは「分割ブラウザ」の詳細な使い方は説明しない。
以下、もともとの表示領域をメイン領域、分割ブラウザを使って表示している部分をサブ領域と呼ぶ事にする。

「分割ブラウザ」で表示領域を分割

まず、「分割ブラウザ」を使って、サブ領域にLingrとUstreamを表示してみた。

サブ領域にLingrとUstreamを表示

画面は前回のKanasan.JSのもの

一応表示されて入るが、Ustreamは調整が面倒だし、Lingrに至っては表示領域が小さい為にレイアウトが崩れてしまっている。
それぞれの対応策がないか調査してみた。

Ustreamの表示を綺麗にする

これは意外と簡単で、配信動画の下部にある「Open in popup window」リンクを使う。
リンクをクリックすると別ウィンドウで開いてしまうので、右クリック等でurlをコピーする。

「Open in popup window」リンク

クリックせずにurlをコピー

そのurlをサブ領域のアドレスバーにペーストし直接開くと、Flashが全画面で表示される。
サブ領域の表示サイズを変更すると動的にリサイズされるため、かなり融通が利く。

Lingrのレイアウトをなんとかする

レイアウトの変更はJavaScriptで行う。

Lingrのmessageを全画面で表示するJavaScript

(function(){
	var
	 gEBI				=	function(eid){
		return document.getElementById(eid);
	}
	,map				=	function(fnc,ary){
		for(var i=0;i<ary.length;i++){
			fnc(ary[i]);
		}
	}
	,displayNone		=	function(eid){
		gEBI(eid).style.display	=	"none";
	}
	,displayMax			=	function(eid){
		gEBI(eid).style.width	=	"100%";
		gEBI(eid).style.height	=	"100%";
		gEBI(eid).style.margin	=	"0px";
		gEBI(eid).style.padding	=	"0px";
	}
	;
	map(	displayNone					,
			[	"globalHeader"		,
				"columnB"			,
				"chatFooterWrapper"	,
				"chatFooter"		]	);
	map(	displayMax					,
			[	"enter"				,
				"everything"		,
				"ieWrapper"			,
				"columnA"			,
				"messages"			]	);
}
)();

Bookmarkletはメイン領域で実行されるし、Greasemonkeyでは常に実行されてしまうため、one liner化したJavaScriptを準備。

Lingrのmessageを全画面で表示するJavaScript(one liner)

javascript:(function(){var gEBI=function(eid){return document.getElementById(eid);},map=function(fnc,ary){for(var i=0;i<ary.length;i++){fnc(ary[i]);}},displayNone=function(eid){gEBI(eid).style.display="none";},displayMax=function(eid){gEBI(eid).style.width="100%";gEBI(eid).style.height="100%";gEBI(eid).style.margin="0px";gEBI(eid).style.padding="0px";};map(displayNone,["globalHeader","columnB","chatFooterWrapper","chatFooter"]);map(displayMax,["enter","everything","ieWrapper","columnA","messages"]);})();

javascript:(function(){var gEBI=function(eid){return document.getElementById(eid);},map=function(fnc,ary){for(var i=0;i<ary.length;i++){fnc(ary[i]);}},displayNone=function(eid){gEBI(eid).style.display="none";},displayMax=function(eid){gEBI(eid).style.width="100%";gEBI(eid).style.height="100%";gEBI(eid).style.margin="0px";gEBI(eid).style.padding="0px";};map(displayNone,["globalHeader","columnB","chatFooterWrapper","chatFooter"]);map(displayMax,["enter","everything","ieWrapper","columnA","messages"]);})();

「javascript:」追加済

このJavaScriptをサブ領域のアドレスバーにペーストし実行する。

結果

ここまでの作業を行った結果が以下。

作業完了時の画面

これで、参加者に見られている事を気にしなければメイン領域で好き勝手できる。
なお、スクリーンショットには録画済のUstreamを表示しているが、Liveでも同じ事が可能だった。

分割ブラウザ :: Firefox Add-ons

2008/03/02追記

特定のUrlParameterが渡された時だけ、Greasemonkeyのuser.scriptを実行するようにすればいい事に気がついた。

2008/03/13追記

Lingr用のUser Scriptを作成しました。

Lingrのメッセージ一覧をフルスクリーン表示するグリモン (Kanasansoft Web Lab.)

Kanasansoft Web Lab.