blog

31
July, 2010

Prev
blog

リファラースパム対策

deny from 58.1.240.201
deny from 58.3.40.28
deny from 58.3.47.46
deny from 58.138.45.5
deny from 58.183.9.84
deny from 58.188.67.216
deny from 59.143.162.165
deny from 59.190.38.2
deny from 60.33.192.16
deny from 60.236.82.241
deny from 61.23.10.149
deny from 61.45.30.213
deny from 61.117.167.193
deny from 61.204.195.126
deny from 61.205.47.74
deny from 61.214.20.145
deny from 61.245.54.144
deny from 130.76.32.144
deny from 110.0.118.112
deny from 110.0.159.152
deny from 110.161.9.195
deny from 111.109.75.146
deny from 111.89.113.81
deny from 112.138.191.229
deny from 113.146.23.245
deny from 114.152.12.197
deny from 114.153.147.51
deny from 114.155.46.212
deny from 114.166.163.221
deny from 114.166.24.34
deny from 114.176.133.83
deny from 114.183.70.188
deny from 114.183.70.188
deny from 114.185.13.125
deny from 114.186.179.231
deny from 115.124.246.226
deny from 115.177.158.94
deny from 115.177.245.191
deny from 116.91.21.177
deny from 118.0.82.170
deny from 118.155.241.135
deny from 118.157.48.214
deny from 118.17.193.146
deny from 118.22.106.200
deny from 119.150.30.244
deny from 119.175.40.188
deny from 119.228.161.209
deny from 119.228.167.143
deny from 119.239.240.36
deny from 119.245.1.164
deny from 119.245.101.179
deny from 121.117.4.180
deny from 121.117.4.237
deny from 121.118.74.251
deny from 121.200.168.109
deny from 121.84.104.99
deny from 121.84.235.149
deny from 121.94.28.12
deny from 121.95.217.168
deny from 122.209.90.253
deny from 122.30.11.234
deny from 123.216.7.45
deny from 123.217.255.90
deny from 123.222.230.23
deny from 123.48.54.1
deny from 124.101.101.185
deny from 124.154.106.196
deny from 124.25.247.10
deny from 124.84.145.82
deny from 124.84.212.4
deny from 125.0.134.107
deny from 125.206.26.129
deny from 125.3.116.182
deny from 125.3.123.11
deny from 125.54.9.7
deny from 126.108.135.186
deny from 126.108.24.69
deny from 126.117.11.93
deny from 126.119.192.9
deny from 130.76.32.144
deny from 175.104.248.185
deny from 175.28.162.214
deny from 180.13.122.59
deny from 180.13.133.220
deny from 180.16.61.60
deny from 180.2.159.102
deny from 180.4.69.155
deny from 202.155.88.121
deny from 202.226.91.244
deny from 203.223.56.152
deny from 210.136.21.164
deny from 210.148.234.172
deny from 210.165.74.182
deny from 210.234.157.84
deny from 211.120.162.135
deny from 211.124.60.77
deny from 218.124.47.12
deny from 218.219.97.33
deny from 218.221.205.117
deny from 218.227.23.101
deny from 218.45.84.141
deny from 219.112.122.6
deny from 219.112.34.151
deny from 219.114.240.25
deny from 219.119.114.157
deny from 219.120.71.58
deny from 219.121.218.77
deny from 219.166.164.153
deny from 219.17.84.5
deny from 219.187.184.2
deny from 219.203.100.2
deny from 219.208.92.39
deny from 219.214.0.35
deny from 219.52.212.20
deny from 219.52.212.55
deny from 220.100.72.137
deny from 220.100.72.51
deny from 220.102.37.16
deny from 220.104.29.253
deny from 220.107.167.78
deny from 220.11.231.117
deny from 220.15.154.221
deny from 220.15.154.221
deny from 220.217.21.212
deny from 220.221.252.209
deny from 220.25.244.8
deny from 220.28.162.221
deny from 220.32.222.116
deny from 220.41.110.40
deny from 220.97.150.231
deny from 221.185.219.125
deny from 221.185.223.149
deny from 221.185.245.243
deny from 221.188.171.15
deny from 221.190.73.245

Trackback(0)

07
July, 2010

jQueryUI BlockUI

jQueryUIでajax通信時にローディング画像を中央に表示する。

http://pure-essence.net/2010/01/29/jqueryui-dialog-as-loading-screen-replace-blockui/�a>��参考に作成。

スクリプト：

$(window).ready(function(){
	$('<div id="loadingScreen"></div>').appendTo('body');
	var loadingScreen = $("div#loadingScreen");
	loadingScreen.dialog({
		autoOpen: false,	// set this to false so we can manually open it
		dialogClass: "loadingScreenWindow",
		closeOnEscape: false,
		draggable: false,
		width: 100,
		height: 100,
		modal: true,
		show: 'fade',
		hide: 'fade',
		buttons: {},
		resizable: false,
		open: function() {
			// scrollbar fix for IE
			$('body').css('overflow','hidden');
		},
		close: function() {
			// reset overflow
			$('body').css('overflow','auto');
		}
	}); // end of dialog
	$(document).ajaxStart(function(){
		$('body').css('cursor','wait');
		loadingScreen.dialog('open');
	}).ajaxStop(function(){
		loadingScreen.dialog('close');
		$('body').css('cursor','auto');
	});
});

スタイルシート

/* jQueryUI BlockUI */
div#loadingScreen {
	width:100px;
	height:100px;
	cursor:progress;
	background: url(loading.gif) no-repeat;
}

/* タイトルバーを隠す */
div.loadingScreenWindow .ui-dialog-titlebar {
	display: none;
}

「ツールチップもajaxで読みとってるよ。」って人は、ツールチップのajax処理にglobal:falseを追加しないと愉快なことになります。

Trackback(0)

15
June, 2010

swfObjectを動的ロード

swfobjectはflashを読み込むスクリプトとしてデファクトスタンダードになっているが、複数読み込んだりしてしまうことがあるかもしれない。そこで、読み込む際に、定義済みかどうかを確認し、定義されてない場合は読み込むという形式をとるようにした方がいいと思う。

-
|
|
|
|
|
!

if(typeof(swfobject) == 'undefined'){
    var tag = document.createElement("script");
    tag.type = 'text/javascript';
    tag.async = 'async';
    tag.src = 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tag);
}

原理は非常に簡単。swfobjectにコードが代入されているかどうかを確認し、ない場合はGoogle CDNからswfobjectを引っ張ってくるだけである。読み込まれている場合は動的ロードの必要がないため、個々の処理はスキップされる。便利だね。

このテクニックは、onloadなどの処理を行わないものならたいてい利用できる・・・ハズ。swfobjectの分だけソースが軽くなる。

Trackback(0)

07
June, 2010

透明感のあるアイコンを作るのは難しい

1時間かけてcrystal projectのアイコンを参考に作ってみたがどう考えてもデッドコピー。

どうやって作ったんだっけ？

まず、枠を作って上下を暗く、中央部分が明るくなるようにグラデーションかけて、レイヤーを作り上の部分が明るくなるように円形のグラデーションをかけて、オーバーレイだっけ？にして外枠を作る。

そして、アイコンの中身だけど、あれ、いくつグラデーション重ねたんだろう・・・？たしか上と下の左右中心が明るくなるように円形グラデーションをかけたんだっけ？で、その上に上から半分円形選択で選択して上半分を透過度５０％の白を塗って艶をだして、仕上げに左上と右下に、艶入れをしたと思った。

でもって・・・

なぜか、絵もかけないクセにPixivにアカウント作成してこれをベースにしたアイコンをアップ・・・。

http://www.pixiv.net/member.php?id=2052816

Trackback(0)

06
June, 2010

White Flow Plus!の開発状況

結構難航してます・・・。そもそも、オリジナルのメニューバーのスタイルシートにかなりクセがあり、ポップアップが表示されるようになっている。それだけならまだしも、liタグを使ってない部分はdisplay:noneで、とことん表示されないと言うトンデモ設計。このスタイルシートだと、メニューにカレンダーを入れたり、amazonの商品を設置したりすることが不可能である。あと、メニューごとに空白行を入れないと同時に複数のメニューが表示されてしまうと言う問題があった。初回リリース版ではsuperfishの処理を当てたところマシにはなったが・・・。

編集画面のデザインが崩れるので、調査していたらIE7モードで描画していることが原因と判明。どうやら、IEは8未満は切ることになりそうだ。オリジナルの状態でも、とりあえず、作るならWiki上で右上のツールバーも変更できる方がいい。というわけでxxxlogueで使っているsukerfishプラグインをのDOM構造だけ流用してsuperfishでポップアップさせることにした。幸い、ナビゲーター部分とメニューバー表示部分のDOMが分かれているので、メニュー部分は通常の描画になるようにスタイルシート修正しよう。

Trackback(0)

04
June, 2010

ajaxで困ったこと

DojoだろうがjQueryだろうが共通して困った問題がある。ajaxで読み込んだHTMLに<script>タグが含まれていると実行されてしまうところだ。しかも、立ちが悪いことにIEでは実行される時とされないときがある。中途半端に実行されるため非常に困る。実行されるならDijitやjQuery UIなどでフォームを拡張するときにajaxで読み込む処理にスクリプトを再実行する処理が不要になるため便利だが、ブラウザ依存の場合そういう使い方ができない。

というか、ajaxでページを非同期読み込みする時点で、DOM構造が変わってしまっているためID属性で指定でもしない限りメリットはなさそうだが・・・。いずれにしても、ajaxで読み込んだあとのDOM構造まで考えた上で設計しなければならないので使いかっては悪いだろう。（そんな設計するくらいなら、自分は、表示部分と、表示された時実行される関数を入れたjsonpを使う！）そうなると、この仕様は不便である。例えば、MabiAssistでは、rssを読み込む処理で読み込むRSSにscriptタグが含まれていてひどい目にあった。

フレームワークで簡単に非同期通信ができるようになった反面、もしも読み込み先のページに悪意のあるスクリプトタグが含まれていた場合、XSSの脆弱性の原因になるのではないだろうか？安易にajaxを使うのは考えものである。ここまで考えているプログラマーはいるのだろうか？Googleで検索かけてもあまりにも情報がヒットしなさすぎるなだけに不安である。

prototype.jsにはstripScripts()という関数が用意されているらしいがそれだけのために別のフレームワーク使うのはどうかと思うし、そもそもprototype.jsは嫌いである。

Trackback(0)

30
May, 2010

嘘を嘘と見抜くのは難しい

時々思うことがある。果たして自分に入ってくる情報のどの程度が本当なのか？例えば、テレビで流れるニュース。有名人の問題発言で話題になることがある。以前、「女性は人を産む機械」で話題になった政治家がいたが、実際は・・・

「今の女性が子供を一生の間にたくさん、あの、大体、この人口統計学ではですね、女性は15歳から50歳までが、まあ出産をしてくださる年齢なんですが、15歳から50歳の人の数を勘定すると、もう大体分かるわけですね。それ以外産まれようがない。急激に男が産むことはできないわけですから。特に今度我々が考えている2030年ということになりますと、その2030年に、例えば、まあ二十歳になる人を考えるとですね、今いくつ、もう7、8歳になっていなきゃいけないということなんです。生まれちゃってるんですよ、もう。30年のときに二十歳で頑張って産むぞってやってくれる人は。そういうことで、あとはじゃあ、産む機械っちゃあなんだけど、装置がもう数が決まっちゃったと。機械の数・装置の数っちゃあなんだかもしれないけれども、そういう決まっちゃったということになると、後は一つの、ま、装置って言ってごめんなさいね。別に、この産む役目の人が一人頭で頑張ってもらうしかないんですよね、みなさん」

である。どこにも産む機械なんて書いてない。国を人間の生命維持装置として考えると、当然そういう比喩になってくると思う。いくら、綺麗事を並べたところで、数字には叶わない。世の中こういった要約だけで判断してしまっていることが多いんじゃないかと思う。言うまでもなくネットの世界でもそうである。ネットは、テレビと違って反論をする人がいるものの不十分である。

そう考えると、すべてがまやかしに感じられるのは気のせいだろうか？カイジ風に言えば「リアルがない」ってことなんだろうけど。

Trackback(0)

16
May, 2010

ボタンを画像なしでカスタマイズせよ！

さて、もうお気づきかと思うが、最近Googleのボタンのデザインが変わった。ソースを見ても画像が使われていない。これも、CSSだけでやっているらしい。というわけで、前回の角丸半透明ボックスにドロップシャドウに続いてボタンをカスタマイズしてみようと思う。

まず、ボタンに関するタグだが、ここでは「属性セレクタ」というものを使って、指定されたタグでなおかつ指定された属性のみを選択するようにする。ボタンに関係するタグは、buttonタグと、inputタグのtype属性がsubmitとresetのものである。したがってCSSで選択する場合以下のようになる。まぁ、厳密には、imageも含まれるだろうが、今日日のサイトで使っているのを見たことが無いので除外。

input[type='submit']
input[type='reset']
input[type='button']
button

とりあえず、灰色のボタンを作ろう。ただ、普通に作るとボタン同士がくっついてしまうので、margin:2px;を追加。

-
|
|
|
|
|
!

input[type='submit'], input[type='reset'], input[type='button'], button {
    text-decoration: none;
    border:1px solid grey;
    color:black;
    background-color: gainsboro;
    margin:2px;
}

では、グラデーションを加える。Operaではグラデーションが使えないので例によってGradient CSS Generetorを使う。高さは32ぐらいでいいだろう。

-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
!

input[type='submit'], input[type='reset'], input[type='button'],button {
    text-decoration: none;
    border:1px solid grey;
    color:black;
    background-color: gainsboro;
    margin:2px;
    /* other */
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmbzfZ+87yvP88h933Jdl5znKcdxyL7vsm2brOsqy7LIPM8yTZOM4yjDMEjf9/L7/aTrOmnbVpqmkbqupaoqKctSiqKQPM8lyzJJ01SSJJE4jiWKIgnDUIIg8A9qu3jB7icwNQAAAABJRU5ErkJggg==");
    background-repeat:repeat-x;
    /* MSIE */
    filter:
        progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro);
    /* FireFox */
    background: -moz-linear-gradient(top,  white, gainsboro);
    /* Safari / Chrome */
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
}

どうだろうか。これだけで立体感が出る。

こんどは、box-shadowで影をつけてみよう。なお、IEはこれと同等の処理がないためShadowフィルタで代用する。

-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
!

input[type='submit'], input[type='reset'], input[type='button'],button {
    text-decoration: none;
    border:1px solid grey;
    color:black;
    background-color: gainsboro;
    margin:2px;
    /* other */
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmbzfZ+87yvP88h933Jdl5znKcdxyL7vsm2brOsqy7LIPM8yTZOM4yjDMEjf9/L7/aTrOmnbVpqmkbqupaoqKctSiqKQPM8lyzJJ01SSJJE4jiWKIgnDUIIg8A9qu3jB7icwNQAAAABJRU5ErkJggg==");
    background-repeat:repeat-x;
    /* CSS3 */
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    /* MSIE */
    filter:
        progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro)
        progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#333333');
    /* FireFox */
    background: -moz-linear-gradient(top,  white, gainsboro);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    /* Safari / Chrome */
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

ちなみに、IEはこうなる。まぁ仕方が無いね。

ボタンはやっぱり角丸じゃないと・・・

border-radiusを使って角丸ボタンにする。なお、ここからさきは、IEでは効果がでない。

-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
!

input[type='submit'], input[type='reset'], input[type='button'],button {
    text-decoration: none;
    border:1px solid grey;
    color:black;
    background-color: gainsboro;
    margin:2px;
    /* other */
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmbzfZ+87yvP88h933Jdl5znKcdxyL7vsm2brOsqy7LIPM8yTZOM4yjDMEjf9/L7/aTrOmnbVpqmkbqupaoqKctSiqKQPM8lyzJJ01SSJJE4jiWKIgnDUIIg8A9qu3jB7icwNQAAAABJRU5ErkJggg==");
    background-repeat:repeat-x;
    /* CSS3 */
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    border-radius: .5em;
    /* MSIE */
    filter:
        progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro)
        progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#333333');
    /* FireFox */
    background: -moz-linear-gradient(top,  white, gainsboro);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-border-radius: .5em;
    /* Safari / Chrome */
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -webkit-border-radius: .5em;
}

うーん、クールだね。

最近話題のtext-shadowを使う

最近text-shadowを使っているサイトが増えてきた。結構昔からある要素だが、IEのシェア低下と、CSS3の広がりから話題になり始めている。これは、ブラウザ依存の要素ではないため、単純にtext-shadowを入れるだけで反映される。

-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
!

input[type='submit'], input[type='reset'], input[type='button'],button {
    text-decoration: none;
    border:1px solid grey;
    color:black;
    background-color: gainsboro;
    margin:2px;
    /* other */
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmbzfZ+87yvP88h933Jdl5znKcdxyL7vsm2brOsqy7LIPM8yTZOM4yjDMEjf9/L7/aTrOmnbVpqmkbqupaoqKctSiqKQPM8lyzJJ01SSJJE4jiWKIgnDUIIg8A9qu3jB7icwNQAAAABJRU5ErkJggg==");
    background-repeat:repeat-x;
    /* CSS3 */
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    border-radius: .5em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    /* MSIE */
    filter:
        progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro)
        progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#333333');
    /* FireFox */
    background: -moz-linear-gradient(top,  white, gainsboro);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-border-radius: .5em;
    /* Safari / Chrome */
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -webkit-border-radius: .5em;
}

どうだろう。立体感が出てきただろう。

ハイライトを変更しよう

さて、このままだとボタンをクリックした時やマウスが乗っかった時の質感がでない。そこで、その時のスタイルも変更しよう。今度は「擬似クラス」を用いて指定する。擬似クラスリンクの色を変更するときによく使う:link、:visited、:hover;、:activeである。この他にもいろいろあるが、今回使用するのは、マウスが乗っかった時の、:hoverと、クリックした時の、:activeである。

まずは、マウスが乗っかった時の:hoverから。

-
|
|
|
|
|
|
|
|
|
!

input[type='submit']:hover, input[type='reset']:hover, input[type='button']:hover, button:hover {
    text-decoration: none;
    background-color: grey;
    filter:
        progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=lightgrey,EndColorStr=silver)
        progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#333333');
    background: -moz-linear-gradient(top,  lightgrey, silver);
    background: -webkit-gradient(linear, left top, left bottom, from(lightgrey), to(silver));
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAkUlEQVQImQXBiw6BAAAF0PszSaSkpF8hhDxCiB9gGIZhHsMwDOMvr3Ng9X6E1f0SqeBDmMGbMDsvItl+EkbrQRj+ndD9G6E3r0SicSG0+pnQvBMR946EWjsQanVPKJUdoZS3RMzdELK7JuTSiogWl0SksCAizpyQnBkh5adEODchxOyYEO0REbKHhJAZEEK6zz/rh0TRW/woagAAAABJRU5ErkJggg==");
    background-repeat:repeat-x;
}

次に、クリック時の:activeだ。ここでは、マウスをクリックしたときにボタンが押し込まれるようにアニメーションさせるため、position: relative; top: 1px;を追加する。色は、通常時のグラデーションを反転させるでいいだろう。また、押し込んでいる状態なので、ドロップシャドウは解除する。

-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
!

input[type='submit']:active, input[type='reset']:active, input[type='button']:active, button:active {
    position: relative;
    top: 1px;
    /* other */
    background-color: white;
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmYTBIGEYShRFEkcx5IkiaRpKlmWSZ7nUhSFlGUpVVVJXdfSNI20bStd18nv95O+72UYBhnHUaZpknmeZVkWWddVtm2Tfd/lOA45z1Ou65L7vuV5HnnfV77v8w8MKnjBigVjXQAAAABJRU5ErkJggg==");
    background-repeat:repeat-x;
    /* css3 */
    box-shadow: 0 0 0 rgba(0,0,0,0);
    /* MSIE */
    filter:
        progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=gainsboro,EndColorStr=white)
        progid:DXImageTransform.Microsoft.Shadow(Strength=0);
    /* FireFox */
    background: -moz-linear-gradient(top,  gainsboro, white);
    -moz-box-shadow: 0 0 0 rgba(0,0,0,0);
    /* Safari / Chrome */
    -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
    background: -webkit-gradient(linear, left top, left bottom, from(gainsboro), to(white));
}

これで完成だ。IEの場合、:activeの反応が鈍いなどと問題があるが、概ね立体感のあるボタンが作れたと思う。

サンプル

button test.html

Trackback(0)

14
May, 2010

クロスブラウザで角丸半透明ボックスにドロップシャドウ（ｗ

クロスブラウザで、角丸ボックスにグラデーションを入れて、さらにドロップシャドウをかけると言うクレイジーな企画である。IEはCSS3を全然サポートしていない、Firefox、Safari/Chromeは独自企画、正式にサポートしているのはOperaだけときた。この難題をどうするか？

結局こうなった。

-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
!

.rounded_gradient_dropshadow{
    /* CSS3 (Opera) */
    opacity:0.9;
    border-radius: 3px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
    /* IE */
    filter:
        alpha(opacity=90)
        progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro)
        progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999') !important;
    /* FireFox */
    -moz-opacity:0.9;
    -moz-border-radius: 3px;
    -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
    background: -moz-linear-gradient(top, white, gainsboro);
    /* Safari / Google Chrome */
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
    /* Others */
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAiUlEQVQYlWXERw6DMBRAQe5/RoppNr0ZMGAg2XwpT8osJnjf9xP8ep6H3ffNvPfsui7pPE92HAdzzrF939m2bWxdV2atlZZl+WueZ2maJjaOIxuGgfV9z7quk9q2ZU3TsLquWVVVzBjDtNasLEtWFIWU5znLsoylacqUUixJEhbHMYuiSArDEH0BTjt5gLTGwUIAAAAASUVORK5CYII=");
    background-repeat:repeat-x;
    background-color:gainsboro;
}

解説

とはいっても、実質IEとその他だけだが、IEではフィルタ機能を使っている。このフィルタと言う機能は結構歴史があり、少なくとも、自分がMacでIE5を使ってた頃からあった。当時のHTML参考書によると、IE4.5でも使えたらしい。要は、IEからDirectXの機能を叩けるというものらしいが、当時使われてたサイトをほとんど見たことがなかった。で、入れてあるサイトに限って表示が極端に重い。しかも、同じIEでもMacでは反映されないと言うとんでもないシロモノ。（そのくせ、PNGはMac版では正常に表示されるのにWindowsではちゃんと表示されない中途半端さ）

もっとも、当時は、ポップアップメニューを使うサイトでさえ重いと感じたんだから仕方がないね。かくいう自分もそういうサイトを作っていた→http://pro.logue.be/tf/

この他にも、画像を切り替えるときにフェードイン、フェードアウトなどのトラジションがあったりと、結構奥が深い。

話はずれたが、IEではこのフィルタ機能をフルに使っている。しかし、ドロップシャドウの機能がないので、Shadowフィルタで代用している。これは斜めにグラデーションをつけているだけだが、このさいだから、仕方がない。もちろん、ie-css3.htcを使えば可能だが、例えば、スクリプトでフキダシを出すような処理をさせると、ちゃんと動かない。おそらく、この処理とかち合っているのだろう。あれは動的にCSSを書き換えてアニメーションさせているので、対応させるにはそのスクリプトも書き換えなければならないだろう。

したがって、IEでは角丸にならない。

FireFox

これも実は曲者で、この-moz-linear-gradientがサポートされたのはつい最近。3.6からである。それ以前のバージョンで見ると間抜けな事になる。

結局まともに表示出来るのは、OperaとSafari/Chrome(WebKit)だけである。

その他のブラウザは？

その他のブラウザではしかたがないので、グラデーションのpngを背景にしてある。これは、Gradient CSS Generatorを用いて生成した。このバイナリは何？というと、dataスキーマーで作った24bitアルファチャンネルいりのPNGファイルである。これを横に並べることで擬似的にグラデーションが掛かっているように見ることができる。

ただし、画像という都合上、上の方法と比較してボックスの大きさが変化してもグラデーションの位置が変わらないと言う欠点がある。

IEでも、dataスキーマーサポートしてれば、JavaScriptだけで画像などといったバイナリを書いたりすることができるんだが・・・。

どうなるの？

IE
Firefox
Safari(WebKit)

Trackback(0)

11
May, 2010

JavaScriptでマルチスレッド？

Workerオブジェクトでマルチスレッドが実装できるらしい。

var worker = new Worker("worker.js");

しかし、Webプログラムにおける、マルチスレッドってなんだろう？PHPにしろ、Perlにしろ、処理が始まって、ページが表示された時点で処理は終わるので、あまり恩恵がない気がするが・・・。言い換えると、Webプログラムの世界は、ディスクトップで言う、アプリケーションを開いたあと、ブラウザにページが表示された時点で、終了する世界なのだ。むしろ求められているのは、公いった処理をキャッシュで実行出来るようにするという事なのではないだろうか？

そもそも、マルチスレッドでやるという発想をWebプログラムに組み込むとどういう風になるのだろうか？バックグラウンドでやるような処理はcron使うし・・・。

Workerオブジェクトに話を戻そう。

これはDOMにアクセス出来ないと言う問題があるらしい。つまり、Dijitなり、jQuery UIなりでリッチフォームを生成する処理と同時進行で、そのフォームにバリデーターをイベントリスナで組み込むというような事はできないらしい。DOM処理はJavaScriptにおいての根幹じゃないだろうか？

と、翌々考えてみれば結構メリットあるかもしれない。Mabinogi Assistを作るために作ったローカルファイルを操作するフレームワークと、Iniファイル操作フレームワーク、特に、JavaScriptでGZip圧縮なんかすごいかもしれない。

が、しかし！

IEでは使えないらしい・・・。しかし、Google先生を侮ってはいけない。Google:worker js ieで検索すると、作ってる人はいるものである。 http://code.google.com/p/ie-web-worker/source/browse/trunk/worker.js

しかし、ソースを見る限り、ajaxでスクリプトを読み込んで<head>タグ内に貼りつけてるだけのような。これじゃあ、Lorelei.requireと同じじゃんか・・・。いや、fastinit.jsをマージして高速化してコミットしたら面白いかも。

Trackback(0)

Last-modified: Fri, 11 Mar 2005 01:16:45 HADT (2002d)

Founded by Logue

⇪Top

31
July, 2010

リファラースパム対策

07
July, 2010

jQueryUI BlockUI

15
June, 2010

swfObjectを動的ロード

07
June, 2010

透明感のあるアイコンを作るのは難しい

でもって・・・

06
June, 2010

White Flow Plus!の開発状況

04
June, 2010

ajaxで困ったこと

30
May, 2010

嘘を嘘と見抜くのは難しい

16
May, 2010

ボタンを画像なしでカスタマイズせよ！

ボタンはやっぱり角丸じゃないと・・・

最近話題のtext-shadowを使う

ハイライトを変更しよう

サンプル

14
May, 2010

クロスブラウザで角丸半透明ボックスにドロップシャドウ（ｗ

解説

FireFox

その他のブラウザは？

どうなるの？

11
May, 2010

JavaScriptでマルチスレッド？

recent(20)

today's(10)

<< 2010.9 >> [blog]
Sun	Mon	Tue	Wed	Thu	Fri	Sat
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

blog

31 July, 2010

リファラースパム対策

07 July, 2010

jQueryUI BlockUI

15 June, 2010

swfObjectを動的ロード

07 June, 2010

透明感のあるアイコンを作るのは難しい

でもって・・・

06 June, 2010

White Flow Plus!の開発状況

04 June, 2010

ajaxで困ったこと

30 May, 2010

嘘を嘘と見抜くのは難しい

16 May, 2010

ボタンを画像なしでカスタマイズせよ！

ボタンはやっぱり角丸じゃないと・・・

最近話題のtext-shadowを使う

ハイライトを変更しよう

サンプル

14 May, 2010

クロスブラウザで角丸半透明ボックスにドロップシャドウ（ｗ

解説

FireFox

その他のブラウザは？

どうなるの？

11 May, 2010

JavaScriptでマルチスレッド？

recent(20)

today's(10)

31
July, 2010

07
July, 2010

15
June, 2010

07
June, 2010

06
June, 2010

04
June, 2010

30
May, 2010

16
May, 2010

14
May, 2010

11
May, 2010