2005/12/17

このようにプロは努力するのだ

続きです。

努力の跡

自分のことをいうのは変なものなのです。ですが書いてしまいます。私は手抜きが大好きなのです。草を見ると如何に草を生やさないようにするかを考えてしまいます。そうだ苔庭にしてしまおう、などと考えてしまうのであります。住所録などを作っても、どうやってデータの使い回しをうまくやるかを考えてしまいます。二度手間は出来る限りやりたくないのであります。

ですが、練達の師は違うのであります。私では決して到達しないであろう緻密さに満ち溢れているのであります。

次にあるソースを見て戴きたいのであります。

いく年かまえのことでした。３歳になったダイチャンが、おじいさんと東京タワーにのぼった時のことです。あこがれのタワーです。遠くからながめて、

「きれいだなぁー」

ちかづいて、

「すごいなぁー」

　そして、いよいよエレベーターにのって、いちばん上へ。

実はここだけではなく、延々とこのような記述が続くのであります。人間業ではないような気がして参ります。

何とか手を抜こう（さぼろう）

私の様な手抜き人間は、とても出来そうにはないのであります。毎行毎行沢山の文字を打ち込む事などは、神経が切れるのではないかと思ってしまうのであります。

何とか手抜きが出来ないのかとさぼることばかりを考えてしまいます。

まず気になるのは

いく年かまえのことでした。３歳になったダイチャンが、おじいさんと東京タワーにのぼった時のことです。あこがれのタワーです。遠くからながめて、

のタグ羅列が、何とかならない物かと思ってしまうのであります。どうも冗長に過ぎているのではないかと。styleが使ってあるので、pのスタイルに全部押し込んでしまえば、幾らか簡単になるのではあるまいかと、

いく年かまえのことでした。3歳になったダイチャンが、おじいさんと東京タワーにのぼった時のことです。あこがれのタワーです。遠くからながめて、

これでどうでしょうか？幾らかましになったような気がいたします。それでも毎行これ（style="font-size: 11pt;color:#000066"）を書くには苦痛を感じそうであります。少しでも間違うと色指定があさっての方へいってしまいそうです。私はそれほど緻密と言う点で、「へたれ」なんであります。

そこで

どうせスタイルシートを使うのであれば、pそのもののスタイルシートにして、<body>の外に書いてしまって良いのではないか、とまた手を抜くことを考えるのであります。

で、<head>部分に

p{ color:#000066; font-size:11pt; }

と、書けば大丈夫。いやいや、やはりそれでは駄目なのでした。は方々で使われており、すべてのが影響を受けるこの方法では、大変なことになることに気がついたのであります。

それではと、pにクラス名を付けたらどうなんだ、と遅蒔きに気がつくのが「へたれ」の特徴なのではありますまいか？

p.houwa{ color:#000066; font-size:11pt; }

こうすれば先ほどのものは

いく年かまえのことでした。3歳になったダイチャンが、おじいさんと東京タワーにのぼった時のことです。あこがれのタワーです。遠くからながめて、

と、書けばいいことになります。大分手抜きが出来ました。しかしそれでもclass=…と余分なものを書かなければなりません。どこまでさぼりたいのでしょうか。あぁ「小欲知足」はどこへ行ったのでありましょうか。手を抜く欲望には限りがないのでしょうか。幸いこの部分は<table class="txm">の中にあるのでありました。何とかなるのではないか、と思ったのは私だけではないと思いたいのでありますが…

p.houwa{
color:#000066;
font-size:11pt;
}

を

.houwa p{
color : #000066;
font-size : 11pt;
}

と書き換え、更に<table class="txm">を<table class="txm houwa">と書き換えます。そうすれば先ほどのものは

いく年かまえのことでした。3歳になったダイチャンが、おじいさんと東京タワーにのぼった時のことです。あこがれのタワーです。遠くからながめて、

と書くことが出来ました。メデタシ・メデタシ。ん？の後の空白は何なんだ？行頭の空白かぁ？しかもセリフ部分は色が違えてあるし、とか書いてある、どうする？

結局

/* 法話内のpの設定 */
.houwa p{
color : #000066;
font-size : 11pt;
text-indent : 1em;
}
/* セリフ部分の設定　*/
.serihu{
color : #006600;
font-weight : bold;
}

「これでどうだ！相当減ったぞ」と手抜き効果を想像するのであります。これを使用する前提で書き換えるのであります。

いく年かまえのことでした。３歳になったダイチャンが、おじいさんと東京タワーにのぼった時のことです。あこがれのタワーです。遠くからながめて、
「きれいだなぁー」
ちかづいて、
「すごいなぁー」
そして、いよいよエレベーターにのって、いちばん上へ。

しかし、この文章のあるところは恐ろしく入り組んだtableの中にあるんであります。このようなテーブルを管理するのは願い下げにしたいものであります。そこでテーブルをなくしたときにはどうするかを考えなければなりません。

答えは案外簡単で、こういった時こそ<div>の出番であります。

<div class="houwa">
いく年かまえのことでした。３歳になったダイチャンが、おじいさんと東京タワーにのぼった時のことです。あこがれのタワーです。遠くからながめて、
「きれいだなぁー」
ちかづいて、
「すごいなぁー」
そして、いよいよエレベーターにのって、いちばん上へ。
</div>

あぁ、これで緻密さに欠ける私でも、何とか間違わずに書けるかもしれません。と書くと、「あぁ、ここは会話部分なのだ」とソースを見ても判るようになります。「人間、さぼるために努力する」、案外眞實ではないのかと思うのであります。

プロは凄い

それにしても、練達の師（プロ）のなさることの綿密さ、あぁいった込み入ったものを一字一句間違わずに記述する才能は、へたれシロートには想像を絶するものがあると感服した次第であります。

まだ続く予定。

というわけで以下追記。2005/12/21

何故こうなったかを想像してみた

単位または区切り

ワープロなどで文書を作る場合に、文書の右に文字を揃えたくなるときがあります。

ワープロは便利なもので、「右揃え」などのアイコンをクリックするだけで右に移動してくれます。後でいかなる文字を加除しても、右揃えは維持してくれます。

この場合、操作の単位は行単位になっているわけです。

行中の文字のスタイル（大きさとかフォントとか）を変更する場合には、恐らく該当部分を反転させ変更していると思われます。この場合は操作の単位は文字列になっています。

ワープロの場合、空白は単語の区切りとして扱われていると思います。空白で区切られた半角英数字の文字列はそれぞれひとまとめとして扱われているはずです。

単位、区切りには、「ページ」「行」「単語」「文字」と幾段階にもなっているわけです。（章とか節レベルで扱えるのもある）

あのページはどうなっているのか

もう一度、彼のサイトの一部を抜粋してみます。

いく年かまえのことでした。３歳になったダイチャンが、おじいさんと東京タワーにのぼった時のことです。あこがれのタワーです。遠くからながめて、

こういったものがすべてのに記述されています。

何故こうやってご丁寧にも、fontだのspanだのを幾重にも書くのでしょうか？「プロの緻密さ」と思いたいですが、実際は何かオーサリングソフトを使っていると思われるのです。商売でツールはまずいのではないか、とのご意見もあるも知れませんが、私はそうは思いません。便利なツールであればどんどん使うべきなのです。品質を維持する上でプラスに働くのであれば、使わない理由はありません。

この場合単に文字列を反転させフォントサイズや色を指定した風に見えます。行単位で指定されたかどうかは、画面表示を見る限りでは何も判らないからです。そして出来上がるものは、推奨はされていませんが、HTMLの仕様としては間違ってはいません。

この事から想像するに、この業者さんは何かAuthoringソフトを使い、文字単位でワープロ感覚で制作したのではないかと。そして恐らく、編集するつもりをもって、ソースを眺めたことはないと推測されます。

ワープロの名誉のために書き添えますが、今時のワープロは、書式の指定の単位は「文書全体」>「ページ」>段落の集まったブロック>段落>文字単位等々、きめ細かく設定できるものが多いようです。そしてcssと同様に書式に名前を付けておくことも、また可能になっています。

何が問題なのか

まず、上記のように、見た目変わっていなければ良いのではないか、とのご意見もあるかと思いますが、

文書量が増大します。如何にブロードバンドとはいえ軽量化することに務めるべきだと思います。
メンテナンスに手間が掛かります。行を追加するたびに気を使わなければなりません。また、表示される文字の修飾（サイズ・色）を変更するときには、多少手間が掛かるでしょう。
統一的なデザインになりにくい。現在でも背景色・文字色等混乱が見受けられます。色が変えてあるからリンクが張ってあるのかと思うと、そうではないことが多く、マウスを置いてみるまでリンクがあるのかないのか判らない状態になっています。
「日　時」などとすべきではありません。これは「人の目」以外では「日時」とは読めないからです。HTMLを読むのは「人」とは限らないからですが、読み上げソフトも人ではありません。読み上げソフトが利口で「日　時」を「にちじ」と読む可能性はありますが、そのことに依存してはいけないでしょう。

空白混じりの「日　時」では「日時」でページ内を検索してもヒットしません。

「日時」であればヒットします。表示に合わせて文章を変えてはいけないのです。

同様にどう活（い）かすわたしのいのちとしても「人以外」はタイトル（小見出し）だとは思ってくれません。読むのは、例えばHnを集めて目次を作る（生成する）ソフトかも知れません。文章を要約するソフトかも知れません。そういったものには、単に強調するだけでは無効になるかも知れません。

「見た目」を考慮できるのは「人」だけです。
引用があれば明記すべきなのです。見た目文字色が変えてあるから良いではないか、ではないのです。読み上げソフトなどでは、<blockquote>があれば「以下は引用です」と読むソフトもあるのです。また引用一覧を作成するソフトにしてみると、文章中に引用元が書いてあっても意味を成さないでしょう。

同じ事ですが一文章を、テーブルのセル（<td>）で区切るべきでは無いと思います。書籍のデザインに近づけようとするのは間違いです。一つのファイルサイズがあまりに大きいのは問題ですが、HTMLでは縦の長さを気にする必要は無いと思います。
また、テーブルを使ってのレイアウトを必ずしも否定しません。

私も使っています。しかし、大きく二段にまたは三段にしてしまえば、その中は表として必要なもの以外にはテーブルを使ってのレイアウトをすべきでは無いと思います。全く必要のないものです。彼のページのデザインでのテーブルなど、レイアウトには不要のものです。

結局のところ

webデザインはまず文章の構造に従ってMark Upする。これが第一。見るものは通常User Agentを通じて閲覧します。MS-IEやFirefoxなどのブラウザはもちろんですが検索エンジンなどもUser Agentです。また読み上げソフトもUser Agentになります。これらが見るのは（指示することが）titleやHnで有るわけです。（そういえば彼のページは殆どのページでタイトルが同じなんだけど、シロートには判らない深い意味でもあるのだろうか）

デザイナはHnやblockquoteに対してデザインを施すべきだと考えます。人に対してさえ、色差が小さければ見にくい。私のように「近視で乱視で老眼で」などという人間には小さめのFontは苦痛でしか有りません。デザイン以前の問題です。PCはクライアント側で自由に表示を変えられます。フォトサイズの絶対指定はすべきではないのです。JavaScriptに頼ったデザインはすべきではないでしょう。少なくともデフォルトでのデザインをあらかじめ設定すべきです。

で

作者は、プロと単に自称する業者なのか、百歩譲って、単に善意でこの方が良いと思って（勘違いして）いるだけなのかと思えてしまうのですが……

ご意見・ご感想・愛の告白・懺悔等ございましたら掲示板に書込を。もちろん匿名可能です。