• 『ROSS』のファイルおよびデータは、まるまる残します。
• 『ROSS』からピックアップした記事を『Archiva』に再掲載。
• 『ROSS』のコメント、トラックバック、掲示板、メールフォームは凍結。
• 『槍士登録所』に関しては、利用者の更新がある限りは、現状維持。
• ドメイン（http://rospear.info/)の有効期限があるのでURLは変更する。
• 『ROSS』の新URLは「http://ross.archiva.jp/」となる予定。

新サイトは「とりあえず動く」という段階で、まだまだディテールが甘いです。記事もまだ移行してませんが、動かしながら改善していく方向で。それでは、新サイトでお会いしましょう！

» Archiva | A note of notions. On web, tech, and myth.

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

ソースは以下

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

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

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

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

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

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

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

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

とゆ～ことで、新サイトを紹介。
新しいサイトは、『Archiva』といいます。といっても、まだ静的1枚しか用意できてませんっ　...ホントは３周年に間に合わせるつもりだったのだけど... ま、まぁ機能テストはさんざしたので、正式な公開ももうすぐですよっ！ たぶん。おそらく。きっと。

<a href="#" onclick="winOpen('./popup.html')">

...みたいな感じで起動するんですが、ふと思いたってonclickの代わりにclassでポップアップさせるよう改造してみました。これでどうなるかって言うと、

<a href="./popup.html" class="popup">

...みたいな感じで、まんま普通のHTMLになります ...とりあえず、こんな感じ。

文法

window.open('url to open','window name','attribute1,attribute2');

window.open(
	'http://www.aaa.com/',
	'popup',
	'width=400,height=200,
	 toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,
	 copyhistory=yes,resizable=yes'
);

1. 基礎設計（方針・使用ツール決定）
2. サーバー準備（ドメイン含む）
3. 動作テスト
4. デザイン
5. コーディング
6. システム調整
7. 記事移行
8. 仮公開
9. 微調整
10. 公開・運営

現在、1枚コーディングしてみたとこ。なんとか8月には仮公開まで持っていきたい。

ん～時間かかった～＾＾；
やっぱデザインがネックですわ。既にあるものを追加・編集・改良するのは楽なんだけど、一から作るのってパワー要るね。コーディングは楽なんだけど... 今後はデザインもこなせるようにならなくてわ。

• ブラックスーツ（略礼服）
• 白シャツ（レギュラーカラー）
• 白タイ（ややカジュアル）
• 白チーフ（スリーピークで）
• タイピン（なんとなく）
• 革靴（黒。普通のものを、しっかり磨く）
• 袱紗（慶弔両用の紫）
• 祝儀袋（350円程度）
• 祝儀（金弐万円）

上記は、当日の服装および持っていったもの。
式自体は「気軽に楽しんでもらおう」という意向のもとで、特に格式ばったところもなく、二次会なしで、つつがなく終了しました。したがって特に失敗もなし。素直に料理と進行を楽しみました。良い料理出てたな～＾＾

以下、感想とまとめ、細かい反省点など。

彼自信が運営するサイトにて'95年から掲載されているコラム『Alertbox』は（デザインはアレだけど）Web制作者のバイブルとして長年読み続けられています。Web標準で言うALAみたいなものかな？

『Alertbox』には日本語訳も用意されていますが、それはそれとして、今回取り上げるのは彼の著書『ホームページ・ユーザビリティ』（2002年）で纏められたホームページ（サイトのトップページね）におけるガイドライン。この名著を読み返すついでにサクっと抜粋してみました。

• 表示確認 : IE 5-6, Opera, Firefox, Safari, Firefox-mac, IE-mac
• 展開部分の背景に透過PNGを使用（IE5.5以降）
• JS部分はか・な・り適当。（無くてもIE意外なら動作するので）

作っといてなんですが、折り畳みメニューはユーザビリティ低いです。ちゃんと選択するのは、マウスの扱いに慣れた人でないと意外と難しい。嘘みたいですが本当です。卒論でユーザテストまでやった俺が言うんだから、間違いない（ぉ

はい、前置き終わり。それでも「俺は俺の道を行くぜっ」てな剛毅な方々は、続きをどうぞ。食わず嫌いも良くないしっ

1. XREAに鯖代払うの忘れてた
2. 無料プランに戻った
3. ディスク使用量が無料プランの許容量を超えちゃった
4. 容量超過で書き込み禁止
5. ファイル出力系プログラムが動作せず → MT真っ白

元ファイルが消えたわけではないので、こうして復帰できてるわけですが。広告表示されて初めて気づいた俺ってば... ＾＾； いや、XREAはご丁寧にも期限が近づくと何回かメールで警告してくれるんですが。光回線への変更でメアド変わってて気付けませんでした。はっはっは（乾

まぁおかげで気付いたんですが、このアカウント。ファイル数4842だそうです。おぉ、いつの間にっ。改めて数字にすると感慨深いものがあるね。

• 効率性。サイト全体を作り終えた時にも、シンプルな継承関係が維持できていること。
• 操作性。システムを組み込む際、手間の掛からない妥当なモジュール構造であること。
• 拡張性。第三者による更新・修正・拡張を前提とした余裕のあるデザインであること。

コーダーであるならば、ブラウザ互換をクリアしていること、Web標準に準拠していること、サンプル画像を再現していることとかは当然として、さらに+αを提供しなければならない ...という話。もちろんスピードも大切です。考えすぎて時間喰ってるようじゃあ、意味がないよね。

HTML(CSS)コーディングはサイト制作の基礎の基礎にあたる部分で、この段階での設計は後の開発スピードにダイレクトに影響します。ぱっと見は同じように見えたとしても、巧く組まれたコードはプロジェクトの進行に確かに貢献しています。それを体験してもらうことが本職コーダーの醍醐味ではないかな、と思ったりするわけです。

透過PNGってのは透明度を付加した画像のこと。「完全な透明」か「完全な不透明」かの二択しかなかった透過GIFと違い、もっと詳細に透明度を指定することができます。50%とか25%とか。巧く使えばデザインの自由度が凄く広がるシロモノなんだけど、IE-winはデフォルトでサポートしていません。

今回の纏めは、そのIE-winで透過PNGを使う方法。
といってもCSSにちょちょいとコピペするだけですけどね。以下みたく。

#overlay {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizingMethod="scale");
}