2009-12-05
2009-12-04
まずは人が重要！ - It's the people stupid
ラベル:
report
Web Directions East 2009 カンファレンス 11月13日 16:30–17:30 クロージングキーノート
Deborah Schultz（デボラ・シュルツ）
コンサルタントとして活動しており、スタートアップやVCだけでなく、ペプシ、GE、およびシティコープをはじめとした雑誌：Fortuneで選ばれた「Fortune 50」企業のビジネス戦略アドバイザーを務めている。ビジネスとテクノロジーに精通しており、数多くのカンファレンスで講演。講演や自身のブログを通じて、社会、文化そしてビジネスを繋げるための Web テクノロジーの啓蒙を行っている。Contacts
まずは人が重要！ - It's the people stupid
HTML5の話ではないよ技術屋と技術屋外の人の橋渡しをしたい
人間は社会的な動物
これまでは地理的な制約があった
コミュニケーションが変わってきた
Flickrのコミュニティ
人々はインターネットでコミュニケーション可能
マスメディアにはできなかったこと
いろんなところからネットにつながる
これらの関係は果たしてリアルなのか？
YES！ 私はオンライン上の友人を愛しています
悲しいことにビジネスはサイロ状態
私たちは楽しくつながりたい
ソーシャルなウェブ
私たちは経済の中で生きている
ビジネスは昔に戻っているのかもしれない
Deborah Schultz
ソーシャルウェブとは？
個性の爆発である
カスタム、コミュニティ、自己表現、共有である
visualcomplexity.com
さまざまな情報が表現されている
技術（テクノロジーやFacebookなどのサービス）がソーシャルウェブではない
つまり広告（売りつけるもの）ではない、関係である
私たちは関係の世界で生きている
グランドジェスチャー（自分たちの都合で何かを押し付ける）は終焉を迎える
ビジネスに関しては信頼の連続体
常に新しい方法で繋がることを探っていく
良い関係を作るマニュアルは？
マニュアルは無い、関係は皆違う！
参加型 Web : 新しいソーシャルウェブのためにフレームワーク
- 有機的 vs 静的
- 感情 vs デジタル
- 関係 vs トランザクション
- Continuum vs Grand Gesture
新しいヒューマンスキル
- コネクター
- 批判する人
- 検出する人
- 促進する人
- 外交官
- マルチタスク（ジャグリング）
- Approachable
- Intuitive
- Inquisitive
- driven by relationships
現実の世界で例えるなら、パーティーであちこちで会話が起きているような様子
これがソーシャルWebの現実
Pause for demonstration
Let’s Break it Down
- Handshake - Enter is a handshake
- Greeting - Sign-in is a greeting
- Response - Remind me of the fun times we had together
- Handoff - Did you know.....
- Feedback - Entertain me
- Make me smarter about me - Give to get
- Respect me and my time - remember, opt-n
Some Practical Steps
社会科学者のように考える
ます、聞きましょう、テストしましょう！
ユーザーの理解を手助けして
セッション感想
Christian Crumlishのソーシャルデザインパターンとは変わって、ソーシャルウェブとは何なのかということを実例をもとに、比較的平易な言葉で説明してくれる内容だった。ソーシャルウェブをお金儲けの手段として考える人は多いらしく、そういった目的で作られたサイトは成功しないとDeborahは言う。大事なのは人対人の関係であると。一見、昔の商売のスタイルに戻ったかと思うような発言だが、現在ではネットユーザーをある程度ターゲティングすることは可能でそういった関係構築も実現できるのかもしれない。それができたからといって、『買え！買え！』といったメッセージばかりではなく、信頼を構築するためのコミュニケーションが必要なのは当然だ。そのコミュニケーションというのは何なのかと問われれば、それはユーザーに聞くしかない。そのためにはユーザーテストなどユーザーを知る努力が必要なことも言うまでもない。アクセス解析以外にもそういった手法も試してみたい。スライド資料
It's the People Stupid（旧バージョン）
View more presentations from deb schultz.
『まずは人が重要！』Deborah Schultz | Web Directions East
高速ウェブアプリのためのCSSパフォーマンス - CSS Performance for Fast Web Applications
ラベル:
report
Web Directions East 2009 カンファレンス 11月13日 15:00–16:00
Nicole Sullivan（ニコール・サリバン）
3000以上にも昇る大規模サイトの最適化に携わって来た Nicole Sullivan は、現在 Yahoo! のパフォーマンスエンジニアと最適化のエバンジェリストとして国内外のセミナーで講演。Webサイトに関する研究だけでなく、プロジェクト管理もこなすマルチタスクなリーダーシップを発揮。フロントエンドエンジニアとしての高いスキルを持つ。Contacts
高速ウェブアプリのためのCSSパフォーマンス - CSS Performance for Fast Web Applications
UNDERSTANDING THE CASCADE
デフォルトのスタイルがブラウザ毎で存在しそれは全て違うYUIのrecet.cssを使うと良い
クラスの順序に違いはない
プロパティと値の順序
スペルミスはエラーにならない（無視されるだけ）
color:red, colour:blue
スタイルの順序
.foo {color: red;}
.foo {color: blue;}
この場合、blueが勝つ
＜link rel="stylesheet" type="text/css" href="styles.css" /＞
＜link rel="stylesheet" type="text/css" href="moreStyles.css" /＞
この場合、moreStyles.cssの方が勝つ
同じ詳細度なら最後に出てきた方が勝つ
詳細度は速く計算される必要がある
IDとクラス
#nav p {color: red }
.nav p {color: blue }
INLINE STYLES
＜p style=”color: green;”＞My page＜/p＞
!IMPORTANT
p{color: red !important}
＜p style="color: green;”＞My page＜/p＞
この場合、redになる
継承
body{font-size: 18px;}
＜body＞
＜p＞This text is 18px.＜/p＞
＜/body＞
P要素も18ｐｘになる
うまくいかなかったらスパゲッティコードになってしまう
CSS IS AWESOME
コードは脆い 人が変われば壊されてしまう
熟練度が必要
コードの再利用はほとんどない 人の書いたコードは信用しない
ファイルサイズが増大していく 修正を繰り返していけばどんどん増える
HOW TO ARCHITECT GOOD CSS?
Object Oriented CSSプロパティではなくセレクタに注目する
用語の使い方に注意する（ex.クラスって何よ？）
Home - oocss - GitHub
見出しについて
デベロッパーじゃデザインの意味が分からない
再利用はパフォーマンスに良い
冗長性は避ける
似たようなものはまとめろ
ロケーションの依存性を避ける
#weatherModule h3{color:red;}
#tabs h3{color:blue}
本当に必要なのか考える
REFLOWS and rendering time
CSSパフォーマンスで重要なのはCSSファイルのサイズとHTTPリクエスト数リフローとレンダリング時間は大した問題ではない
- Toggle classes as low in the dom tree as possible
- Avoid setting multiple inline styles
- Apply animations to elements that are position fixed or absolute
- Trade smoothness for speed
- Avoid tables for layout
- Avoid JavaScript expressions in the CSS (IE only)
Apply programming best practices to style sheets
デフォルト値を設定する× #tabs h3{color:blue}
クラスに構造を定義する
× div.error{...}
要素にスタイル付けしない
× p{..}
同じ詳細度にする
セレクタによるハックは控えめに
× .ie .mod .hd{...} → .mod .hd{_zoom:1;}
ロケーションによる詳細度の指定は避ける
× .sidebar ul{...}
× .header ul {...}
過度に特定なクラス名は避ける
× .niXcolesDucatiMonster620{...}
シングルトンは避ける（IDは避ける）
× #myUniqueIdentifier{...}
ミックスインを使う
○ class="media" class="media extended"
カプセル化
オブジェクトのサブノードにアクセスさせない
セッション感想
前半はCSSの基礎的なことでだったので、エンジニアさんにCSSを説明するときに便利だと思った。全体としてはOO（オブジェクト指向）CSS入門のようなセッションで、複数人でのコーディング、修正の多い大規模サイト運用において、どのようにCSSのパフォーマンスを発揮していくのかといった内容だった。まさしく大規模サイトにOOCSSは最適だと思う。ただ、OOCSSを導入するにあたっては既存のCSSでマークアップしたページとの兼ね合いを考えると難しいものがある。CSS自体、スパゲッティコード（ごちゃごちゃになったコード）化しやすい傾向もあって、使用していない/しているコードの把握、CSSのコードを設計するために現在どのようなデザインエレメントが存在するのか調査・カタログ化、デザイン部内のコーディングルールの周知などを既存のコードを運用しつつ考えれば、かなりのリソースが割かれるのは確実だ。
逆に、Webデザイナー1人で管理できるレベル程度の小規模サイトではOOCSSのメリットはあまり享受できないかもしれない。いや、でも修正に修正重ねていったら使わないコードが増えていくのかもしれない。
結局、OOCSSの理念としてCSSコード量をむやみに増やさないというところに重きが置いてあるのかなと理解した。
スライド資料
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009（旧バージョン）
View more presentations from Nicole Sullivan.
CSS Wish List @JSConf
View more presentations from Nicole Sullivan.
『高速ウェブアプリのためのCSSパフォーマンス』Nicole Sullivan | Web Directions East
 | Even Faster Web Sites: Essential Knowledge for Frontend Engineers Oreilly & Associates Inc 2009-06-18 売り上げランキング : 17211 Amazonで詳しく見る by G-Tools |
