2009年5月28日木曜日

CSSのみでプルダウンメニュー

http://c-brains.jp/blog/wsg/08/06/05-155929.php
このページのソースがシンプルでわかりやすかったです。
ただie6対策についてはこのページの方法(csshover.htc)は使わず、javascriptでdisplay:block/hiddenを切り替える関数を作っておいて、onmouseover/onmouseoutで切り替えるやり方で対応しました。

2009年5月26日火曜日

Flashでフ○ーミーを動かす

とりあえずFlashの基礎を学んだので、なんか作ってみたくなりました。
そこで目を付けたのがフ○ーミー。矩形だけで簡単に描けるのが理由です。
最初の目標はこれにしました。
・とりあえず歩かせる
・音も出す
・再生ボタンと一時停止ボタンをつける
で、できたのがこれ。

ソースはこちらframy.fla
カギになった部分は以下でした。
■再生・一時停止のトグルボタン(ボタンじゃなくムービークリップを使うところがポイント)
■ムービークリップの左右反転
http://wa.otesei.com/item/189
BGMはこちらを使わせていただきました。
http://www.youtube.com/watch?v=Gctft5LHPRc
自分の書いたActionScriptでフレーミーが動いてるのを見ると嬉しいですね。
とりあえず初心者を卒業して、初級レベルくらいまでは行きたいと思います。

2009年5月25日月曜日

ファイル(F)→保存して最適化(M)

flaファイルを編集していくうちに、どんどんサイズが大きくなっていることに気が付きました。
最初数百KBだったのがいつのまにか5MBに。
どうやらflaファイルには編集履歴がどんどん蓄積されていくため、サイズが大きくなっていくようです。
そこで「ファイル(F)→保存して最適化(M)」というのを試してみたところ、一気にサイズが小さくなりました。
このコマンドで過去の編集履歴がクリアされ、コンパクトになるということらしいです。
取り消しなどで過去の編集内容を戻せなくても大丈夫ならば、マメに最適化してサイズを小さくしておくのが良さそうです。

Flashの勉強

Flashも少しかじっておこうと思い、まずはウェブで参考になりそうなサイトを見つけて一読してみました。
Flash 8 入門講座
http://itpro.nikkeibp.co.jp/article/COLUMN/20060525/238975/
著者は吉岡梅さんという方。
自分みたいに、プログラマーがFlashを勉強するようなケースには最適だと思います。
逆にデザイナーがFlashを勉強するのにはちょっとハードルが高いように感じました。
ActionScriptの書籍も出されてるようなので、そのうち買って読んでみようかと思ってます。

2009年5月21日木曜日

JavaScriptを使わずにCSSだけでマウスオーバーを実現する

cssのa:hoverを使うことで簡単に実現できます。
参考
http://www.iam-strangeman.com/blogs/2006/07/css_mouseover_1.html
http://www.stylish-style.com/csstec/basic/l-rollover6.html
良いところは、ソースが短くなり可読性があがることと、読み込む画像数も減ること。
悪いところは、特に思いつきません。
今後マウスオーバーが必要なときはCSS方式を使おうと思います。

2009年5月18日月曜日

ie6でmax-heightとmax-widthと同等の動作を実現したい

「大きさがまちまちのサムネイルに対してmax-heightを指定し、レイアウトが崩れないようにしたい」
という要件があったんですが、max-heightやmax-widthはFireFoxやie7以降では使えるんですが、ie6では使えません。すごく困ります。
いちおう、それを回避できる外部JavaScriptがあります。
minmax.js
http://www.doxdesk.com/software/js/minmax.html
実際使ってみましたが、どうもdivに対して使う目的で作られたっぽく、今回のケースで画像に対して使ってみたところ、縦横比がおかしくなってしまうという問題がありました。
次に、cssのexpressionというのを試しました。
http://materia.useyan.jp/html/expression/

expressionというのは、
body { height: expression(body.scrollTop + 100 + 'px'); }
こんな感じでCSSの中でJavaScriptが動かせてしまうという機能。IE専用です。
関数なども動かせるので、こちらを参考にして実装してみました。
http://blog.enjoitech.jp/article/135
いちおうこれで要求は実現できたんですが、expressionにはこんな弱点があります。
http://www.inter-office.co.jp/contents/187/
というわけで、expressionを使うのは見送りました。
結局この件は、ie6の場合はoverflow:hiddenを使ってレイアウトの崩れを防ぐ、という"逃げ"の手法で対応することにしました。
時間をかければよりよい解決策も見つかったと思いますが、正直ie6のためにこれ以上時間を使うのもバカらしくなってきたのでここで手を打つことに。早くie6が死滅してくれれば、こういう苦労もなくなるんですけどね。。

2009年5月8日金曜日

タグの中にはやなどのブロック要素は入れられない


<p class="hoge">
<dl>
<dt>aiueo</dt>
<dd>kakikukeko</dd>
</dl>
</p>

こういうのHTML構造で、CSS側は
.hoge dt {
font-size:14px;
}

という具合にしたのですが、どうしてもdtにスタイルの指定が効きません。
firebugで見てみたら、

<p class="hoge"></p>
<dl>
<dt>aiueo</dt>
<dd>kakikukeko</dd>
</dl>

という具合で、<dl>以下が<p>の外に出ていました。
これはおかしいぞ、と思い調べてみたら「<p>~</p>の間にはインライン要素しか含めることができない」ということが分かりました。
http://www.tohoho-web.com/html/p.htm

http://www.tohoho-web.com/html/memo/elem.htm
<address> や <blockquote> のように、ブラウザ表示時に前後に改行がはいるものがブロック要素、<big> や <strong> のように、前後に改行がはいらないものがインライン要素と覚えておくと覚え易いでしょう。

とのこと。確かに覚えやすいです。

長いことhtmlを書いてますが、こういうルールがあったとは初めて知りました。

自分もまだまだですね。

2009年5月1日金曜日

preg_replaceでマッチした文字列を関数で操作して置換したい

preg_replace("pattern", strtolower('$1') ,$str);
こんな感じでマッチした文字列を小文字にして置換したかったんですが、いろいろ試してみたけど挫折しました。
http://q.hatena.ne.jp/1149983795
このページなどを参考にしてpreg_replaceについて勉強しながらやってみたんですけど、どうにもうまくいきませんでした。
preg_replace("pattern", testFunc('$1') ,$str);
function testFunc($str){
echo $str;exit;
}

試しに↑を書いて動かしてみたんですが、結果は「$1」になってしまいます。
変数の参照渡しとかスコープとかの問題もからんでるようです。
もうちょっと調べてもよかったんですけど、時間の余裕がなくなってきたのでまわりくどいやり方で逃げました。。

ファイル名を大文字から小文字に一括変換するWindowsアプリ

ググって探して見つかったフリーソフトを4つほど試してみましたがこれが一番でした。
Cashey