Google Developer Day 2010
Bootcamp 2010
https://sites.google.com/site/tokyogtugusersite/bootcamp-2010
・資料とUst録画が公開されています。
Google Chrome ウェブ標準とChrome拡張入門」by @os0x
テーマ Chrome,Chromium,WebKit
Chrome拡張
HTML5との付き合い方
第1部Chromeとは
Chromium レンダリングにWebKit。JSエンジンにV8
GoogleChrome ChromiumをGoogleがカスタムして公開
Chromeのリリース
stable 安定版
beta テスト版
dev 開発版
6週間置きにリリースする予定
リリースを短くすることによるメリット
間隔が長いとある機能が入るか入らないかが大きな意味になってしまう。
開発版 1週間おき
Canary build ほぼ毎日(デフォルトのブラウザには設定できないという制約がある)
致命的なバグがある可能性もある
WebInspector(いわゆるFireBug)
Chromeではデベロッパーツールという名前
特集:gihyo GoogleChrome版Firebug http://gihyo.jp/dev/feature/01/devtools
第2部 Chrome拡張
HTML/CSS/Javascript でつくる
つくるのは簡単だが、でも実現がむずかしいことも多い
例:WebDeveloper GoogleChrome Extension gallery
スタイルシートを無効にしたり
ソースをみたり、画像に対して処理をしたり
できること
・バックグラウンドしょり
・クロスドメイン通信
・データの永続化
・デスクトップへの通知
・タブ・ウィンドウの操作
・ブックマークのそうさ
・UIパーツの追加
・ポップアップの表示表示したページでの任意のJSを実行
・国際化
など
セキュリティ
バックグラウンド処理は拡張の特権がある。
manifest.json
拡張を定義するjsonファイル。宣言していない機能は使用できない。ユーザーが使うときに、警告がでるようになっている
作ってみる
manifest.json UTF-8で保存
"キー" : "値" どちらもダブルクォート
background.html
localStrage データベース 文字列のみ保存
オブジェクトの保存はJSONを使ってやる
webkitNotifications で表示
例:TweetNortify
開発晩をインストールして、ディレクトリに
HTML5「実例から学ぶHTML5開発入門」by @Shumpei
本 HTML5&API http://www.amazon.co.jp/dp/4822284220
API基礎
できるようになること
グラフィック canvas element,SVG
ビットマップのようなグラフィックをいじる canvas
XMLで画像を表示するSVG
動画・音声の再生 video,audio element
オフラインWebアプリケーション(GoogleGearsは開発中止。HTMLで実現)
CACHE MANIFEST
クロスドメイン通信
クライアントサイドストレージ(ブラウザのデータをDBに保存すること。ファイル保存はセキュリティ的に難しいだろう)
WebStorage(ローカルストレージ、セッションストレージ)
WebSQLDatabase(RDB)
現在は仕様策定が停止
SafariとChromeは実装済み
IndexedDatabaseAPI
キーバリューストア
WebStrageより複雑だが高機能
オブジェクトのカテゴライズやカーソルなど使用可能
まだ実装が存在しないが、将来的にはデファクトスタンダードになるかも
バックグラウンド処理
固まらないように。マルチスレッド。
サーバープッシュ・双方向通信
WebSockets
ファイアウォールを越えられるソケット通信
ポート80でバイナリのデータやりとりができる。HTMLのヘッダなどは不要。
双方向。
OSとの緊密な連携
ファイルの内容をJavaScriptで読み取る FileAPI ドラッグ&ドロップか、ファイル選択ダイアログ
デモアプリたち
Blowing apart fragments of Video
HTML5VideoDestruction.html
video、Canvas を使用
作業用と表示用にタイルを分割
Videoを裏で再生し、分割したCanvasに貼り付けている
200行くらい
MovementTracker
video、Canvas、WebWorkers
上記の技術プラス、
バックグラウンドで前の絵と今の絵を比べて違っている部分を計算(←計算にCPUを使うため、バックグラウンドで実施)
Quake? GWT Port
WebGL
Video/Audio
WebSockets
LocalStrage
重い。再生するには、ハイパワーなマシンが必要
Googleの20%ルールで作成
Android「Android初級ハンズオン」by @95kugo
HelloWorld
エミュレーターでHelloWorld
Intent連携するアプリを作ってみよう
ハンズオン資料
https://docs.google.com/document/pub?id=1lEoPB8xgoFSySlkBltW4Ss5KSxTVUH884y8dSp0A7Ng