CSS Nite in Nagoya 2007 レポート
今やってます。CSS Nite in Nagoya 2007!今回はMacを持ち込んでるのでバッテリの持つ限りなるべくライブで更新します。テーマ2まで更新して、バッテリ切れました_| ̄|○ 残りは翌日に書いています。
- [テーマ1] CSSの基本とブラウザ互換
- [テーマ2] ディレクションとワークフローの見直しと新たな視点
- [テーマ3] CMSツールとして使われるblog、その実際と活用例
- [スペシャルセッション]
- [テーマ4] アクセシビリティ概論と実装テクニック
- [その他]
(フォローアップ資料などの参考資料リンクは、後日ある程度揃ってから追加更新します。)
[テーマ1−1] DreamweaverでCSSを扱う上でのTipsと注意点
鷹野雅弘 さん (株式会社スイッチ)
基本に戻って、CSSの基礎となる解説と、Dreamweaverを使ったコーディングをライブで見せていただきました。
買ったMacの為にMac用のAdobe CS2を買ったらDreamweaverが付いてきたので一応持ってますが、使っていません。。(>_<)
今回気になったのは、鷹野さんが提案された「CSSのフォント指定に関する提案」、Dreamweaverのデフォルトである「MS P ゴシック,Osaka,ヒラギノ角ゴ Pro W3」じゃなくて、単に「sans-serif」だけでいいじゃんとのこと。
それぞれのOSの理想のフォントで指定してあげたいんだけど、MacでもOfficeいれてるとMS P ゴシック入ってたり、Vistaとメイリオの登場でさらに指定数が増えてしまったり・・・。それなら、ブラウザの標準フォントにまかせるというカタチで「sans-serif」でいいんじゃないか。
僕もそれには同意で、このサイトでは「Verdana,sans-serif」としています。ただ、せっかくメイリオ入ったVistaなのに、IE7のデフォルトフォントが「MS P ゴシック」なんですよね・・・。なんだかなぁ。Microsoftさんどうにかしてください。泣
ちなみに参考資料として以下の記事が参考になると思います。
(07/03/12追記)CLEAR MEDIAさまの記事でツッコミいただきました。「sans-serif」だけの指定だと、IE6 SP1などで文字化けが発生するそうです。まいったなぁ。
[テーマ1−2] (極力)ハックしないCSS
山田あかね さん (エスカフラーチェLLC)
pur*logのpurprinこと、山田あかねさんのセッション。CSSでハックはしないように書こうよというお話。
ハック前提ではなくて、どうしても必要なときにハックを使うという考え方に変えていこうという趣旨のもと、かなり専門的な話ですので、資料は後日アップされるものをご覧になれば分かりやすいと思います。
ハックをさけるためにXHTML側にdiv要素を追加するのはナンセンスですが、どうしても必要な場合は、CSS3草案にあるsection要素の概念(h要素ごとにsection要素で括る)をによって、<div class="section"></div>を追加する、という考え方にはすごく頷けました。
あと、「お肌のXHTMLを美しく保たないと、いくら化粧のCSSを工夫しても奇麗になれない」というのは女性ならではの例え方でうまいなー、と思いました(o e o)/
[テーマ2-1] 大規模案件から学ぶ、ビジネス・アーキテクツのワークフローの考え方
森田雄 さん ([bA] Business Architects Inc.)
以前WCAN/200606でお話された森田雄さんがワークフローについてお話されました。
実際にbAが過去に制作したスタティック型ワークフローモデルを見ながらだったんですが、これがかなり大規模なもので圧倒されました。。
ワークフローの利点としては
- チーム全員がアウトプットのタイミングを共有できる
- 未来の負荷見込みをあらかじめ立てられる
- 引継ぎがうまいこといく・・・?(ごめんなさいメモとりきれませんでした_| ̄|○)
全体を俯瞰できるような管理システムは、案件が大規模であろうと小規模であろうと必要ですね。
また、人材育成について、bAでは部署や階級というものが存在せず、フィールドという概念でプロジェクト管理し、スキルという概念で人材管理をされているそうですが、まるでゲームのスキルのように各項目にランクとレベルが設定されてるなぁと思いました。
こういう独特な手法は人によって好き嫌いが分かれるから、実際にこの規模で実践されているbAという会社はさぞかしユニークなとこなんだろうなぁ、と思います。バーチャファイターとかね。笑
あと、FORESTS FOREVER作られてたんですね。このサイトいいですよねぇ。
[テーマ2-2] 名古屋流Webディレクションの光と影
斎藤雄一 さん (Fans-JP.inc)
Webディレクタ・Webディレクションとはどういう仕事か、また、名古屋と東京・大阪とのWeb制作業界の比較をお話しされました。
まず、東京のWeb制作関連の求人数が名古屋の14倍ということに驚愕しました。大阪とくらべても東京は圧倒的です。それだけ東京のWeb関連の市場が大きいということですね。。
さらにはWebディレクタの割合も東京の1/2だそうです。
Webディレクタは経験値が必要な仕事であり、名古屋と東京の大きな差はWeb制作経験である。そこが各地区のWebディレクタの数にも影響してきている、ということでしょうか。
この後、斎藤さんが実際に行った案件(旅のSNSだそうです)を、実際の流れに沿ってWebディレクタの立場としてのポイントをお話されました。詳しくは資料をご覧になった方が分かりやすいと思いますが、サイトが実際にどう作られていくかを見れるのは貴重ですし、非常に参考になりますね。
プロジェクトメンバーを信用しなくてはいけないが、信頼してはならない。(頼りすぎるなってことですね) なぜならば、Webディレクタが最後の砦であるから、ということだそうです。
[テーマ3-1] 「マッシーのグルメ日記」のしくみ
益子貴寛 さん (CYBER@GARDEN)
「マッシーのグルメ日記」がどのように構築されているかのお話。
僕もこの日記をフィードで購読しているのですが、ほぼ毎日複数エントリなされていて益子さんモチベーションに驚くばかりです。
この日記はMovableTypeとそのプラグインであるRightFieldsを利用して構築されています。このRightFieldsは、一般的なブログにある「本文」と「続き」に加えて、新しい記入欄を追加できるという素晴らしいプラグインです。
この導入によって、ブログシステムはCMSとしてかなり強化されます。SereneBachにもこういうプラグインあるといいのになぁ。
また、益子さんは、MTが「ワンシステム・マルチブログ」である点もWordPressや他のブログシステムに比べてCMS向けであるとおっしゃっていました。
[テーマ3−2] CMSとしてのa-blogの活用
やまもとかずみち さん (アップルップル)
やまもとかずみちさんは、WCANを主宰されている方で、僕も色々とお世話になっています。今回はかずみちさんが代表を勤めるアップルップルで開発されているa-blogについてのお話。
注目は、導入例として紹介されたAqua sun marineです。見た目はフルFlashサイトだけど、JavaScriptを切ってみるとNewsの欄が書かれたブログ(a-blog)。つまり、検索エンジンロボットはちゃんとこのニュース情報をクロールできるし、RSSでのフィード配信もできる。
これは、所謂Flashブログのように、a-blogに書かれた記事データをFlashに食わせて、それをJavaScriptで書き出しているのですが、ちゃんとSEOにも配慮されているのは素晴らしいですね。手法の一つとして大変参考になります。
また、現在開発中のa-blog 2.0では、マルチブログに対応し、各機能が大幅に追加・強化されるそうです。
ちなみに現在WCAN 2007 springの申し込みをメンバーページにて募集しています!4月7日に定員140名です。みんな参加してね!
[スペシャル・セッション] マイクロソフトが放つWeb構築ツール – Expression Web
春日井良隆 さん (Microsoft®)
マイクロソフトのExpressionの紹介と、その中の一つであるExpression Webを実際に操作を見せていただきながら解説されました。
「えー、フロントページのことは忘れてください。あと、Wordが吐くHTMLコードのことも忘れてください。」(会場笑)
マイクロソフトさんは本気らしいです。Macに移行した自分として正直使わないと思いますが^^; 一応製品ラインナップはこんな感じです。
- Expression Web:Web構築ツール
- Expression Blend:デザインツール
- Expression Design:描画/グラフィックデザインツール
- Expression Media:資産管理ツール
- Expression Studio:上記4製品を統合したスイーツ
まぁ、どこかの会社が出してる製品にそっくりなラインナップなこと。笑
ていうか、この製品サイト、かなりdivdivしてます。Expressionで作ったんでしょうか・・・?あと、Firefoxで表示崩れてますよ。。なんだかなぁ。。
[テーマ4-1] アクセシビリティとWeb標準、SEO
植木真 さん (インフォアクシア)
Firefox使うWebデベロッパには必須ツールであるWeb Developer 日本語版を配布されていることでも有名な、インフォアクシア代表取締役の植木さんのセッション。
まずアクセシビリティに関するJIS規格である、JIS X 8341-3についての解説をされ、現在この規格の認証制度を導入できるか、というワーキンググループが2006年から発足したそうです。
さらにWCAG 2.0(ウェブコンテンツ・アクセシビリティ・ガイドライン2.0)の策定作業も早くて今年中に終わり、勧告となるそうです。これに伴って、基本は5年ごとに見直しするJIS規格もWCAG 2.0への対応は必須とおっしゃっていました。
続いて、Web標準についての話題に入り、「オーサリングツール」「Webコンテンツ」「ユーザエージェント」の3要素がそろってWeb標準準拠という方向に進んでいる今だからこそ、「Web標準」が重要であり、Web標準に準拠することこそ、アクセシビリティ、ひいてはSEO対策の土台になるというご意見に納得。
また、SEOとは、Webコンテンツを検索エンジンロボットに対して最適化することであり、検索エンジンロボットもユーザエージェントの一つである。つまり、人間がWebサイトを理解するだけでなく、ユーザエージェントがソースコートを理解できるようにちゃんとマークアップしなくてはならないとおっしゃっていました。
非常にためになるセッションだったのに、時間の関係上かなり巻き目で進めなくてならなかったのはちょっと残念でしたね。
懇親会
名古屋国際会議場の展望レストラン「パステル」で50名ほどで行いました。
森田雄さんと、bAの色んなお話ができて非常にうれしかったし、山田あかねさん、益子さんともお話できました。
あと、念願の?学生さんとも2人出会えました!やっとだよ!泣
2時間はあっという間に終わって2次会へ。
2次会
金山駅に移動して2次会。
植木さんにWeb Developerの日本語ローカライズについての裏話を聞きました。なかなか色々あるようで。。でもWeb Developer日本語版は形態が変わるかもしれないが今後もリリースしてくださるようです。
ちなみに今までアップデートに際して、英語版をダウンロードしてしまった場合にエラーが出ていましたが、今回の1.1.2からはアップデートの問い合わせ先をインフォアクシアさんに変更したらしいですよ。
一日を通して
今回は最長が45分と、それぞれのセッションが今までよりも短かったので、盛りだくさんな内容に比べて結構あっという間に終わった感がありました。
あと、会場内にMac(特にMacBook)多すぎ…!確認しただけで自分のを含めて6台以上あったと思います。だって充電のためにコンセント辺りにMacBook積んであったし。笑 ま、そのうち1つは自分のなんですけどね^^;
セッション全体を通して、「マークアップをしっかりと」という言葉を何回も聞きました。「お肌のXHTMLを美しく保たないと、いくら化粧のCSSを工夫しても奇麗になれない」ちゅうことですね。
CSS Nite in Nagoya 2007という名前からこれで今年は終わりなのかなぁ。ぜひまた秋くらいにやってもらいたいです・・・!!

鷹野
お疲れ様でした。さっそくのレポートありがとうございます。
>セッション全体を通して、「マークアップをしっかりと」という言葉が何回も聞きました。
そうでしたね。裏テーマのようでした。
iwata
昨日はお疲れ様でした.
終わりの終わりでしたが,お話できてよかったです.おかげで,一日の最後の最後まで,楽しいイベントとなりました.
今後,ちょっとした勉強会などできるといいかもですね.
versionfive
>鷹野さん
お疲れさまでした!
そして、このような素晴らしいイベントを名古屋で開いていただいてありがとうございました。
>裏テーマのようでした。
そうですね。
今度「HTML Nite」なんていかがでしょう?あ、それが「Corder’s high」ですね!行きたいですわ〜
>iwataさん
お疲れさまでした〜。
こちらこそお会いできて本当によかったです。僕の方こそある意味報われました。笑
いいですね!名古屋にはWCANってものもあるので、ぜひそういったイベントでもお会いできることを楽しみにしています^^
トルキー
こにちは。
"sans-serif の前に日本語フォント名を設定することで回避することができます"とMicrosoftのサポートには書かれていますが、私の記憶では、
font-family:verdana,sans-serif;
…等という記述でも回避できました(Win98+IE6、WinME+IE6)。
どうも、日本語フォントとは限らず、インストールされているフォントを指定してあれば、大丈夫に思います。とはいえ、上に挙げた2つの環境でしか確かめてはいませんが…。
ということで、大昔のエントリを参考までに。ほい。
http://quarter.vis.ne.jp/books/log/eid147.html
ところで、フォントと言えばもう一つ。
のさんはbodyにフォントを指定しているため、inputやtextareaでもverdana,sans-serifが適用されてますが、これフォントを変えるとMacIEのバグに引っかかるおそれが。
いえ、MacIEをインストールするとverdanaも自動的にインストールされるためこの場合は大丈夫ですが(多分)(ご存じだったらすみませぬ)。
http://cssbug.at.infoseek.co.jp/detail/macie/b007.html
今のMacはIE入ってないですが、そうするとverdanaもインストールされていないのですか?
versionfive
>トルキーさん
こんにちは!お返事遅れてすみません。汗
>どうも、日本語フォントとは限らず、インストールされているフォントを指定してあれば、大丈夫に思います。
ふむふむ。これは知らなかったです!
実際どうなんでしょうね。Verdanaが参照する日本語フォントも関係があるのかもしれませんね。
>MacIEのバグに引っかかるおそれが。
あー、ちらっと見たこともあるような気もします・・・が、意識していませんでした。笑
とりあえずMacに入ってるフォントが指定してあれば大丈夫なんでしょうか。
VerdanaはMac OSXに必須フォントで入ってますよ。
http://cssbug.at.infoseek.co.jp/detail/macie/b007.html
貴重な情報ありがとございますー^^