[「Web標準の日々」速報]前半戦を振り返る

実は折り返しです

「Web標準の日々」、1日目終了いたしましたー!参加された皆さん、お疲れ様でしたー。

アフターパーティーで皆さん口々に「…あのさ、明日もあるんだよね、これ」とおっしゃっていた通り、まだ折り返しです。すでに1日目でだいぶお腹いっぱいな気がしますが、頑張って参りましょう!

携帯で頑張ってたよ…

さて、「現地から実況レポートするYO !」と宣言したネコゼですが、思わぬ事態が会場で待ち受けていました。

「…無線LANが繋がらない」

てっきり繋がるもんだと思っていた無線LANが(ダイドービルの一部の会場で)使えなくなっていたのでした。がーん。がーん。

どうやらlivedoor wirelessなら入るらしく、携帯のフルブラウザから申し込もうと必至に入力するも、最後の最後、クレジットカードの認証画面から先に進めず挫折。

その結果、ネットに繋がらないPCでメモをとりつつ(右手)、携帯でマークアップしては逐一更新(左手)という無理矢理なことをやっていました。なんか、適当なレポートが続くな、と思った皆さん。その裏ではこういうことになっていたのですよ。とりあえず、今回思い知ったのは、携帯でコーディングは無理、ということでした。ラストのセッションで、ようやく無線に繋がる環境に移動して、キーボード触った時の安心感といったら…。こうして、ケータイ世代との断絶はより深くなるのです(違)。

この大海に飛び込む覚悟はできました

今日1日は、最後の木達さんのを除いて、すべてJavaScriptのトラックを取りました。理由はただ1つ。JavaScriptを勉強しなければならない状況に、自分をどうにか追い込みたかったから。

JSに関しては食わず嫌いでいたんですよ。難しそう、面倒くさそう、理解しにくそう、という先入観があって。

でも、実際にJSをガリガリ書いてる人からそういう声は聞こえないし、便利なライブラリはどんどん出てくるし、ちゃっとJSを書けて、理解できた方がいいなーとは頭では分かっているけど、拒絶反応を起こしてしまうというか。

前日にJavaScript勉強会に参加したのもあって、今日1日でその「拒絶反応」が無くなった気がします。実際に、どういう場面で使えるのか、どういう手間が省けるのか、どんなメリットがあるのか、具体的な使用例を見て行く中で、JSに対する興味が「恐れ」を少し上回ったのかも。

あと、特に自分に取ってデカかったのが、「自分が欲しいと思うJavaScriptのライブラリを提案し合うワークショプ」

近くの席の人達と、「JSでそれは無理」みたいな話は一切無しで、「こんなライブラリがあったらいいな」という夢を語りあうワークショプがあったんですが(2度)、「それ、あったら、今すぐにでも使いたい…」というアイデアが次々出てくるんです。全部実現できる保証は無いけど、この中の1つにトライしてみたい、と思わせるものばかりでした。

JavaScriptやDOMの基礎をここ2日でマスターできた訳ではもちろんないですし、そう簡単に行く訳が無いですけど、それでも、モチベーションは大きく変わった気がします。これはホントに大きな収穫だったと思います。

spryがヤバい…けど?

そう、spryも凄かったです。「JavaScriptに馴染みが無いWebデザイナーのことを考えた」ライブラリというだけあって、DreamWeaver CS3を使えばソースを一切触らずに、メニューやパネルをいじるだけで、XMLと連携できたり、フェードインフェードアウトといった効果が適用できたり。実際にデモを見ると、CS3さえあれば、ホント、敷居が下がるなぁと感じました。

ただ、1点質問しそびれたのが、Web標準も念頭に置いて開発したという割に、(X)HTMLに独自拡張の属性を記述すること。「HTMLを汚さない」ことを繰り返し強調されていたので、これはどう捉えればよいのかなーと。ここは何かの形でお尋ねしてみたいです。

前述のセッションで、スピーカーの西畑さんが「今、一番熱いライブラリですね」とおっしゃってましたし、次期リリースのバージョンでは、スクリーンリーダー等の読み上げを念頭に置いて開発してるそうですし、気になります。

足下を固める大切さ

ラストの木達さんのセッションは、本当に取って良かったです。何度も何度も「段取り八分」という言葉を繰り返されていたのは、これまで拝聴したプレゼンと同じでしたが、この日はその言葉が本当に重く響きました。サイトの仕様やルール、だけでなく、スタッフ間のコミュニケーションルールや成果物の定義、役割や守備範囲の明確化、とチーム内の細かいコミュニケーションの前提を事細かに事前に決めてこそ、スムーズなワークフローが成立するんだなと。

「手戻りが発生する確率をいかに事前に限りなくゼロに近づけられるか」そして「それにどれだけ時間をしっかり割けるのか」が、そのプロジェクトが破綻するか否かの境界になるんだということが良く分かりました。

かなりの情報量があったプレゼンなので、なかなか一言ではまとめずらいのですが、それだけ濃厚な90分間でした。木達さんの一言一句聞き逃さずにはいられませんでした。

…あ、2日目だ

さて、今これを書いてるのは2日目の朝です。あと数時間でまた会場に向かいます。今日は無線繋がる会場にずっといるので、昨日よりかはましなレポートができるんじゃないかなと思ってます。…たぶん。

今日もヨロシクお願いします!

[「Web標準の日々」速報]「転ばぬ先のプロジェクトデザイン-Web標準への準拠を見据えて-」

本日ラストのレポートは、「転ばぬ先のプロジェクトデザイン-Web標準への準拠を見据えて-」。Web業界のキングカズこと(今思いついた)、木達さんの登場です!前回の「Web標準の日」以来、1年ぶりにお話が聞けるので、本当に楽しみでした。なにより、「プロジェクトデザイン」。いくらCSSレイアウトができても、ワークフローや制作体制も変えなければなかなかうまくいかないものです。自分も苦労しましたし今も苦労してますし。木達さんはこの点、どのような考えをお持ちなのか!刮目して待ちます。

はじまった。
木達さん、お疲れ気味?…と思ったら、風邪引いてらっしゃる。お大事になさってください…。
速報!
WaSP cafe、秋に再開!
なぜプロジェクトデザイン?
ゴール・コスト・スケジュールは変更利かないが、スタッフアサイン・ワークフローならコントロール可能!
木達さんが影響を受けたのは
「The Nine Pillars」
理想的なプロセス
幾つかのプロセスが分断されずに、重なりあったもの。連携・協力が前提のもの
基本的なワークフロー
要求分析>用件定義>基本設計>実装>検品
各プロセスの詳細な説明
1つ1つ詳しく説明中。
ワークフローで「転ぶ」とき
短すぎる納期、不十分なコミュニケーションルール、ビジュアル・コーディングの仕様はしっかり決まってるか、プロジェクト内レビューを経た上で、クライアントレビューに出さなければ事故につながる
スタッフアサイン
nine pillarsをベースに解説中。
おしまい
かなり濃厚なプレゼンでした…。これはまとめがいがあるかも。1日目終了!おつかれさまでしたー!

[「Web標準の日々」速報]「jsライブラリで実装する効率的なWeb制作」

本日3発目のレポートは、「jsライブラリで実装する効率的なWeb制作」。ライブラリ、ホントに便利ですよね。はてブなんか見てると、毎日毎日新しい何かが発見されては話題になってますし。ただ、「これは使える!」って思ってもいざとなると使いどころが分からなかったりする訳です。この辺りをしっかり聞きたい!

はじまった。
エレガントなスライド。
ライセンスの種類
初めて知った!これで安心して使える。
JSで角丸
細かくカスタマイズも可能!ソースはキレイなまま
透過PNGをIE6で
デザインの幅が広がる!
注意点
Onloadは最後に宣言されたものだけ実行。複数のスクリプトを同時に動かしたい場合は関数に変数を引き渡す!
ライブラリの作り方
どんな機能を誰のために、どのように使うかを考える
おしまい
お疲れ様でしたー。

[「Web標準の日々」速報]「Dreamweaver CS3ではじめる Spry framework」

本日2発目のレポートは、「Dreamweaver CS3ではじめる Spry framework」。CS3から、簡単に実装できるようになったSpryですが、具体的にどのような機能があるか、どれくらい使えるかはいまいち伝わってきません。ただ、Ajaxが、それこそ「ビヘイビア」くらい簡単に実装できちゃうのか?という漠然とした期待感だけ持ってます。今日はその全貌が明らかに!

はじまった。
開発者からビデオメッセージ!
DWの歴史
バージョン1からの愛用者が会場に
開発の経緯
JSになじみないデザイナーのため
軽い
アクセシビリティ念頭に開発
簡単!
メニュー&プロパティで簡単に編集!必要なスクリプトだけ自動コピー
フォーム検査
項目のチェックが挿入できる
実演中
実際にアプリケーション作成中
今後の予定
1.6はWeb標準アクセシビリティがテーマ!

[「Web標準の日々」速報]「マークアップエンジニアのためのDOM Scripting + jQuery」

本日1発目のレポートは、中村恭介さんの「マークアップエンジニアのためのDOM Scripting + jQuery」。DOMは近いうちに絶対マスターしたい!と思ってはいるものの、なかなか「はじめの一歩」が踏み出せずにいたので、これを良いきっかけにしたい!と意気込んでます。はい。

はじまった。
kyosukeさん登場。ジークメガネ!
jQuery
CSSっぽく使える!軽い!
CSS3まで対応
ブラウザ間の差異は気にしなくていい!
具体例
MM_SwapだとHTML汚くなる→class設定だけで可能に
Firefox
「選択した範囲のソース」はJS処理後のソース!
注意
DOMでコンテンツ自体を追加しない!
グループワーク
新しいスクリプトのアイデアを出し合ってます。これは面白い!!実装したい!
おしまい
お疲れ様です!

「Web標準の日々」実況レポートします!たぶん!

いよいよ、「Web標準の日々」当日の朝を迎えました!!

いや、もう、楽しみで仕方が無いです。台風とか、どうでもいいです。どうでもよくないですが。

実況生中継します

…というわけで、いきなりですが、今日・明日とセッションの内容や会場の様子を現地からレポートしたいと思ってます!!

「したいと思ってます」なので、心半ばで挫折の可能性もありますが、「レポートは後日アップします」と告知して、アップしないという罪を犯し続けている私ですので、無理矢理その場でレポートしてしまおうという魂胆でございます。では、ぼちぼち、出発の準備をしてきます。お会いできる方は会場でー。

実況レポート:1日目(終了)

実況レポート:2日目(終了)

「Web標準の日々」開催迫る!!!…に関して

画像:[Web標準の日々]バナー

いよいよ今週末にせまった「Web標準の日々」について。

去年は、速攻でレポート書いたくらい熱いイベントだった訳で、今年も無論、参加するに決まってます。

今年は3会場同時進行・71セッション、しかも、XHTML・CSSどころか、SEO、IA、ビジュアルデザインにFLASHまでも網羅する、Web業界の一大イベントと化してます。もう、「Web標準の日々」じゃなくて「オールスター感謝祭」とかでいいんじゃないかと思うほどに(笑)。

「でもこれって全然『Web標準』関係無くね?」みたいな声もありますが、個人的には、これはこれでかなり「あり」なんじゃないかと思ってます。理由は2つ。

  1. いまさら「Web標準」をメインに据えても去年程盛り上がるとは思えない(たぶん)
  2. ディレクターやデザイナーなど、マークアップエンジニア・コーダー以外の人にも興味を持ってもらえる

前者については、あんまり根拠はないのですが、今「Web標準のメリットとは」みたいな話をしても結構な人が「それ、前にどっかで聞いたことがあるけど、…それで?」って感想を持つような気がするのですよ。「Web標準」についてはある程度認知されて、CSS+XHTMLによるサイト構築も珍しくなくなってきて、多分、その先の話については、人に寄って興味が分散してる状況じゃないかなと。

だから、HTMLの将来について熱く語りたい人もいれば、javascriptにチャレンジしたい人もいるし、IAの勉強をしたかったり、制作からディレクションに興味を持ったり…、人それぞれだと思うのですよ。

で、「でもこれって全然『Web標準』関係無くね?」の答になってるのかといえば、別になってないのですが(汗)、多岐にわたりまくるニーズを漏らさずカバーするイベントなんて全国どこを探しても無いですし、母体のCSS niteってイベントが そういったニーズに正直に答えてきたものだと思うので、……、えーっと、まー、その…、今週末楽しみましょうよ!と。

後者については、もう、雲泥の差です。去年は「こんなヤバいイベントがあるよ」と何度告知しても「へー。ふーん。」位のリアクションでしたけど、今年は「ヤバい」と告知すれば「これはヤバい」と即返って来る。結果、自分の勤めてる会社から4人参加します。去年は1人。で、今年は4倍。しかも社長も来ます。

セッション登録の内容を見てると、タイトルに興味を持ったのか、ディレクターでもHTMLやCSS絡みのセッションに登録してる人がちらほら。こういう点では、普段実装に馴染みの無い人達を振り向かせる意味で、「Web標準」を掲げる意義はあるんじゃないかなと。やっとフォローできた(笑)。

さて、前置きはさておき(長い…)そんな自分の登録セッションを告知しておきます。こんな感じでございます。

1日目

  • マークアップエンジニアのためのDOM Scripting + jQuery
  • Dreamweaver CS3ではじめる Spry framework
  • jsライブラリで実装する効率的なWeb制作
  • 転ばぬ先のプロジェクトデザイン-Web標準への準拠を見据えて-

2日目

  • 事例に学ぶ!成果を上げるユーザ中心ウェブサイト戦略
  • 文書構造がもたらす利点~環境に依存しないコンテンツ~
  • 一緒につくろう! XHTML+CSSガイドライン
  • DOMから始めるJavaScriptモダンスクリプティングの基礎

この2日間で、食わず嫌いだったjavascriptを克服するどころか、持ちネタにしてしまおうという魂胆です。さすがに8つともJS絡みにする勇気はありませんでしたけど。

あとは、Web標準に関しては知る人ぞ知る木達さんが「プロジェクトデザイン」について何を語るのか、めちゃめちゃ気になってます。なんせ、早くから「Web標準」って言葉をサービス名に取り入れてた、ミツエーリンクスを率いる方です。本気で会社に持ち帰るつもりで受講します。

また、益子さんのガイドラインのセッションも持ち帰り必至。何かとプレゼンで「ガイドライン」の重要性を語られていましたが、肝心のガイドラインは守秘義務等の関係もあるのか、なかなかオープンにはされてきませんでした。それこそ、ガイドラインをコピーして配ってもらえれば、かなりありがたいのですが、そんな簡単には配れる代物ではない訳ですし…。でも今回は「一緒につくろう!」です。作りますよー!今からかなりのやる気をみせております、私。

…そんなわけで、ネコゼの素性をご存知の方は会場でお会いしましょうー!

CSS Nite Vol.18に行ってきました!(ダイジェスト)

昨日、アップルストア銀座で行われたCSS Nite Vol.18に参加してきました!取り急ぎ、内容をダイジェストで。いっつも報告を載せようと思いつつ、時間だけが過ぎるパターンが多いので。

今回は、IE7特集ということで、MS社の担当の方がわざわざ敵陣に乗り込んでいらっしゃってました。鷹野さんのプレゼンに、随時ツッコミを入れるという流れで進行していたのですが、敵陣に乗り込んだ勢いなのか、初めて聞くようなコメントが続出。

個人的に、ビックリしたのは「条件分岐コメントはなるべく使わないで欲しい」というコメント。

えぇぇぇぇ!!!!!マジですか!!!!!…てっきり、「条件分岐使えば、CSSをクリーンに保てるから、ベストな手法なのかも」と思ってましたよ。MSの方いわく「あくまで最後の救済策として用意しているだけ。積極的に使われると、またMS独自仕様を広めてしまうことになるので…。」とのこと。

それ以前に、DreamWeaverのテンプレートだとリンク先の階層が書き変わらない(コメント無いなので)、とか、スタンドアロン版のIEだとレジストリをいじらないと条件分岐が機能しないとか、問題があったわけですけど。………これは考え方変わりますよ。驚きです。

他にも、IE7のデフォルトフォントが「MS Pゴシック」な理由とか、Vista版とXP版の違い(セキュリティ周りが違う模様)とか興味深い話が…。詳しくは後日!

(写真は、謝恩会でのサプライズ直後の鷹野さん。お疲れ様でした!!)

CSS Nite LP, Disk 2 「Dreamweaver CC」に行ってきました(3)

「Web標準」時代のWeb制作ワークフロー

写真:セッションBの様子

セッションBは、CSS Niteの主催者としておなじみ、株式会社スイッチの鷹野さんによる『「Web標準」時代のWeb制作ワークフロー』。

セッションAでは、大規模案件で複数のスタッフが関わる場合を想定した、「コンポーネント」に的を絞った話でしたが、今回は小・中規模でスタッフも少人数を想定した、ワークフロー全体に関してのお話。

自分が今所属してる会社が、まさに後者の規模・スタッフなので、「コンポーネント」という考え方を自分の環境にどう生かすか考えるには絶好のセッションだったと思います。

セッションでは、サイトマップの作成、ファイル(ディレクトリ)の命名規則、ターゲットブラウザ、ドキュメントタイプ・エンコーディング、モニタサイズ、アクセシビリティ対応の有無、コーディングガイドライン、細かいチェック項目…、とまずDreamWeaverでの制作作業に入る前に完了すべき細かく見ていきます。どれも基本的なことですが、制作の進行上、焦ってないがしろにされがちな話ばかり。
このように再確認できて、良かったです。また、話の中で、随所に「そう来たか!」と思わせる点がありました。

画像はルートに!ファイルリストをあらかじめ用意!

たとえば、画像の保存場所。ディレクトリ毎に"image"フォルダを作らず、ルートにフォルダを作り画像ファイルをまとめた方が、同じファイルが複数散在するという現象(通称:ドッペルゲンガーシンドローム)を回避できるそうです。鷹野さん曰く、これをやってみたら、サイト全体で500メガあった容量が50メガまで削減できた、なんてことがあったとか。

また、

  • ファイル名
  • ディレクトリ
  • title要素
  • meta情報

を表にあらかじめまとめておくことで、作業の効率化を図るという手法も、後になって慌てて作成するよりも確実だし混乱しないなと。

「コンポーネント」の話は、このセッションでも取り上げられていましたが、セッションAで伺った作業をワークフローの中でどう位置づけるか、参考になりました。セッションの中で例としてあげられていたこのページの存在も初めて知りました。

「コンポーネント」「モジュール」が便利だと理解できても、実際の例が無いと…、と少し不安が残っていたので、このページの存在はかなり有り難いです。

もう一度足下を見直そう!

未然にトラブルを回避する為には、設計や事前の準備がしっかり行われていないといけない……、ということはよーく分かっていますが、いざ作業が始まると…。

今回のセッションを参考に、普段の仕事の進め方を振り返り、何か改善できるところはないか、再点検してみようと思います。

CSS Nite LP, Disk 2 「Dreamweaver CC」に行ってきました(2)

「コンポーネントベースのWebサイト設計と開発」

写真:セッションA

セッションAは、ビジネスアーキテクツの小久保さんによる「コンポーネントベースのWebサイト設計と開発」。

5月のCSS Niteで同じくbA社の森田雄さんが「コンポーネント」(ページ上の要素をグループ化し、それぞれについてデザイン・コーディングを設計)という考え方について言及されていて、「もっと詳しく話が聞きたい!」と思っていたのですが、ようやく詳細なお話を伺うことができました。

話は、そもそもCSSで得られる恩恵って?(視覚情報が抽象化される=再利用・使い回しが効く)、という話から始まり、コンポーネントごとに使い回せる仕組みがあるとCSSと同様に効率的だよねという話に。

そこで、サイト内で出現するであろうコンポーネントをリストアップし、1つ1つをデザイン、実装。「コンポーネントコレクション」と呼ばれるカタログにまとめることで、それを実現しようという訳です。この、コレクションがあれば、複数人での作業分担も簡単ですし、作業指示も楽で正確。原稿にどのコンポーネントを使うか指示すれば、確実に再現される訳です。しかも、ページ単位よりも、コストや時間の見積もりが正確に出せるというメリットも。

個人的に、大規模サイトの構築をどうすれば(数々の泥沼を避けて)効率的にこなせるのか、結構悩んでいたところなので、かなり参考になりました。

実はこれからのスタンダード?

この手法って、大規模サイトでなくても、個人レベルでコレクションを蓄積しておけば、1からCSSを書く必要も無いですし、フリーランスの方にも参考になる考え方だったと思います。

この考え方は決してbAに限った話ではなく、「Web標準の日」でもDreamWeaverのライブラリ・スニペットと絡めて、頻繁に取り上げられてましたし、フリーのデザイナーの方でも実践されてる方が結構いらっしゃるようです。作業の効率化を考えると、これから絶対に避けて通れない考え方なんだと思います。

中の人、ご紹介

制作会社でマークアップ芸人、改め、うっかりIA(自称)をやってます。CSSとかHTMLとかでもご飯食べてます。気が弱くて省スペース設計。でも小言が多い、環境に優しくない32歳です。

過去のイベント出演暦