HTML5とか勉強会第20回記念スペシャル　Chrome+HTML5 Conferenceに参加してきた

本日、HTML5とか勉強会　第20回記念スペシャル　Chrome+HTML5 Conferenceに参加してきた。

当日のプログラムはこれ。

http://events.html5-developers.jp/conference/2011/08/program.html

大きく2つのトラック（デザイナートラック/プログラマートラック）に分かれており、私は下記トラックに参加した。加えて、CSS3実践ハンズオンに参加した。

・Chrome Web Store入門（あんどうやすし氏 (mixi)）
・Debugging on Chrome Developer Tools!（北村英志氏 (グーグル株式会社)）
・実践CSS3デザイン（小久保浩大郎氏(グーグル株式会社)）
・スマートフォン向け開発（須之内　雄司氏 (グーグル株式会社)）
・CSS3のハンズオン（一條美和子氏 (産経デジタル)）

1.Chrome Web Store入門

~~当日の資料がどこかにアップされているのか分からないので、~~私の曖昧な記憶を元にした感想になるが、Chrome Web Store/Web Appsって何？というところから、Chrome Web Store/Web Appsの特徴を語る講演だった。

Chrome Web Storeというのは一言で言うと、マーケット。そこでは、ユーザが求めているWebアプリを容易に探すことができ、開発者がWebアプリを提供する上で利用できるユーザ認証や課金の仕組みが用意されている。

Chrome Web Storeで入手してインストール可能なWebアプリは2つに分けられる。１つはHosted Apps、もう１つはPackaged Apps。

アプリケーションの特徴はmanifestファイルに記述する。
androidアプリもmanifestファイルにアプリケーションの特徴を記述するのだが、同じ内容なのだろう。

課金の仕組みは一般のWEBアプリでも利用できるようだ（そのような説明があったと記憶している）。

非同期処理も用意されている。Web workersとの違いは、生存期間。Web workersはアプリ起動中にだけ生存しているが、Web Appsはchrome起動のタイミングから生存しているらしい。

当日の資料がアップされました（2011//8/22）

2.Debugging on Chrome Developer Tools!
Chrome Developer toolsは普段も使うことはあるのだが、使ったことのない機能を知ることができた。

dev toolsはHTML5で書かれている。
CSSやJSを変更したら履歴が残り、Save Asで保存出来る。
Firebug互換のコマンド（Command Line API）を使用できる。
Eclipseからのリモートデバッグも可能。
圧縮されたJavaScriptも整形して表示してくれる。
チートシートがある。

3.実践CSS3デザイン

CSS3概要
- 画像で行われていたことをCSS化する利点について
  - 転送量の減少
  - 内容変更にダイナミックに対応する
ウェブデザインとは何か
- アクセシビリティを確保し、情報を正しくわかりやすく伝え、かっこいいやかわいいなどの体験を作成すること。
CSS3を使う
- Feature Detection。
- modernizrの使用。

4.スマートフォン向け開発

モバイル端末の進化
スマートフォン向けWEBサイトのUI
- 端末ごとに特徴が異なる
- 見やすいスクロールしやすいページ
  - ズームイン・アウトや水平スクロールが必要なページは閲覧しにくい。縦方向にスクロールするだけで全てが見えるページを作成する。
- viewportを使用することでページの横幅を小さめに（スマフォに合わせたサイズに）指定する
- 押しやすいリンク
  - リンク同士を近づけすぎない。
  - 押しやすい大きなリンクやボタンを表示する。
  - リンクにパディングなどを設定することで、ヒットエリアを見た目より大きめにする。
- 画面の状態に応じて異なるCSSを適用する
  - media queriesを利用する。
- ホーム画面に登録されるアイコンを指定する。
複数端末サポート
- CSS互換性
  - ベンダープレフィックスを使用する。
- フォールバックを記述する。
- 異なるDPIへの画像
  - DPIに応じて高解像度用の画像と、低解像度用の画像を用意する。

高速化
- 外部リソースの削減
  - JS,CSSをインラインで記述
  - 画像をdata scheme urlで記述
- Http Expireの設定
- 外部リソースを削減するか、キャッシュさせるか(Http Expire)
  - キャッシュのヒット率を調べる。
- HTML/CSS/JSの圧縮
- CSSスプライトの実施