『ザ・コーディングの美学』
サイバーガーデンの益子貴寛さんのセッションのレポート
コーディングの「真・善・美」
真→論理
善→倫理
美→芸術
ではコーダーにとっての真善美とは何だろう？
1.コーディングの「真」
仕様に準拠することが、論理的な「真」である。
仕様はイロイロあるが、W3Cに準拠するのが一般的。
でもただ準拠すればいいのではない。
どの文章型を使うのか？ id、classの命名、要素や見出しのマークアップ、クロスブラウザ対策などのマークアップ実務と組合わせることが重要！
真を実現するために必要なこと
・仕様に準拠する
・マークアップ実務
マークアップ実務の段階で出てくる問題点、改善点などをフィードバックした形で、新しい仕様というものは生まれる。
だから我々一人一人の実務が、「真」の発展に貢献している！
2.コーディングの「善」
コーディングは極力シンプルに！
そうすれば、CSSが効率的に適用でき、他のプログラムとも連携しやすくなる。
誰に（制作者・開発者やユーザー）でも扱いやすいコードが、Webサイトの共用性や運用性を上げる。
3.コーディングの「美」
誰が見ても見やすく、美しいコードを！
そのためには…
1.インデントの処理
2.コメントの挿入
3.スペースと改行を入れる
4.省略できることも、省略しない！
例）
<body>
<div id="header">
<h1>会社名</h1>
</div>
<div id="gNavi">
<ul>
<li>TOP</li><li>製品一覧</li><li>お問い合わせ</li>
</ul>
↓上記のようではなく、インデントや改行を入れると美しい！
<body>
<div id="header">
<h1>会社名</h1>
</div>
<div id="gNavi">
<ul>
<li>TOP</li>
<li>製品一覧</li>
<li>お問い合わせ</li>
</ul>
コーディング作業が一通り終わっても…
これで終わりではない。
idやclassを少なくしたり、CSSハックをなるべく使わないようにしてみたり、ターゲットブラウザを広げてみたり、MicroformatsやAjaxを実装してみたり、アクセシビリティに配慮してみたり…
やるべきことはまだまだ沢山…
与えられた時間の中で、一つでも多くクリアできるように、努力する！
サイバーガーデンの益子貴寛さんのセッションのレポート
コーディングの「真・善・美」
真→論理
善→倫理
美→芸術
ではコーダーにとっての真善美とは何だろう？
1.コーディングの「真」
仕様に準拠することが、論理的な「真」である。
仕様はイロイロあるが、W3Cに準拠するのが一般的。
でもただ準拠すればいいのではない。
どの文章型を使うのか？ id、classの命名、要素や見出しのマークアップ、クロスブラウザ対策などのマークアップ実務と組合わせることが重要！
真を実現するために必要なこと
・仕様に準拠する
・マークアップ実務
マークアップ実務の段階で出てくる問題点、改善点などをフィードバックした形で、新しい仕様というものは生まれる。
だから我々一人一人の実務が、「真」の発展に貢献している！
2.コーディングの「善」
コーディングは極力シンプルに！
そうすれば、CSSが効率的に適用でき、他のプログラムとも連携しやすくなる。
誰に（制作者・開発者やユーザー）でも扱いやすいコードが、Webサイトの共用性や運用性を上げる。
3.コーディングの「美」
誰が見ても見やすく、美しいコードを！
そのためには…
1.インデントの処理
2.コメントの挿入
3.スペースと改行を入れる
4.省略できることも、省略しない！
例）
<body>
<div id="header">
<h1>会社名</h1>
</div>
<div id="gNavi">
<ul>
<li>TOP</li><li>製品一覧</li><li>お問い合わせ</li>
</ul>
↓上記のようではなく、インデントや改行を入れると美しい！
<body>
<div id="header">
<h1>会社名</h1>
</div>
<div id="gNavi">
<ul>
<li>TOP</li>
<li>製品一覧</li>
<li>お問い合わせ</li>
</ul>
コーディング作業が一通り終わっても…
これで終わりではない。
idやclassを少なくしたり、CSSハックをなるべく使わないようにしてみたり、ターゲットブラウザを広げてみたり、MicroformatsやAjaxを実装してみたり、アクセシビリティに配慮してみたり…
やるべきことはまだまだ沢山…
与えられた時間の中で、一つでも多くクリアできるように、努力する！
スポンサーサイト
LIVEコーディングの感想
普段、他の人がどのようにコーディング作業をしているのかが見れてとても良かった。
他人の作業を見ていて気がついたことがあったので、メモしておく。
1.画像ファイルの名前の付け方
2.ユニバーサルセレクタは使わない？
3.idやclassの名前の付け方
4.事前の設計が大事！
1.画像ファイルの名前の付け方
他の人がそのファイルを見た場合にも、分かるようにファイル名をつける。
headerに使用する画像ならば、「header_●●.jpg」などとする。
2.ユニバーサルセレクタは使わない？
ブラウザのスタイルを初期化する時には、ユニバーサルセレクタは使わない方向に進んでいる。
3.idやclassの名前の付け方
idやclassに付ける名前も、意味のあるものにする。ワンパターンになりがちな場合は、いろんなサイトを参照し、どのようなタグが付けられているのかを、メモしておくことも大事。
4.事前の設計が大事！
これは昨日も書いたことだが、パソコンでの作業の前に、構造化をどのようにするか？ どんなタグを使うのか？ サイト内で共通している箇所はあるのか？ 文字が増えた場合にはどんなレイアウトになるのか？ などといったことを、事前に決めておくことが大事。
そうしておくことで、コーディングの作業がスムーズに進む。
普段、他の人がどのようにコーディング作業をしているのかが見れてとても良かった。
他人の作業を見ていて気がついたことがあったので、メモしておく。
1.画像ファイルの名前の付け方
2.ユニバーサルセレクタは使わない？
3.idやclassの名前の付け方
4.事前の設計が大事！
1.画像ファイルの名前の付け方
他の人がそのファイルを見た場合にも、分かるようにファイル名をつける。
headerに使用する画像ならば、「header_●●.jpg」などとする。
2.ユニバーサルセレクタは使わない？
ブラウザのスタイルを初期化する時には、ユニバーサルセレクタは使わない方向に進んでいる。
3.idやclassの名前の付け方
idやclassに付ける名前も、意味のあるものにする。ワンパターンになりがちな場合は、いろんなサイトを参照し、どのようなタグが付けられているのかを、メモしておくことも大事。
4.事前の設計が大事！
これは昨日も書いたことだが、パソコンでの作業の前に、構造化をどのようにするか？ どんなタグを使うのか？ サイト内で共通している箇所はあるのか？ 文字が増えた場合にはどんなレイアウトになるのか？ などといったことを、事前に決めておくことが大事。
そうしておくことで、コーディングの作業がスムーズに進む。
昨日、CSS Nite LP,Disc3 -Coder's High-に出席してきました。
今回の目玉は何といっても、LIVEコーディング！
まずはそのレポートから…
LIVEコーディングを行ったのは、アンカーテクノロジーの神森勉さんと、ロクナナの河内正紀さん。
全く対照的な方法でコーディングを実演されたのが、とても面白かったです。
●神森勉さんの場合
ほぼDreamweaverのデザインビューのみでの作業。
それにキーボードをあまり使わず、マウス操作のみで…
マウス操作を極めていらっしゃるので、操作に全く淀みがない!
簡単な作業の流れ
1.用意されたテキストを、デザインビューにコピペ。
2.次に、マークアップ作業に入る。
3.見出し、段落などの作業を終わったら、divタグを挿入
4.そして、CSSの記述に入っていく
印象に残ったのは、神森さんの「私は、極度の面倒くさがり屋」というお言葉。
こことここのアキの数値は幾つというのを、紙などには書かないということでした。
紙に書く作業が面倒なので、デザインカンプ（PNGファイル）にガイドラインを引き、その数値をもとにコーディング作業をなさっていました。
神森さんでも苦労なさっているのが、命名とマークアップの仕方だそうです。
どういった名前をつけるのか？ ここは見出しにするのか、リストにするのか？
いろいろなサイトを見て、「こういった名前の付け方いいなぁ」とかを常に参考になさっているみたいです。
●河内正紀さんの場合
突然の提案で、bAの小久保さんと太田さんに挟まれる形でステージでコーディング作業をすることになった河内さん。
かなり緊張なさっていました。
神森さんとは対照的に、ほぼコードビューのみでの作業。
そして、パーツ毎に作業を行うといった形式でした。
簡単な作業の流れ
1.必要なフォルダ、ファイル（中身は空）を作成する
2.CSSファイルなどをリンクさせる
3.最初にdivタグを作成
4.divタグ毎に、テキストを打ち、マークアップし、スタイルを割り当てる
河内さんの場合は、カンプにガイドを引いて、そこから数値を割り出すのではなく、その都度ものさしツールや選択範囲ツールを使って、数値を出しコーディングをしていくといったものでした。
河内さんのセッションで印象に残ったのは、デザイン（カンプ）を見て、規則性を見出すというものでした。
ここは何故こういうデザインなのか？ 文章が増えた場合はどうなるのだろう？
こういったことを事前に考えた上で、コーディングの作業に入っているということでした。
※全く対照的な方法で取り組んでおられたお二人。それぞれ、自分なりの作業パターンを確立されていらっしゃいました。
私も自分なりの方法を確立したいと思ったセッションでした。
今回の目玉は何といっても、LIVEコーディング！
まずはそのレポートから…
LIVEコーディングを行ったのは、アンカーテクノロジーの神森勉さんと、ロクナナの河内正紀さん。
全く対照的な方法でコーディングを実演されたのが、とても面白かったです。
●神森勉さんの場合
ほぼDreamweaverのデザインビューのみでの作業。
それにキーボードをあまり使わず、マウス操作のみで…
マウス操作を極めていらっしゃるので、操作に全く淀みがない!
簡単な作業の流れ
1.用意されたテキストを、デザインビューにコピペ。
2.次に、マークアップ作業に入る。
3.見出し、段落などの作業を終わったら、divタグを挿入
4.そして、CSSの記述に入っていく
印象に残ったのは、神森さんの「私は、極度の面倒くさがり屋」というお言葉。
こことここのアキの数値は幾つというのを、紙などには書かないということでした。
紙に書く作業が面倒なので、デザインカンプ（PNGファイル）にガイドラインを引き、その数値をもとにコーディング作業をなさっていました。
神森さんでも苦労なさっているのが、命名とマークアップの仕方だそうです。
どういった名前をつけるのか？ ここは見出しにするのか、リストにするのか？
いろいろなサイトを見て、「こういった名前の付け方いいなぁ」とかを常に参考になさっているみたいです。
●河内正紀さんの場合
突然の提案で、bAの小久保さんと太田さんに挟まれる形でステージでコーディング作業をすることになった河内さん。
かなり緊張なさっていました。
神森さんとは対照的に、ほぼコードビューのみでの作業。
そして、パーツ毎に作業を行うといった形式でした。
簡単な作業の流れ
1.必要なフォルダ、ファイル（中身は空）を作成する
2.CSSファイルなどをリンクさせる
3.最初にdivタグを作成
4.divタグ毎に、テキストを打ち、マークアップし、スタイルを割り当てる
河内さんの場合は、カンプにガイドを引いて、そこから数値を割り出すのではなく、その都度ものさしツールや選択範囲ツールを使って、数値を出しコーディングをしていくといったものでした。
河内さんのセッションで印象に残ったのは、デザイン（カンプ）を見て、規則性を見出すというものでした。
ここは何故こういうデザインなのか？ 文章が増えた場合はどうなるのだろう？
こういったことを事前に考えた上で、コーディングの作業に入っているということでした。
※全く対照的な方法で取り組んでおられたお二人。それぞれ、自分なりの作業パターンを確立されていらっしゃいました。
私も自分なりの方法を確立したいと思ったセッションでした。
続いてのセッションは、太田禎一さん（アドビシステムズ株式会社）による『Apollo、インストールから向かうビジョンまで』だった。
Apolloのパブリックアルファ版が公開されたことは、知っていたのだが、Apolloで一体何か出来るの？ と思っていたので興味津々！
●Apolloって何？
Apolloは、開発者がすでに身に着けているWeb開発スキル（HTML、Ajax、Flash/Flex、PDF）を利用して、デスクトップRIA（リッチインターネットアプリケーション）を開発・配布するためのクロスOS実行環境。コードネームの名称で、正式名称はまだ未定。
●Apolloの利点
1.100％Web標準技術を採用している
2.Ajaxがそのまま動く
3.クラスプラットフォーム
4.多彩なメディアに対応（Flash SWF、Flash Video、MP3、PDF）
●作り方
今までの様に、XHTML、CSS、JavaScript、SWFなどで作成し、それをクロスプラットフォーム配信用のパッケージファイル（AIRファイル）に変換する。
データ変換には、FB+Apollo ExtensionかApollo SDK(無償提供)を利用する。
FB+Apollo Extensionは、
Adobe Flex Builder 2.0.1（EclipseベースのIDE）+ Apollo Extension。
う～ん、よく分からない。
一方、Apollo SDK（無償提供）は、
HTML/JavaScriptだけで開発したアプリケーションをそのまま「Apollo化」できるみたいなので、こちらのほうが簡単にデータを変換できそう。
●使い方
最初に使うときに、Apolloランタイム版 (ファイルサイズは5～9MB)をインストールする必要がある。
●今後の展開
Apolloの今後の展開としては、FlashVideoを使ったインターネットTV、PDF Casthing、電子書籍、携帯端末などに使われていく可能性があるそうだ。
デスクトップアプリケーション、果たして使うのだろうか？ でも、ちょっと試してみようかなぁと感じたセッションでした。
Apolloのパブリックアルファ版が公開されたことは、知っていたのだが、Apolloで一体何か出来るの？ と思っていたので興味津々！
●Apolloって何？
Apolloは、開発者がすでに身に着けているWeb開発スキル（HTML、Ajax、Flash/Flex、PDF）を利用して、デスクトップRIA（リッチインターネットアプリケーション）を開発・配布するためのクロスOS実行環境。コードネームの名称で、正式名称はまだ未定。
●Apolloの利点
1.100％Web標準技術を採用している
2.Ajaxがそのまま動く
3.クラスプラットフォーム
4.多彩なメディアに対応（Flash SWF、Flash Video、MP3、PDF）
●作り方
今までの様に、XHTML、CSS、JavaScript、SWFなどで作成し、それをクロスプラットフォーム配信用のパッケージファイル（AIRファイル）に変換する。
データ変換には、FB+Apollo ExtensionかApollo SDK(無償提供)を利用する。
FB+Apollo Extensionは、
Adobe Flex Builder 2.0.1（EclipseベースのIDE）+ Apollo Extension。
う～ん、よく分からない。
一方、Apollo SDK（無償提供）は、
HTML/JavaScriptだけで開発したアプリケーションをそのまま「Apollo化」できるみたいなので、こちらのほうが簡単にデータを変換できそう。
●使い方
最初に使うときに、Apolloランタイム版 (ファイルサイズは5～9MB)をインストールする必要がある。
●今後の展開
Apolloの今後の展開としては、FlashVideoを使ったインターネットTV、PDF Casthing、電子書籍、携帯端末などに使われていく可能性があるそうだ。
デスクトップアプリケーション、果たして使うのだろうか？ でも、ちょっと試してみようかなぁと感じたセッションでした。
長谷川恭久さんのセッションの後半のレポートです。
テクノロジー
次から次へと新しいテクノロジーが生まれている。現段階で出来ないことでも、新しいテクノロジーでなら、その問題が解決出来るかもしれない。
だから、新しいことにも挑戦してみることが大事。
新たなテクノロジーの例
・有機物から作られているバイオ電池を使ったパソコン
・単三電池で動く携帯電話
・公害問題を鳥につけたGPSとGoogleMapsで視覚的に
コミュニティ
1.共有することの大切さ
2.インプットとアウトプット
3.参加
1.共有することの大切さ…共有はクリエイティブの原動力！
WEBはまだまだ新しい業界。だから誰もが講師であり、生徒である。そして性別、年齢、人種に全く関係なく議論でき、みんなで賢くなれる。
2.インプットとアウトプット…インプットの方法には、雑誌・書籍、セミナーやカンファレンス、RSS、会話など様々ある。でもインプットだけでは駄目！ 頭でっかちになってしまう。
インプットしたら必ずアウトプットをするように心がける。
アウトプットの方法には、ブログ・SNS・ポートフォリオサイトなどがある。他人に見られるのが嫌なら、ローカルサーバーという手段もある。
会社内なら、同僚や上司に「昨日こんなことがあって…」とか「こんな技術はどうでしょう？」などと会話するだけでも、十分アウトプットになりうる。
3.参加…まずは参加（挑戦）してみる。それが大切。
★感想★
地球環境に対しても、WEB制作に対しても「エコ」になろう！ と考えさせられたセッションでした。
裸足で熱弁を奮う恭久さん、とても良かったです。
テクノロジー
次から次へと新しいテクノロジーが生まれている。現段階で出来ないことでも、新しいテクノロジーでなら、その問題が解決出来るかもしれない。
だから、新しいことにも挑戦してみることが大事。
新たなテクノロジーの例
・有機物から作られているバイオ電池を使ったパソコン
・単三電池で動く携帯電話
・公害問題を鳥につけたGPSとGoogleMapsで視覚的に
コミュニティ
1.共有することの大切さ
2.インプットとアウトプット
3.参加
1.共有することの大切さ…共有はクリエイティブの原動力！
WEBはまだまだ新しい業界。だから誰もが講師であり、生徒である。そして性別、年齢、人種に全く関係なく議論でき、みんなで賢くなれる。
2.インプットとアウトプット…インプットの方法には、雑誌・書籍、セミナーやカンファレンス、RSS、会話など様々ある。でもインプットだけでは駄目！ 頭でっかちになってしまう。
インプットしたら必ずアウトプットをするように心がける。
アウトプットの方法には、ブログ・SNS・ポートフォリオサイトなどがある。他人に見られるのが嫌なら、ローカルサーバーという手段もある。
会社内なら、同僚や上司に「昨日こんなことがあって…」とか「こんな技術はどうでしょう？」などと会話するだけでも、十分アウトプットになりうる。
3.参加…まずは参加（挑戦）してみる。それが大切。
★感想★
地球環境に対しても、WEB制作に対しても「エコ」になろう！ と考えさせられたセッションでした。
裸足で熱弁を奮う恭久さん、とても良かったです。
