2008-06-07 (土)
■ Canvas/VML を用いた角丸コーナープラグイン
Cornerz プラグインがバージョンアップしていたので、 同じようなプラグインをいくつか紹介しておきます。
あとは、jQuery 用ではないですがこんなのも。
角丸用の画像を用意しなくても良いので、 デザインを決めるような段階で、いろいろ丸くしてみるのに使うと便利です。
2008-06-09 (月)
■ GeSHi 1.0.7.22 がリリース
GeSHi は PHP で書かれたシンタックスハイライタです。 約２ヶ月半ぶりに新バージョンがリリースされました。 それに合わせて、拙作の PukiWiki 用プラグイン (geshi.inc.php) で用いるスタイルシートもアップデートしておきました。
このバージョンでは、以下の言語に新しく対応しています。
- glSlang
- KiXtart
- Lotus Notes @Formulas
- LotusScript
- MXML
- Scala
- ActionScript 3
- GNU Gettext .po/.pot
- Verilog
他にも、バグフィックスや高速化がされていますが、 目に見える変化として、以下の言語のカラースキームが変更されています。
- Assembler (x86)
- Bash
- C
- C#
- Delphi
- Fortran77
- glSlang
- Java & Java 5
- JavaScript
- OCaml
- OpenOffice.org Basic
- Pascal
- Perl
- PHP and PHP-Brief
どんな見た目になったのかは、公式ページのデモを見て下さい。 配色を手直しすると聞いていたので少し期待していたのですが、 なんだか地味な配色に変わっていて微妙な感じです。
2008-06-10 (火)
■ SIE 0.25 がリリース
SIE の新パージョンが公開されました。 SIE は Internet Explorer で SVG を表示可能にする JavaScript ライブラリです。 前バージョン からの変更点は以下の通りです。
- コードを整理して最適化
- line 要素や rect 要素で、デフォルト値をゼロに設定
- rect 要素の処理で、係数を 0.5228 → 0.55228 に修正
- path要素のd属性が空のとき例外処理をさせないようにした
- 0.24でバグ#12386に対して修正された部分を元に戻した
バージョン 0.24 と比較して、4000 バイトほどサイズが小さくなっています。 path 要素を処理する部分のコードをかなり整理できたので、 他の言語に移植したり、Silverlight 版を作ったりするのが、 少しは楽になるんじゃないかと思います。
2008-06-14 (土)
■ VML と DirectX Alpha フィルタを用いた放射状グラデーション
SIE で radialGradient をサポートするための予備実験を行ってみました。
SVG や Canvas では、図形を塗りつぶす際に放射状のグラデーションを指定することができます。 一方、VML でも gradientradial という指定はできるのですが、 これがひどいバグ持ちで、まともな描画をしてくれません。 以下の SVG ファイルを IE と IE 以外のブラウザで表示してみると、違いが分かると思います。 （IE で見た場合、SIE 0.25 を用いて VML に変換したものが表示されます。）
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="green"/>
</radialGradient>
</defs>
<path d="M 100 100 L 300 100 200 300 z"
stroke="blue" stroke-width="3" fill="url(#grad1)" />
</svg>
そこで Internet Explorer で使える機能をつらつらと眺めていたところ、 DirectX の Alpha フィルタが、放射状のグラデーションをサポートしていることに気が付きました。 これを使えばなんとかなりそうに思えたので、試しにやってみました。 仕組みとしてはこうです。
- 同じ図形を２つ重ねて描く
- 下になる図形は、１色で塗りつぶす。
- 上になる図形は、もう１つの色で塗りつぶし、Alpha フィルタをかける
こういう方針で作ったのが、以下のファイルです。 IE で見ると、上の SVG ファイルと同じような放射状のグラデーションが表示されるはずです。
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* {behavior:url(#default#VML);}
</style>
</head>
<body>
<v:group style="position: relative; overflow: hidden; width: 1000px; height: 1000px;" coordsize="1000,1000">
<v:shape path="m 100,100 l 300,100 200,300 x e" strokecolor="blue" strokeweight="3px" fillcolor="green"
style="width: 100%; height: 100%;" />
<v:shape path="m 100,100 l 300,100 200,300 x e" strokecolor="blue" strokeweight="3px" fillcolor="red"
style="width: 100%; height: 100%; filter:progid:DXImageTransform.Microsoft.Alpha(style=2,opacity=100,finishopacity=0);" />
<v:rect style="width: 100%; height: 100%; z-index: -1;" stroked="f" filled="f" />
</v:group>
</body>
</html>
このようにすれば、 SIE だけでなく ExplorerCanvas でも、 放射状グラデーションの機能をサポートできると思います。
2008-06-15 (日)
■ XMLHttpRequest オブジェクトを最後に null にしてメモリリークを避ける
PukiWiki の ajaxtree プラグイン で用いている JavaScript のコードをチェックしていたところ、 Ajax の部分のコードが、Internet Explorer でメモリリークを起こしていました。 抜粋すると、こんなコードです。
toggle: function(event) {
var element = event ? event.target : window.event.srcElement;
if (element.nodeName == "LI") {
var li = element;
......
var req = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
li.className = "expanded";
li.innerHTML += req.responseText;
}
};
req.open("GET", url, true);
req.setRequestHeader("If-Modified-Since", "Thu, 01 Jan 1970 00:00:00 GMT");
req.send("");
}
}
},
こういう Ajax のコードって結構あると思うんですが、 言われてみれば確かに、メモリリークを起こすパターンに該当しています。 とりあえず jQuery のコードを参考に、以下のように修正してみました。
--- ajaxtree.js.orig
+++ ajaxtree.js
@@ -38,6 +38,7 @@
if (req.readyState == 4 && req.status == 200) {
li.className = "expanded";
li.innerHTML += req.responseText;
+ req = null;
}
};
req.open("GET", url, true);
IE6 だとこれでメモリリークしなくなりましたが、IE7 はまだメモリリークしてます。 うーん、もう少し真面目に対策しないとだめか？
2008-06-16 (月)
■ XREA の広告にウィルス？
申し訳ありませんが、当サイトはこの条件に該当しています。 XREA から何のアナウンスもないので、 とりあえず、ウィルスを含む広告サーバを使わないよう対策しましたが、
- 2008/06/09 頃 〜 2008/06/15 に当サイトを訪れた
- Flash Player が最新版 (9.0.124.0) でない
場合は感染している可能性があります。
なお、XREA の無料サーバを使っているサイトは結構あるはずなので、 Flash Player が最新版でない場合は、最新版にアップデートした上で、 念のためウィルススキャンすることをお勧めします。
(01:59 追記)
情報が錯綜していてよく分からない （XREA がなんらかの対策をしているのかどうかも分からない） のですが、レスポンスヘッダを調べてみたところ、 手動広告の imgj.xrea.com という部分を書き換えても、自動設置広告にしても、 結局リダイレクトしたりして、imgj.xrea.com/ad_iframe.html にアクセスしてしまうみたいです。 （そして 1/5 の確率で、ウィルス広告が表示されてしまいます。）
仕方ないので、本当は規約違反なんですが、広告を外して様子を見ることにします。 この状態が続くようであれば、どこか他のサーバに移すことも検討します。
2008-06-18 (水)
■ ウィルス広告に関する XREA の公式アナウンス
XREA の広告にウィルス（トロイ）が混入していた件について、 ようやく公式なアナウンスと対応がされました。
これまで当サイトでは、広告を外すことで対策していましたが、 とりあえず危険ではなくなったようなので、広告は元に戻しました。
なお、念のためもう１度書きますが、
- 2008/06/09 頃 〜 2008/06/17 に、XREA の無料サーバを利用したサイトを訪れた
(当サイトも、この条件に該当します) - Flash Player が最新版 (9.0.124.0) でない
場合は感染した可能性があります。 XREA のサーバを利用しているサイトは多数ありますので、 Flash Player が最新版でなかった場合は、
- Flash Player を最新版にアップデート
- ハードディスクをウィルススキャン
することを強くお勧めします。
2008-06-20 (金)
■ innerHTML がメモリリークを引き起こす例
先日悩んでいたメモリリークの原因が判明しました。 Ajax とは無関係で、innerHTML を使って書き換えていたのが良くなかったみたいです。 メモリリークを起こしていたのは、こういうコードの箇所です。 （本当は <ul>〜</ul> の部分は Ajax で読み込んだテキストが入ります。）
toggle: function(event) {
var element = event ? event.target : window.event.srcElement;
if (element.nodeName == "LI") {
element.innerHTML += "<ul><li>dummy</li></ul>";
}
},
これを、次のように createElement と appendChild を使って書き換えると、 メモリリークを回避できました。
toggle: function(event) {
var element = event ? event.target : window.event.srcElement;
if (element.nodeName == "LI") {
var ul = document.createElement("ul");
ul.innerHTML = "<li>dummy</li>";
element.appendChild(ul);
}
},
クロージャや循環参照が原因となるパターンとは違うと思うので、 なぜメモリリークになっていたのか、よく分からないのですが、
このページで解説されている「クロスページ リーク」に該当するのかもしれません。 でも、さらに試してみると、最初のコードをもっと単純に、
......
element.innerHTML = "dummy";
......
のようにしてもメモリリークするようです。 やっぱりよく分かりません。
2008-06-25 (水)
■ jQuery の bind では selectstart イベントも指定できる
ドキュメントには書かれていませんが使えます。 というより、IE 限定の onselectstart というイベントが元々ありますが、 それを jQuery で設定するのにどう書けばいいのか、という話です。
ページのある部分のテキストを選択できないようにするために、 最初、こんなコードを書いていました。
$("...").each(function() {
this.onselectstart = function() {return false;};
});
でも、 jQuery Disable Text Select Plugin : jDempster.com のページを見ていて気付きましたが、実はこう書くことができます。
$("...").bind('selectstart', function() {
return false;
});
この書き方のほうが jQuery らしくていいですね。
に IE で使えるイベントが他にもいっぱい載っていますが、 おそらくこれらも指定できるんじゃないかと思います。
2008-06-29 (日)
■ VMware に CentOS 5.2 をインストール
先日リリースされた CentOS 5.2 を VMware にインストールしたので、 作業手順を Wiki の方にまとめておきました。
私が使っているのは VMware Workstation 5 なので、 VMware Player だと他のツールも利用して仮想マシンを作らなければならないでしょうが、 参考にはなるでしょう。
あと、VMware にインストールする際のコツみたいなものを書いておきます。
- ネットワークドライバは e1000 を使う。vmxnet だと、カーネルのバージョンが上がるごとにコンパイルし直さなければならず面倒。
- 時計が狂いやすいので、カーネルパラメータに nosmp noapic nolapic divider=10 という設定を追加する。
- VMware Command Line Tools をインストールしておくと便利。
■ PukiWiki を Universal Edit Button に対応させる
最近、いろいろな Wiki やブログが、 Universal Edit Button というものに対応してきています。
- Universal Edit Button [splitbrain.org]
- はてな内の編集可能なページで、Firefox用のアドオン「UniversalEditButton」に対応しました - はてなダイアリー日記
説明を読むと、実装するのは非常に簡単そうなので、PukiWiki にも組み込んでみました。 PukiWiki のスキンの <head>〜</head> の部分のどこかに、 以下のコードを埋め込んで下さい。
<?php if (is_editable($_page)) { ?>
<link rel="alternate" type="application/wiki" title="Edit this page!" href="' . $_LINK['edit'] . '" />
<?php } ?>
手抜きなコードですが、多分これでＯＫです。 PukiWiki Plus! では、is_editable() でなく check_editable() とすべきなのかもしれませんが、 よく分からないので、その辺は適当にやってみて下さい。
