|
<<
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 | ||
31
July, 2010
リファラースパム対策 
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
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を追加しないと愉快なことになります。
15
June, 2010
swfObjectを動的ロード 
swfobjectはflashを読み込むスクリプトとしてデファクトスタンダードになっているが、複数読み込んだりしてしまうことがあるかもしれない。そこで、読み込む際に、定義済みかどうかを確認し、定義されてない場合は読み込むという形式をとるようにした方がいいと思う。
1
2
3
4
5
6
7
| - | | | | | ! | |
原理は非常に簡単。swfobjectにコードが代入されているかどうかを確認し、ない場合はGoogle CDNからswfobjectを引っ張ってくるだけである。読み込まれている場合は動的ロードの必要がないため、個々の処理はスキップされる。便利だね。
このテクニックは、onloadなどの処理を行わないものならたいてい利用できる・・・ハズ。swfobjectの分だけソースが軽くなる。
07
June, 2010
透明感のあるアイコンを作るのは難しい 

1時間かけてcrystal project
のアイコンを参考に作ってみたがどう考えてもデッドコピー。
どうやって作ったんだっけ?
まず、枠を作って上下を暗く、中央部分が明るくなるようにグラデーションかけて、レイヤーを作り上の部分が明るくなるように円形のグラデーションをかけて、オーバーレイだっけ?にして外枠を作る。
そして、アイコンの中身だけど、あれ、いくつグラデーション重ねたんだろう・・・?たしか上と下の左右中心が明るくなるように円形グラデーションをかけたんだっけ?で、その上に上から半分円形選択で選択して上半分を透過度50%の白を塗って艶をだして、仕上げに左上と右下に、艶入れをしたと思った。
でもって・・・ 
なぜか、絵もかけないクセにPixivにアカウント作成してこれをベースにしたアイコンをアップ・・・。
06
June, 2010
White Flow Plus!の開発状況 
結構難航してます・・・。そもそも、オリジナルのメニューバーのスタイルシートにかなりクセがあり、ポップアップが表示されるようになっている。それだけならまだしも、liタグを使ってない部分はdisplay:noneで、とことん表示されないと言うトンデモ設計。このスタイルシートだと、メニューにカレンダーを入れたり、amazonの商品を設置したりすることが不可能である。あと、メニューごとに空白行を入れないと同時に複数のメニューが表示されてしまうと言う問題があった。初回リリース版ではsuperfishの処理を当てたところマシにはなったが・・・。
編集画面のデザインが崩れるので、調査していたらIE7モードで描画していることが原因と判明。どうやら、IEは8未満は切ることになりそうだ。オリジナルの状態でも、とりあえず、作るならWiki上で右上のツールバーも変更できる方がいい。というわけでxxxlogueで使っているsukerfishプラグインをのDOM構造だけ流用してsuperfishでポップアップさせることにした。幸い、ナビゲーター部分とメニューバー表示部分のDOMが分かれているので、メニュー部分は通常の描画になるようにスタイルシート修正しよう。
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は嫌いである。
30
May, 2010
嘘を嘘と見抜くのは難しい 
時々思うことがある。果たして自分に入ってくる情報のどの程度が本当なのか?例えば、テレビで流れるニュース。有名人の問題発言で話題になることがある。以前、「女性は人を産む機械」で話題になった政治家がいたが、実際は・・・
「今の女性が子供を一生の間にたくさん、あの、大体、この人口統計学ではですね、女性は15歳から50歳までが、まあ出産をしてくださる年齢なんですが、15歳から50歳の人の数を勘定すると、もう大体分かるわけですね。それ以外産まれようがない。急激に男が産むことはできないわけですから。特に今度我々が考えている2030年ということになりますと、その2030年に、例えば、まあ二十歳になる人を考えるとですね、今いくつ、もう7、8歳になっていなきゃいけないということなんです。生まれちゃってるんですよ、もう。30年のときに二十歳で頑張って産むぞってやってくれる人は。そういうことで、あとはじゃあ、産む機械っちゃあなんだけど、装置がもう数が決まっちゃったと。機械の数・装置の数っちゃあなんだかもしれないけれども、そういう決まっちゃったということになると、後は一つの、ま、装置って言ってごめんなさいね。別に、この産む役目の人が一人頭で頑張ってもらうしかないんですよね、みなさん」
である。どこにも産む機械なんて書いてない。国を人間の生命維持装置として考えると、当然そういう比喩になってくると思う。いくら、綺麗事を並べたところで、数字には叶わない。世の中こういった要約だけで判断してしまっていることが多いんじゃないかと思う。言うまでもなくネットの世界でもそうである。ネットは、テレビと違って反論をする人がいるものの不十分である。
そう考えると、すべてがまやかしに感じられるのは気のせいだろうか?カイジ風に言えば「リアルがない」ってことなんだろうけど。
16
May, 2010
ボタンを画像なしでカスタマイズせよ! 
さて、もうお気づきかと思うが、最近Googleのボタンのデザインが変わった。ソースを見ても画像が使われていない。これも、CSSだけでやっているらしい。というわけで、前回の角丸半透明ボックスにドロップシャドウに続いてボタンをカスタマイズしてみようと思う。
まず、ボタンに関するタグだが、ここでは「属性セレクタ」というものを使って、指定されたタグでなおかつ指定された属性のみを選択するようにする。ボタンに関係するタグは、buttonタグと、inputタグのtype属性がsubmitとresetのものである。したがってCSSで選択する場合以下のようになる。まぁ、厳密には、imageも含まれるだろうが、今日日のサイトで使っているのを見たことが無いので除外。
- input[type='submit']
- input[type='reset']
- input[type='button']
- button
とりあえず、灰色のボタンを作ろう。ただ、普通に作るとボタン同士がくっついてしまうので、margin:2px;を追加。
1
2
3
4
5
6
7
| - | | | | | ! | |
では、グラデーションを加える。Operaではグラデーションが使えないので例によってGradient CSS Generetor
を使う。高さは32ぐらいでいいだろう。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| - | | | | | | | | | | | | | | | ! | |
どうだろうか。これだけで立体感が出る。
こんどは、box-shadowで影をつけてみよう。なお、IEはこれと同等の処理がないためShadowフィルタで代用する。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| - | | | | | | | | | | | | | | | | | | | | ! | |
ちなみに、IEはこうなる。まぁ仕方が無いね。
ボタンはやっぱり角丸じゃないと・・・ 
border-radiusを使って角丸ボタンにする。なお、ここからさきは、IEでは効果がでない。
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
| - | | | | | | | | | | | | | | | | | | | | | | | ! | |
うーん、クールだね。
最近話題のtext-shadowを使う 
最近text-shadowを使っているサイトが増えてきた。結構昔からある要素だが、IEのシェア低下と、CSS3の広がりから話題になり始めている。これは、ブラウザ依存の要素ではないため、単純にtext-shadowを入れるだけで反映される。
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
| - | | | | | | | | | | | | | | | | | | | | | | | | ! | |
どうだろう。立体感が出てきただろう。
ハイライトを変更しよう 
さて、このままだとボタンをクリックした時やマウスが乗っかった時の質感がでない。そこで、その時のスタイルも変更しよう。今度は「擬似クラス」を用いて指定する。擬似クラスリンクの色を変更するときによく使う:link、:visited、:hover;、:activeである。この他にもいろいろあるが、今回使用するのは、マウスが乗っかった時の、:hoverと、クリックした時の、:activeである。
まずは、マウスが乗っかった時の:hoverから。
1
2
3
4
5
6
7
8
9
10
11
| - | | | | | | | | | ! | |
次に、クリック時の:activeだ。ここでは、マウスをクリックしたときにボタンが押し込まれるようにアニメーションさせるため、position: relative; top: 1px;を追加する。色は、通常時のグラデーションを反転させるでいいだろう。また、押し込んでいる状態なので、ドロップシャドウは解除する。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| - | | | | | | | | | | | | | | | | | | ! | |
これで完成だ。IEの場合、:activeの反応が鈍いなどと問題があるが、概ね立体感のあるボタンが作れたと思う。
サンプル 
14
May, 2010
クロスブラウザで角丸半透明ボックスにドロップシャドウ(w 
クロスブラウザで、角丸ボックスにグラデーションを入れて、さらにドロップシャドウをかけると言うクレイジーな企画である。IEはCSS3を全然サポートしていない、Firefox、Safari/Chromeは独自企画、正式にサポートしているのはOperaだけときた。この難題をどうするか?
結局こうなった。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| - | | | | | | | | | | | | | | | | | | | | | | ! | |
解説 
とはいっても、実質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)

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
をマージして高速化してコミットしたら面白いかも。





