Google Developer Day 2009 に来てます / いってきました
午前中は遅れてきたので，メモれなかったけど，入ったときちょうどGoogle Waveのデモやってて，見たいもの見れたってかんじ．
あと，Google Maps API v3が近日中に来るよ，とか．いろいろ．v3はAPI keyがいらなくなるらしい．ルート検索用APIがつくとか，いろいろすばらしい．あと，携帯サイト構築用に扱いやすいAPIとか？詳細不明だけど．
それと！
Android 携帯の端末を事前登録してた参加者全員プレゼントというサプライズ．
ということで，ゲットしてまいりました！！
ちなみに，マスクをも配った．Google．．．
午後からライブ更新します．
HTML5により拓かれる次世代Web
- アプリケーションプラットフォーム
- HTML4のバージョンアップではあるが・・・
- HTMLの役割の変化
- 文書の共有 -> アプリケーションの土台
HTML5の新機能
-
- オフライン関連機能
- SVG, MathML，canvas，videoなど
- プラグインが必要だったものが，HTMLだけで記述できるようになる
- 例えば，Gmailのファイル複数選択＆アップロードのインターフェースは，現状Flashが必要 -> Flashのバージョン，一部のブラウザで使えない
- こういうの使わずに実装できればいいよね
- Web Workers
- スクリプトでマルチスレッド
- Web Sockets
- サーバとメッセージ交換
- Web Storage
- クライアントのデータ保管
今からでもすぐHTML5をはじめよう
歴史的な話
4つの規格で構成
- HTML5
- Web Storage
- Web Workers
- The Web Sockets API
- 現在はすべてドラフトの状態
- 今年10月に最後のWorking Draft
- それから実装されてくには？->2012年とかもっとあととかいう感じ
新機能の解説
- マルチスレッドのための仕組み
- 新しいスレッドを生成するWorker
- 複数のウィンドウで共有できるSharedWorker
var worker = new Worker('foo.js'); worker.postMessage(data); worker.onmessage = function(event) { _ = event.data; };
みたいな使い方．
Web Sockets
- HTTPではない．サーバ側でもこのプロトコルを実装する必要がある
- FWとかプロクシ越えとかの問題は？
- HTTP over Sockets みたいなものを作ってる途中
var sockets = new WebSockets("ws://example.com/channel1'); socket.postMessage(data);
みたいな使い方．
- ページ遷移しても消えないクライアントがわのデータ保存
- KeyValue型のストレージ
- セッションストレージ
- SQL発行するタイプのストレージ
- 同期実行・非同期実行のインターフェースがある
- コールバック関数とかいでがんばる
アプリケーションキャッシュ
- キャッシュして良いURL，しないでほしいURLを宣言
CACHE MANIFEST setting.html images/log.gif NETWORK: cgi/submit.cgi
<!DOCTYPE html> <html manifest="app.manifest"> ...
みたいな．
フォームの強化
- input要素の追加
- search, tel, url, email, datetimeなどなど
- このへんは，Operaがかなり実装が進んでいる
- フォーム検証機能
- submitされるまえに，最小値や必須などのバリデートができる
- 例
メディア属性
- canvas
- スクリプトでの2次元グラフィックス描写
- video/audio
- 再生・中止・早送りなどのAPIも
- menu要素
- あらゆる要素のコンテキストメニューを定義できる
- ツールバーを簡単に定義
- datagrid要素
- まとまったデータ．リスト・ツリー・表など
- ソートや編集のインターフェースを作りやすく
- progress要素
- meter要素
- 構造化文書向けの要素
- section，article，aside，headerなどなど
- 見た目にはあまり影響がない
まとめ
- アプリケーションプラットフォームだよ，みんなこれからHTML5やろうぜ
ソーシャルWebの可能性
- e-コマースサイトにソーシャルな味付けをしてみる
- レーティング・レビュー機能をつける
- ウェブサイト管理者の悩み
- トラフィック増加・集客 -> コンバージョン向上 -> 収益増加
- 魅力的なウェブサイト（仮説）
- ファインダビリティ（サイト認知）
- スティックネス（サイト訪問の頻度）
- -> ソーシャル化による効果
- ファインダビリティ
- いかに友人から進められるか．口コミ．ソーシャル化により認知度を高める
- スティックネス
- レビューかける，レビューにも評価書ける
- 自分のレビューの評価，気になってまた来るよね？
- レビューかける，レビューにも評価書ける
もう一度e-コマースについて考えてみる
- 使いやすい？もう一歩先のソーシャル．
- 人気の商品->大量のレビュー．．．とても見切れない
- 異なったレビュー（評価が極端に違う）
- 解決策：例えば，「友人のレビュー」もあわせて表示するとか
- 人間関係のグラフ化
「ソーシャルかされると，Webはより良くなる」
-- OpenSocial FoundationのGlazerさん
- ユーザ登録だるいよね
- ソーシャルサイトへの対応
- OpenSocial：開発者が，統一したインターフェースでいろんなサイトに対応できる
- OpenSocial Foundationが標準化をすすめている
- Google Friend Connect
- OpenSocialなどのソーシャルな機能をつかった，GoogleのサービスAPI
- ウィザードを使ってソーシャル機能を追加
- 開発者がディレクトリにアプリを登録
- OpenSocial RESTFul
- OAuth
- ...
- Social Graph API (Labs)
- 他のウェブサービスで作成したコネクションの人間関係を表現できる
- ことはじめ
- OpenID, OAuth，OpenSocialなどやろうぜ
- Google Friend Connect使ってみてね
Google Chromeの内部構造
- ブラウザの再発明
- ウェブアプリを進化させるために
- ウェブアプリを・・・
- 高速・安定・安全
基本構造：マルチプロセッサアーキテクチャ
- 「Modern browsers resumble the co-operatively multi-tasked OS of th e past.」
- 今のブラウザって一昔前のOSみたいなもんだよね
- プロセス
- GUI制御・ウェブページ描写・プラグイン...
- これら一つ一つにプロセスを割り当てましょう
ブラウザプロセス
- メインプロセス
- 信頼されたプロセス・ローカルファイルにアクセスできる必要がある
描画プロセス
プラグインプロセス
- Flash，ActiveX ... これらを動かすプロセスを専用のものにしている
ワーカープロセス（開発中）
拡張機能（開発中）
描画プロセス
- どういうタイミングで新しいプロセスつくってるのか
- 1つのタブに1つのプロセス
- 違うドメインに遷移したときは，プロセスの作り直し
- OmniboxへのURLの入力
- JavaScriptのポップアップなどは1つのプロセスを共有
プロセス間通信
- クリックなどのイベントを知ってるのはブラウザプロセスだけ
- 各プロセスに通知 -> プロセス間通信専用スレッドを実装
- 名前つきパイプ（非同期・同期）
- 描画結果転送やサムネ転送などは，名前つきパイプだと効率が悪いから共有メモリ
- ブラウザプロセスが -> IPC -> レンダラ（WebKit）
Chromeのネットワーク
サンドボックスとは
「いろいろ言ったって悪いもの作る人はいるから制限しよう」
- ライブラリ
- 悪意のあるウェブサイトからシステムを守る
- Google Chromeのすべてのプロセスはこのライブラリ上に実装
- ローカルソースへのアクセス権
- ファイル・ウィンドウ・入出力デバイス・・
- Integrity Level (Vista以降) をLow にしている
- セキュリティホールをつかれてももう1段階
WebKitについて
Google Chrome と WebKit の関係
Google Chrome の HTML5 への対応
V8
- 高速JavaScript実行エンジン
- ゼロからの実装だったので，なんでもアリだった
- 自分たちの入れたい機能をいっぱい入れた
- 世代別GC
- Chrome 2.0 -> 新正規表現ライブラリ (irregexp)
- 頻繁に使われるコードのプロファイリングと再コンパイル
Google Chrome の拡張機能
- HTML・CSS・JavaScriptでかけるようにしよう
- Chromiumでは
ビルドオプションにより使える→ (コメント欄より)起動オプションでいけるそうです - ChromiumはUser Scriptも使える → (コメント欄より)ChromiumでもGoogle Chrome でも起動オプションでいけるそうです
ChromuimとGoogle Chromeの違い
- Google ChromeはChromiumをベースに作成
- Chromiumに対する変更はGoogle Chromeに反映
- Chromiumのソースツリー
ツール
- Rietveld
- レビューツール
- diffを見てコメントいれたり
- Buildbot
- ファイルの総数は？
- 約88,000
- 構成：テストコードがほどんど（LayoutTest）（テキストファイル）
すげー！テスト大事．
OpenSocial アドバンス
- ソーシャルウェブ・CPMは少ないけど，ユーザが多い
- パフォーマンスがとても大事
- 高速化ができれば，利用量が増える
- -30KB -> 30% の成長 / 3週間
レンテンシーを削減し，コストを削減をする
- ナイーブ実装：ホスティングコスト・大域幅のコスト->ユーザが増えたらばかにならない
- ソーシャル化したらいいんじゃ？
Quarter Mile
- Quartermile
- Backend: Google App Engine
- ソース： http://bit.ly/quartermile-src
- XMLSpec: http://bit.ly/quartermile-app
ナイーブ実装と，ソーシャル実装のコスト比較
- Native： $855.74/month
Web開発のベストプラクティス
- JavaScriptのインデントや空白はブラウザにとっては必要ない
- JS，CSS -> の空白を除くと，約50%，$61の削減になる
- YUI Compressor
- レイテンシの測定(JavaScipt の onload で endDate - startDate !)
- CSSで，画像をスプライト (複数の画像をひとつにまとめる)
- HTTPリクエストを1回に．
- キャッシュコントロール
<FileMatch "..."> Header set Cache-Control "max-age=290304000, public" </FileMatch>
ノートのバッテリーの問題と，あんま興味ないこともあり，いったんメモ終了ｗ．次の話題でまた再開するかも．
Google テクノロジーライトニングトーク
メモ再開．
Key - A Web Framework on Google App Engine
- 生まれる前の赤ん坊
- 7月に生まれる息子も「けい」って名前付けた！
- 「あまりひどいソフト出すと悪口言われるのいやだから」
- Djangoを参考にした
- テンプレートエンジンはjinja2を採用
- ライセンスはBSD
Made Easier to Use Rails on GAE/J
Google Wave API
さて．バッテリやばかったのでテキストエディタにメモっていたのを帰宅してからポスト．
- WaveSandbox.com
- 近日中にアカウント配布
- wave は封筒のようなもの
- ひとつのWaveletがパーミッションを発行する
- inline でプライベートなコミュニケーションができるようになっている
- Embedding - 組み込み
- ウェブ開発者のひとが，自分のサイトにもっていける
- Extension - 外部のものをなにかWaveの中にもってくる
Embeddingのアーキテクチャ
- Google Mapsみたいなもの
- JavaScriptのAPI
- Embed API method
- LoadWave
- SetUIConfig
- AddReply
- Follow
- example:
- http://wave-api.appspot.com/public/embed.js
- var wavePanel = new WavePanel(...);
- UIをカスタマイズ
- Wave Embed Gadget Setting
- ウィザードでガジェット作成
- orkut
Extension
- Wave以外のエレメントをWaveで使える
って説明きいていましたが，結構ややこしい．
バッテリー切れなのでこのへんまでしかメモってないですが，後半は，具体的なAPIの使い方とサンプルコードとかやってました．
ボットの作り方とか．
MockingbirdっていうFirefoxの拡張機能で，ブラウジングの共有とか，Google Mapsの見てる画面の共有とかいろいろ実装してたんだけど（実装途中のまま放置気味・・・）それらがひとまとめになった（もちろんそれだけじゃないけど）ような印象．
あと，聞いてて思ったのは，SMTPの代わりになりうる，って話だったけど，SMTPどころじゃなくて，IRCすらも飲み込んでしまってもおかしくない，と思った．ボットみたいなものはAPI経由で簡単に作れちゃうしね．
やっぱすごいよ，Gooel Wave．
GTUG (じーたぐ) 東京
わすれるところでした。追記。
Google Technology User Group だそうです。先日のGoogle I/O 以来世界中で急速に発足しているらしいです。
東京では、今日、Tokyo GTUGが発足したらしいです。８月に第一回集会があるらしいので、要チェックですね。テーマはGoogle Waveでやるらしいです。
まとめ
さてさて．
Androidに携帯もらってウキウキした，というサプライズを除いても，Google Waveの話や，それに伴う，HTML5，Google Chromeの話を中心に聞いて回ったんだけど，非常に有意義な一日だった．
特にGoogle Waveは，すごい．要するに，一般にユーザにとっても生活基盤となりうるだけでなく，開発者にとっても，オープンで新しいものを開発しやすいプラットフォームができている気がする．
次世代Web，なんてものは漠然としたイメージばっかりで，なんとなく雲をつかむような話だったのが，ここ数年でぐっと身近に感じるようになってきた．
既存のウェブから次の時代のウェブへ．それはやっぱり，「オープン」が鍵でした．巨大なトラフィックを持つハブとなるコミュニティサイト・ソーシャルサイトがあり，そこから枝を張るように無数の小さなウェブサービスがある，そんな世界がもう目の前にきている．
HTC GDDJ-09にて撮影：
HTC GDDJ-09を撮影：
