案件でプルダウンメニュー（メニューA）を実装した際に、左袖のローカルメニュー（メニューB）でも入れ子の実装をしていたために起こったバグ。メニューAがメニューBの背景に潜り込んでしまう。単純にCSSでz-indexをメニューBよりAの値を大きくすれば問題なさそうだけど、IE7で不具合。z-indexが効かない。IE7のz-indexにはこういう不具合があるらしい。

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

komacchi.com/blog

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

久々に中規模サイトのコーディングをいくつか担当することになったので、CSSの知識をアップデート。基本的な知識のみで実装してきたけど、本やネットで調べた内容をメモ。凄い効率的になるなあ。

子供セレクタの利用

こういう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;
}

ワイルドカードを挟めばいいのか！なるほど。
(続きを読む…)

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

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

ちょうどシーン遷移があるFlashコンテンツを作ることになったので迷わずProgressionを採用。便利さを再確認。従来の方法だと丸2日くらいかかりそうな実装が1日で完了。ただ、少しハマったところがあったのでメモ。当初こういうスクリプトを書いていました。

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 で詳細を見る

まだ未公開ですがとある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」 – 大容量・高機能のレンタルサーバー(ホスティングサービス)

Webデザイナーはブラウザチェックの為に複数のパソコンを立ち上げている場合があります。ボクも普段の作業はMacBook Proでおこなっていて、ちょっとした動作チェックはParallelsで、念入りに確認する場合はWindows7をインストールしたDELL機を立ち上げています。クライアント側から見てもWindows機が手元に無いと非常に不安がられるんじゃないのかと思います。

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

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

ロード自体は簡単なんですが、ロードした画像をマスクしたり基準点を中央にするまでは少しコードを加える必要があります。またクリッカブルにする際にはいくつか注意すべきこともあります。ロードは下記のようなコードで簡単にできます。

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));

(続きを読む…)

ActionScript3.0で「敷居をまたぐ」if文の処理。この数値からこの数値の間に一度だけ特定の処理を実行させたい場合に使います。例えば変数nowXの値が1以下の場合に関数hogeを実行させたいとします。パッと思いつくのは下記のような式です。

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()も一度しか実行されないことになります。

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

(続きを読む…)