IE7限定なんだろうけど、z-indexは同一階層間での重ね順の前後を指定するもので、
グローバルに前後を指定するものではなかった

komacchi.com/blog

ググると色々解決策は出てくるが、どれもしっくりこない。海外サイトでjQueryを利用した解決策を発見し、無事解決。JavaScript上でz-indexをすべてのdivタグに設定しておけばバグは解消されるらしい。

$(function() {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
});

一応これで解決しましたが、たまに上手くいってないところもあり。-10の値を変えたり工夫して何とか対応。つまりプルダウンメニューを二箇所で使うのは正直やめたほうがいいと思った。お客のリクエストでしょうがなく実装したけど、ユーザビリティ的にもかなり使いにくい代物になってるし。

あと、このプルダウンメニューで透過PNGを利用しようとIE6対策にこのプラグインを使ってみました（要ロールオーバー）。
alphafilter.jsが透過pngのロールオーバーに対応[to-R]
このプラグインは defer=”defer” を設定しないと動作しないのですが、 defer=”defer” を設定するとWindows Vistaでプルダウンメニューが表示されないバグが発生。結局IE6での対応を見送りました。JavaScriptを利用すればIE6でも透過PNGは対応できるのですが、やっぱり不具合はかなり多いです。積極的に使用するのはちょっと避けたほうがいいかも。

• MAMPを利用してMovable Type 4をMacローカルにインストールする
• MAMP PROでバーチャルホストを設定する
• CSSの知識をアップデート
• function内でaddCommandしたい
• ひとつのキーボードとマウスでMacとWindowsを操作したい

子供セレクタの利用

こういうHTMLがあったとします。

<div id="content">
<p>ここを太字に</p>
<div>
<p>普通の文字</p>
<p>普通の文字</p>
</div>
<p>ここを太字に</p>
<!--/#content--></div>

Firefox等のモダンブラウザであればこんな感じでCSSを書けば解決。

#content  > p{
	font-weight: bold;
}

ただしIE6だと子供セレクタが効かないのでこう書く。

#content p {
	font-weight:bold;
}
#content * p {
	font-weight:normal;
}

ワイルドカードを挟めばいいのか！なるほど。

フッタを常に画面の下部に固定

HTMLはこんな感じ。フッターDIVの場所に注意。

<div id="container">
<div id="contents">
<div id="header">
<h1>ヘッダー</h1>
<!--/#header--></div>

<p>内容</p>

<!--/#content--></div>
<div id="footer">フッター</div>
<!--/#container--></div>

CSSはこんな感じ。

html ,
body {
	height: 100%;
	overflow: auto; /* for Opera 9.5x */
}
#container {
	position: relative;
	min-height: 100%;
}
#contents {
	padding-bottom: 50px;
}
#header {
	margin-bottom: 20px;
	height: 80px;
	background: #CCC;
}
#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50px;
	background: #666;
}

IE6でもmin-heightを使う

以前はJavascriptを使っていましたがCSSだけでもできました。IE6のheightプロパティのバグ（高さを指定しても内容量に応じて高さの値が変わる）を利用します。

#hoge {
	min-height: 150px;
	height: auto !important;
	height: 150px;
}

画像にマウスオーバーすると内側にボーダー表示

Javascript使わないでCSSのみで実装できます。

<ul class="hoge">
<li><a href="#"><img src="hoge.jpg" alt="hoge" /></a></li>
<li><a href="#"><img src="hoge.jpg" alt="hoge" /></a></li>
<li><a href="#"><img src="hoge.jpg" alt="hoge" /></a></li>
</ul>

.hoge a ,
.hoge a img {
	float: left;
	overflow: hidden;
}
.hoge a:hover {
	border: solid 3px #9af;
}
.hoge a:hover img {
	margin: -3px;
}

番号だけ太字にしたい！

HTMLはこんな感じでCSSはお察しの通り。

<ol>
<li><span>テキスト</span></li>
<li><span>text</span></li>
<li><span>てきすと</span></li>
</ol>

• function内でaddCommandしたい
• 敷居をまたぐif文の処理
• MAMPを利用してMovable Type 4をMacローカルにインストールする
• 外部画像をロードしたSpriteを環状に配置したい
• ひとつのキーボードとマウスでMacとWindowsを操作したい

せっかく購入したMAMP PROをもっと使うためにMovable TypeもMacローカルにインストールしてみた。WordpressはPHPなのでインストールが簡単でしたが（MAMPデフォのまま何も作業しなくてOK）、Movable Typeのインストールはノンプログラマにとってかなりハードルが高くてかなり苦戦しました（最終的にできましたけど）。ちなみにインストールしたMovable Typeのバージョンは4です。

まずPerlモジュールをMacにインストールする必要があるらしい。MAMPデフォのままMovable Typeをインストールすると使えない機能が沢山でてくる。MySQLも使えない状態。そこでPerlモジュールっていうのをインストールする必要が模様。

モジュールをインストールするための管理者権限をつくる

ターミナル.appを立ち上げて、以下のコードを入力。

sudo passwd root

リターンキーを押すとパスワードを決めろ、と言われるので設定する。

MacPortsをインストール

どうやらモジュールのインストールをラクにしてくれるMacPortsなるフリーソフトをインストールする。ダウンロードは文中のsnow leopardから。
The MacPorts Project — Home

モジュールのインストール開始

ターミナル.appに「su」と入力する。
リターンキーを押すとパスワードが求められるので先ほど設定したパスワードを入力。

sh-3.2#

と表示されれば無事管理者権限でログインできたことになるらしい。
次にMacPortsの環境変数を入力。

echo 'export PATH=$PATH:/opt/local/bin:/opt/local/sbin/' >> ~/.bashrc
echo 'export MANPATH=$MANPATH:/opt/local/man' >> ~/.bashrc
echo 'source ~/.bashrc' >> ~/.bash_profile
port -d selfupdate
port -d sync

ここの意味がよくわからなかったので下記ブログ様から説明を引用。
Mac 内にサーバを構築して Movable Type の開発環境を作ってみる@Snow Leopard（10.6.x）編 – 蝶と文字、そして糸

ダウンロード後に生成されたデータは /opt 以下にインストールされます。これは MacPorts のインストール後に環境変数の PATH を変更し、MacPorts の port コマンドを扱えるようにするための処置です。

MacPortsからモジュールをインストール開始

僕は必須でないものも含み、Movable Type 4で利用可能なすべてのモジュールをインストールしました。

port install p5-dbi
port install p5-dbd-mysql
port install p5-dbd-sqlite
port install p5-dbd-pg
port install p5-dbd-sqlite2
port install ImageMagick +perl
port install p5-gd
port install freetype
port install jpeg
port install libpng
port install gd2
port install p5-crypt-dsa
port install p5-archive-zip
port install p5-xml-atom
port install p5-mail-sendmail
port install p5-archive-tar
port install p5-xml-parser
port install p5-ipc-run
port install p5-html-parser

すべてのインストールには僕の環境だと一時間くらいかかりました。
PerlのパスもMacPortsのインストールディレクトリに変更しておきます。

cd /usr/bin/
mv perl perl.bak
ln -s /opt/local/bin/perl /usr/bin/perl

Movable Typeをインストール

任意のディレクトリにダウンロードしたmtファイルを設置します（ここでは名前をmtにしたとします）。MAMP PROでローカルサイトを構築してブラウザからmtファイル(http://hoge/cgi-bin/mt/mt-wizard.cgi)にアクセスします。この際、mtのトップディレクトリに以下の.htaccessを置きます。コレを置かないとCGIとして認識されないようです。

Options -Indexes
Options +ExecCGI
AddType application/x-httpd-cgi .cgi

MAMP PROでのローカルサイト構築方法についてはこちら。データベースもMovable Typeのインストール前に作成しておくことも忘れずに。
MAMP PROでバーチャルホストを設定する – Macでローカル環境を作る | Bonkura Blog

DBを選択する画面でMySQLを選べるようにはなっていますが、エラーが出てしまうと思います。データベースポートとデータベースソケットを設定します。

• データベースポート：8889
• データベースソケット：/Applications/MAMP/tmp/mysql/mysql.sock

あとは手順に従うだけでインストール完了。お疲れさまでした。

• ひとつのキーボードとマウスでMacとWindowsを操作したい
• MAMP PROでバーチャルホストを設定する
• 外部画像をロードしたSpriteを環状に配置したい
• IE7のz-indexバグに対応する
• function内でaddCommandしたい

addCommand(
	new LoaderList(
		{ onProgress:function():void {

			}
		},
		function():void {
			for (var i:int = 0; i < imgList.length; i++) {
				addCommand(new LoadBitmapData(new URLRequest(imgList[i])));
			}
		}),
	function ():void {
		var bmpData:BitmapData;
		var bmp:Bitmap;
		for (var i:int = 0; i < imgList.length; i++) {
			bmpData = getResourceById(imgList[i]).toBitmapData();
			bmp = new Bitmap(bmpData);
			var posX:Number = bmp.width * i;
			var thumbBtn:ThumbBtn = new ThumbBtn( { bmp:bmp, x:posX, link:urlList[i]} );
			insertCommand(new AddChild(_base, thumbBtn));
		}
	}
);

どうもbmpData = getResourceById(imgList[i]).toBitmapData();がnullになってしまってハマりました。forが処理しきる前に次のコマンドが実行されてしまっているようです。
あれこれ調べていると大重さんのProgression本にこんな記述があって無事解決。

シリアルリストの中でfunctionステートメントを実行すると内部のステートメントも順に実行されていきますが、functionステートメントの中でaddCommand()を使って追加したコマンドは実行中のシリアルリストのすべてのコマンドの最後に追加実行されます。しかしinsertCommand()でコマンドを追加するとfunctionに続いて実行するコマンドとして挿入されます。

なので上のコード内のaddCommandをinsertCommandにすることで無事解決。助かりました。

詳細！Progression 4 Flashフレームワーク入門ノート

posted with amazlet at 10.07.22

大重 美幸
ソーテック社
売り上げランキング: 19010

Amazon.co.jp で詳細を見る

• hetemlサーバーでTwitterBotを動かす。
• 敷居をまたぐif文の処理
• MAMPを利用してMovable Type 4をMacローカルにインストールする
• 外部画像をロードしたSpriteを環状に配置したい
• IE7のz-indexバグに対応する

まだ未公開ですがとあるTwitterボットをPHPで制作しています。PHPユーザーとして僕はかなり未熟なので、参考になるかどうか微妙な投稿になりますが私的メモとして。bot自体の作り方は下記サイトを参考にしました。この通りに作れば簡単にできてしまいます（勉強になるかどうかは微妙）。

連載：Twitterを100倍楽しむためのbot開発基礎講座｜gihyo.jp … 技術評論社

で、この通りに作ってターミナルからPHPを実行すると上手くいったのですが、サーバー上で実行するときどうすんの？と。サーバーにファイル一式をアップして、SSH接続して同じようにコマンドを叩いたけどエラーが出て動かない…（ちなみに僕はサーバー初心者）。

サーバーはhetemlなんですが、hetemlのルールにしたがったコマンドの書き方が必要だそうです。
PHPファイル内に記述してあるパスは絶対パスにしておきます。またbotのPHPファイルの一行目には”#!/usr/local/bin/php5″と記述します。下記はターミナルから入力したコマンド。

cd /home/sites/heteml/ユーザーパス/web/botの置いてあるディレクトリ;
/usr/local/bin/php5 ./bot.php;

これで動きました。

そして定期的にbotを動作させる為にcronを使います。hetemlはcronの設定がビックリするくらいに簡単でGUIの操作で可能です。アホな間違いですが、当初ボクはcronから直接botのPHPファイルを叩いていました。コマンドも何もないのに動くわけがない…。

調べると、どうやらシェルファイルを作ってコマンドを記述。そのファイルにアクセスするそうです。以下bot.shという名前などつけてサーバーの所定位置にアップロードします。

#!/bin/sh
cd /home/sites/heteml/ユーザーパス/web/botの置いてあるディレクトリ;
/usr/local/bin/php5 ./bot.php;
exit;

さらにこのファイルのパーミッションを「700」に変更しておきます。
これでcronからコマンド実行 -> botが動作します。

ちょっとしたサーバーサイドの勉強になって得しました。なるほど。
しかしhetemlは本当に便利。なんでもGUI操作でできてバカになりそう。

レンタルサーバー「heteml」 – 大容量・高機能のレンタルサーバー(ホスティングサービス)

• function内でaddCommandしたい
• MAMPを利用してMovable Type 4をMacローカルにインストールする
• MAMP PROでバーチャルホストを設定する
• CSSの知識をアップデート
• IE7のz-indexバグに対応する

が、デスクの上にキーボードとマウスが2セットあるとかなり邪魔です。僕はさらにモニタが3台並んでいる、ただでさえ狭いデスクで作業しているのでキーボードとマウスは1セットしか置きたくないです。

そんなとき役立つのがSynergyというMacとWindowsのキーボードとマウスを共有しできるソフトです。これがあればデスクがスッキリ、マウスとキーボードが1セットで済みます。が、問題はターミナル操作が必要だったりとデザイナーレベルには設定が難解なところです。当初ボクもGoogleで情報を検索してトライしてみましたが、案の定挫折してしまいました（Googleで得られる情報のバージョンが古かったっていうのもあります）。さらに調べるとGUIでSynergyの設定ができる、quicksynergyというソフト発見しました。操作が物凄く単純であっという間にボクでも設定できてしまいました。

QuickSynergyを設定する

WindowsとMacの両方を起動しておきます。Macのキーボードとマウスをメインで使うものとします。まずはWindows側にSynergyをインストールします。インストール後、Synergyを立ち上げます。

Other Computer’s Host Nameの項目にMacのローカルIPを入力します。MacのローカルIPはシステム環境設定パネル -> 共有から調べることができます（追記：使用しているMacの名前でも使えるようです。hogemac.localという感じで。）。そして、Advanced OptionsからこのWindows機のスクリーンネームをメモしておきます。MacのSynergy設定に必要です。

Macに移動して、QuickSynergyをインストール。インストール後起動し、Shareタブを選択します。

Windows機が存在するポジションの項目に先ほどメモしたWindows機のスクリーンネームを入力してRunボタンをクリックします。

WIndows機に戻りSynergyを立ち上げてスタートボタンをクリックして完了です。MacのマウスをWindows機に滑らせると、マウスポイントも追従しているはずです。完了。

※Windows7でSynergyのAutoRunをインストールすると、どうやらエラーが出てしまう模様。この辺に答えがありそうでした。
Windows 7 で Synergy を使って Mac のキーボードとマウスを共有 – べたろぐ。

MacのキーボードはWindows上だとかなりつかいにくいので、ボクはAppleKbWinっていうフリーソフトをWindowsにインストールしています。Parallelsには以前AppleKという有料ソフトを入れていたのですが、FlashDevelop上でバグを連発するのでAppleKBWinに乗り換えました。使い勝手はAppleKのほうが上ですが、安定度はAppleKBWinのほうが高いと思います。

• MAMPを利用してMovable Type 4をMacローカルにインストールする
• CSSの知識をアップデート
• MAMP PROでバーチャルホストを設定する
• IE7のz-indexバグに対応する
• 外部画像をロードしたSpriteを環状に配置したい

var obj:Sprite = new Sprite();
obj.addEventListener(MouseEvent.CLICK, _onClick);
var imgLoader:Loader = new Loader();
var urlReq:URLRequest = new URLRequest("hoge.jpg");
obj.addChild(imgLoader);
obj.mouseChildren = false;
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
imgLoader.load(urlReq);

obj.mouseChildren = false;と書いておかないと、objの子インスタンス（この場合はimgLoader）にもaddEventListener()が有効になってしまいます。つまりe.targetがimgLoaderになってしまいます。これを防ぐためにmouseChildren = falseとしておきます。

この読み込まれた画像の基準点は左上になっています。スケールの拡大などを利用する際に基準点を中央にしたほうが何かと使い勝手がよい場合が考えられます。以下のように設定しておけば基準点を中央にすることが可能です。

/*onImageLoaded関数内*/
e.target.loader.x = -e.target.loader.width / 2;
e.target.loader.y = -e.target.loader.height / 2;

マスク（マスクの形状は正円とします）をかける際に、読み込む画像がタテだったりヨコだったりを自動的に判別させることもできます。ただ画像サイズは統一しておく必要があります。

処理内容では読み込んだ写真に内接する最大サイズの円で切り抜きます。つまり写真のヨコとタテの短いほうの辺の長さで円形に切り抜けばいいです。式で表すと下記のようになります。

_maskObj.graphics.drawCircle(0, 0, Math.min(e.target.loader.width / 2, e.target.loader.height / 2));

Spriteを環状に配置する

環状に配置するには三角関数のサインとコサインを利用します。サインとコサインとは単純に言えば比率のことです。

• サイン -> 斜辺と高さの比率（高さ/ 斜辺）
• コサイン -> 斜辺と底辺の比率（底辺/ 斜辺 ）

三角関数については以下のサイトが詳しいです。
角度と座標の計算 － Flash の三角関数を使う

まずは1つのSpriteを指定の角度（ラジアン値）に配置してみます。環の中心座標は(cx, cy)、半径はr、角度はaとします。すると下記のような式になります。

• x = cx + h * cos(a)
• y = cy + h * sin(a)

また、環全体が毎フレームangleラジアン回転している場合は計算式をさらに加える必要があります。回転している = 各Spriteが環の基準の場所からそれぞれの角度ずれている、ということを意識する必要があります。enterframeの中でfor文を回し、すべてのSpriteの位置を取得しておきます。

private function _loop(e:TimerEvent):void {
    _angle += .002;
    for (var i:int = 0; i < _obj.length; i++) {
        var pos:Point = new Point();
        pos.x = this.stage.stageWidth / 2 + RADIUS * Math.cos(_angle + i / _obj.length * Math.PI * 2);
        pos.y = this.stage.stageHeight / 2 + RADIUS * Math.sin(_angle + i / _obj.length * Math.PI * 2);
    }
}

_obj.length * Math.PIはi番目の全体の中での割合です。例えば6枚目なら0.5（=6/12）、つまり半分の場所ということになります。環の一周は2πラジアンなのでMath.PI * 2で表すことができます。環そのものはangleラジアン回転しているので、結果としてSpriteの角度は、
angle + i / _obj.length * Math.PI * 2
で表せます。

ステージをクリックした場合の処理

ステージをクリックした場合に何か動作をさせたい場合があります。普通にstage.addEventListenerと書いてしまうと、ステージ上のSpriteがクリックされたときもstageに属しているオブジェクトということで同じイベントを発行していまいます。
なので、ステージ全体にクリック用のSpriteを作成するか、もしくはif文を使って下記のような条件分岐をします。

stage.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void{
    if(e.target == stage){
         //ステージをクリックした場合の処理
    }
    else{
        //その他の場合の処理
    }
}

以下サンプル。画像は読み込んでません。

• 敷居をまたぐif文の処理
• ひとつのキーボードとマウスでMacとWindowsを操作したい
• MAMP PROでバーチャルホストを設定する
• function内でaddCommandしたい
• hetemlサーバーでTwitterBotを動かす。

if(nowX < 1) hoge();

enterframeでifを毎フレームチェックしている場合、nowXが1以下になると毎回hoge()が実行してしまうため動作が思うようになりません。「enterframeを動かしている中でnowXが1以下の場合に一回だけ実行」する場合を考えます。

まず現在のnowXより前の数値を変数（ここではpreXとします）に格納しておきます。preXを利用すれば残り1の敷居は下のようなif文で表すことができます。

if(nowX < 1){
    if( preX >= 1){
        hoge();
    }
}

preXは次のタイミングでnowXになるので、preXが1より前で、nowXが1より後のタイミングは一度しかないので、hoge()も一度しか実行されないことになります。

• function内でaddCommandしたい
• 外部画像をロードしたSpriteを環状に配置したい
• MAMP PROでバーチャルホストを設定する
• hetemlサーバーでTwitterBotを動かす。
• CSSの知識をアップデート

最近のコーディングでは共通箇所はSSIにしたりPHPのincludeを使ったり、更新時に作業ができるだけラクになるように設計しています。ボクはMAMP PROを使ってローカルサーバーを立てて、ドキュメントルートを設定しています。無料版のMAMPでもhttpd.confに設定を書き加えればドキュメントルートを複数設定することができるのですが、MAMP PROはGUI操作で簡単に設定できるのが魅力です。

MAMP PROの設定手順

下記サイトからMAMP PROをダウンロードします。ここで非常に重要な注意。最新版1.9はボクの環境(Mac OS 10.6)では正常に動きませんでした。ですのでボクはMAMP PRO1.8.4を使用しています。
MAMP: Mac, Apache, MySQL, PHP

ダウンロード完了後、インストールしMAMP PROを立ち上げます。Apacheを80、MySQLを3306に設定しておけばバーチャルドメインがhttp://hogeのように文字のみにすることが可能になります。次にホストボタンをクリックし、ホストの設定を行います。

MAMP PRO 1.9だとホストボタンをクリックしても画面がサーバーのままです。これはおそらくバグだと思われます。MAMP PRO 1.8.4だと正常な動きをし、下記のような画面になります。

サーバー名は任意の名前をつけます。この名前がhttp://hogeのhogeの部分になります。ディスクの場所はローカルパスを設定します。

別名欄にはMacのシステム環境設定 -> 共有パネルに記載してあるローカルIP（例:10.0.0.0）を入力します。別名を設定しておくとParallelsで立ち上げたWindowsから「http://10.0.0.0」でアクセスすることが可能になります。MAMP PROはバーチャルホストを同時に複数立ち上げられますが、ローカルIPは一個しかないのでParallelsでチェックできるのは一個のホストになります。ほかに上手いやり方があるかもしれませんが…。

最後に「高度な設定」ボタンを押して、Optionsをすべてチェックします。適用ボタンを押してサーバーを再起動すれば「http://hoge」にアクセス可能な状態になっていると思います。

何よりバーチャルホストを複数設定できるのがMAMP PROの魅力です。\4,708しますが、コーダーの方には十分元が取れるソフトだと思います。ボクもサイトの制作時にまずやる作業はMAMP PROの設定からです。オススメ。

• hetemlサーバーでTwitterBotを動かす。
• MAMPを利用してMovable Type 4をMacローカルにインストールする
• IE7のz-indexバグに対応する
• ひとつのキーボードとマウスでMacとWindowsを操作したい
• 敷居をまたぐif文の処理