Monthly Archives: 10月 2011

HTMLとCSSの棲み分けについて

前のエントリで、HTML5とCSS3の現代的な棲み分けとして、

div#container > div:nth-of-type(3) > div > aside p {
...
}

のような複雑なCSSセレクタを組み立てて、HTML側のマークアップは必要最小限のclassとdivを使った 美しいものとするという方針には「疑問がある」と述べましたので、そのことについての詳細と、ハンズオンの発表者:一條 美和子さんに伺ったことを書かせていただきます。

プログラムの世界では、連携には「密結合」と「疎結合」という用語が存在します。このブログは大半がプログラマーに読まれているはずなので、ぴんとくる人がほとんどと思いますが、「疎結合」ということは、交換可能とほぼ同じ意味です。

今までの、HTML+CSSの書き方では、HTML側にclass属性やid属性を多様していました。

<div id="main">
hello, world <span class="number">2011</span>
</div>

こんな感じですね。このような形だと、HTMLがCSSに依存していると言えます。CSSから見たら、IDやclassという独自ルールの中で完結しているので、HTMLページとは疎結合です。HTMLから見ると、CSSにIDやclassを制約されてしまいますが、classは文字列に過ぎないので、ゆるい密結合です。この形なら、一つのHTMLに対し複数のCSSを、逆に一つのCSSに対し複数のHTMLを割り当てることができます。

そのかわり、

ページのタイトルは必ずtitleクラスをつけること

などの制約をHTML側にかけることになります。この方法は、一種のテンプレートエンジンを作っていることになります。IDとclassを一定のルールに当てはめれば統一的なデザインフレームワークに落とし込めるという考えです。

もし、これとは反対に、HTML側にはclass属性やdiv、spanタグは可能なかぎり書かず、CSSがセレクタでデザインを頑張ったとすると、そのCSSは、対象のHTMLに強く依存してしまいます。CSSから見たHTMLは密結合です。そのかわりHTMLはCSSに対してほぼ自由です。

このことのメリットは、HTMLが自由だということ。より、文章構造に特化することができ、CSSはデザインというふうに役割分担が徹底できます。デメリットはCSSに対するHTMLの交換ができないということです。極端に言えばページ一つ一つにひとつのCSSを書かなくてはなりません。

確かに、HTMLの本来の意味には正しいかもしれません。しかし、エンジニアリングの観点からすると、CSSファイルが複雑化し、CSSセレクタのトラブルも発生しがちですし(ページ書き換えたら崩れたなど)、複雑なCSSセレクタは処理が遅く、開発スピードも落ちるのではないかと危惧します。

いちじょうさんに聞いてみた

この件について、ハンズオン発表者のいちじょうさんに、懇親会で突撃して質問させていただきました。自分もお酒が入っていて完全に覚えていないので、間違っていたらごめんなさい。しかし、とにかく何か 信念を持たれていて、よろしくないマークアップは極力排除しようと熱い想いを持たれていました。

私「そもそもマークアップをHTML5で厳格にやるという発想に驚きました。そう言うのは本来XML(XHTML)の仕事ではないでしょうか?」

HTML5ではなく、XHTML2.0が出来ていたなら、さらにルールが厳格化されたでしょう。しかし、受け入れられたのは緩やかさが必要です。理想を求めるのではなく、実社会では現時点でベターな一時的な存在が必要なのです。

「テンプレートエンジンなどを作っていると、IDやclassが一定のルールで制限されますがそれは望ましくないのでしょうか?」

実は仕事上そのようなテンプレートエンジンを扱うことが多いです。あまり望ましくはないですが、しぶしぶ使います。それでもなるべく不要なIDやclassは避けるようにします。class='red'などは、色が赤じゃなくなったらどうするのか?と言って部下には書かせないように徹底しています。

「HTMLからデザインを排除する目的はなんですか?」

HTMLは見た目ではなく、URLに対応する「リソース」だと思います。例えば、デザイナが文字に色をつけたとして、それは「色を付けただけ」なのでしょうか?必ずそこには「強調したい」などの意味が含まれています。

考察

いちじょうさんに伺ってわかったことは、現段階も理想型ではないということです。Webで提供されるのは紙ではなくデータです。したがって扱うのは見た目ではなく情報なのです。データを情報として扱うのに最適なフォーマットを使い、見た目の部分を外出しすることがURL=リソースを中心としたWebという世界のあり方なのですが、しかし現実はそこまで追いついておらず、各種ハックを使いながら、理想を目指して歩んでいるのだと思います。

自分もCSSが不慣れなだけで、慣れればこの書き方は良いのかもしれません。CSSはimportもでき、mediaクエリや、いろいろな道具を使い分けることで、かえって共通化を徹底できるかもしれません。マークアップ側もよりルール化された記述をすることで、統一性のあるページ群をつくることが 出来るのかもしれません。

言えることは、今あるものも理想型などではなく、理想に向かっての一時的な状態であるということです。理想に向かって現実を一歩一歩踏みしめることで、未来のWebがより一層便利なものになると思います。

だれも何が答えかなんてわかりません。

BootCamp 2011 に参加してきました

去年はGDDの前日に会場と同じ東京国際フォーラムで行われましたが、今年はGDD会場の横浜ではなく、六本木のGoogleオフィスにて行われました。
DevQuizを100.0点で落ちた僕としては、せめて横浜に是非行ってみたかったのですが、六本木のような綺麗なところは滅多に行かないのですし、ましてや森ビルの高層階の、あまつさえGoogleオフィスに入れるということではもう刺激的すぎてお腹いっぱいです。(*´Д`*)

さて、参加したセッションについてですが、この案内の存在を前日に知ったので(告知メールがスパムに振り分けられていた!)直感で選びました。
https://sites.google.com/site/tokyogtugusersite/bootcamp-2011?pli=1

ハンズオン:Google Apps Script #gas1

Google Apps Scriptは、VBAのGoogle Docs & Spreadsheet版です。手軽にサーバーサイドアプリケーションを作るプラットフォームとしてはいいかもしれません。最近はGUIエディタも標準搭載していてこれって、明からさまにVBAを意識していますよね。。。?

開発環境は、ブラウザ上で動作し、デバッグ機能なども備えています。が、スプレッドシートも含めてちょっともっさりなのがなんとも残念ですね。通信の速さにも夜と思いますが。正直、Excel+VBAには大変うんざりしているので、GASには期待しています。

cronのようにタスクをスケジューリングしたり、メールを送信したりできるのは、Excel+VBAではできない強力さですね。ハンズオンでもやりましたが、URLからJSONを取得したり、PDFを出力したりもできるので、かなりのポテンシャルがある技術だと思います。

気になるのは、シートの共有方法ですね。会社で導入するとして、共有フォルダ的にトップダウン的に管理できるのか、Groupなどと連携できるのかどうかが気になりました。標準のGoogle Docsは、個人個人ベースの共有管理だと思いますが、それだと属人的すぎますよね?

セッション:「はじめての Chrome Extension」 #chr1

Chrome Extensionの作り方。非常に簡単に作れると思います。Chrome Extensionというと、URLバーの右に並ぶボタンが特徴的だと思うのですが、それだけではなく、いろいろなイベントをフックして、処理をすることができるようです。

これも開発が簡単で、可能性が広い技術ですね。

セッション:「App Engine 倹約のすゝめ」 #gae1

「AppEngineが高い苦情を私に言われても困ります」と、うさぎアイコンの中の人が言っていました。

AppEngineは以前から追いかけてきたのですが、実案件経験がないからか不勉強で、インスタンス内で並列にリクエスト処理ができず、簡単にspin upしてしまうということを知りませんでした。
Concurrent RequestsをONにし、インスタンス数を制限することで、場合によっては無料枠内か、かなり安い金額で運用が可能みたいです。

個人的にConcurrentというとConcurrentHashMapと連想してしまいますが、関係ありません。

ハンズオン:「新聞風の1ページを作ってみよう!」 #chr2

HTML5を使って新聞記事のような、美しい段組をしたニュースページを作ろうというハンズオンでした。HTML5というと、Canvasとか、WebGL、WebStrageとか、WebSocketなどの技術(これらは厳密にはHTML5ではありません)を連想してしまいますが、硬派にも、headerとかsectionとかarticleとか、HTML5マークアップと、CSS3を利用した近代的Webページ作成術の実践方法でした。

普段こういう仕事はデザイナーさんにお願いしてしまうのですが、自分も数年前までは大学の部活の「ホームページ」を作成していたので、多少のCSSやマークアッピングは出来るだろうと思っていたのですが、しっかりその傲慢さはくじかれました。

最近のWebページ作成は、CSSセレクタを多用して、HTMLマークアップを汚さずにデザインを調整するのが標準のようです。これについては違和感があったので、発表者の方に後の懇親会で質問しました。

CSSセレクタは難しいですね。こんなのを平然と書くんですか!最近のWebデザイナさんたちは。。。(;´Д`)

div#container > div:nth-of-type(3) > div > aside p {
...
}

CSS3は、このCSSセレクタがより一層充実して、今までにもましてマークアップを汚くせずにデザインを実装することが可能のようです。日頃から、Webデザイナーさんといえど、HTMLやCSSが何を出来るのか知らないと何も作れないので、HTMLコーダという中間職種の存在には否定的に思っているのですが、こんなの書いているんですね。ちょっとマークアップが変わるだけで動かなくなるような。。。デバッグも大変だ!

さて、このCSS指定のあり方について、僕は疑問があると先ほど書いたのですが、これについてはまとまった内容になるので別エントリにしようと思います。

懇親会

すべてのセッションが終わるとそこには用意されたビール、ピザが用意され、スピーカーの一人あんざいゆき(yanzm)さんの声で「乾杯」でした。(どこまで至れり尽くせりなんだ!)

立食パーティー形式は座席という制約がない分、話題を見つけるまで人見知り気味の人はキョドって徘徊してしまいます。なんとか1時間徘徊したあとで、shin1ogawaさんと、HTML5ハンズオンのいちじょうさんに話しかけることができたので良かったです。

帰り道も、一緒に麻布十番駅まで歩いた人と、テストとプログラムの品質について熱く語ることができたので非常に楽しかったです。勉強会に行くと同じようなことを考えている人が本当に多くて面白いです。仕事だと、何故かなかなか会えないんですけどね。なんででしょうねえ。

小学生の作文みたいになってしまいましたが、勉強会のレポートなんてこんなもんでしょう?中身のあることは別エントリにします。それでは、みなさんも勉強会ライフをエンジョイしましょう!