VERSION510 - sky-cloud pictures

[SESSION-1] ザ・コーディングの美学
益子貴寛 さん　(サイバーガーデン)

カニの貴公子益子さんのセッション。濃い内容で時間が短いため、なかなか駆け足な展開で、レポート打つのが大変でした。笑

1. コーディングの真・善・美
2. The Art Of Coding
3. コーディングスキルの証明

今回は上の3点についてお話して頂きました。このレポートでは、1点目の「コーディングの真・善・美」について書いていきます。

「真」とは論理性。

我々にとって「仕様」とは、W3Cの仕様書に基づいた規格を差しますが、それだけではなく「一般的なマークアップ実務」が真=論理を支えている。

もともとHTMLの歴史をみても、一般的な実務や理解をフィードバックしながら発展しているということを考えれば、我々の実務も「真」の発展に貢献しているということらしいですが、スケールが大きくて想像しにくいですね。笑

「善」とは倫理性。

短く合理的なコード、再利用性、CSSを効率的に設計できる、などの要素によって、共用性・運用性を上げ、ユーザや運営者が扱いやすいコードを書こうということです。

「美」とは芸術性。

インデントやワンライン化、コメント、スペース/改行をうまく利用して他人や制作メンバーが見やすいコードを書く事が重要で、省略できる事もあえて省略しない事も必要だというのは、納得です。

実際僕も、CSSのfontプロパティの省略は自分でもわかんなくなるので書かないようにしています。逆に、backgroundプロパティはなるべく省略して書くようにしています。

「真」と「善」は、「美」に集約される

これら3要素「真(様式美)」および「善(機能美)」は、すべて「美」に集約される、という事でCSSの記述方式の「益子方式」が紹介されました。

例えばこんなの。

body {
  background:
    #ffffff
    url(/images/bcg_body.gif)
    repeat‒x
    left
    top;
  color: #000000;
  font‒size: small;
}

確かにみやすいですね。同時に好みが分かれそうな手法である気もします。

このように、「美」の追求には真(様式美)をきちん知ることが大切で、「美」を追求すべく、善(機能美)にももう一歩の努力を。という言葉には納得です。

最後におっしゃっていましたが、ナード(単なるオタク)じゃなくてギーク(優秀で使えるオタク)として、誇りとプロ意識を持ってコーディングしたいですね。

[SESSION-2] フィロソフィー・オブ・コーディング
小久保浩大郎　さん　(ビジネス・アーキテクツ)

ビジネス・アーキテクツの小久保さんのセッション。

「マークアップデザインエンジニア」という肩書きをもつ小久保さんですが、外では「ウェブデザイナー」と名乗っているそうです。これは、ウェブを「デザイン」しているからだそうです。

僕もこういう勉強会に持っていく名刺には「ウェブデザイナー」って書いてます。正確には学生だけど「ウェブデザイナー」でいっか:-p　ってことで思い切って書いています。

今回のお話で特に気になったのは、「Webは特別なメディア」であるということです。

Webだけが唯一ユニバーサルデザインの可能性を秘めたメディアである。これは、「受け手」に届くカタチとタイミングが他のメディアとは違う。つまり、Webでは、受け手によって文章や動画像、音声など、様々な形に変えて受け取る事ができる性質を持っているからだそうです。

「なぜ正しいコードを書かなければいけないか」

受け手に送り手が渡すのは、コードであり、この品質を高く保つことが環境(メディア)の質を保つ、だから我々が書くコードの質は高くしなければならない。

そこで「Web標準」この正体は大体うまくいきそうな技術の集合やポリシーに対してキャッチーな名前を付けただけで、唯一の目的はHTMLをクリーンに保つことであるとおっしゃいました。

つまり、コーダーは、環境(メディア)全体のことを考えて、自分が書くコードがWebという環境を作るんだ、という言葉にはちょっと感動。随分規模の大きなお話ですが、つまりは益子さんのセッションにもあったように、コードの「真・善・美」を追求していけば、Webの質を高めることができるってことですね。

[SESSION-3] Dreamweaverのコーディング機能再点検
鷹野雅弘 さん　(スイッチ)

鷹野さんのDreamweaverのセッション。

この前の休憩でホテルのチェックインを済ませ、5分ほど遅れて席にもどってきました。

今回は、Dreamweaverのコーディングに関する機能の紹介をされました。

細かい機能を説明されているので、使っていない自分にはちょっとよくわかりませんでした。ただ、毎回見るたびにDreamweaverは高機能だと感じます。特に、タグの折りたたみができるのは、長いコードになる程便利だと思います。また、CS3に搭載されるというコードフォーマットはかなりよさそう。

自分はskEditを使っていますが、あまりドキュメントがないので手探りで使ってます。本とかでないかなぁ。

[SESSION-4] LIVE コーディング (A)
神森勉　さん　(T-STUDIO.com)

前回のWCAN 2007 springにも来て頂いた神森さんが、併催のコーディングコンテスト のお題を実際にコーディングをされていきました。

気になったポイントは、

• マシンはMacBook黒モデル
• ツールはFireworksとDreamweaver CS3
• Dreamweaverのデザインビューを活用
• デザインビューにテキストを貼付けてマークアップしていくスタイル
• メインのナビゲーションは画像で
• 最新情報はdlで
• dl使って、題名とメニューなどを関連づけ
• 一時的なリンクは「dammy.html」に。(Another HTML-lintでエラーがでるから)
• 確認は色んなブラウザで
• Mac IE5対策

やっぱり自分以外の方のコーディングをみると勉強になりますね。でもこれ話しながらコーディングって難しいでしょうし、なによりこの人数に見られるのってすごいプレッシャーですよね。汗

[SESSION-]5 Microformats で上質コーディング
長谷川恭久 さん　(C O U L D)

ヤスヒサさんのセッション。CSS Nite in Osaka 2007 春の陣でのバージョン・アップ版として、Microformatsのお話をされました。

前から気になってはいたのですが、触らずじまいなMicroformats。
Feedがプログラマにとっての有用なモノとしてあるように、Microformatsはデザイナーにとっての有用なモノであると熱く語られました。

今回は、hCardとhCalendarを例に挙げてお話されました。Microformatsは特に難しいものではなく、

• 必要なのはclass名やrel属性
• HTMLタグに依存しない
• すべての要素を組み込む必要はない
• コーディングルールとして利用

といった、既存のHTMLに組み込むだけで簡単に作成できます。

また、「uPress」というWordPressプラグインがあるそうで、これを使うと簡単にイベントページを作れるので、かなり便利です。

Microformatsはスニペットであるとも言え、新しい言語ではなく、「拡張するための一つの道具」として利用すればよいそうです。なかなかよさそうですね。
ちなみに、Firefox 3ではMicroformatsが標準で組み込まれているそうです。で、Twitterにも使われてるらしい。

あらたな形のSEOになる、のかも

Microformatsなサービスによって、ニッチな情報が見つかりやすくなって、あたらたな情報収集のスタイルができる。これはあらたな形のSEOになるのかも、といいことだらけそう。

このように、既存のHTMLにclass名やrel属性を付加するだけの小さなケアが、上記のような新しい大きな差を生んでいき、上質なコーディングに繋がるということですね。

すごくノリノリな感じで熱弁されたヤスヒサさん、しっかり影響されました。(笑) Microformats、やってみよう。

[SESSION-6] プロはこう使う！ Another HTML-lint 徹底活用術
太田良典　さん　(ビジネス・アーキテクツ)

ビジネス・アーキテクツからの2人目の刺客?太田さんのセッション。
今回は、Another HTML-lintのお話です。

Another HTML-lintとW3C Markup Validation Serviceの比較

バリデートサービスとしては、W３Cが提供してるW3C Markup Validation Serviceがありますが、これらを比較すると、

W3C Markup Validation Service

• メッセージは英語、かなりマニアック
• 警告は少なめの傾向
• Validかどうか判断するvalidator

Another HTML-lint

• メッセージは日本語、わりと普通
• 警告は多めの傾向
• ミスや好ましくない記述をチェックするlint

ポリシーがお互いで違う点を気をつけなければいけないということですね。

Another HTML-lintのの誤解

続いて、Another HTML-lintでチェックをする際の誤解をいくつか挙げられました。気になったのは以下の３点。

• 点数は絶対ではない、あくまで目安
• ゲートウェイでもコマンドラインで動作する
• Another HTML-lintは有料です

このようにAnother HTML-lintを何のために利用するのか、エラーをなくすため?ではなんのためにエラーをなくすのか、それは「なんのためにHTMLを書くのか」に通じるというご意見には納得です。
また、太田さんのトークがお上手で、すごくおもしろかったです。

[SESSION-7] LIVE コーディング (B)
河内正紀　さん　(ロクナナ)

河内さんが小久保さんと太田さんに挟まれてコーディングするというすごい状況でスタート。(笑)　神森さんと同様にコーディングコンテスト のお題をコーディングされていきました。

気になったポイントは、

• マシンはMacBook黒モデル
• ツールはPhotoshop CS3とDreamweaver　CS3
• Dreamweaverのコードビューを活用、デザインビューは心の目でみる
• 先にdivにidをふったものを準備していくスタイル
• 基本フォントサイズをbodyに12pxを指定して、10pxにしたいときは８４%にする
• トップの３カラムをulとliでマークアップ
• ファイルサイズがあまり変わらないなら常識の範囲で大きめに切った方がいい(IEの問題で)
• 同じaタグで括ることで細かなユーザへの配慮
• 「なるほど。(小久保さん・太田さん)」

会場で見やすくするために文字サイズを大きくしたら文字が切れて見えなくなったり、両隣からツッコミやら解説やらが飛び交いながらの制作でした。笑

個人的にはMacBookで動いてたPhotoshop CS3が相当気になった次第です。。

コーディングコンテスト表彰・講評

審査員賞と、最優秀賞の発表が順にありました。発表者一覧は、CSS HappyLifeさまで公開されています。

• コンテストの結果とLP3を終えて by CSS HappyLife様

受賞者の方々おめでとうございます！どう作られているのか早く見てみたいです。特に最優秀賞を取られたにんさんは圧倒的な票を獲得しての入賞だそうで、ぜひ見てみたいですね。
僕もデータもお恥ずかしながら近いうちに別のエントリで公開します。

懇親会

近くのドイツ料理の店に移動して懇親会開始。

なんか収容人数オーバーだったのか、動けないくらい人がいっぱいいました。

• RiszwさまのMilliさんと初対面
• 仙台の方、福岡の方、そして自分(名古屋)
• 楽天の方、Livedoorの方
• 今までお話したことがなかった鷹野さんとお話できた
• ヤスヒサさんにskEditの話をしにいったら、ご本人はすでに他のソフトに注目してるらしい...
• 益子さん、asC2さまの堀内さんらとお話し

他にもいろいろな方とお話しできました！あと結構たくさん食べたら苦しくなって、ちょっと大変でした。汗

その後、一日を通して

その後、近くのカラオケに移動して3次会開始。ましこさんがいいかんじになってましたw

また、RiszwさまのMilliさんIT戦記さまのamachangさん、pur*logさまのpurprinさん、miniturbo.orgさまのkzさん、Kmaku.netのkomakuさん達10人くらいで盛り上がって、なんと朝５時まで。。結局ホテルには2時間くらいしかいませんでした・・・泊まる必要なかったじゃん＿|￣|○

ぶっちゃけWeb業界で同じ世代であんな盛り上がったのは初めてで、うわートーキョー広いないいな〜、っていうのが感想であります。

また、まじめな方向ですと、今回はコーディングに特化したセッション内容であったため、益子さん、小久保さん、太田さんの言いたかった事が根底で繋がっていると感じました。「自分が作るHTMLをクリーンに保つことは、Webの質を上げることに繋がる、という意識をもってコーディングしよう」ということですかね。

(市場規模が違うからってのはもちろんだけど、)やっぱりトーキョーのWeb業界には色んな人がいておもしろいなぁ、とちょっと広い世界を知ったのでした。