はてなに参加 ― 2005年10月24日 13時16分
はてなにユーザー登録をした。目的ははてなブックマーク。とはいってもソーシャルな何かを求めているわけではなく、単に気になったページを自分のためにメモするオンラインブックマークとして使おうと思っている。
今はブラウザのブックマーク中に「Memos」というフォルダを作ってそこに気になったページを放り込んでいるのだが、数が増えてきて参照するにも整理するにも面倒くさいのでタグによる分類を試してみようと思った次第。
ダイアリーはキーワードリンクが文中に含まれるのがうっとうしいし、何よりここがあるので使う予定なし。その他のサービスは気が向いたら利用しようと思う。アンテナは便利そうかも。
ちなみに登録しようとしたら、ともだち紹介者に30ポイントプレゼント
とあったので知人に紹介してもらって登録した。紹介してくれた M さんには改めて感謝する。
Opera 8 の SVG のバグ ― 2005年10月16日 00時22分
Opera で SVG を触ってみてつまずいた点など。どうやら Opera は HTML 文書中で SVG を扱おうとするとトラブルになることが多いようだ。
Opera 9.0 Preview 1 では以下のバグはすべて修正されていた。すばらしい。
- svg 要素の背景が透過されない。
- SVG 要素を文書に追加 / 文書から削除しただけでは描画に反映されない。
- SVG 要素に属性をセットするなどする必要がある。
HTMLDocument#createElementNS()で生成された SVG 要素のnodeNameプロパティが空文字列を返す。Document#createElementNS()で生成された SVG 要素は正しい値を返す。
HTMLDocument#createElementNS()で動的に生成できる SVG 要素の数に制限がある。- 一定数を超えるとそれ以降は
createElementNS()で SVG の名前空間 URI を指定していても HTML 要素として生成される。 - この制限は Opera を起動している限り続く。あるページで一定数の SVG 要素を生成したら、ほかのページではもう SVG 要素を生成できない。
- Windows XP SP2 、Opera 8.50 では 240 回 SVG 要素を生成できた。
Document#createElementNS()には制限はない模様。
- 一定数を超えるとそれ以降は
DrawingCanvas.js 0.03 公開 ― 2005年10月12日 03時10分
高橋登史朗さんが DrawingCanvas.js を使ったグラフ描画のデモを公開してくださっています。すばらしいですね。これぞまさしく Ajax という感じです。
しかし、Pentium M 1.3 GHz 、メモリ 256 MB という私の環境では Firefox 1.0 (CSS Positioning バックエンド) での表示がフリーズしたかと思うほど遅かったです。そこで処理を少し改善した DrawingCanvas.js 0.03 (ソース表示) を公開しました。本当は 0.02 公開のときにやろうかと思っていたのですが面倒くさくなってやめたという (^^;
それから、描画部分にスタイルなどを指定する際は、DrawingCanvas#container ではなく DrawingCanvas#parent (コンストラクタの第 1 引数に指定した要素) に対して指定してください。DrawingCanvas#container は private (というよりは protected か) にすべきだったかも。
それにしても DrawingCanvas 自体は非同期通信も何も使っておらず、はてなブックマークでつけられているタグを見てどこが「Ajax」なのだろうと思っていたのですが、こうやって Ajax アプリケーションに組み込まれるとまあ Ajax でもいいかという気分になってきます。いうなれば Advanced JavaScript Applications which are Cross-browser のほうでしょうか (どうでもいいけど私はつい Ajax を「アジャックス」と読んでしまいます)。以下のようなスクリプトもあることですし Advanced かどうかは疑問ですが。(しかしこれを最初から知っていれば DrawingCanvas なんて作っていなかったかも。)
- DHTML: Draw Line, Ellipse, Oval, Circle, Polyline, Polygon, Triangle with JavaScript
- JavaScriptPaint
DrawingCanvas.js 0.04 (ソース表示) 公開。0.03 で DrawingCanvas#container にスタイルが指定されてもいいよう、内部的なスタイル指定を冗長にしていたのですが、処理速度の低下を招くことがわかったので元に戻しました。
多元配列を一元配列に変換 (JavaScript) ― 2005年10月08日 01時43分
なんだかよくわからないことになったのでメモしておく。きっかけはある要素ノード中のすべてのノード (テキストノードも含む) を集めようと思ったこと。childNodes では子要素の内容が取得できないし、getElementsByTagName("*") ではテキストノードが取得できない。今までの自分だったらこうしていただろう。
function getDescendants(node, previousNodes)
{
if (!previousNodes) previousNodes = [];
var children = node.childNodes;
for (var i = 0, length = children.length; i < length; i++) {
var child = children[i];
previousNodes.push(child);
if (child.hasChildNodes())
getDescendants(child, previousNodes);
}
return previousNodes;
}
var bodyDescendants = getDescendants(document.body);
// <body><p>Hello, world!!</p></body> に対して
// [[object HTMLParagraphElement], [object Text]] を返す。しかし、おりしも「実践 JavaScript リファクタリング」(最速インターフェース研究会) を読んだ直後。なにかもっとスマート、というよりむしろトリッキーなことをしてみたくなる。そこで思い浮かんだのが Array#concat 、引数に配列を指定するとそれを展開して元の配列に付け加えた新たな配列を生成してくれるというもの。これと Array#map を組み合わせれば何とかなるかもと思って試行錯誤。結果できたのが以下のコード。
function getDescendantsOrSelf(node)
{
return (node.hasChildNodes())
? Array.prototype.concat.apply([node],
Array.map(node.childNodes, arguments.callee))
: [node];
}
var bodyDescendants = getDescendantsOrSelf(document.body).slice(1);この場合、結果の配列に自分自身も含まれてしまうので最初の要素を削除。正直書き上げた直後は自分でもどうしてうまくいくのかよくわからなかった。
で、これを応用すれば多元配列を一元配列に変換することもできるなと思った次第。どういうときに使えるのかは思い浮かばないけど。
Array.prototype.flatten = function () {
var element = (arguments.length == 0) ? this : arguments[0];
return (element instanceof Array)
? Array.prototype.concat.apply([],
Array.map(element, arguments.callee))
: element;
}
[0, 1, [[]], [2, 3], [4, [[5], [], 6, [7, 8], 9]]].flatten()
// => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]ふと見たら prototype.js でも Array#flatten が定義されている。1.4.0 pre 7 から追加されたようだ。というよりもともと Ruby には flatten メソッドがあったのか。全然知らなかった。Ruby.js でも定義されていたのに見落としていた。もっとしっかり見ないとな……。(それにしても flatten という名前にして本当によかった。危うく toOneDimArray とかセンスのなさ全開の名前をつけるところだった。)
Array#map 及び Array.map は JavaScript 1.6 (Firefox 1.5) から使えるメソッド。ここでは以下のように定義した。
if (!Array.map) {
if (!Array.prototype.map) {
Array.prototype.map = function (callback, thisObject) {
var length = this.length;
var result = new Array(length);
for (var i = 0; i < length; i++)
result[i] = callback.call(thisObject, this[i], i, this);
return result;
};
}
Array.map = function (array, callback, thisObject) {
return Array.prototype.map.call(array, callback, thisObject);
};
}ちなみに以下のコードは Firefox では動くが IE ではエラーになる。IE では DOM ノードは JavaScript のオブジェクトではないかららしい。
Array.prototype.slice.call(document.documentElement.childNodes, 1);
// IE => 「エラー: JScript オブジェクトを指定してください。」
alert(document.documentElement.childNodes instanceof Object);
// Firefox => true
// IE => falseスタイル変更 ― 2005年09月27日 04時41分
これまでここのスタイルシートはあらかじめ用意されたものにちょっと手を加えただけだったが、一念発起して一から書き直し。色使いは以前のものとそう変わらず。でもちょっとあっさりした感じになったかと思う。
それにしても IE には散々てこずらされた。そのうち 5 割くらいはボックスが内容の大きさに合わせて拡張されるバグに起因すると思う。IE7 ではこれは是が非でも直してもらいたいところ。その他原因を追究する気にもならない症状も多々あり。バグを使ったブラウザ振り分けはできるだけしたくなかったのだが、何箇所かでアンダースコアハックを使った。
正直今 CSS を組むときの IE の存在というのは (IE6 の標準モードであっても) 、昔 CSS を組んでいたときの NN4 の存在に匹敵するような気がしてきた。(当時は IE5 だか IE5.5 だかに満足していたはずなのに……なぜだろう。)
最近のコメント