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 ChromiumGoogleがカスタムして公開

Chromeのリリース
 stable 安定版
 beta テスト版
 dev 開発版


6週間置きにリリースする予定
リリースを短くすることによるメリット
 間隔が長いとある機能が入るか入らないかが大きな意味になってしまう。
  開発版 1週間おき
  Canary build ほぼ毎日(デフォルトのブラウザには設定できないという制約がある)
   致命的なバグがある可能性もある

WebInspector(いわゆるFireBug
 Chromeではデベロッパーツールという名前
 特集:gihyo GoogleChromeFirebug 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
  開発晩をインストールして、ディレクトリに


パッケージ化
 .pemは秘密鍵ファイル
 .crxはZIPファイル
拡張機能の公開
 初回は5ドルかかる

第3部 HTML5とのかかわり

Chrome拡張 JSで実現できるものに限られる
実現できることはどんどん増えている
Chrome OS


バズワードHTML5も重要


自分が使っているextentionのソースを読んでみるのが一番勉強になるかも

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)
   現在は仕様策定が停止
   SafariChrome実装済
  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%ルールで作成

QA

暗号化はどうするの?
 HTML5の仕様にはない。通信だとHTTPSでやるのかなぁ
 ローカルストレージを暗号化するにはJavaScriptの部品があった


HTML5の開発ブラウザは?
 iPhoneiPadの開発が多いので、SafariChromeで作って、iPhoneシミュレーターで確認

AndroidAndroid初級ハンズオン」by @95kugo

HelloWorld
エミュレーターでHelloWorld
Intent連携するアプリを作ってみよう


ハンズオン資料
https://docs.google.com/document/pub?id=1lEoPB8xgoFSySlkBltW4Ss5KSxTVUH884y8dSp0A7Ng