第三の修練

JavaScriptでテーブルのソート

を勉強目的で実装。 デモページ ソース

テーブルの構成によっては動かないし、document.evaluateが使えないブラウザじゃ動かないし、数値も文字列としてソートするし。

シェルの(( ))は論理否定

ということを始めて知った。

colinux(0):~$ ((0))
colinux(1):~$ ((1))
colinux(0):~$ ((1-1))
colinux(1):~$

だから、

while ((1)); do
    echo "hogehoge"
    sleep 1
done

この判定式の戻り値が0となって、無限ループ。へー。

JavaScriptにおけるドラッグの実装

よく見るのは以下の２つ。

1. ドラッグ化の対象要素に、マウス中かどうかを示すフラグを持たせる。で、mousedown/mouseup/mousemoveのイベントリスナにフラグの状態に応じた処理をさせる。

2. mousedown/mousemoveのイベントリスナのみ設定し、mousedownが発生した時にmousemoveのイベントリスナを登録、mouseupが発生した時にmousemoveのイベントリスナを削除する。1のやり方に比べ、イベントリスナの数を少なくできる。

ソース（DraggableType1が1、DraggableType2が2に対応）

どちらの方が重い処理かは大体予想がつくけど、感覚的にどれくらいの差があるか知りたくて実験。

確認用ページ（ボタンに書かれた数字の数だけドラッグ可能な要素を生成します。）

うむ、予想通りの結果。かなりの主観だけど、自分のPC(メモリ:512MB、CPU:PentiumM 1.73GHz)で試した感想を言うと、

Opera

• 1つめの実装 - 1000個くらいが限界。
• 2つめの実装 - 1300個くらいが限界。

Firefox

• 1つめの実装 - 4000個くらいでもまあ使えんことはない。
• 2つめの実装 - 7000個くらいでもまあ使えんことはない。

という感じ。（ていうか、Firefoxすげえ。重いながらもそれなりに動くし。Operaはダメやなあ。。ウェブアプリケーションでも妙に遅いことがあるけど、イベントリスナの数が原因か？）

こんなに大量のイベントリスナを登録することはないと思うけど、JavaScriptで何かを作る場合は他にも色んな処理が絡んでくると思うので、イベントリスナの数はできるだけ少なくなるよう考えよう。

おまけ
今回の確認に使ったページだと、以前にマウスカーソルにmoveを指定した要素をドラッグ可能にするで紹介した方法が一番軽い。Operaでも5000個くらいまで大丈夫。

ローカルにミラー環境を作る

テスト環境として、ローカルのPCに本サイトのミラーを作ったのでメモ。

■ ゴール

ApacheのNAMEベースのバーチャルホストを利用し、特定のURIの場合にミラー環境をブラウジングできるようにします。

■ 環境

• サーバ - coLinux
• クライアント - Windows

■ Windows側の設定

まずはwindows側でテスト環境用のホスト名をC:\WINNT\system32\drivers\etc\hostsに定義してあげます。

127.0.0.1       localhost
192.168.0.2     colinux         # 開発環境としてのホスト名
192.168.0.2     thethirdshuren  # 試験環境としてのホスト名

これで、http://colinuxとhttp://thethirdshurenで同じホストにアクセスできるようになります。

■ coLinux側の設定

• http://colinux - 開発環境にアクセス
  
• http://thethirdhsuren - ミラー環境にアクセス
  

となるようにApacheのhttpd.confに以下のように設定します。

# リクエストURIがhttp://thethirdshurenの場合
<VirtualHost 192.168.0.2>
ServerName thethirdshuren
DocumentRoot /home/user/thethirdshuren/www
</VirtualHost>

# リクエストURIがhttp://colinuの場合
<VirtualHost 192.168.0.2>
ServerName colinux
DocumentRoot /home/user/www
</VirtualHost>

これでアクセス時のホスト名に応じてDocumentRootなどを振り分けてくれるようになります。 あとは、VirtualHostディレクティブ内に、各環境に応じたディレクティブとかを設定すれば完了です。

siori.js

siori.js

というブックマークレット作ってみました。実行したのページ上での位置保存と付箋が使えるようになります。保存先はクッキーで、1日で読みきれない or 理解できないページを抵抗無く読み始めることができるので気に入ってます。