IE6 以外では、`position: fixed;`がサポートされているのでどうってことはないが、IE6は`position: fixed;`が使えないので、ごにょごにょしてなんとかしないといけない。



* <a href="http://phpspot.org/blog/archives/2006/09/css_9.html">CSSだけでフレームを作るテクニック</a>
* <a href="http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/">CSS Frames v2, full-height</a>

ネットを彷徨った結果、標準モードでIE6で疑似フレーム（`position: fixed;`もどき）を作るのに参考になったのが上記のサイト。

コンディショナルコメントでIE6用のCSSを記述します。なぜ、この方法でうまく行くのかはよくわからない。`height: 100%;`の挙動など、よく理解してない部分が多いです・・この件に関しては互換モードの方が融通が利くみたいですが、そこは妥協しません。もとはといえば、`position: fixed;`をサポートしてないIEが悪いん(ry

<a href="http://www.110chang.com/lab/height100/index.html">height: 100%; のテスト</a>
（ウィンドウ小さめで見て下さい）

IE6、IE7、mac版Firefox 2.0、Safari 2.0、Netscape 7では大丈夫です。mac版IEは死亡。Opera はフッタが表示されない。もう、疲れたのでソースは割愛します。参考にしたサイトから特別変更はしてません。それにしてもPHPSPOTマンセー、ホントに。

標準モードでIE6で疑似フレーム（position-fixed;もどき）

<a href="http://labs.m-logic.jp/2007/05/movabletypeposttotwitter_v111.html">MovableType用PostToTwitterプラグイン v1.1.1</a>

Movable Type でエントリーを投稿すると Twitter にもポストできるプラグイン。Movable Type のことを書くのは久しぶりだ。

PostToTwitterを試してみる

先日、タイトルと説明をいじった結果かな？

<img alt="analytics_s.png" src="analytics_s.png" width="450" height="86" />

ずっと、だいたい１日２０〜３０ユニークユーザーできてたんですが、先週あたりからじわじわ増えて、今週は１００〜１２０ユニークユーザー（今は「セッション」という用語に変わっている）で推移している。<ins>追記：セッションとユニークユーザーは同一ではありません。ユニークユーザーの方がわかりやすかったんだけどな・・</ins>

先週じわじわ上がっているのは、おそらく や actionscript のコードをたくさん載せたのが原因でしょうか。

そして、今週ですが、５日連続で１００以上というのは今まで無いので、５／１８にタイトルの変更とメタ情報の追加をしたのが効果を上げているように見えます。

<img alt="analytics2_s.png" src="analytics2_s.png" width="450" height="190" />

主なアクセス元は検索エンジンです。その半分は Google です。友達少ないんで、ほっといて下さい。ってか、本当にこんな速攻で結果でるものなんでしょうかね・・

そもそも、なぜ、この作業をしたかというと、こんな記事を見たからです。

<a href="http://web-tan.forum.impressrd.jp/e/2007/05/11/1323">Googleの補足インデックス地獄を抜け出す11の方法</a>

Google 検索に「補足結果」なるものがあり、おそらくタイトルの先頭から一定文字数までが同じだったためにトップページの補足的内容と判断され、補足インデックスにされたのではないかと想像する。もちろんメタタグも然り。（このサイトには２と３と１１の方法を行いました）

効果てきめん！？

<a href="http://www3.nhk.or.jp/anime/coil/">NHKアニメワールド:電脳コイル</a>

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/7cy5m4X8EG0"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/7cy5m4X8EG0" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object> 
プロモーションビデオ

「攻殻機動隊」と「となりのトトロ」を足して２で割ったと言ったら乱暴ですが・・そんな感じです。

電脳と銘打ってはいるものの、「攻殻」のように脳にプラグインするわけでなく、あくまで「メガネ」という視覚デバイスが電脳空間との媒体になっています。また、電脳コイルに登場する電脳世界のほとんどはインターネットではなくVR（ヴァーチャルリアリティ）空間です。

現実世界とVR空間をリアルタイムで同期して、専用のメガネを掛けているときだけ、現実とVR空間の交錯した世界で遊べる。これが大黒市では、子供たちの間で、今の携帯電話のように普及している、という設定です。

現実とVRをリアルタイムで同期するのは技術的には相当難しそうですが、まあ、<del>子供向け</del><ins>3ch</ins>ではあるので、見ているだけで楽しめる設定になっています。

大人が見ても、

・ヒロインの優子と妹の京子の関係は「トトロ」のサツキとメイ 
・京子が電脳ペット『でんすけ』に書いたいたずらは「攻殻」の電脳内のインターフェース 
・メガばあが『電脳虫下し』を紹介する時「ドラえもん」の道具の紹介みたい

など、各所に隠れている様々な作品へのオマージュが楽しいです。

電脳コイル Coil A Circle of Children

タイトルタグが、今まで「サイト名」＋「ブログタイトル」だったのを逆にした。 
メタタグの説明とキーワードが空だったので追加した。

忘れないようにメモ。効果あるかな？

メモ：タイトルと説明

<a href="http://www.110chang.com/lab/mt_rss_loader/index.html"><img alt="rssloader.jpg" src="/legacy/images/rssloader.jpg" width="450" height="225" /></a>



FLASHにatomフィードを読み込み表示。さらに、モリサワのMBゴシックで表示したかったのでフォントを埋め込んだswfファイルを読み込ませます。

<a href="http://www.110chang.com/lab/mt_rss_loader/index.html">MT RSS Loader</a>

このサイトをリニューアルするときに使いたいので作りました。仕組みを作るのに精一杯で表現はひどいです・・

今回はatomフィードを使ってみましたが、よく考えたらFLASHに全文読み込む必要は無いのでRSSフィードで良かったかも。

クラス主体のコーディング手法は FLASH OOP を参考にしました。やっと mx.eventDispatcher の使い方が分かってきた。また、FLASHでXMLをカンタンに扱うことのできる<a href="http://www.xfactorstudio.com/">XPath4AS2</a>というAS2ライブラリをつかってみました。

# 作成ファイル

rssloader.fla 
　┗embed_font_mc:MovieClip 
・embed_font_mcはフォントを埋め込んだSWFの読み込み用に作成したMCです。embed_font_mcの子要素で埋め込んだフォントを使用できます。

MBGothic.fla 
・MBGothic Bold を埋め込んだテキストフィールドを作成しパブリッシュします。

rssloader.as 
・RSSLoaderパッケージのInitクラスのインスタンスを作成します。rssloader.flaにインクルードしておきます。

/RSSLoader（パッケージ） 
　┗Init.as 
　　・RSSLoaderパッケージ内の必要なクラスのインスタンスを作成します。 
　　・XMLModelクラスのloadDataメソッドを実行し、読み込みを開始します。 
　┗XMLLoader.as 
　　・XMLデータを読み込みます。 
　┗XMLModel.as 
　　・読み込んだXMLデータを整形し、onDataイベントを発行します。 
　┗EmbedFont.as 
　　・onDataイベントを受信し、embed_font_mcにMBGothic.swfを読み込みます。 
　　・onEmbedFontイベントを発行します。 
　┗View.as 
　　・onDataイベントでXMLデータを受け取ります。 
　　・onEmbedFontイベントを受信し、embed_font_mcにテキストフィールドを作成しXMLデータを表示します。

と、結構大量のスクリプトになったのでソースは端折って掲載します。

## Init.as

```js
//Init.as
import RSSLoader.*;
class RSSLoader.Init
{
 private var mc:MovieClip;
 //コンストラクタ
 function Init( _mc:MovieClip )
 {
 mc = _mc;
 //XMLモデルのインスタンス
 var model:XMLModel = new XMLModel();
 //XMLデータの読み込み
 model.loadData("http://www.110chang.com/atom.xml");
 //埋め込みフォント読み込みのインスタンス
 var my_embed_font:EmbedFont = new EmbedFont( model, mc.embed_font_mc );
 //SWFファイルのURI指定
 my_embed_font.setURI("http://www.110chang.com/lab/mt_rss_loader/MBGothic.swf");
 //my_embed_font.setURI( "./MBGothic.swf" );
 //ビューのインスタンス
 var my_view:View = new View( model, mc.embed_font_mc );
 //埋め込みフォントにリスナー登録
 my_embed_font.addEventListener( "onEmbedFont", my_view );
 }
}
```

## XMLModel

```js
import RSSLoader.SuperModel;
import RSSLoader.XMLLoader;
import com.xfactorstudio.xml.xpath.*
//スライドモデルクラス
class RSSLoader.XMLModel extends RSSLoader.SuperModel
{
 //コンストラクタ
 function XMLModel()
 {
 //コンストラクタ関数のスーパークラスバージョンを呼び出す
 super();
 }
 //ファイル読み込み
 function loadData( url:String ):Void
 {
 XMLLoader.loadXML( url, parse, setData, this );
 }
 //XML解析
 function parse( xml:XML ):Object
 {
 //ここでxpathを使って解析します。
 //titles[i] = XPath.selectNodes( xml, "/feed/entry["+(i)+"]/title/text()" );
 //bodies[i] = XPath.selectNodes( xml, "/feed/entry["+(i)+"]/content/text()" );
 //dates[i] = XPath.selectNodes( xml, "/feed/entry["+(i)+"]/published/text()" );
 //とかやってまとめて返します。
 //data_obj[i] = { title:titles[i], body:bodies[i], date:dates[i] };
 return data_obj;
 }
 private function entryNodesLength( xml:XML ):Number
 {
 var XMLPath:String = "/feed/entry";
 var my_array:Array = XPath.selectNodes( xml, XMLPath );
 return my_array.length;
 }
}
```

## EmbedFont.as

```js
import RSSLoader.XMLModel;
class RSSLoader.EmbedFont extends RSSLoader.SuperView
{
 private var mc:MovieClip;
 private var model:XMLModel;
 private var uri:String;
 //コンストラクタ
 function EmbedFont( _model:XMLModel, _mc:MovieClip )
 {
 super();
 mc = _mc;
 model = _model;
 model.addEventListener( "onData", this );
 }
 function setURI( _uri:String ):Void
 {
 uri = _uri;
 }
 private function onData():Void
 {
 var my_mcl = new MovieClipLoader();
 my_mcl.addListener( this );
 my_mcl.loadClip( uri, mc );
 }
 private function onLoadStart( target_mc:MovieClip ):Void
 {
 //ロード開始
 }
 private function onLoadProgress( target_mc:MovieClip, loadedBytes:Number, totalBytes:Number ):Void
 {
 //プログレスバー表示など
 }
 private function onLoadComplete( target_mc:MovieClip ):Void
 {
 //ロード終了
 dispatchEvent({ type:"onEmbedFont" });
 }
}
```

## View.as

```js
import RSSLoader.XMLModel;
class RSSLoader.View extends RSSLoader.SuperView
{
 private var mc:MovieClip;
 private var model:XMLModel;
 private var data_obj:Object;
 //コンストラクタ
 function View( _model:XMLModel, _mc:MovieClip )
 {
 super();
 model = _model;
 mc = _mc;
 model.addEventListener( "onData", this );
 }
 function onData( obj:Object ):Void
 {
 data_obj = obj.data
 }
 function onEmbedFont():Void
 {
 for( var prop in data_obj )
 {
 //タイトルを作成
 makeTitle();
 }
 }
 private function makeTitle():Void
 {
 //テキストフォーマットやテキストフィールドの作成
 }
}
```

FLASHにatomフィードを読み込んで表示する

左サイドバーに突如出現した謎のエリア。今はやりのtwitterをどうでもいいヒトコトを更新するツールとして使ってみる。

<a href="http://twitter.com/">twitter</a>

twitterとはなんぞや、という方もいると思います。当初は「『今、何してる？』で繋がるコミュニティ」というふれこみでしたが、使ってみると、全世界の人と、とりとめもなくチャットできるコミュニティサイトみたいな印象です。まあ、使ってみるのが一番早いかと思います。

<a href="http://gihyo.jp/lifestyle/serial/01/twitter/0001">先取り！ Twitter使いへの道 AtoZ</a>

まあ、ここに表示されるのはどうでもいいことなので、どうでもいいといえばどうでもいいんですが・・<ins>追記：あ、でも携帯からいまどこ風に更新したら面白いかな。</ins>

一応、どうでもいいソースを張っておきます。twitterのサイトにある“JavaScript Badges”のソースを20件の発言が見れるように手を加え外部化したものです。特に難しいことはしてません。

```js
loc = 0;
my_obj = {};
function relative_time(time_value) {
	//relative_timeメソッドはそのまま使います。
}
//表示中の番号の整形
function indicate_loc() {
	var s = (parseInt(loc+1)).toString()+"/20"
	return s;
}
//データを受信
function twitterCallback(obj) {
	my_obj = obj;
	id = obj[ loc ].user.id;
	updateInfo();
}
//番号を進める
function nextTwitter() {
	loc++;
	if( loc>19 ) {
		loc = 0;
	}
	updateInfo();
}
//表示を更新
function updateInfo() {
	document.getElementById('my_twitter_status').innerHTML = my_obj[ loc ].text;
	document.getElementById('my_twitter_status_time').innerHTML = relative_time(my_obj[ loc ].created_at)+" , "+indicate_loc();
}
```

twitterをカンタン更新ツールとして使ってみる

出現条件を説明するのが難しい。IE6は`float`を指定した要素の親要素に`width`属性を指定すると`float`した要素の高さが親要素に含まれるバグがあります（詳しくは<a href="http://www.110chang.com/blog/2006/12/iefloatborder.html">IEでfloat属性を指定した要素の親要素のborderが消えるバグ</a>を見て下さい）。このバグが発生している場合に、`float`属性を指定した子要素が兄要素に指定されている`margin-bottom`を継承するみたい。



実際には兄弟要素の属性を継承することはないと思いますが、継承しているとしか思えない挙動です。

# IE6でfloatした要素が兄要素のmarginを継承（？）する例

<a href="float20070511-1.html" onclick="window.open('float20070511-1.html','popup','width=620,height=393,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="/legacy/images/float20070511-1-thumb.png" width="450" height="285" alt="" /></a>

親要素が“parent”、その子要素で“child1”、“child2”、“child3”。

“child2”、“child3”は`margin-bottom:0;`を指定しているにも関わらず下に余白が発生。<a href="http://www.110chang.com/lab/float/20070511.html">このスクリーンショットのソース</a>

# 最後にfloatを指定しない弟要素を追加した例

<a href="float20070511-2.html" onclick="window.open('float20070511-2.html','popup','width=620,height=460,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="/legacy/images/float20070511-2-thumb.png" width="450" height="333" alt="" /></a>

余白は消えている。<a href="http://www.110chang.com/lab/float/20070511-2.html">このスクリーンショットのソース</a>

# 兄要素のmargin-bottomを指定しない例

<a href="float20070511-31.html" onclick="window.open('float20070511-31.html','popup','width=620,height=311,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="/legacy/images/float20070511-3-thumb.png" width="450" height="225" alt="" /></a>

同様に余白は消えている。<a href="http://www.110chang.com/lab/float/20070511-3.html">このスクリーンショットのソース</a>

# Firefoxの例

<a href="float20070511-ff.html" onclick="window.open('float20070511-ff.html','popup','width=620,height=358,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="/legacy/images/float20070511-ff-thumb.png" width="450" height="259" alt="" /></a>

Firefoxではこのようなバグはありません。子要素を全て囲むように親要素の背景がある場合など、親要素への`width`指定は必須だと思われますが（他にも`width`を指定することによって防げるバグがあったと思う）、あちら立てればこちらが立たず、IEは本当に手間のかかるブラウザです。

兄要素（child1）を外に出す、`margin`属性の代わりに`padding`属性を使う、`margin`の指定要素を変えるなどで対処するしか無いようです。

IE6でfloatした要素が兄要素のmarginを継承（？）する

チーコのキレっぷりに惚れました。ヤンマガで途中からしか見てないので最初から読もうと思う。

<blockquote>地味でヘタレでフリーターで、おまけに童貞で金もないサトシ。バイト先で知り合った年上でパツキンでケンカっ早くて、でもゴッツ美人のチーコと何故か付き合うことに。</blockquote>

設定だけみると『電車男』に似てる気もするが、サトシはチーコにどつかれ、どつかれ、どつかれるごとに成長する。果たして最終回までにサトシは何回どつかれるのか・・そして２人の純愛の結末は・・

１巻・２巻を読みましたが、もっと買っておくんだった。GW明けまでおあずけです。

<iframe src="https://rcm-jp.amazon.co.jp/e/cm?t=110changcom-22&o=9&p=8&l=as1&asins=4063612570&fc1=302020&IS2=1&lt1=_blank&lc1=9BCB39&bc1=000000&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>

ちなみに、電車男は（読んで｜見て）ません。

= = = 5/5 追記 = = = 
連休明けと思いきや昨日(5/4)届いた。ブッ●マート東大宮店ＧＪ！店舗評価に「５」つけたる！！東大宮といえば学生時代住んでた所だ。なつかすい。

赤灯えれじい

どうも、IEだけ異なる挙動をするので、検証してみました。vertical-align 属性のキーワード指定の初期設定が違うだけなのかと思いきや。

p要素

<img alt="inline_ff_p.gif" src="/legacy/images/inline_ff_p.gif" width="450" height="270" /> 
mac 版 firefox

<img alt="inline_ie_p.gif" src="/legacy/images/inline_ie_p.gif" width="450" height="185" /> 
windows 版 IE

ありゃりゃ、line-height に指定した 180% が無視されてるよ。 
h1〜h6要素も同じと思われる。

li要素

<img alt="inline_ff_li.gif" src="/legacy/images/inline_ff_li.gif" width="450" height="400" /> 
mac 版 firefox

<img alt="inline_ie_li.gif" src="/legacy/images/inline_ie_li.gif" width="450" height="315" /> 
windows 版 IE

li要素でも、やはり line-height が無視されている。背景の方は問題ない。

td要素

<img alt="inline_ff_td.gif" src="/legacy/images/inline_ff_td.gif" width="450" height="402" /> 
mac 版 firefox

<img alt="inline_ie_td.gif" src="/legacy/images/inline_ie_td.gif" width="450" height="402" /> 
windows 版 IE

<del>td要素内は大丈夫なようだ</del><ins>line-height は大丈夫だが、vertical-align:top と bottom の位置がtext-top／text-bottomと同じになってしまっている。これは初期設定？</ins>（でも、ボーダーの dotted が・・）。

line-height が無視されるのはIEのバグのようです。

<a href="http://cssbug.at.infoseek.co.jp/detail/winie/b075.html">line-heightの指定が置換要素を含む行に反映されない</a>

というわけで、vertical-align 属性の検証ではなく line-height 属性の検証になってしまつた。 
このバグは回避のしようがない。img要素を包含した瞬間に終了。IE6以外のブラウザで<code>line-height:1em;</code>とかすればいいんでしょうが、実に面倒だ。

<a href="/lab/lineheight/index.html">検証に使用したページはこちら</a>

IE7の対応 
IE7ではこのバグは修正されている模様。よく見ると、ボーダーの dotted が dashed になるバグ（仕様？）も修正されている模様。td のボーダーが solid になるのは修正されていない。※スタンドアローン版 IE7 で見ていますので、正式版での挙動を保証するものではありません。

Archive for 2007.05