OK. 整理しよう。
自宅PCは80GBのHDを2台使ってRAID 0を組んでます。
その合計150GBちょいのディスクアレイを起動ディスクにしているわけです ...が、当然ながら危険です。アブないです。なまじ容量多いだけにバックアップも面倒です。とゆ～ことで、ちょっと速めのHDを買って差し替えよう、と。これが事の発端。

起動ディスクとして250GBのHDを購入。接続して、電源投入...
「Stripingアレイがエラー」みたいな赤文字エラーがっ!?

»続きがあります

簡単なFormチェック用のスクリプトを用意してみました。HTML側のコールはonSubmitのみ。各処理をできるだけサブルーチン化して、必要に応じて呼び分ける方式で記述してます。

name属性の使い方を工夫すれば、使うFormが増えても、大元ののコール関数は一個で十分かもしれない！

名前

本文

Email

トラックバック

»続きがあります

仕事にて、tableをソートするJavascriptを作ることになったわけですが... たまたま拾ったサンプルがバリバリのDOMだったおかげで、「Javascriptにおけるオブジェクト指向」がちょっとずつ解ってきました。それはともかく。

おっかなびっくり組んでみると、なんだかんだで、とりあえず動きはするんですが... どうにもappendChild()でノードが追加されるというよりは置換されてるっぽい理屈に確信が持てません。「そういうプロパティなんだ」と言われれば、それまでなんですが。

2008-12-23: 完全オリジナルで作り直しました。

ソースは以下

»続きがあります

簡単なので、ちょっとやってみたら、なんかメチャメチャ面白かった。
平面の空間設定をコントロールする遠近法には、大きく二種類ある。

• 構造物に遠近感を持たせる描画方法としての「透視法」
• 配色や輪郭の描写で遠近を区別する「空気遠近法」

今回やったのは、「透視法」。中でもごく単純な「二点透視法」にチャレンジしてみました。手順は以下。

1. 水平線を引く
2. 水平線の上に、消失点Aを定める
3. 消失点Aから、最低2本の補助線を引く
4. 反対の方向に新しい消失点Bを作る
5. 消失点Bから補助線を引き、先の補助線と結合させる
6. 補助線同士のの接続ポイントに垂線を引く
7. 補助線に沿って辺を描く

消失点を2つ定義するから、二点透視法。6.で引いた垂線が、構造物の一番手前の角になります。こんな感じ。

色つけてみた。

補助線を移動させれば、角度や距離感を変えることができます。上から見下ろすようにもできるし、消失点をもっと増やせば、もっと複雑な構造を描画できます。「屋根が三角」とか。

建築物のイラストとかで良く使う手法だけど、Webでも普通に使えます。たとえばメイン画像のグラデーションや、中身の構成を決めるときに意識しておけば、全体のバランスやユーザの視線をコントロールできますね。

長いURL(半角英数字）を強制改行させるには、CSSで「word-break: break-all;」を指定すれば良い。これはIEの独自拡張で、IE5.0から対応しています。

通常のボックス要素の場合だと、Opera/firefoxではボックスを突き破りはしても、ボックスを拡張したりはしない。

幅が指定されたボックス要素を拡張してしまうのはIEのバグなので、通常は「word-break: break-all;」で大きな問題は無いです。（レイアウトが崩れない、て意味ね）

ただし、table要素に詰まっていると、ややこしくなります。table要素は特殊なブロック要素で、中身が溢れると問答無用でセル自体を伸縮してしまいます。↓みたく。

解決する方法は幾つかあるが、クロスブラウザとなると難しい。

「word-break: break-all;」を使用する

IEでしか効果がない。

<wbr />タグを使用する

<nobr>タグの中で、行がボックスから溢れたときの改行ポイントを指定するタグです。

• Firefoxで<nobr />を入れると、<wbr />では改行しなくなる
• Operaでは効果なし

そもそも手動改行するのと、ほとんど変わらない。システムが入った動的な環境だと、状況的に使用できない場合が多いだろう。個人サイトで、手間を無視するならアリ。

各ブラウザの独自拡張タグを使用する

1. pre {
2. white-space: -moz-pre-wrap; /* Mozilla */
3. white-space: -pre-wrap; /* Opera 4-6 */
4. white-space: -o-pre-wrap; /* Opera 7 */
5. white-space: pre-wrap; /* CSS3 */
6. word-wrap: break-word; /* IE 5.5+ */
7. }

<pre>タグ用として有名な手法だが、少なくともこの場合は意味なし。

何故かっていうと、この指定は本来は行末では改行しない<pre>要素を、行末で自動的に改行させる為の指定だから。半角スペースも記号も挟まないで「１つの単語」と認識されてしまう英数字を強制改行するようにはできていない。

cf. Tero Karvinen, Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE

「url_breaker」を使用する

Firefoxでのスタンダードな対処法 ...らしい。構文解析して<wbr>タグを埋め込むFirefoxの拡張機能です。

ユーザがプラグイン入れなきゃダメって時点で、開発者としては論外。

cf. 小粋空間, Firefox・Netscapeで連続した半角文字を折り返す

「overflow:hidden;」あるいは「auto;」

<td>/<th>には直接指定しても反映されない。
<td>/<th>内に<div>や<p>といったブロック要素を置くか、長いURLを囲んだ<a>なり<span>なりを「display:block;」にして、そこに指定する必要がある。

見映えは悪くなるが、無難ではある。この手法はごく稀なイレギュラーに対してはよく機能する ...が、発生頻度によっては猥雑になる。つまりスクロールバーの表示はブラウザ（のスキン）に依存するため、制御するのが難しい。

「半角英数字は○○文字以上連続で入力できません」

入力時にCGIでエラーを出す。CMSツールのNucleusなんかはそうらしい。要するにCGIなりJSなりでASCII文字列を監視して、文字数によってはどうにかする手法。

コスト高。最後の手段？

結論っぽいもの

仕事で使う分には、ケース・バイ・ケースで幾つか複合してます ...が、概ね「overflow:hidden;」を使用しています。「word-break: break-all;」は英文が酷く不自然になるし、<wbr />タグは激しくメンドイから。

悩むとすれば、overflowの値を hidden にするか auto にするかってとこだけど、これは出現頻度と必要性の兼ね合いですね。たとえば<pre>タグでソースコードを紹介する場合、hiddenだとコードが普通には読めなくなってしまうこともある。かといってautoにしてみても、縦に長いと横スクロールは不便であり、読み難さでは大差ない。

自分のサイトで使う分には<pre>タグ＋独自拡張タグで十分ですけどね。<td>の中に、常識外な文字列を入れなけれな済むことなので。