Monthly Archives: April 2007

諸君 私はコーディングが好きだ

Posted on by

「諸君 私はコーディングが好きだ
諸君 私はコーディングが好きだ

諸君 私はコーディングが大好きだ

マークアップが好きだ
サイトの設計が好きだ
デザインの実装が好きだ
デザインカンプにスライスを切っていくのが好きだ
JPEGの圧縮率を決めるが好きだ
ファイル名を考えるのが好きだ
文書構造を考えるのが好きだ
バリデーションが好きだ
自分が書いたソースを眺めるのが好きだ

HTML で XHTML で
CSS で JavaScript で
Microformats で DOMで
XML で XSLT で
RSS で Atom で

この地上で行われる ありとあらゆるコーディング行為が大好きだ

戦列をならべたコーダーの一斉タイピングが
轟音と共に修正依頼を吹き飛ばしていくのが好きだ
空中高く放り上げられた修正依頼が 効力射でばらばらになった時など心がおどる

コーダーの操るキーボードが 文法エラーを撃破するのが好きだ
悲鳴を上げて 燃えさかるバリデーション結果から飛び出してきた文法エラーを
テキストエディタで薙ぎ倒した時など胸がすくような気持ちだった

指先をそろえたStrict厨の横隊が テーブルレイアウトのページを蹂躙するのが好きだ
恐慌状態の新人が 既に修正された文法エラーを
何度も何度もAnother HTML Lintで確認している様など感動すら覚える

オーサリングツールで書き出された非推奨要素達を
バリデーション結果につるし上げていく様などはもうたまらない
泣き叫ぶ非推奨要素達が 私の振り下ろした指とともに
打音を上げるキーボードに ばたばたと薙ぎ倒されるのも最高だ

小賢しいバグ達が ブラウザチェックで健気にも立ち上がってきたのを
コードヒントを駆使したタイピングが カテゴリーごと木端微塵に粉砕した時など絶頂すら覚える

後任のコーダーにソースコードを滅茶苦茶にされるのが好きだ
必死に美しく書いてきたソースコードが蹂躙され
属性の出現順序やインデントに規則性がなくなっていく様はとてもとても悲しいものだ

修正依頼の物量に押しつぶされて殲滅されるのが好きだ
修正依頼のメールに追い回され
最早ソースのどこをいじったら良いのか分からなくなるのは屈辱の極みだ

諸君 私はコーディングを 地獄の様なコーディングを望んでいる
諸君 私に付き従う大隊戦友諸君
君達は一体 何を望んでいる？

更なるコーディングを望むか？
情け容赦ない 糞の様なコーディングを望むか？
鉄風雷火の限りを尽くし 三千世界の鴉を殺す 嵐の様なコーディングを望むか？

「コーディング！！コーディング！！コーディング！！」

よろしい ならばコーディングだ

我々は満身の力を込めて今まさに振り下ろさんとする握り拳だ
だがこの暗い闇の底で半世紀もの間 耐え続けてきた我々に
ただのコーディングでは もはやものたりない！！

大コーディングを！！一心不乱の大コーディングを！！

我らはわずかに一個大隊 千人に満たぬWebデザインチームにすぎない
だが諸君は一騎当千の古強者だ と私は信仰している
ならば我らは 諸君と私で総兵力100万と1人のWebデザインチームとなる

我々を忘却の彼方へと追いやり 眠りこけている連中を叩き起こそう
髪の毛をつかんで引きずり降ろし 眼を開けさせ思い出させよう
連中に恐怖の味を思い出させてやる
連中に我々のキーパンチの音を思い出させてやる

天と地のはざまには 奴らの哲学では思いもよらない事があることを思い出させてやる

一千人のコーダー のWebデザインチームで
世界を燃やし尽くしてやる

「最後の大隊 大隊指揮官より全Webデザインチームへ」

第二次 Coder's High 作戦 状況を開始せよ

征くぞ 諸君」

原文はこちら
名言ノ名ハ。: ヘルシング(14)
インスパイアされたのはこちら
小野和俊のブログ: 諸君 私はプログラミングが好きだ

Continue reading →

某電子マネー

Posted on by

某電子マネーのサイトが本日オープンしました。それに伴い、某コンビニサイトで告知ページがリリースされました。その告知ページのコーディングを私がやっています。

珍しくインタラクティブっぽいページのコーディングをやりました。Flashの代替表示（Flashプラグインがない場合の表示）をどうするか、というところでJavaScriptを使ってあれこれ奮闘してみました。jQueryというJavaScriptライブラリを利用し、お手軽にフェードイン・フェードアウトをやってみたり。

やはりJavaScriptは面白いです。コードと格闘していたらいつの間にか数時間が経過していた、という感じでとても集中して作業できました。

まぁ、Flashプラグインがない環境でしか表示されないバージョンなので、そこを頑張る必要はあるのか、と我ながら思いますが。ハマってしまったものは仕方ない、と（笑）

段組レイアウトのお約束：段組ボックスの底辺を揃える（揃っているように見せる）

Posted on by

使い古されたネタで申し訳ないのですが、自分が復習するという意味も含め、CSSで段組レイアウトをする際のお約束をまとめてみることにしました。まず第一回は「段組ボックスの底辺を揃える（揃っているように見せる）」です。

以下の画像のような見た目の段組を、実現することを目標とします。

目標とする段組レイアウト図

普通に考えると、float を使って横に並べたボックス各々に border を適用したくなります。が、このやり方ですと各ボックスの内容量が異なる場合、各々の高さが異なってしまい、ボックスの底辺が揃わなくなります。このように。

各段組ボックスの底辺が揃わないの図

そこで、border を使わずに目標の見た目を実現します。

以下に示す方法は、例として2カラムの段組を取り上げていますが、3カラム以上の段組でも同じように利用することができます。ただし、横幅固定デザインでのみ有効です。リキッドレイアウトやエラスティックレイアウトでは手法を変えないと利用できません。

まず以下のような画像を作り、スライスを切ります。

作成する画像と、それにスライスを切った図

緑色の部分がスライスと思ってください。段組中段の部分を実現するためのスライスと、段組底辺を実現するためのスライスです。わかりやすいように高さ10ピクセル程度のスライスにしていますが、実際は中段部分は高さ1ピクセル、底辺は線の太さと同じで大丈夫です。

で、次のようなソースを書きます。あくまで一例です。

XHTMLのコード

<div id="container">
<div class="section" id="columnAlpha">
<h2>コラムA</h2>
<p>サンプルテキストサンプルテキストサンプルテキスト...</p>
</div>
<div class="section" id="columnBeta">
<h2>コラムB</h2>
<p>サンプルテキストサンプルテキストサンプルテキスト...</p>
</div>
<p id="containerBtm">&nbsp;</p>
</div>

CSSのコード

div#container {background:url(中段部分の画像.gif) repeat-y;}
div#columnAlpha {
float: left;
width: 162px;
border-top: 2px solid #339;
margin-right: 10px;
}
div#columnBeta {
float: left;
width: 162px;
border-top: 2px solid #339;
}
p#containerBtm {
clear: both;
height: 2px;
background: url(底辺部分の画像.gif) no-repeat bottom;
font-size: 2px;
line-height: 2px;
}

段組しているボックスには上辺のみ border を指定し、親のコンテナボックスに対して段組中段部分の画像をY軸リピートで指定します。そして、段組ボックスの直後に、底辺となる p#containerBtm を挿入し clear:both と、底辺部分の画像を背景に指定します。height と font-size、line-height の指定は、このボックスを底辺画像の高さピッタリにするためのものです。

p#containerBtm にあたるものは、clear ができてかつ底辺画像が表示できれば、なんでもいいです。底辺画像は背景ではなくて、img 要素で埋め込んでも構いませんし。p#containerBtm 自体入れたくない方は、コンテナdivをもうひとつ追加して、そちらに底辺画像を背景で指定 ＆ clearfix を使う、というやり方でもいいです。また、きちんと内容を持っているフッター的なボックスを持ってきてもいいでしょう。

以上のような方法で底辺を「揃っているように見せる」ことができます。（実際は揃ってないです）

JavaScriptを使って強引に揃えちゃったサイトを先日、はやしさんに教えていただきました。

オーケーズデリカ株式会社: お弁当

お弁当一覧のところです。なんとまあ・・・

なお、クロスブラウザな表示を実現する際に border は障害となる場合がありますので注意が必要です。この点は ADP: ピクセル単位で合わせるところではborderを使わない（IE7でも！） においてよくまとめられています。

段組ボックスでは上辺のみを表現し、親コンテナボックスで中段部分を表現するのがミソですね。この点を抑えて工夫すれば、リキッドレイアウトやエラスティックレイアウトにおいても実現する方法はありそうです。

Dreamweaverでの失敗談

Posted on by

Dreamweaverには「ファイル」パネルでファイル名を変更した際に、それにリンクしているファイルのコードを自動更新する機能があります。

この機能を使う場合は、更新対象ファイルのバックアップを必ず取ってから使うことをおすすめします。私の環境（WindowsXPのDreamweaver8）で使う限り、動作がかなり不安定な印象を受けています。

この自動更新処理によってCSSファイルのコードが途中からバッサリ削除された経験があります。その時は不覚にもバックアップを取っておらず、テストサーバーにもその状態でアップしたばかりだったので途方に暮れました。・・・が、ブラウザのキャッシュフォルダをあさって該当のファイルを探し出し、なんとか復元に成功しました。

そんな苦い経験をしたものですから、あまりオーサリングツールに頼りすぎるのもいかがなものか、と考えるようになりました。便利なのは良いのですが、それを完全に自分のものとして使いこなせないようでは、作業フローに組み込むのは難しいです。