2006年11月アーカイブ

仕事の合間のエントリなので、思ったままのことを手短に書きます。

• そもそも CSS でデザインするためには (X)HTML が分からなければ意味がない。
  • div 要素が必要以上に発生したり、直接テキストが入るのはいかがなものか（せめて p 要素で括って欲しい）
  • 同じような現象として空 div や br 要素を使って float プロパティによる回り込み解除をするとか。
  • 上記2つは物理マークアップと大差ない
• W3C 信者や strict 厨になれとは言わないが、妥協すると言う風潮が広がることは後世にとってもよろしくない。
  • だけど W3C や WaSP の努力は認めるべき。
• 「CSS でレイアウトすればリデザインが簡単」と言えるあなたを私は信じられない。
  • 今のデザインで固まってしまった (X)HTML 文書を改修せずに、デザイナから上がってきたデザインをその通りに表現できますか？
    • (X)HTML 文書の構造が決まっているのに、それを無視したデザインを上げてくるデザイナを信用できますか？
    • デザイナはマークアップを知らなければ良いと思っていますか？
      • そしてデザイナは (X)HTML を知ろうとしましたか？
        • そのデザイナから上がってきたデザインを可能な限り再現しようと努力しましたか？
  • 本気で (X)HTML 文書を改修せずにリデザインをするためには css Zen Garden のようにしなければ高い柔軟性はない。
• (X)HTML 文書が妥当であるからこそ CSS レイアウトが可能であって、そうでなければただの見た目 CSS。
• 「テーブルを使ってはならない」と思ってるあなたこそテーブルを使ってくださいお願いします。
• 「(X)HTML ＜ CSS」ではない。
  • 「CSS で表現しなければならない」 と疑心暗鬼にかかってるのは問題。
  • ブラウザの表示がおかしいのは、あなたが9割原因であることに気づいてください。
    • 残りの1割は文法上、妥当・非妥当に関わらずほとんど回避できます。
      • それでも回避できない場合は JavaScript やテーブルなどを使ってください。

最近やたら CSS 関連のエントリを見かけるのですが、内容としてどうかと思うのが立て続けにあったので。

関係ないですけど、「(X)HTML + CSS は万能薬ではない」ってどっかで見た気がするんですが、オリジナルがあったら申し訳ないです。中の人とか。

元ネタ：ふりがなをフリガナで書かせるサイトの神経が理解できない

簡単に整理

• ウェブサイトにあるフォームにおいて、ふりがなを平仮名とカタカタ混在している
• そもそもにおいて、なぜカタカナで書かせるのか
  • ATOK が穢れる（学習してしまう）
• 別に平仮名であってもシステム側の影響がないのでは？
• F7 キーでカタカナに変換できるけど、それが出来ない人はどうすれば？
  • と言うかどうやらカタカナにしているのは外国の方の名前を表現するためにあるらしい（”ヴ”とか）

何と言うか、これって Web 上の問題と言うより、日本語変換ソフト側の問題でもあるし、もっと言えば OS のユーザビリティにも関わる、意外と根の深い話だったりするわけですが。
と言うか上記の話をさらに区分けすると、

• 平仮名で入力：外国の方はお断り
• カタカナで入力：変換が面倒とか ATOK が穢れると言う人はお断り

と（無理矢理感はあるけど）なるので。「じゃあ両方許容すればいいじゃん」って声が聞こえてきそうですが、それが今のところ聞こえてきていないのは現実的じゃないからなのかと。
とどのつまり、両方許容するためには

「ふりがな」 or 「フリガナ」

と表記していたのを

「ふりがな、もしくはフリガナ」

となる。
ただここで忘れてはならないのは、我々健常者ではなく障害者（特に視覚障害者）に対してはどちらも優しくないのが現実です。
音声ブラウザでは「ふりがな」と「フリガナ」の識別は出来ません。どちらも同じ音です。平仮名もカタカナも関係ありません。
なので、アクセシビリティを考慮すると

「ふりがな（平仮名）」

「フリガナ（カタカナ）」

となる。じゃあこれで両方許容する場合を考えると

「ふりがな（平仮名、もしくはカタカナ）」

となる。
それに視覚障害者が、入力した文字列が平仮名なのかカタカタなのか分からないと言うオチもあるので、あまり入力制限を設けるのはよろしくないと思う。
（同じように住所や電話番号を全角半角の識別をしなければならない場合もこれに当てはまる）

また残りはあとで。

最近何かと新機種発売とか MNP 周りなど、モバイル関係の話題が何かと多いですが、そんな私は現在 DoCoMo の N902i を使用しています。
ちなみに私がモバイルを持ち始めたのは高校3年の卒業間近な1月。およそ6年前です。最初に手にしたモバイルは N502i でした。当時はカラー液晶が出始めたばかりで、上位機種として N502it がそれに当たり、それまではモノクロ液晶。しかし N502it にはせず、あえて1世代前の N502i を購入した理由はただ単に”カラー液晶は必要ない”からだった。まだ今ほど多機能ではなかったし、カメラさえも搭載していなかったモバイル端末にカラー液晶は不要と考えた。
だが時の流れは多機能化が進み、端末のスペックが上がるに連れてより付随する機能やモバイルコンテンツもカラー向けになっていった。

そして約2年後、買い換えた機種は N504i だった。これで初めてカラー液晶のモバイルを持つことになる。だがカメラが搭載されていなかった。そもそも 504i シリーズにはどれにもカメラは無かった。ほぼ同時期に発売された 251i シリーズにはカメラは搭載されていたが、これまでの 50x シリーズを使いたかったのでこれにした。それにやはりまだカメラの必要性を感じていなかった。
これを手にした時の感動は忘れられない。あの大画面液晶に映るハイクオリティなデフォルトのイルカの待ち受け画像は感動的なものだった。発色と明るさには目を見張るものがあった。

それからまた約2年後、時代は mova から FOMA へと移り、N900i を手にする。（あまり関係ないが、個人的な事情により N900i から番号を変えた。しかし基本的には番号のみを変えることは不可能で、一旦解約し、再度契約することにした。今思えばバカなことをしたものだと後悔している。いちねん割引がリセットされたのだから。）ここで初めてカメラ機能が搭載された端末を使用することになる。とは言えそれほど使う機会はなかったが。
また、FOMA の特徴的な機能とされるテレビ電話機能はいまだに使ったことがない。テレビ電話は時と場所を必要以上に気にするツールであるため、気軽に使えるわけではない。そもそも画面に向かって話すという習慣自体が無いのも一因でもあるが。

そして去年の末に現在の N902i を購入した。お世辞にもデザイン面では良いとは言えないが、N らしい端末であり少なくとも満足している。一時期はミュージックプレイヤーとして活躍したが、現在は iPod nano 2GB に取って代わられた経緯がある。そして 902i から新たにプッシュトークが実装されたが、やはりこれもいまだに使用したことがない。そもそも対応端末を持っている人が少ないのもあるが、プッシュトークでなければ出来ない場面に出くわしていないので使い道がハッキリしていない。

とまあ前置きが長くなってしまったが、これまでずっと N シリーズを使い続けてきたのには訳がある。そしてそれは自分自身当然だと思っている。

1. 基本的なインターフェイスが変わっていない

   メーカによって端末のインターフェイスは違う。キー配置はさほど変わらないが、どのキーがどの機能に割り当てられているかに個体差がある。なのでずっと同一メーカの端末を使用している。
   （もっとも、mova から FOMA に変更した際は大幅に変わっていたのでそこは例外となる）

2. ニューロポインタの有無

   FOMA の N シリーズ独特のニューロポインタは使い始めると他のメーカ端末が使いづらくなる。特に i モードやフルブラウザなどで Web サイトを閲覧する場合は非常に重宝する。

3. スタンダードデザイン

   それほど突飛なデザインはしない。カラーバリエーションも一般的な色が多いので受け入れやすい。
   （N902iX HIGH-SPEED は先進的な機能もあってああしたデザインになったが、ガンダム好きの自分だからか、かなり惹かれたのはある。）

パッと思いつく限りではこの3つ。特に最初の2つは日頃毎日使う上で重要なファクターであります。
もっとも、個人的な感情で言えば N シリーズが好きなだけなんですけどね。デザイン的に他のメーカ端末に惹かれることはあっても、そっちに乗り換える気は持ち合わせていない。キャリアもね。

ものすごくどーでもいいんだけど、考えない人で「アクセス数が多いのって、そんなに楽しいですか？」を見て、元アクセス解析ツールを開発していた会社に勤めていた経歴の私から1つだけ。

アクセス数＝ PV （ページビュー）数

PV 数とは「アクセス数を数える単位の一つで、サイト一つへのアクセスではなくページ一つ一つへのアクセス一回ずつを数える。」と、はてなダイアリーのキーワードにある通りで、

PV 数 ≠ ユニーク（ユーザ）数

である。
ユニーク（ユーザ）数とは「Webサイトを特定に期間のうちに訪れた人の数。延べ訪問数(ページビュー)は、一人が複数回アクセスしても増えていくが、ユニークユーザーは複数回訪問した場合も1人と数える。」とある通りで、

アクセス数 ≠ ユニーク（ユーザ）数

となる。なので

たとえば、このブログ「考えない人」なんかは、驚くほどアクセス数が多くて、一日に 20～30 アクセスもある。あえて強調するのだけど、一日 20～30 アクセスというのは、無茶苦茶に多い。信じられないほど多い。

毎日 20 人の皆様が、とりあえず斜め読みくらいはしてくれる。非常に不完全ではあるけれど 20 人もの皆様と、それなりのコミュニケーションが成立している。これは実は、すごいことだ。しかもその 20 人は、日本中のいろんな地域の人で、いろんな立場の人で、私とは（たぶん）初対面の人ばかりなのだ。

は正確には正しくない。

まあ正直そんなのはどーでもいいし。ネタにマジレスしてる気がしてしょうがない・・・。

でもこれでオレもアクセス数が増えるかな！？（ぇ

WWW WATCH にて XHTML、CSS を学ぶ時の 6つの間違いがエントリされてるのをはてなブックマーク経由で見たんですが、概ね（と言うか完全に）同意できます。まあ最後のはオチとしては面白いんですが、そんな人が「XHTML とはー CSS とはー」と声高に叫ぶとは思えませんがね。本当にそんな人に教わったもしくは教わっている人は不幸すぎます。この業界で 1，2 を争うほどの。
ちょっと個人的にいろいろ言ってみる。あくまで「オレはこう」みたいな。うぜー。

個人的な意見ですが、「Dreamweaver」 を買うお金があるなら、最初はそのお金で 「Fireworks」 を買った方がいいんじゃないかなと思います。いや、別に Fireworks じゃなくてもいいんですけどね。Web サイト制作を始めるにあたって最初に購入するべきソフトとしては、きちんとした画像編集ソフトの方をオススメしますよということです。

最初はテキストエディタで手打ちしろと。そのかわりテキストエディタはきちんとしたソフトを用意しましょう。（個人的には Win なら 「秀丸エディタ」 がオススメですが）

「最初からオーサリングツールを使わずにテキストエディタを使え」と言うのはちょっとハードル高いけど、多分これしか対処法と言うか、勉強法は無いのかなとは個人的にも思う。Dreamweaver もそうだけど、良くも悪くもオーサリングツールはレンダリングエンジンを乗せてるから、その「見た目」を”正”とする傾向は初心者にはある。（経験談）
あくまで HTML 文書を記述するだけならテキストエディタでよいし、それがビジュアライズとして機能する必要性はないので。

あと個人的にオススメしたいテキストエディタは Windows 標準装備のメモ帳。ez-HTML でもいいですけどね。

でも仕様書は英語だし、、という人にオススメの書籍を挙げるとすれば、XHTML 関連では神崎正英氏の 「ユニバーサルHTML/XHTML」、益子貴寛氏の 「Web 標準の教科書」、CSS 関連では 「セオリー・オブ・スタイルシート」 あたりがよろしいかと。

それでも W3C の仕様書は必ず目を通しておくべきものですよ。

あー、「Web 標準の教科書」はかなりハードルが高いなぁ。それ以外の書籍は読んだことないですが・・・。確かに「Web 標準の教科書」は良い。(X)HTML と CSS の仕様書をそのまま書籍化したって感じが実にいい。しかもそれなりに解説もされてるので、あと数年は使える本だと思う。
ただ、如何せん難しすぎる。別に益子氏が悪いとかじゃなくて、各仕様が複雑すぎて理解できないと思う。それこそ HTML に関して何も前知識が無い人からしたら。（テーブルレイアウトだけしかできないマークアップエンジニアも同類です）ただまあ、これ以上ないってくらいの重要資料（すでに書籍扱いではない）なので、HTML と言う文書構造が多少なりとも分かったら読むべき本だと思う。

そして自分のオススメは「詳解 HTML & XHTML & CSS 辞典」です。(X)HTML の各要素や CSS のプロパティ別に対応ブラウザが掲載されているのと、DTD での要素定義が一覧で見られるのは重要。
あとこれは Web に関わる人全てに言えるけど、「ブラウザのしくみ」は読んでおくべきだと思う。Web の全てが載ってる（たぶん）ので、デザイナやマークアップエンジニア、プログラマなどの技術者もそうだし、ディレクタやマネジメントなどの管理職（と言ってしまっていいのか分からんけど）も知っておくことは多い。

これ、意外に理解していない人がいるのですが、XHTML がすべての基本です。CSS は XHTML で文書構造を定義されたものに対してスタイル （見た目） を定義するもので、どちらが主で、どちらが従かは明白です。

自分がこれに当たります。昔の話ですが。HTML はそこそこ知ってて、そこから CSS レイアウトに入ってしまったので、ちょっと遠回りしてしまった感はある。だから 2 年もかかったんですけどね。それがだいたい 6 年前。
でも当時からしてみたら、今は CSS に関するノウハウはすごい多いし、この環境で「CSS 勉強するの難しい」とか言ってるのは正直甘いと思う。関連書籍もたくさんあるし、ぐぐれば腐るほど出てくるし、それでレベルアップできないのはただ単に避けてるだけとしか思えない。なんだかなぁ。

とまあ、好き勝手書きましたが、最後にちょっとだけ。
こうした XHTML+CSS に関するエントリを見て「よし、自分もやってみよう」と思うのは大いに歓迎です。ただ 1 つだけ誤解して欲しくないのは、全てを CSS で表現しようと思わないことです。
確かに CSS で全ての表現を可能にします。だからと言って、無理に文書構造を当て、CSS で装飾するのはよろしくないと思います。
具体的には

• table 要素を使ってはいけない
  • （似たような意味で）代替として定義リストを使用する
• クリッカブルマップを敬遠する
• 無闇に画像置換をする
  • 同様に img 要素を敬遠する
• 必ず XHTML 文書でマークアップしなければならない

と言った誤解はして欲しくないです。そしてこれは (X)HTML+CSS を勉強する過程で恐らく必ずと言っていいほど起こる問題です。CSS で表現すべきところと (X)HTML 文書で実現すべきところの区分けは曖昧ではありますが、全部を全部 CSS 任せと言うのはどうなのかな、と思うので。（mixi の CSS テクニックのコミュニティを見てるとそう思わざるを得ないので）

えむもじらさんが Firefox 2 にインストールする3個の拡張機能募集と言うエントリがあったので答えてみる。前にも何度か同様の企画をされていて、その当時はブログをやっていなかったので今回初エントリとなります。

DOM Inspector

Firefox を開発者向けインストールすると標準で装備される拡張機能。個人的に Web Developer にある要素別に枠表示する機能より、これで HTML 文書の構造を把握するのが分かりやすいので。それに HTML 文書構造をツリーで表示してくれるのも助かる。しかも各要素の DOM ノードや CSS で何が割り当てたれているかも個別に判別可能。さらに JavaScript の Object さえも解析するので、かなり重宝してます。

Google Browser Sync

複数のマシンにインストールされている Firefox のプロファイルを共有化する拡張機能。ブックマークだけでなく、セッションや Cookie さえも共有化できので、いつでもどこでも Firefox があれば同様の環境で使えるスグレモノ。ただし初回起動時に全データをアップロード・ダウンロードするので、少々遅いのが難点。

Html Validator

Tab Mix Plus と IE Tab ですごい悩んだが、やはり開発者としては Html Validator は外せない。リアルタイムに HTML 文書をバリデートしてくれるので、わざわざ HTML-lint 等にチェックをかける手間が省けるので重宝してます。ステータスバーに出してくれるのも親切。

と言う感じですが、Firefox は通常のブラウザと違って開発者向けにカスタマイズできるのが最大の魅力ですね。Web を生業としている以上、どれだけ製作物の品質とスピードを上げられるかが重要なところで、それに対するツールの役割が大きく占める現状では、IE や Opera よりも Firefox の方が一番合ってると思う。