肉とビールとパンケーキ by @sotarok

少し大人になった「肉とご飯と甘いもの」

Google Developer Day 2009 に来てます / いってきました

Events


午前中は遅れてきたので，メモれなかったけど，入ったときちょうど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をはじめよう
    • 新しいブラウザでは実装済み
      • まだ仕様が定まっていない部分もあるけど
    • 特定の端末（iPhoneã‚„Androidなど）に対するウェブアプリならそのプラットフォームに対して開発すればいいだけだし！
    • ドラフト読んでフィードバックしてね
歴史的な話
  • HTML4.01から10年ぶりのメジャーバージョンアップ
  • W3CはHTML4で終了のつもりだった
    • XHTMLを普及させたかった
      • しかし，XHTMLにするメリットがない
      • 見えてりゃいいんだし
      • ->だからあんまみんな熱心にならなかった
  • そこでここでHTML5
4つの規格で構成
  • HTML5
  • Web Storage
  • Web Workers
  • The Web Sockets API
  • 現在はすべてドラフトの状態
    • 今年10月に最後のWorking Draft
    • それから実装されてくには？->2012年とかもっとあととかいう感じ
新機能の解説

Web Workers

  • マルチスレッドのための仕組み
    • 新しいスレッドを生成する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);

みたいな使い方．


Web Storage

  • ページ遷移しても消えないクライアントがわのデータ保存
  • 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されるまえに，最小値や必須などのバリデートができる
  • 例
    • pattern属性に， pattern="https?:///.+\.(gif|png|jpg|jpeg)" みたい，正規表現で制限可能
    • ←HTML5 実装してるブラウザで見ると描写されちゃってるけど、「<input type="time" min="9:00" max="21:00" step="1800">」です。


メディア属性

  • canvas
    • スクリプトでの2次元グラフィックス描写
  • video/audio
    • 再生・中止・早送りなどのAPIã‚‚
  • menu要素
    • あらゆる要素のコンテキストメニューを定義できる
    • ツールバーを簡単に定義
    • みたいな．
  • datagrid要素
    • まとまったデータ．リスト・ツリー・表など
    • ソートや編集のインターフェースを作りやすく
  • progress要素
  • meter要素
  • 構造化文書向けの要素
    • section，article，aside，headerなどなど
    • 見た目にはあまり影響がない
まとめ
  • アプリケーションプラットフォームだよ，みんなこれからHTML5やろうぜ
感想

Firefox 3とかが率先してやってきた，アドオンのためのプラットフォームとか，そういうものが抽象化されてHTMLに落ちてきたって感じがした．
ただ，これまで開発者がJSやFlashを使って独自に実装してきたいろいろなものが，ブラウザのUIに統一される分，ユーザにとっての使い勝手（特にITに弱い人たちにとっても）が向上するだろうし，標準化されることは良いことだと思う．

それと，HTML5では，プログラマじゃないとできなかった表現が，デザイナがマークアップのみでできることが増えてくると思う．

（JSから使うものは複雑になってきてる気がするけど）


ソーシャルWebの可能性

  • e-コマースサイトにソーシャルな味付けをしてみる
  • ウェブサイト管理者の悩み
  • 魅力的なウェブサイト（仮説）
    • ファインダビリティ（サイト認知）
    • スティックネス（サイト訪問の頻度）
    • -> ソーシャル化による効果
  • ファインダビリティ
    • いかに友人から進められるか．口コミ．ソーシャル化により認知度を高める
  • スティックネス
    • レビューかける，レビューにも評価書ける
      • 自分のレビューの評価，気になってまた来るよね？

もう一度e-コマースについて考えてみる

  • 使いやすい？もう一歩先のソーシャル．
    • 人気の商品->大量のレビュー．．．とても見切れない
    • 異なったレビュー（評価が極端に違う）
  • 解決策：例えば，「友人のレビュー」もあわせて表示するとか
  • 人間関係のグラフ化

　「ソーシャルかされると，Webはより良くなる」
　　　　　-- OpenSocial FoundationのGlazerさん

  • ユーザ登録だるいよね
    • 認証：OpenID
      • 例：TwitterFeed
    • ID管理のアウトソージング
    • 認可：OAuth（API使いたいとか）
    • OpenIDとOAuthをうまくあわせたハイブリッドプロトコルの提唱（まだ提唱してる段階）
  • ソーシャルサイトへの対応
    • OpenSocial：開発者が，統一したインターフェースでいろんなサイトに対応できる
    • OpenSocial Foundationが標準化をすすめている
      • 最初「Googleが．．．」っていわれたけど，そんなことないよ！Google の手をだいぶ離れていってるよ！
  • OpenSocial
    • JavaScript
      • もともとはiGoogle で使ってたやつを大きく拡張
    • RESTFul API (＜ 0.8)
      • PHP Java Ruby Pythonのクライアントライブラリを提供
  • Google Friend Connect
    • OpenSocialなどのソーシャルな機能をつかった，GoogleのサービスAPI
    • ウィザードを使ってソーシャル機能を追加
    • 開発者がディレクトリにアプリを登録

Google Chromeの内部構造

  • ブラウザの再発明
    • ウェブアプリを進化させるために
  • ウェブアプリを・・・
    • 高速・安定・安全
基本構造：マルチプロセッサアーキテクチャ
  • 「Modern browsers resumble the co-operatively multi-tasked OS of th e past.」
    • 今のブラウザって一昔前のOSみたいなもんだよね
  • プロセス
    • GUI制御・ウェブページ描写・プラグイン...
    • これら一つ一つにプロセスを割り当てましょう


ブラウザプロセス

  • メインプロセス
  • 信頼されたプロセス・ローカルファイルにアクセスできる必要がある

描画プロセス

  • HTML読み込み〜ビットマップにする
  • 最近はDOMイベントの処理
  • WebKit + V8
  • ローカルファイルにはアクセスできる必要はないよね

プラグインプロセス

  • Flash，ActiveX ... これらを動かすプロセスを専用のものにしている

ワーカープロセス（開発中）

  • HTML5のWeb Workerの実行を担当
    • WebKit + V8を利用

拡張機能（開発中）

描画プロセス
  • どういうタイミングで新しいプロセスつくってるのか
    • 1つのタブに1つのプロセス
    • 違うドメインに遷移したときは，プロセスの作り直し
      • OmniboxへのURLの入力
    • JavaScriptのポップアップなどは1つのプロセスを共有
プロセス間通信
  • クリックなどのイベントを知ってるのはブラウザプロセスだけ
    • 各プロセスに通知 -> プロセス間通信専用スレッドを実装
  • 名前つきパイプ（非同期・同期）
  • 描画結果転送やサムネ転送などは，名前つきパイプだと効率が悪いから共有メモリ
  • ブラウザプロセスが -> IPC -> レンダラ（WebKit）
Chromeのネットワーク
  • Chrome 1.0 -> 2.0にかけて全面的に書き換えられた
    • あまり言い伝えられてないけど
    • 1.0はIE互換な部分があった
      • これはかなりWindowsベタベタで移植性とかがない
  • Chrome 2.0 で高速化
    • 擬似HTTPパイプライン -> 「Proxyを解決しています」をどうにかしたい
サンドボックスとは

「いろいろ言ったって悪いもの作る人はいるから制限しよう」

  • ライブラリ
  • 悪意のあるウェブサイトからシステムを守る
  • Google Chromeのすべてのプロセスはこのライブラリ上に実装
  • ローカルソースへのアクセス権
    • ファイル・ウィンドウ・入出力デバイス・・
  • Integrity Level (Vista以降) ã‚’Low にしている
WebKitについて
  • シンプルだから採用した
    • Geckoとか，自作とかも検討はした
    • Androidのブラウザでも使ってる

Google Chrome と WebKit の関係

  • Chrome 1.0 -> Safari 3 で配布されてるものをV8にあわせる部分とか以外はほとんどまんま使ってた
  • でもWebKitにも貢献したほうがいいんじゃね？
    • パッチとか投げるようになった
    • 3人のReviewer
    • 10人以上のコミッタ
  • WebKit の高速化・新機能の実装（HTML5・CSS3）にもかかわり
    • 設計段階からディスカッションも
Google Chrome の HTML5 への対応
  • 実装中
    • Audio/Video
    • アプリケーションキャッシュ
    • データベース
    • ローカル/セッションストレージ
    • ...
  • Safariで実装できてるやつがなぜChromeでできない？
    • サンドボックスを使っているから
    • 「ローカルリソースへのアクセスを制限してるのにローカルストレージをつくれ・・・だと？」
    • セキュリティの高さを保ちつつ
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のソースツリー
    • WebKitã‚„V8のサードパーティの関与
      • 「WebKitのバージョンかわってこわれた」よくある
    • メタソースツリー
      • WebKitã‚„V8はバージョンを特定してソースツリーにいれる
      • svn;externals で リビジョン指定してるみたいなかんじだなあ．

ツール

  • Rietveld
    • レビューツール
    • diffを見てコメントいれたり
  • Buildbot

Chromiumトリビア

  • ファイルの総数は？
    • ç´„88,000
    • 構成：テストコードがほどんど（LayoutTest）（テキストファイル）

すげー！テスト大事．


OpenSocial アドバンス

  • ソーシャルウェブ・CPMは少ないけど，ユーザが多い
  • パフォーマンスがとても大事
    • 5%遅くなると，20%の検索トラフィックを失う（Googleの場合）
    • 0.1秒遅くなると，1%売り上げが落ちる（Amazon）
  • 高速化ができれば，利用量が増える
  • -30KB -> 30% の成長 / 3週間

レンテンシーを削減し，コストを削減をする

  • ナイーブ実装：ホスティングコスト・大域幅のコスト->ユーザが増えたらばかにならない
  • ソーシャル化したらいいんじゃ？
Quarter Mile

ナイーブ実装と，ソーシャル実装のコスト比較

  • 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 App Engine / J 上でRailsを使う
  • Seesaaの人． App Engine の API Expert
  • JRuby on Rails は GAE/J がリリースされた次の日には動いていた
    • しかしやらなきゃいけないことが多すぎる大変すぎる無理
  • で，3行で動くようにした
  • rails自体をjarにした
    • まじかｗｗｗ
  • All-in-oneだからバージョンアップ大変
Androidで変わる日常生活
  • Androidの会の幹事さん
  • Androidがもたらすものはなにか（組み込みエンジニアの観点から）
    • 組み込み業界全体の技術レベルの引き上げ（組み込み開発現場：時代遅れ）
      • 買ってきた端末そのままUSBさしてデバッグできるなんてすげー！
      • ウェブ業界が当たり前だったことが組み込み業界でも実現できるようになる
    • 携帯電話の開発に参入する敷居が下がった
      • 数年後にはPCと携帯が融合するんじゃないか！
  • ワクワクするね


バッテリやばいからまた退散．

Google Wave API

さて．バッテリやばかったのでテキストエディタにメモっていたのを帰宅してからポスト．

  • WaveSandbox.com
    • 近日中にアカウント配布
  • wave は封筒のようなもの
    • ひとつのWaveletがパーミッションを発行する
    • inline でプライベートなコミュニケーションができるようになっている
  • Embedding - 組み込み
    • ウェブ開発者のひとが，自分のサイトにもっていける
  • Extension - 外部のものをなにかWaveの中にもってくる


Embeddingのアーキテクチャ

  • Google Mapsみたいなもの
  • JavaScriptのAPI
  • Embed API method
    • LoadWave
    • SetUIConfig
    • AddReply
    • Follow
  • example:
  • 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にて撮影：
2009-06-09 15.46.47.jpg2009-06-09 17.49.36.jpg
2009-06-09 18.18.28.jpg2009-06-09 18.30.16.jpg


HTC GDDJ-09を撮影：
HTC GDDJ-09 表HTC GDDJ-09 裏