コーディングスタイルについて
議論し尽くされた話ではありますが、自分の整理のために。
ダイナミックにしろスタティックにしろ、webページはおおむねHTMLで書かれる場合が多いです。
そして、そのHTMLを設計したり書いたりするのはwebデザイナー(笑)とか、マークアップエンジニア(笑)であることが多いです。
最近はセマンティックウェブとかmicroformatsといった、メタデーターを付与することを前提とした概念や仕様ができつつあるので、webアプリを開発したい設計したり手がけたりする人たちにとっては、HTMLは「マークアップ言語」で「メタ言語として使える言語」であることは、以前に比べて浸透してきていると思います。
しかし、実装しない立場で開発に関わる人や、過去に習得した手慣れた手法(テーブルレイアウトとかイメージマップ一枚ものとか)を踏襲する人たちに、それを説明して納得してもらうことはなかなか難しいものがあります。というか、まず納得してくれません。
そこで、理解してもらうのがなぜ難しいかと、どうすれば歩み寄れるかを考えてみます。
web標準的なコーディングスタイルをなぜ受け入れてもらえないか
- 習得に時間がかかる
- テーブルなんちゃらはとウェブ標準的な記述は、一見同じ言語を使っているように見えても実際の作業内容や方法は全く違います。例えば、同じ日本語でも女子高生の会話と自分の両親の会話の語彙が全く違うのと同じ程度には違うでしょう。
頑張れば3日くらいでできるようになると思いますが、その時間を作る方が難しい場合が多いと思います。 - コーディングスタイルを変えることにメリットを見いだせない
- 当然ですが、ワイヤーフレームや仕様書には、実装について書かれることは殆どありません。
そして、web標準的なコーディングスタイルはあくまで概念であって仕様でも規定でもありません。
さらに、SEOやSEMに効果がある、といいますが、それも本当に有効かは疑わしいものがあります。
そのような拘束力の弱い概念なので、よほどのメリットがない限り、変える必要はないと判断されても仕方ありません。 - 直近の仕事が山積みで余裕がない
- まー、ありがちですね...。コメントは割愛します。
- 概念的である
- 2項目目と被りますね。
明確に目に見えるものではないので、理解できても納得できない場合が多いと思います。 - モチベーションが低い
- まあ...、あまり言いたくはありませんが、下流行程なので言われたままに仕事をする、ってデザイナーも中にはいます。
そういう意識がオペレーター的な仕事を増やすという認識はないんでしょうね。きっと。
どうすれば受け入れてもらえるか
じゃあ、これらの項目を単純に反証してみます。
- 習得に時間がかかる
- ポイントを押さえれば、1日で覚えられるでしょう。
しかも、一度覚えると応用が利くので、今までより作業効率が上がる場合の方が多いです。
ポイントとしては、こんなところかと。- HTML ... 「マークアップとは」「XHTMLのsection要素の概念」「タグリファレンス総ざらい」
- CSS ... 「ボックスモデル」「floatとposition」「clearfix」「ブラウザの各種バグとハック」
- コーディングスタイルを変えることにメリットを見いだせない
- プロのプライドに訴えかけるのがいいのかなぁ...。
HTMLの単純化(と、それに伴う作業の圧縮)、振る舞いの一括管理/変更、メディア対応などありますが、そもそも仕様として間違っているスタイルで作業をすることを恥ずかしいと思わないのかと、訴えるというのはどうでしょう？
うーん、響かなさそう...。 - 直近の仕事が山積みで余裕がない
- メディアにおける広告料の上昇とか世間へのウェブへの認知度を持ち出して状況の変化を強調し、それについていけない事への危機感を煽るってのはどうかなぁ。
- 概念的である
- まー、そもそもハイパーテキストそのものが分かりにくいからなぁ。分かってくれとしか言えないような気がします。
あとは、コーディングスタイルの話についてこれなかったらCGMなんてもっと理解できないと思うので、仕事として向いていないような気がします。 - モチベーションが低い
- 来る業界が違うような気が...。
同じデザインの仕事でも、もっと状況や環境が安定している業界はありますよね。
うーん、とってもネガティブですね...。しかも反証になっていないし。
まあ、後３年もしたらこういう話も与太話になってくれることを祈りつつ、今の状況確認としておきます。
behaiviorなるものを使ってみた。
仕事が一向に減る気配がありません…。今年度はずっとこの調子のような気もします…。
とはいっても世間はものすごい勢いで変わっている訳で、先日、ようやくIE7がWindows updateと合わせて配布されました。
まだまだピュアなweb標準的なコードのみでマークアップできる訳ではありませんが、 IE6やそれ以下のバージョンのIEが減ると、対応がずいぶん楽になります。
ちょうどその頃、大藤幹さんの書かれた「CSSベストプラクティス」を読んで、IE6以下でもa要素以外の要素にhover疑似クラスを付加できる「whatever:hover」というIEのビヘイビアを知りましたので、ざっくりサンプルを書いてみました。
a要素以外にhover疑似クラス使うのなんて、プルダウンメニューくらいしかなさそうな気もしますが、それでも相当HTMLの見通しが良くなるので、なかなか気持ちがいいものです。
prototype.jsで角丸を実装してみる
ようやくjsのライブラリに手を出してみます。
もう一昨年の話になりますが、CSS Nite LP2でロクナナの中村さんのお話を聞いて「よし、これからはデザイナーもスクリプトくらい書けなきゃいかん！」と思って一年以上月日は流れ、ようやく覚束ないながらもなんとなく書けるようになってきました。
毎日コミュニケーションズ
売り上げランキング: 25592
これは薄くて読みやすく、理解しやすいので、入門本としては非常によかったです。
まあ、今回はDOMを使えればなんでもよかった訳ですが、普段あまり使う事のないprototypeを使ってみました。
サンプルはこんな感じ。
コードはこんな感じ。
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>addcorner</title>
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<script type="text/javascript" src="scripts/prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="scripts/base.js"></script>
<link rel="stylesheet" href="styles/base.css" type="text/css" media="all" />
</head>
<body>
<div id="wrapper">
<div id="main">
<div class="box box01">hogehoge</div>
<!-- /.box -->
</div>
<!-- /#main -->
<div id="sub">
<div class="box box02">hogehoge</div>
<!-- /.box -->
</div>
<!-- /#sub -->
</div>
<!-- /#wrapper -->
</body>
</html>
CSS
@charset "UTF-8";
/* ------------------------------------------------------------
common
------------------------------------------------------------ */
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
body
{
padding:20px;
}
/* ------------------------------------------------------------
column
------------------------------------------------------------ */
div#wrapper
{
width:950px;
margin:0 auto;
border:solid 1px #ccc;
}
div#main
{
width:530px;
float:left;
}
div#sub
{
width:400px;
float:right;
}
/* ------------------------------------------------------------
box
------------------------------------------------------------ */
div.box
{
padding:10px;
min-height:60px;
position:relative;
}
* html div.box
{
height:40px;
}
/* image */
div.box01{background:#faa url(../images/t01.png) repeat-x 0 0;}
div.box01 div.corner{background:url(../images/corner01.png);}
div.box01 div.border_lr{background:url(../images/lr01.png);}
div.box01 div.border_b{background:url(../images/b01.png) repeat-x 0 bottom;}
div.box02{background:#aacdff url(../images/t02.png) repeat-x 0 0;}
div.box02 div.corner{background:url(../images/corner02.png);}
div.box02 div.border_lr{background:url(../images/lr02.png);}
div.box02 div.border_b{background:url(../images/b02.png) repeat-x 0 bottom;}
/* corner */
div.tl,
div.tr,
div.bl,
div.br
{
width:10px;
height:10px;
position:absolute;
font-size:0;
}
div.tl, div.tr
{
height:30px;
}
/* corner-position */
div.tl{top:0;left:0;}
div.tr{top:0;right:0;}
div.bl{bottom:0;left:0;}
div.br{bottom:0;right:0;}
/* corner-image-position */
div.box div.tl{background-position:0 0;}
div.box div.tr{background-position:-10px 0;}
div.box div.bl{background-position:0 -30px;}
div.box div.br{background-position:-10px -30px;}
/* border */
div.l,
div.r
{
height:100%;
width:10px;
position:absolute;
}
div.border_b
{
width:100%;
height:10px;
position:absolute;
}
/* border-position */
div.l{top:0;left:0;}
div.r{top:0;right:0;}
div.b{bottom:0;left:0;}
* html div.b{left:10px;}
/* border-image */
div.box div.l{background-position:0 0;}
div.box div.r{background-position:-10px 0;}
/* ------------------------------------------------------------
clearfix
------------------------------------------------------------ */
div#wrapper:after
{
zoom:1;
}
div#wrapper:after
{
content:'.';
display:block;
height:0;
visibility:hidden;
clear:both;
}
JavaScript
/* ------------------------------------------------------------
add box-corner
last modified 2008.02.05
------------------------------------------------------------ */
function addCorner(){
var cornerBox = document.getElementsByClassName('box');
var cornerClassName01 = [
'r border_lr',
'l border_lr',
'b border_b',
'br corner',
'bl corner',
'tr corner',
'tl corner'
];
cornerBox.each(function(obj){
for(i=0; i<=6; i++){
new Insertion.Bottom(obj, '<div class="'+cornerClassName01[i]+'"></div>');
}
});
}
window.onload = addCorner;
ビジュアルをある程度リッチに作り込む予定だったので、ボックスの4隅(上下左右)と、左辺、右辺、下辺の3つの辺(上辺はボックスに背景画像を指定して表現)の、合わせて7つのdiv要素をスクリプトで動的に生成し、角丸にしたいボックスの周辺に配置しています。
あとは生成したそれぞれのdiv要素のサイズを決めて、背景画像を入れてあげればはいできあがり...。という具合です。
こうやって動的に要素を生成して角丸を表現する場合、メリットとして、ボックスのサイズの制限がなく、トリッキーな背景画像の作成やマークアップを行わなくてすむという事があげられます。
一方、デメリットとしては、表示のパフォーマンスやスクリプトオフ時の表示の差異などが挙げられます。
スタティックな角丸とスクリプトで生成する角丸のどちらかが絶対よいという事はなく、当然ケースバイケースなので、どちらの実装方法も知っておいて、実際にマークアップを行う際に「これはスタティックかな」「これはスクリプト使った方がいいだろ」くらいの判断ができると、仕事のに余裕というか、厚みがぐっと増すような...、気がします。
21世紀美術館のトップページのHTMLを書き換えてみた
更新が遅れていたのは、こっちの作業が進んでいなかったせいです。
それにしてもIEは癖があるなぁ...。
なんかいろいろな所から怒られそうな気がしますが、21世紀美術館の日本トップページをデザイン・レイアウトはそのままにXHTML+CSSで書き換えてみました。
テーブルの列を折りたたむ
横スクロールが出るような幅の広いテーブルを使わなければいけない時に使うといいかもしれないDHTML。
WinIE6とfirefox1で確認済み。Safariは折り畳むときにゴミが表示されるので、ちょっと使えないかも。
ソースはこんな感じ。とりあえず表示できていますというレベルなので、全然エレガントでもスマートでもありません。もっと素敵な処理方法を知っている人がいたら教えてください。
javaScript
/*
テーブルのセルの表示／非表示を切り替える
*/
function hideCell(className,idName) {
obj=document.getElementById(idName);
if(obj.className == "on"){
obj.className = "off";
changeDisplay(className,'none',idName,"+");
}else {
obj.className = "on";
changeDisplay(className,'',idName,"-");
}
}
/*
テーブルのセルの表示／非表示を切り替える(表示部分)
*/
function changeDisplay(className,visible,idName,idText) {
document.getElementById(idName).innerHTML = idText; // 切り替えボタンの表示を切り替え
var spans = document.getElementsByTagName('span');
var length = spans.length;
for (var i = 0; i < length; i++) {
var e = spans[i];
if (e.className == className) {
e.style.display = visible;
}
}
}
スタイルシートのdisplayを操作して、該当するクラス名のspanタグの表示／非表示を切り替えているだけです。
クラス名の付けられたエレメントを直接操作する方法が分からなかったので、HTML内で使用しているspanタグを全て配列に入れた後、総当たりでクラス名を判定するという非効率な方法を使っています。そのため、テーブルの行や列が増えてくるとレスポンスが目に見えて落ちてきます。
テーブルのデータ部分
<tr>
<td><span class="cell01">1</span></td>
<td><span class="cell02">..................</span></td>
<td><span class="cell03">..................</span></td>
<td><span class="cell04">..................</span></td>
<td><span class="cell05">..................</span></td>
</tr>
列ごとに異なるクラス名を付けることで、javaScript側で列を判別できるようにしています。
始めはtdタグとthタグに直接クラス名を指定していましたが、そうすると折りたたみボタンも一緒に消えてしまうので、spanタグを間に挟みました。
テーブルのヘッダー部分
<th><a href="javascript:hideCell('cell01','s01')" id="s01" class="on" title="a">-</a><span class="cell01">a</span></th>
折りたたみボタンのクラスをフラグ代わりに使っています。クラス名が「on」の時は表示、「off」の時は非表示となります。
aタグのtitle属性はなくても動作に支障ありませんが、付けておくとIEではマウスオーバーでツールチップが表示されるので、折り畳んだときでも項目名を知る事ができます。
クッキーを組み合わせると折りたたんだ状態を保持できます。後日追加する予定なので乞うご期待。
追記: (05/09/06)
クッキーの処理を追加した。といっても、書籍の関数をそのまま使ったので説明は後で。
XHTMLのcontent-typeの記述は何がいい？
ちょっと人に聞かれたので、調べてみた。でも、今まで気にしたこともなかったり。はっはっは。
- application/xhtml+xmlは推奨要素で、text/xhtmlが非推奨要素(ただし禁止要素ではない)。
- application/xhtml+xmlは過去のIEなどXHTMLを認識しないブラウザではレンダリングされない(ダウンロードされる)。
- Mozillaではapplication/xhtml+xmlと記述するとXHTMLを厳格に(XMLとして)パースする。
- XHTML1.1では <meta http-equiv="" />の記述は認められていない。
ということで、現段階ではUA(ブラウザ)側の整備が規格に追いついていないような感じ。
検証や、障害の発生する確率などを考えると、現場的な解としてはサーバがHTTPヘッダーにapplication/xhtml+xmlを返しても、HTMLのmetaタグのcontennt-type要素はtext/xhtmlにしておく、というのが妥当ではないだろうか。
規格至上主義のモヒカン族的にいえば、記述は全てapplication/xhtml+xmlで統一だろうが、IEの対応状況やvalidなXHTMLを完璧に書ける環境が整っていない場合を考えると危険な香りがする。
動的なページの場合、UAによってcontent-typeを書き換える方法もあるっぽい。
input タグの text と password
タブ型ダイアログで「input タグの text と password は IE では高さが違う」とのコメントがあったので、ちょっと調べてみた。
IE での表示結果
Mozillaでの表示結果
ウチの環境では差はないなぁ。スキン入れているせいかなぁ。
とか思っていたら、Windows の IE は高さが違うようである。
フォームの大きさをそろえたい (All About)
ここではスタイルシートの height プロパティを使って pixel 指定で高さを揃えている。
僕が作成したサンプルの「スタイルシートで高さを指定」の input は em 指定で高さを指定しているのでが、 IE と Mozilla で表示が異なって見える。IE 、 em なんだからきっちり1文字空けろよコラ。
password を用いたフォームはほとんど作ったことがなかったので気がつかなかった。気をつけよう。
はやじょ、ありがとう。
サーバで動くHTMLエディタ
http://www.interactivetools.com/products/htmlarea/
ちょっとしたページ作成にはいいですね。
でも、これってあくまでHTMLを知っていることが前提で使うツールですよね？
HTMLを人の体に例えてみる
http://hp-design.net/beginning/lecture/html.02.html#lechtml_humanrelation
<html> ヒトのはじまり
<head> ここから頭
<title> 顔を描くぞ
タイトル 顔の中身
</title> 顔終わり
</head> 頭終わり
<body> ここから胴体
中身 内臓
</body> 胴体終わり
</html> ヒトの終わり
うまい例えですねぇ。