スキン（skin30-2L++）改良 IE11対応‥したい【出来てないよ】

http://www8.plala.or.jp/uro/live2ch/help/skin.html
を読み解いて、表題のIE11対応をしたい。OSはWin7。

基本構成は次の９つ。

【必須】Header.htm
【必須】Res.htm
【必須】NewRes.htm
Footer.htm
Bookmark.htm
picpopup.htm
［skin30-2L++に存在せず］youtubepopup.htm
【必須】setting.skn
preview.bmp

これらのうち、youtubepopup.htmは存在しないし、最後のbmpファイルはプレビュー画像なので、当面考えなくてもいいだろう。

まず、『HTMLで記述しない範囲の設定をする』setting.skn から見てみる。…情報設定などで動作に特に関係なし。

『新しいレスがついたときに挿入され』るFooter.htm はボタン定義の２行記述で、この部分の動作に特に不満は無い。

『俺様用しおり』のBookmark.htm は例のここまで読んだ１行記述で、どうしようもない。

‥‥‥ということで、まぁ、名前からも想像できるように、

『レスを表示するときは、まずこれが入』る Header.htm と、
『既得のログを表示する時』のテンプレート Res.htm と、
『既得（新規？）のログを表示する時』のテンプレート NewRes.htm それから、
『画像ポップアップを表示する時』のテンプレート picpopup.htm

を各々順に見ていくことにする。

Header.htm

置換ワード

&THREADURL→表示するスレッドのURL⇒ThreadURL
&SKINPATH→使用中のスキンのパス⇒SkinPath

↑のようにmeta nameを定義している。のちに各々、変数 threadURL、skinPath に入力されている。
変数 scriptTags が生成されている。
2つのスタイルシート「style_base.css」と「style_blue.css」を読み込んでいる。
大量のjavascriptを定義している。

colorTable.js
gesture.js
expandURL.js
matchURL.js
godwords.js
findwords.js
styles.js
tripCheck.js
URLlist.js
script\module_header.js
script\module_search.js
script\module_search2.js
script\module_image.js
script\module_popup.js
script\module_event.js
script\module_gesture.js
script\module_footer.js

変数 templateHTML へ“テンプレ”と表示されるタグが入力されており、この表示位置の調整が、今回のIE11対策へ向かわせた大きなモチベーションとなった。
このHTML文書では、ヘッダの閉じタグとボディーの開始タグまで記述されており、スキンを切り替えるコントロールパネルが[id='controlPanel']で定義されている。これの表示位置の調整も今回行なっている。
その直前（ボディー開始タグ直後）に、[id="infoText"]の空divタグ一組が配されており、ここに何が流し込まれるかは、今のところ不明。
その後、[id="resPanel"]の“dl”開始タグが書かれているところで、このファイルが終了している。dlタグとはdtタグとddタグとを組み合わせて、定義の記述をするもののようで、このファイルだけでは記述が不完全なので、他のファイルとどういう連携をしているのかを理解するのが、今後の醍醐味である。

style\style_base.css

既に今回の改良前に（XP⇒7の時にやったのか記憶が定かではない）次の変更を自分でしていた。

/* レス表示欄 */
/* #resPanel{background-color:transparent; position:absolute; width:100%;} */
#resPanel{background-color:transparent; position:absolute; width:100%; margin-left:0px}

（「/*」と「*/」で囲まれた部分が書き換える前の元々の記述です。以下同じ。）

早速、今回の改良をしようとするきっかけになった部分（テンプレ表示（ついでに次スレ候補も））に出くわす。（『テンプレ』というキーワード検索で見つかってのですが‥）

/* テンプレ表示 */
#templatePanel{
 position:absolute;
 bottom:30px;  right:150px;
/* top:expression(body.scrollTop+body.clientHeight-45); */
/* right:expression(body.clientWidth-resPanel.clientWidth+3); */
 filter:Alpha(opacity=80); color:#200010; background:#A0C0B0; z-index:1;
 visibility:hidden;
}
/* 次スレ候補表示 */
#newThread{
 position:absolute;
 bottom:0px;  right:150px;
/* top:expression(body.scrollTop+body.clientHeight-this.offsetHeight-3); */
/* right:expression(body.clientWidth-resPanel.clientWidth+3); */
 filter:Alpha(opacity=80); color:#200010; background:#A0C0B0; z-index:1;
}

ここで特徴的なのは、“expression()”という関数（？）が使われていること。
いろいろ値を振ってみてみると、この括弧の中（javascript？）の評価値がゼロになってしまっていると解釈すれば理解のできる挙動となっている。
これは、Win7IE10までは正常に動いていたから、IE11からの症状である。
しかしながら、この『expression』を調べると、これは、IE5とIE6とIE7だけの拡張機能であるものの、IE8（の標準モード）からサポートされなくなったものであるとのこと。
それがなぜIE11になって問題が表面化したのかは分かりません。IE10までその機能は実は削除されてはおらず稼動していたと言うことなのでしょうか。
【参考】
http://www.inter-office.co.jp/contents/187/
http://useyan.x0.com/s/html/expression/
http://www.atmarkit.co.jp/ait/articles/0812/02/news133_3.html
http://www.atmarkit.co.jp/ait/articles/0906/04/news111.html

この部分の修正は、テンプレ表示（及び次スレ候補表示）が駆動された時に現れるリンクタグの出現位置を修正するもので、同時に、駆動開始マウス位置の指定をこれに合わせて微調整してやる必要があるかも知れません。そのためには、対応するスクリプトをいじります。
script\module_event.js 中 templateDisp() 関数定義

var templatePanelObj=false;
function templateDisp(){
	var territoryW=resPanel.clientWidth-200;var territoryH=document.body.clientHeight-50;
//	var territoryW=resPanel.clientWidth-65;var territoryH=document.body.clientHeight-50;
	if(!event.shiftKey && event.y>territoryH && event.x>territoryW){
		if(!templatePanelObj){document.body.insertAdjacentHTML("afterBegin","<div id='templatePanel'>"+templateHTML+"</div>")}
		templatePanelObj=true;templatePanel.style.visibility="visible";
	}else{if(templatePanelObj){templatePanelObj=false;templatePanel.removeNode(true)}}
}

（//でコメントアウトされている行が書き換える前の元々の記述です。以下同じ。）

なお、この修正では、画像サムネイルが生成されている場面でしか正しく動作しません。これがexpression関数で常時モード監視していない弊害だと思われます。

同様に、画像サムネイルパネルとスキンのモード選択などをするコントロールパネルが重なってしまう修正も次のように行ないました。
スタイルファイル：style\style_base.css

/* コントロールパネル */
#controlPanel{
 position:absolute; font-size:8pt;
 top:3px; right:153px; width:116px;
/* top:expression(body.scrollTop+3); right:3px; width:116px; */
 padding:2px; text-align:center; visibility:hidden;
 background-color:#A0C0B0; filter:Alpha(opacity=80); z-index:2;
}

java スクリプト： script\module_event.js

function menuOver(){
	var cP=document.getElementById("controlPanel");
	var territoryW=document.body.clientWidth-(cP.scrollWidth+4)-200;var territoryH=(cP.scrollHeight+4);
//	var territoryW=document.body.clientWidth-(cP.scrollWidth+4);var territoryH=(cP.scrollHeight+4);
	if(!event.shiftKey && event.y<territoryH && event.x>territoryW){cP.style.visibility="visible"}else{cP.style.visibility="hidden"}
}

※なお、この手法では、画像サムネイルをクリックした時に現れる画像ポップアップのウィンドウが縦方向にゼロサイズの直線状になってしまい、画像が見られない、不具合を修正することはできませんでした。もっと深いところまで潜って行かなくてはならなさそうです。｛つづく｝