WDEカンファレンス復習編

今日は先日開催されたWDEの録画ビデオを見ながらのプチ勉強会で参加させてもらいました。イベント当日スタッフで参加していたメンバーを中心で希望者のみということで、私も当日はスタッフで参加していて見る事が出来なかった所もあるので、見せてもらいました。

以下はビデオを見ながら、取ったメモです。基本的に自分にしか分からないような書き方なのでアレなのですが…備忘録ということで予めご了承ください。

• エリックメイヤーのカンファレンスは都合により見る事が出来ませんでした…。残念。

• ダン・セダーホルム氏のカンファレンス

  • かなり実践的なCSSのマークアップについて
  • emはベースとなるフォントサイズを基準に１として相対的にサイズを指定する単位。％と似てるけど微妙に違う。
  • 柔軟性に富んだサイトを作るのならフォントのサイズはpxで指定するより、emで指定した方が柔軟性の高いデザインを実現する事が出来る。
  • デザインする時は基準となるフォントサイズを予め決めておくといいらしい（この辺はウロおぼえ）
  • max-widthプロパティを使う事で、無駄に横に広くなるデザインを防ぐ事が出来る。
  • WEBデザインは横のレイアウトに長けているけど、逆に縦のレイアウトはなかなか難しい。
  • なんでって、環境によってレンダリング結果が違うし、コンテンツの増減でまた変わって来てしまうから…。
  • DTPデザイナーが良く陥りがちなのは、縦のデザインを全ての環境で揃えようとすること。でも、現実的には不可能ですよ。（だって環境がみんな違うんだから）
  • IE8はpxに弱い（？）結局は相対的なデザインをした方がいい（？）
  • WEBは柔軟性に富んだメディアなんだから、それを活かしたデザインをした方がWEBらしい。
  • Backgroundのユニークな使い方（Silverbackのサイト参照）
  • RGBAの使いどころ、そしてそれはいつ使えるようになるのか？
  • RGBAが使えるようになるのは、ログを見てalfaに対応したWEBブラウザがメインシェアになったときかな〜。

• ジェレミー・キース

  • AjaxはHTMLのFramestやiframeみたいに部分的に情報を取得できる技術らしい。
  • 実は8年前にMicrosoftによって開発された技術。だからそんなに真新しいものでもない。最近になって話題になって来ただけ。
  • 従来はPCからリクエストを送って、サーバーからレスポンスを受ける事によって情報を引き出して来た。
  • Ajaxは常にリンクしている状態で1ページの中で更新された箇所だけを自動的に配信する技術（多分そういうことだろう…）
  • ベースはjavascript？
  • 開発はHTMLベースで制作するけど、目的の部分はAjaxで作る
  • Ajaxに有効なページの例
    • 更新をした時に特定の部分だけ更新されるようなページ
    • 登録用のフォームとか
    • ログイン画面とか
  • Ajaxのおかげでuser testingも普及して来たそうな。
  • 全然関係ないけど、彼のフリッカーに私の写真がアップされていたそうな…いつの間に…。

• アンディ・バド

  • 非常に長い前置きで「使う人が混乱するようなインターフェースは作ってはいけない」ということを言ってました。
  • ユーザーは常に目移りしているから制作者が思うような行動をとるとは限らない。
  • HEROというゲームは600人のテスターと3,000時間という期間とコストをかけてテスティングを行ったおかげで1週間で約350億円の売上を記録した。だからユーザーテストは非常に重要。
  • 方法はいろいろあるけど、紙をブラウザに見立てたテストをやるだけでもユーザーの動向をチェックする事が可能。プログラムを組んでからやるよりコストを抑えられるかも？
  • 裏付けには費用も人もかかる。
  • お金がないならgellira user testingを使おう（これはただのCMのような気がするけど…）。
  • コンテンツを制作する上で、ユーザーが考えている事より、ユーザーの動向を探る方が重要だという。

• ダグ・シェパーズ

  • SVGはDOMをベースに作られている。XMLで構成されているので編集が簡単
  • Canvasの方がメモリー消費が大きい
  • SVGは数値でコントロールしているので、例えば顔だったら目の位置を動かすなどの操作が出来る。
  • SVGはXMLで書かれているので、構造化されているためCanvasより修正が簡単。
  • Illustratorでも書き出す事が出来る。が、AiはXMLのコードがめちゃくちゃなので、おすすめではないそうです。「リンクスケープ」というフリーのツールがおすすめだそうです。ちなみにリンクスケープはウィイペディアでもよく使われているらしい。
  • ちなみにCanvasはScript系
  • SVGの最大の特徴はHTMLと共存できる事。Flashとは違うのでアクセシビリティ的にも良い。HTMLからSVGをコントロールする事も可能なようです。
  • Firefox,Opera,Webkitでサポート。IEはサポートしていない。プラグインをインストールすれば表示できるようですが、凡用性に欠ける…。（普通のひとはそこまでしないと思う）
  • データを共有したい時はSVGが良い。ドキュメントとして管理するので、ローカライズも簡単。
  • Canvasはjavascriptで何かさせる時に有効だそうです。
  • SVGはXMLで書かれているので、CSSを当てる事も出来る。
  • 擬似的な3Dアニメーションも作る事が出来る。
  • HTML5ではHTMLに直接SVGを書き込む事が出来る方法を模索しているようです。
  • SVGはオープンな画像フォーマットとして今後重要…かも。
  • 12月に勧告されるSVGの最新バージョンはJIS化されるらしい。だからmozillaもWebkitも今後は本腰を入れてサポートして行くだろうという事でした。

• マイク・ミジャースキー

  • データビジュアライゼーションで有名らしいです。
  • 今回はジェフリービーンの代役で来日。
  • データを集約して、簡易的に見せる事で注目される。
  • 昔は時間が過ぎると人から忘れられるけど、現在ではデータをアーカイブして公開しているので、人の関心を継続させる事が出来る。
  • Live,Vast,and deepという考えかた。
  • Live リアルタイムに情報を集め、ビジュアル化して見せる
  • Vast 広い範囲の情報をビジュアルで見せる。スタティックな見せ方よりビュジュアルでアニメーションさせてみせる事も紹介していました。
  • Deep より深い（多分詳しい情報の事を言っているんだと思います…たぶんね）情報を視覚的に表現する
  • この辺は話が難しくてよく分からなかったです。ただ分かったはのはデータというのは、文章や数値で見せるよりもビジュアルとして見せた方が説得力があるし、ユーザーに対して理解を深める事も可能であるということ。

以上が、個人的メモでした。もし間違った箇所があったらこっそり教えてください…（笑）

今回のカンファレンスは技術的には即戦力にはならないかもしれないですけど（なるヤツもありましたけども）、セオリーな発想も大事だけど、時には違う観点からのアプローチもWEBには必要なのかという事を考えさせられるイベントだったように思います。
二日目のワークショップでエリック・メイヤー氏もTable要素とCSSを使ってブラウザの歴史的年間表を作ったり、棒グラフを作ったりしていましたが、紹介されて「ああ、そういう使い方もありか」とは思う者の、実際には紹介されるまでそういう発想すら思いつかないというのが、やっぱり考え方が違い見たいなものが見える気がします。
確かに実践的にはあまり使わない技術かもしれませんけど、よりWEBらしいアプローチの仕方がある事は今後の仕事にも少なからず影響を与える、良い発見というか刺激だと思います。面白かったし、楽しかった。普段はあんなギークな会話しないもんなぁ（笑）。