スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
CSS Nite LP Disc3 Part.3
『ザ・コーディングの美学』
サイバーガーデンの益子貴寛さんのセッションのレポート

コーディングの「真・善・美」

真→論理
善→倫理
美→芸術

ではコーダーにとっての真善美とは何だろう?

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を実装してみたり、アクセシビリティに配慮してみたり…
やるべきことはまだまだ沢山…

与えられた時間の中で、一つでも多くクリアできるように、努力する!
スポンサーサイト
CSS Nite LP Disc3 Part.2
LIVEコーディングの感想

普段、他の人がどのようにコーディング作業をしているのかが見れてとても良かった。
他人の作業を見ていて気がついたことがあったので、メモしておく。

1.画像ファイルの名前の付け方
2.ユニバーサルセレクタは使わない?
3.idやclassの名前の付け方
4.事前の設計が大事!

1.画像ファイルの名前の付け方

他の人がそのファイルを見た場合にも、分かるようにファイル名をつける。
headerに使用する画像ならば、「header_●●.jpg」などとする。

2.ユニバーサルセレクタは使わない?

ブラウザのスタイルを初期化する時には、ユニバーサルセレクタは使わない方向に進んでいる。

3.idやclassの名前の付け方

idやclassに付ける名前も、意味のあるものにする。ワンパターンになりがちな場合は、いろんなサイトを参照し、どのようなタグが付けられているのかを、メモしておくことも大事。

4.事前の設計が大事!

これは昨日も書いたことだが、パソコンでの作業の前に、構造化をどのようにするか? どんなタグを使うのか? サイト内で共通している箇所はあるのか? 文字が増えた場合にはどんなレイアウトになるのか? などといったことを、事前に決めておくことが大事。
そうしておくことで、コーディングの作業がスムーズに進む。
CSS Nite LP Disc3 Part.1
昨日、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タグ毎に、テキストを打ち、マークアップし、スタイルを割り当てる

河内さんの場合は、カンプにガイドを引いて、そこから数値を割り出すのではなく、その都度ものさしツールや選択範囲ツールを使って、数値を出しコーディングをしていくといったものでした。

河内さんのセッションで印象に残ったのは、デザイン(カンプ)を見て、規則性を見出すというものでした。

ここは何故こういうデザインなのか? 文章が増えた場合はどうなるのだろう?

こういったことを事前に考えた上で、コーディングの作業に入っているということでした。

※全く対照的な方法で取り組んでおられたお二人。それぞれ、自分なりの作業パターンを確立されていらっしゃいました。
私も自分なりの方法を確立したいと思ったセッションでした。
CSS Nite Shuffle Part.3
続いてのセッションは、太田禎一さん(アドビシステムズ株式会社)による『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、電子書籍、携帯端末などに使われていく可能性があるそうだ。

デスクトップアプリケーション、果たして使うのだろうか? でも、ちょっと試してみようかなぁと感じたセッションでした。
CSS Nite Shuffle Part.2
長谷川恭久さんのセッションの後半のレポートです。

テクノロジー

次から次へと新しいテクノロジーが生まれている。現段階で出来ないことでも、新しいテクノロジーでなら、その問題が解決出来るかもしれない。
だから、新しいことにも挑戦してみることが大事。

新たなテクノロジーの例

・有機物から作られているバイオ電池を使ったパソコン
・単三電池で動く携帯電話
・公害問題を鳥につけたGPSとGoogleMapsで視覚的に

コミュニティ

1.共有することの大切さ
2.インプットとアウトプット
3.参加


1.共有することの大切さ…共有はクリエイティブの原動力!
WEBはまだまだ新しい業界。だから誰もが講師であり、生徒である。そして性別、年齢、人種に全く関係なく議論でき、みんなで賢くなれる。

2.インプットとアウトプット…インプットの方法には、雑誌・書籍、セミナーやカンファレンス、RSS、会話など様々ある。でもインプットだけでは駄目! 頭でっかちになってしまう。
インプットしたら必ずアウトプットをするように心がける。

アウトプットの方法には、ブログ・SNS・ポートフォリオサイトなどがある。他人に見られるのが嫌なら、ローカルサーバーという手段もある。

会社内なら、同僚や上司に「昨日こんなことがあって…」とか「こんな技術はどうでしょう?」などと会話するだけでも、十分アウトプットになりうる。

3.参加…まずは参加(挑戦)してみる。それが大切。

★感想★

地球環境に対しても、WEB制作に対しても「エコ」になろう! と考えさせられたセッションでした。
裸足で熱弁を奮う恭久さん、とても良かったです。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。