Web

Entries

Apache Auth Cookie Fu を使ってみた

Date
2007-06-04 (Mon)
Category
Web

ちょっと興味があったので、触ってみた。

Apache Auth Cookie Fu module

用意した環境

  • CentOS 4 (Kernel 2.6.9-42.0.10)
  • Apache 2.2.4

書いたコード

httpd-cookiefu.conf

<Directory /htdocs/cookie/apple>
  AuthCookieEnable        on
# AuthCookieDenyAction    redirect
# AuthCookieRedirectURL   http://www.apple.com/
# AuthCookieCheckIP       no
  AuthCookieCheckExpire   yes
# AuthCookieCookieName    ACF
# AuthCookieCookieSalt    "!Open Sesame!"
</Directory>

index.html

<h2>No Cookie</h2>
<div id="nocookie">
  <iframe src="faces/text.html?" width="700" height="200" style="border:1px solid #999"></iframe>
</div>
<h2>Cookie</h2>
<div id="nocookie">
  <iframe src="apple/text.html?" width="700" height="200" style="border:1px solid #999"></iframe>
</div>

faces/text.html は人の顔がいっぱい並んだページで、顔写真はすべて faces ディレクトリ以下に並んでいます。apple も同様。

hash_hmac.php

$expire   = time() + (3600 * 24) ;
$remoteip = $_SERVER["REMOTE_ADDR"];
$key      = '!Open Sesame!';
$message  = "$expire,$remoteip";
$hmac     = hash_hmac('sha1', $message, $key);
trigger_error("$expire, $remoteip, $key, $message, $hmac", E_USER_NOTICE);
$name = 'ACF'; setcookie ( $name, $hmac, $expire, '/');


想定されるユーザシナリオは…

  • index.html にアクセス → 顔は見られる。リンゴは forbidden
  • hash_hmac.php にアクセス → クッキーを焼く
  • index.html にアクセス → 顔は見られる。リンゴも見られる。

なのですが、今のところ何度やってもリンゴが見られません…

cookie を焼く PHP のコードは会ってると思います。試しに以下のようなコードを書きました。

hmac_test.php

$expire   = 1178442572;
$remoteip = '192.168.1.9';
$key      = '!Open Sesame!';
$message  = "$expire,$remoteip";
$hmac     = hash_hmac('sha1', $message, $key);
trigger_error("$expire, $remoteip, $key, $message, $hmac", E_USER_NOTICE);

この出力は Apache Auth Cookie Fu module のページにあるように 5719b9e205cc63d896184c79ced2dd35a3702c18 となっています。

というわけで、apache 側、というか cookie の handling に問題があるのだと思うのだけど…

確認している問題

  • アクセス制限のあるページをクッキーなしに見ようとすると、Apache が Segment Fault で落ちる。→一度クッキーを焼くと、Forbidden になる。
  • アクセス制限があっても、Options Indexes があると、ファイルの一覧が見られる。

もうちょっと調べてみます。

Install Apollo on Mac OS X (ver. 0)

Date
2007-04-10 (Tue)
Category
Web

そろそろ Apollo でもやってみようか、と思い立ち、ファイルを用意しようと思った所、Macromedia クオリティにやられました。っていうか Mac OS X 版、インストーラついてねぇし。ファイル配置をデヴェロッパに考えさせる Framwork って…21世紀に入ってもまだ Macromedia は Macromedia だな!!とか言ってみる。まぁ Beta なので、その辺は目をつむりましょう。

もう激しく眠いので、詳しくはまた近いうちに書き直しますが、(ってそれより先に Adobe/MM がもうちょっとましな Mac 版 SDK を用意する事をキボンヌな感じですけど…)要点は、Apollo は Flex の機能拡張だということかしら。以下に手順をごく簡単にまとめます。

  1. Apollo Runtime をインストール
  2. Flex2 SDk と Apollo SDK をダウンロード
  3. Flex2 SDK を解凍
  4. shell 変数に FLEX_HOME を設定
  5. Apollow SDK を解凍
  6. 両 SDK 内の bin 以下 .exe / .bat でないものに、ユーザの path を通す
  7. Apollo フォルダ内のほぼ全てから Symlink を Flex 内に貼る
  8. Apollo/framework/apollo.xml と flex2/framework/flex-config.xml をマージ

かな。長い。また書きます。

URL designing with mod_rewrite

Date
2006-08-09 (Wed)
Category
Web

前のエントリの続きを書きたいのだけれど、ちょいと忙しいので…この project が終わったらえいやと片付けます。

SEO とか、お題目のように唱えてる人たちには興味ないけど、例えば Flickr の URL designing はクールだよね、と思います。どの web 系 MVC framework にもたいてい mod_rewrite を使って、V(View) への redirector とか入れてあるし。でもな〜、mod_rewrite 難しそうだし。だいたい introduction の文章の始まりが悪いよね。。

”膨大な設定例やドキュメントがあるにもかかわらず、 mod_rewrite は黒魔術である。かなりイケてるっぽい黒魔術だが、 やっぱり黒魔術である。“ -- Brian Moore Apache 1.3 mod_rewrite モジュール より

黒魔術だもん。しかも文の締めもスゴい否定的だし。っていうかこの文章は、5年くらい前、僕に RegEx は難しいっていうトラウマを産みつけたよね… それに比べて 2.2 のApache Module mod_rewrite はこざっぱりしている。こっちを先に読みたかった。。

解説なんかは、ググればいくらでもでてくるので、バックグラウンドでどういう風に処理してるかを、 Wordpress を例に手短に説明してみたいと思う。。

Worepress を例にとって

Worepress では管理画面 Options -> Permalinks で、permalink の構造を変えることができる。default だと、index.php をただ省略しただけで、query 文字列が丸見え ?=123 みたいに。それだとまず Ugly だし、Search Engine 的にも良くないので、static なページ風に見せましょう、ってデフォルトで二つ選択肢があります。まとめるとこんな感じ(Wordpress まま)。

Default
http://example.local/?p=123
Date and name based
http://example.local/2006/08/09/sample-post/
Numeric
http://example.local/archives/123

ようやく閑話休題。下のふたつは .htaccess ファイルを Wordpress 側で生成して、その中で mod_rewrite を使っているんだ。ははぁ、けっこう構造違うし、2種類の htaccess があって、見比べれば勉強になるかもと思った。甘かった。どちらを使っても生成される htaccess は一緒。以下転載。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

ググると URL の一部を切り取って、それを query に再構築みたいな例はいくらでも見つかるけど、それって、query を変えるたびに htaccess を書かなきゃ行けないってことでしょ!?それはちょっと…と思っていたので、Wordpress のこの方法はぜひとも理解したい。結果、黒魔法でもありませんでした。

1行目: RewriteEngine ディレクティヴ

ノーコメントで。スイッチオン。

2行目: RewriteBase ディレクティヴ

これだけはググって意味が分かった。Apache のアクセス制限: /~dareka での設定 の前後を読むといい。要するに、最終出力の URL のベースを指定する。

3〜4行目: RewriteCond ディレクティヴ

どういう条件で、URL を変更するのか、という条件を記述する。引数( %{SOME_VAR} ) はサーバ変数や、正規表現のバックリファレンス(正規表現でマッチした部分の文字列)なんかを入れられる。上記の Wordpress の例ではサーバ変数を使っていて、お尻に付いてる !-f と !-d はオプションでそれぞれ、ファイルではない、とディレクトリではない、という意味。というわけで全体では、

『リクエストされた URI がファイルあるいはディレクトリを指し示さないとき、以下のルールで URL を書き換える』

という意味でした。

5行目: RewriteRule ディレクティヴ

これが本命。実際の URL 変換ルールはここに書く。これを間違えると死ねるらしいし、ここでは一行しかないけれど何行も書いて、複雑な処理をすることもできるらしい。これに関してもググればいくらでも例があるのでそちらを参照。この文章の意味は

『一文字 (.) 以上の入力があると、それはすべて index.php にリダイレクトしてください。[L] があるので、mod_rewrite 用の処理はこれでおしまいです。』

という意味。

まとめ

え?じゃぁ URI は mod_rewrite で組み直したりしてないの?と思った人、その通り。ではどうしてるかというと、HTTP リクエスト自体をもう一度見直してそれを処理側で組み直しているのです。例えば PHP だと $_SERVER['REQUEST_URI']; とすると、HTTP リクエスト自体を取得できます。それを PHP で処理して、必要な Controller なり Model なりを適用する、と。

正直ちょっとすっきりしない。だって URI の組み直しを2箇所で別々にやってるってことでしょ?パフォーマンス悪そう。でもそのかわり柔軟性は高いねぇ。どっちがいいのかな??

Google Reader to livedoor Reader

Date
2006-05-10 (Wed)
Category
Web | javascript

Project も終わったことだし(嘘)、そろそろ livedoor Reader も試しとかないとな〜ということで、またまた OPML の季節がやって参りました。Google Reader をメインにしている人用の OPML export 術です。Bloglines を使っている人は、過去エントリ Google Reader! を参照のこと。先に云っておくと、ここで紹介する方法は全く techy ではないので、web でメールが書ける人なら誰でもできると思う。

Google Reader の場合はめちゃ簡単。Google Account にログインした状態で以下のリンクをクリック。

http://www.google.com/reader/subscriptions/export

以上。Safari だったらソースをみて保存するなり、Firefox だったらそのままページを保存するなり、ローカルファイルにして、(ファイル名は opml.xml にした方がいいかも)、livedoor Reader の“設定変更”→“データのインポート”で、Lightbox 風のウィンドウがでてきて、インポート完了。Google Reader のタグ設定がそのままフォルダに分類されます。


ちなみに上述の URL は javascript object をいじっていて見つけましたが、Official な機能として実装されています。普通は、

edit subscription {tab} -> more actions {drop down menu} -> Export subscriptions

で行けます。それにしても今回の taggit.in プロジェクトで、javascript の読み方は異常に理解したので、Google のコード読むの面白い。Object detection コードとかそのまま使えそうなのもいくつかありました。追々紹介します。

JSON

Date
2006-05-06 (Sat)
Category
Web | javascript | php

しばらく開いてしまいました。来週、ITP の Spring Show にて、Makiko Saito 氏、Sonali Sridhar氏と共同で、taggit.in というプロジェクトを出展します。平日夜ですが、お時間のある方は是非。僕もいます。その中から、いろいろ書いておきたいことはあるのですが、詳しくは発表後

製作メモとして、今回は JSON の話。

今回のプロジェクトは、いろんなページから、taggit.in にアクセスして、データを引き出す、というのものなので、AJAX の XMLHttpRequest は domain 制限により使えません。という訳で、data は JSON にして受け渡しています。サーバ側では、Hawk 氏の JSONEncoder を使って、クライアント側では、本家にある詠み人知らずの JSON.js を活用させてもらっています。

そこで一つ問題があったのが、Single Quote (x27) の扱い。仕様上 Single quote は escape しなくていい感じですが、実際しないと困ります。例えば…

var container = JSON.parse('{"a":"hello","b":"My Uncle's house."}');

parse は String を受け取るから、Single Quote か Double Quote でくくる必要があるし、Double Quote は JSON で使われてるし…結局、少し JSONEncoder 改造しました。というか、スゴい簡単だった。69行目 前後に始まる “ $this->_transTable = array( ” に "\x27" => "\'" を一つ追加しただけ。array 全体を以下に。

$this->_transTable = array(
	"\x08" => '\b',
	"\x09" => '\t',
	"\x0A" => '\n',
	"\x0C" => '\f',
	"\x0D" => '\r',
	"\x22" => '\"',
	"\x27" => "\'",
	"\x2F" => '\/',
	"\x5C" => '\\\\'
);

何か僕の知らない深遠な理由があるのかな? Single Quote を Escape しないのには…

DOM Inspector を再インストール

Date
2006-04-22 (Sat)
Category
Web

今更いうことでもないですが、僕は Firefox の大ファンです(とかいってメインは Safari ですけど…)。2004年には、Mozilla 財団に寄付して、Firefox T-shirt も持ってます。その頃は Mozilla suite もあって(というかそれがメインだった)、友人には、あの Russian avant-garde 風アイコンがプリントされた T-shirt をあげました。

さて、Firefox にはもちろん Extension をいくつか入れています。以下にそのリスト。

最近仲間入りした FireBug はめちゃくちゃ便利ですね。script エラーがページ別にみられるし、Console があるのもよい。でも Firefox が 1.0 になる前から本体付属の DOM Inspector を抜きには web 開発は語れませぬ。DOM 構造やら Javascript tree もすべてこれにおまかせ、という感じ。

さてここから本題。

このところ Windows でも作業することが多いのですが、Windows 版の DOM Inspector はたまに壊れる、というか、表示が変になることがあります。いちいち Firefox 自体を再インストールのばからしいので、どうしたもんかなと思っていたのでここにやり方をメモ。DOM Inspector は Extensions ウィンドウに現れるように、その他の Extension と同じように管理できます。つまりインストール/アンインストールが Firefox の再起動だけでできるんですね。

  • まずは Tools -> Extensions で Extensions ウィンドウを開く。
  • DOM Inspector の項目を選択して、ウィンドウ下部の Uninstall ボタンを押す。→再起動
  • ftp.mozilla.org/pub/mozilla.org/firefox/releases/へ行く
  • 使ってるバージョン → win32 → xpi → adt.xpi をクリック

という感じ。今 mac(PPC)版で試してみたらダメだった…というか、adt.xpi は win32 ディレクトリにしかないし…まぁ、Windows では直せるので無駄ではないですが、他の OS で試す時は知りません、ということで。

Web Service API の HTTP-Status code について

Date
2006-04-15 (Sat)
Category
Web

とりあえず以下3つだけですが、試した結果 どこも Status 200 を返しますね…

Google
http://www.google.com/ig/api?weather=abcde

はてな
http://b.hatena.ne.jp/xmlrpc

MovableType も
mt/mt-tb.cgi

なんでだろう?javascript が XMLHttpRequest で受け取る時に、403 とかで帰ってくるとエラーになるのかな?その点は後で確認してみましょう。

del.icio.us API の Error response について

Date
2006-04-15 (Sat)
Category
Web

del.icio.us API は request URL (正確にはアドレスの /api/ 以降、? より以前) が method で、query(アドレスの ? 以降、無い場合もある)が argument となる。かえってくるのは method によって変わる“野良”XML を返してくれる訳です。

いま、PHP の class を作ってやろうと思っているんですが、(pear もメンテされてないみたいだったから)、エラー対応をしようと思ってるんだけど、サイトにエラーに関する記述が何も無い。

例えば、tags/rename は old と new という query を必要としますが、何も request しないと…

<?xml version='1.0' standalone='yes'?>
<result>something went wrong</result>

がかえってきます。

でも、例えば、posts/add に query なしでアクセスすると…

<?xml version='1.0' standalone='yes'?>
<result code="something went wrong" />

なんでやねん。

野良 XML はいいと思うんだ。JSON でもいいけど、どっちかというと XML の方が、処理コストは高くても、data exchange format としては枯れてるし、いろんな処理系で使えるし。でもこの仕様は使いにくい…で、思いついたのは…

ステータス200なのに「その商品はありません」

で語られてるみたいに、HTTP-STATUS で返してくれると、さらに便利なのにな、と。後で、Delicious mailing list に投げてみます。

でもさ、他の API はどうなんだろう??後で実験してみよう。

Objection Detection: var is

Date
2006-03-02 (Thu)
Category
Web | javascript

前エントリ中で使ったのですが、browser detection のお話です。正確には Object Detection と呼ばれる技。

event の設定には prototype.js 内の Event.observe(...) などが、うまく抽象化されていて使いやすいんですが、設定する event handler が共通ではないとうまく行きません。今、僕のしたいことは IE vs Modern browsers で共通の event handler を見つけることは出来なさそうだったので、切り分けのコードが必要です。

var is という javascript を最初に見たのはありみかさんのあれこれ popup だったような気がするんですが、現行コードには入って無いみたいですね。というわけで調べてみました。

Quirksmode: Object detection

眠いんで説明しませんが理由付けがしっかりされています。

JavaScript Kit: Determining browser type using object detection

違う browser で使える object の表があります。

僕が今回必要なのは IE か Modern Browser(Firefox / Safari / Opera)かそうでないか、くらいなので、こんな感じでした。

var is = {
ie : document.all && !window.opera,
modern : document.getElementById && !document.all,
opera: window.opera && document.getElementById
}

try: document.all
try: document.getElementById
try: window.opera

getElementById だけだと IE 5 以上は true を返しそうです。Opera には document.all があるっぽいから、別途分けなければイケません。なので使う時には…

if (is.modern || is.opera) {
// do something for modern browsers.
} else if (is.ie) {
// do something for modern browsers.
}

こんな感じでしょうか。

DOMNodeInserted

Date
2006-03-01 (Wed)
Category
Web | javascript

僕のよくある悪い癖なのだが、思い付いたことを実現しようといろいろ調査をしていると、目的を実現できそうな切っ掛けとなる技術を発見する。本当にそれでいけんのかいな、とさらに深い調査を始めると、最初に考えていた目的を忘れて、結局その最初に見つけた技術で出来ることを全て試すことになって、あぁ { 面白かった | つまんなかった }で、何してたんだっけ? みたいなことが多い。最悪なのはその結果を全て忘れて、同じことを繰り返したりすることなんだけど、結構やっちゃうんだよね…

と言うわけで今回もまさにそれ。忘れないように個々にメモします。

最近取り組んでいる bookmarklet を使った project 用に、script tag の読み込み完了をイヴェントハンドラに出来ないかどうか調べていました。以下結果。


script tag に onload を付ける。

ちゃんとした仕様書を見つけられた無かったけれどDOM では onload は限られたエレメントでしか fire しないようです。強いて言えばここ DOM-Level-2-Events にすこし載っています。

firefox
ファイル読み込み終了後 fire する
Opera 8.51
fire しない
Windows IE 6.0
fire しない
Safari 1.3.2
fire しない

と、見事に firefox 以外は fire しません。当たり前ですね。余談ですが、Firefox では img タグでも onload が fire します。となると、src attribute がつくタグは全て onload が fire するんじゃないかと期待できそうですが、それはそれで意味が通じます。特に“読み込み終了後 fire” というのは非常に通好みと言うか。以下、実験に使ったコード抜粋です。

<script type="text/javascript" onload="javascript:void(alert('onload'));" src="alert.js"></script>

alert.js には

alert("in script");

とだけあります。

onload sample

body に Listner Object的なものを付けてscript タグの挿入を監視

上でも黙って Quirksmode にリンクしましたけれども、javascript で event 周りをやろうと思ったら Quirksmode は素晴らしい文章の宝庫です。で、ずばり The events というページはすこからさき全ての文章への portal になっている、と言うか。以下のページ群は見ているだけでも楽しい様な browser で使用できる event ハンドラが列挙されています。(Opera 向けのページは何処にあるのだろう?)

Quirksmode の記述とやや異なりますが、Safari は DOM Level 2 Events を全て実装しているとあります。Web Specifications Supported in Opera 8 によれば Opera 8 も同様のようです。Free になったのは此のバージョンですから、まぁこれが主流になると考えて差し支えないでしょう。

と言うわけで、本題の DOMNodeInserted です。仕様書より引用すると、

Fired when a node has been added as a child of another node. This event is dispatched after the insertion has taken place. The target of this event is the node being inserted.

ですから、DOM Node を何処か別の DOM Node に挿入が完了した時に fire されるようですね。試してみましょう。以下のページにて。


DOM Node Inserted Sample

タイミングを計るのは難しいですが、上記 sample ページで読み込んでいるコードはしていることは同じですが、コメントを使ってファイルサイズを稼いでいます。やってもらえばわかりますが、DOMNodeInserted で fire される alert(MutationEvent と表示される)が出てから、alert2.js の alert (in script と表示される)が呼ばれます。(分かりにくい)

あとキモはこのコードでしょうか。

document.body.addEventListener('DOMNodeInserted', function(e){
alert(e);
}, false);

DOMNodeInserted で fire される function には デフォルトで MutationEvent という object が渡されます。その property を見れば、どんな DOM Node が挿入されたかわかる、という仕組みです。


が、Windows IE でこれを実現できる event handler を見つけられていないので…結局意味ないじゃん!みたいな。ただ listener object というアイデア自体はいけそうですね。

web tech memos

Date
2006-01-31 (Tue)
Category
Web

getElementsByTagName() の使い方

getElementsByTagName() で得られる collection は配列ではないので、accessor は item(INDEX) という形。以下にコードを参照:


var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs.item(i).style.backgroundColor = '#123456';
}

上記コードを Bookmarklet で実行!

参考:Traversing an HTML table with JavaScript and DOM Interfaces

1px ボーダー の table を CSS で実現するには?

例えば table タグ自体に 上/左 側の枠線を引いて、個々の td に 下/右 側の枠線を引く。横線を引くのは tr に class か id を与えれば出来そうだけど、縦線はどうすればいいのだろう? colgroup かな?後でまた調べてみよう。

1 2 3
4 5 6
7 8 9

参考:Public CSS - border-collapse

Update log: Chap. 3 --Application setup on Server(FreeBSD)

Date
2005-11-13 (Sun)
Category
MovableType | Tech | Web

Backup がうまく行くことが解ったので、今度は Server 側の準備。前提として cvsup で ports を追いかけてあります。当然ですが。

Continue reading

Update log: Chap. 2 --MySQL backup

Date
2005-11-13 (Sun)
Category
MovableType | Tech | Web | php

大した量ではないけれど、無くなったり、文字化けしたりしたら悲しいので、慎重に行きたい database の backup 。MySQL 自体もアップデートしたいので、これを機に db ファイル群全部再構築しようと言う魂胆。

結構良くある、と思うんだけど、MySQL は良く解ってないけど、MovableType のバックエンドでは動かしてて、そろそろ理解も深めてアップデート、なと人のために…なるかもしれません。

Continue reading

Update log: Chap. 1 --preface and MySQL on Mac OS X

Date
2005-11-13 (Sun)
Category
MovableType | Tech | Web | php

長らくほったらかしだった、本サーバーのアップデートを、久々の3連休にやってみようと思い立ち、非常に苦労した、その log です。完璧自分用備忘録。

まずすべきことを考えた。

MySQL Server アップデート
MySQL Database 再構築
Apache アップデート

この3つが大きな題目。

Continue reading

Vertical Align,

Date
2005-02-28 (Mon)
Category
Web

ゴミエントリを一つ。

スタイルシート 縦中央(垂直中央)

要するに CSS だけを使って valign でやってた様な事をするのは難しいってことです。しかし上のスレは fundies 大杉。Tech 系主導でやるとこうなるっつぅことですかね…

Transparency of PNG in WinIE

Date
2005-02-26 (Sat)
Category
Web

あるサイト構築途中に気づいた事。

PNG はもはやほぼ全ての browser で表示可能です(今思ったけど、ブラウザーのマーケットシェアってどうやってだしてるんだろうね? IDG とかっどかのITコンサルかしらん?タダで見られる所って無いかなぁ??)。しかし事実上の dominant browser の IE では、PNG の一番の売りである(と思われる)透過度(Alpha チャネル)をうまく処理する事が出来ません。そこで IE5.5 以降で Alpha チャネル付きの PNG を表示するために小細工をしました。

先に言ってしまうと、僕は普通に AlphaImageLoader を使いました。Block 要素に対して Style として IE 独自拡張の filter プロパティを当てます。詳しくは msdn を。


SOME_BLOCK_ELEM {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(Src='HOGEHOGE.PNG', SizingMethod='scale');
}

僕が XHTML でレイヤー構造とか作るときは、たいてい上に載せる画像を別 div とかにするので、背景として CSS に書けば楽勝と思っていたのだけれど、うまく行かなかった。なぜだぁ!?

ハマったのは PNG のフォーマットのせいでした。手始めに PNG の format spce を。英語を読むのがメンドウな向きにはミケネコ研究所をお勧めしておきます。以上を読むと、PNG には大まかに言って3種類ある事になります。

  • Gray Scale
  • Index Color(8bit color = 256色)
  • True Color(24bit color = 約1677万色)

libpng.org に則れば正確には Gray と True には Alpha チャネル付きのモノが別項目としてあがってますから、5種類でもいいんですが… Anyway, 注目すべきは W3C の Recommendation Paper に於いて、alpha チャネル付き PNG は Gray と True color (PNG-24) でしか規定されていない、と言う事です。

僕はまだ富豪的 Web デザイナではないので、いまだにファイルサイズは小さければいいと思っています。ので、PNG も出来れば PNG-8 で済まして 数バイト単位でも小さいものを作成しています。今回のサイト制作では、ドロップシャドウの効果を得るためどうしてもその影の部分に Alpha チャネルを使いたいと思っていました。

ところで Web graphics の制作は基本的に Macromedia Fireworks MX (not MX 2004) をレイアウトに使っています。詳しくは省略しますが、いい加減に作れるのが気に入っています。ただ、より綺麗な減色 Gradation を作りたいときは Adobe Photoshop CS を使ったりしていました。その時に気がついていたのですが、Fireworks だと PNG-8 を使っても alpha チャネル設定のある色を Index カラーとして制作できますが、Photoshop だと出来ません。正確には Photoshop で PNG-8 を生成する時、Index palette に存在する単/多色を透過度 100 % の色として“抜く”ことは出来ますが、透過度 50 % の黒、といった alpha チャネル情報を作成できなかったのです。

まぁファイルサイズが小さい方が“善”だろうと思って今回全ての透過色を含む image ファイルを Fireworks で PNG-8 として作ってきましたが、それでは AlphaImageLoader ではうまく表示されないんですね!!!Macromedia の独自拡張なんでしょうか…

と言うわけで、結論。PNG で Alpha チャネル付き画像を作るときは PNG-24 にしましょう。PNG-8 では Transparent Index Color としてしか設定できません。

参照:
Behavior を使ったやり方?

A9

Date
2005-02-06 (Sun)
Category
Web

See this link. And push the "Yellow Pages" button on the right, and put 10009 in the "Near:" box.

A9.com Search: chikalicious

Or if you're a too boring person to do those steps, you can just click following link, which contains everything i wanna talk about.

Amazon.com: Yellow Pages: Chikalicious Dessert Bar

So, now you see why I am amazed by Amazon and A9 technology. I felt similar feeling when Amzon launched "Search Inside" In both cases, Amazon really does some technological leaps, but also humongous tedious tasks which cost gigantic amount of bucks.

Can you BELIEVE that? Well, it's still only like ten cities in the us, but it yet has million pictures of stores/restaurants and cafes. It's not only the store iteself. It is called "BLOCK VIEW"! You can see the pictures of the block around the point you really want to see. Here's the official explanation.

Yellow Pages on A9.com

And News.com tells the story about it.

Amazon search pictures your destination

How to "embed" media files into XHTML?

Date
2005-02-02 (Wed)
Category
Web

前のエントリの続きを読むと、実際の presentation file が見られるはずなのですが、XHTML で embed タグが使えないハズだな〜と思ってさくっと調べてみました。Object を使うんでした。でも ContentType って MIME みたいなんですけど、それってちゃんと決めてる機関とかあるのかね?MIME って言ったもん勝ちの気がするけど…

マルチメディアファイルを XHTML 文書に埋め込む @ ぽかぽかWeb研究室
XHTML Quicktime Object

CSS bug IE

Date
2005-01-23 (Sun)
Category
Web

Web 作業メモ Internet Explorer (Windows) CSSバグリスト このサイトのおかげで悩む時間はとても短くていいです。CSS をちゃんと実装してくれてるブラウザが for the rest of us, として頑張ってくれているおかげか、思い通りにコードを組んであとは IE のバグを見るだけ、といいのか悪いのか…

Continue reading

Return to Page Top