Google Developer Day 2011 Tokyo に参加してきた

gdd2011

先に後悔を書くと、なんで夜行日帰りという選択肢にしたのか。
1日泊まって帰るとか、31日に横浜近辺に泊まって次の日参加するということをしなかったのか。
なんか眠気とかで死にそうな感じだったので来年は気を付けたいと思います。

Twitterに流していたログから書いているので箇条書きに近いのはお許し下さい。

基調講演

ティム・ブレイさんからAndroidの話
  • 現在Androidは 48のメーカー、277のキャリア、137カ国で提供されている
  • 30万のアプリが出ていて、これはいいことでもあり悪いことでもある
    • ストアで目立つためには"いいもの"では足りなくて、"際立つもの"が必要
    • セカイフォンがいい例である

Android4.0(Ice Cream Sandwich)

  • ICSではコンタクトリストは強化された
    • この人と連絡する手段が表示される(電話、メール、SNS..etc)
  • Android Beam
    • 端末を重ねるだけでデータを送信できる

ICSでのAPI

  • カメラによる顔認識
    • 目や口などの情報も取れる
  • カレンダーにアクセスするためのAPIも提供される
及川卓也さんからChromeの話
  • Chromeをメインブラウザに使ってる人挙手
    • 会場のだいたい半分位

WebGLのデモ

  • BookCase
  • Google booksと連携した螺旋階段状の本棚
    • クリックすると本の概要が出て、詳しい情報を知りたい場合はGoogle Booksへのリンクがある

Web Intents

  • Web Intents
  • 基調講演では話さず、詳しくは午後のセッションでとのこと

Chrome Developer Tools

  • デベロッパーツールでは難読化されたコードも展開できるようになりました!
  • CSSのカラーの指定も、OSネイティブのカラーピッカーが立ち上がるようになっています
  • jsやCSSを編集した際には履歴を取るようになっていて、その履歴に戻ったり保存をすることもできます
  • これも午後のセッションでやります!

Web Audio API

Chrome Frame

  • IE6,7,8,9を使ってる人でもChrome Frameを使えばChromeの技術が使えます
  • 改良によりAdmin権限はいらなくなりました

Chrome Web Store

  • Googleがとるのは手数料の5%だけ
  • アプリ内課金も可能
App Engine
  • サーバ管理は開発者にとって重くのしかかる
    • App Engineを使ってその負担を軽くしましょう

Person Finder

  • App Engineを使っている
    • 震災後2時間でリリース

Cloud SQL

  • SQLが使えるようになりました
  • ライブコーディングデモ
Google+
  • Googleは常に「ユーザにフォーカスすればビジネスは成功するはず」と進めてきた
  • 人は共有をしたがっている
    • 現実の方法とネット上の方法は違う
    • また友人と家族と同僚など、共有の仕方はそれぞれ違うはず

特徴

  • Circles
    • これは囁きや叫びなど色々表現できるもの
  • Hangout
    • 使ったことがない人はぜひ使って欲しい機能だ
  • +1ボタン
    • 50億回以上押されている

API

  • RESTful、JSON、OAuth2
  • クライアントサイドも色々出ている
基調講演の最後に
  • 「なにごともエンジニアありき」
  • 「百聞は一デモに如かず」
  • 「日本で「イケる!」と思ったら、世界のみんなも同感するかも」

HTML5最前線 (Eric Bidelman)

requestAnimetionFrame

  • Webkit, Firefox, IEでサポートされている
  • ハードウェア依存

setTimeoutとrequestAnimetionFrameのデモ

  • setTimeout
    • 10msごとに処理するようにしているが、実際には11-12msでの処理になっている
    • またフレームレートが90kHzとモニタが処理しきれていない
  • requestAnimetionFrame
    • コールバックとエレメントを指定するだけで、間隔の指定はいらない
    • フレームレートはモニタと同じくらい
    • またタブにフォーカスがない場合はアニメーションをしない
      • (ブラウザによって止まるか、遅くなるかはまちまち)
    • Youtubeとか裏で再生して欲しくないですよね?

Page Visibility API

  • 別のタブを開くとビデオが止まる
  • バックグラウンドなら動作を変えるということも可能

prerender属性

  • あらかじめ とすることでバックグラウンドでページを描画しておいてくれる
  • デモサイト: Prerender test
    • Chromeは --prerender=enabled オプションを付けて起動することで試せる
  • ChromeでのPrerenderガイド


online/offlineイベント

  • ネットワークのコネクションを検出できる
    • if (navigator.onLine) { ... } で判定もできる
    • addEventListenerによって、オンライン時にはサーバにデータを送信、オフライン時にはオフラインストレージを活用する、といったことも可能


Web Intents

ver intent = Intent.new("http://example.com/share", "image/*");
window.navigator.startActivity(intent, callback);
...
    • 受けるサービス側は
<intent
  action="http://example.com/share" 
  type="image/*" 
/>

Rich Multimedia

  • カメラやマイク
    • アクセスはvideoタグを使う
    • まだ新しいので使えないことがあるかもしれない
  • フルスクリーン
    • webkitRequestFullScreen
    • あるdivタグをフルスクリーンにするといったことができる
    • フルスクリーン用のCSSも可能
  • Web Audio API
    • 既存のAudioタグではリアルタイム性やスケジューリング、音の分析、加工、操作、フィルタなどはできない
    • Canvasのように自由に音を扱うことが出来る

最後に

デベロッパーツールのティップス・アンド・トリックス (北村英志)

デベロッパーツールはHTMLで出来ていた

CSSのパラメータ編集

  • パラメータの値を忘れた時でも上下で選択できる
  • px等の数値はshiftを押しながらだと10ずつ変更できる

編集の履歴

  • ファイルの履歴
    • CSSやjsをElementsタブで編集したあとにResourcesタブを見ると、編集したファイルの左に三角マークができている
    • 広げるとリビジョンが見れる(差分は見れない)
    • あるリビジョンに戻りたいときは右クリックして Revert to this revision
    • そのリビジョンで保存したいときは右クリックして Save as

Resourcesタブでの編集

  • 左下の鉛筆マークをクリックするか、ソースをダブルクリックでResourcesタブで編集できる
  • やめるときは左下の鉛筆マークをクリック

コンソール

  • console.log以外にもFirebugのAPIは使うことができる
    • dir(document.body) とするとDOMではなくJavascriptのオブジェクトで取れる
    • inspect はデベロッパーツールの虫眼鏡と同じ機能
    • $0 は今選択しているDOM

デバッガー

  • 右クリックメニューにブレークポイントを設定するコマンドがある
    • Break on Subtree Modification(子孫が変更した所でブレーク)
    • Break on Attributes Modification(属性が変更した所でブレーク)
    • Break on Node Removal(ノードが削除されたところでブレーク)

リモート操作

最後に

今までにないサイトを作る：HTML5 による最新ウェブアプリ (Eric Bidelman)

モダンWebアプリケーションとは

  • 2つの力を駆使する

対ユーザ

  • すでにユーザが知っている世界のものを使う
    • プレゼンツールであればダブルクリックでテキストを挿入できる
  • 入り口を低くする

コード

  • 同じコード・URLで様々なデバイスに対応させる
    • デモで見せたサイト
    • CSSメディアクエリでデバイスによってレイアウトを変える
      • window.matchMedia でJavascriptでも確認できる
    • メディアクエリのライブラリ FormFactor.js

ページ

  • Single Page App
    • 1つのHTMLで構成されたWebアプリケーション
    • githubがいい例
  • Deep Link
    • History APIを使って今のステートを URL#hoge みたいな形でユニークにしてプッシュする
    • Ajaxを使わずHistoryAPIでURLを変更することでスクロールの途中へもDeep Linkを張れる

File API

  • と書くことでアップロード対象を選ぶことができる
  • new FileReader() でD&Dしたファイルをデータとしてハンドリングできる
  • リンクをデスクトップにD&Dさせればpdfをダウンロードもできる
  • クリップボードのURLの中身を受け取る事もできる
    • File APIを使ってimageファイルをコピーペーストもできる

HTML5 Terminal

  • HTML5 Terminal (Chromeのみ)
    • Web上でのターミナルのデモ
  • 3d コマンドでWebGLを使って3d表示される
  • ローカルなファイルをD&Dするとファイル名が表示される

オフラインアプリケーション

  • でファイルをキャッシュさせることができる
  • データはIndexedDBやlocalStorageを使う

Notification API

  • デスクトップへの通知
    • テキストだけでなく、動画も表示できる
  • 通知にはユーザの許可が必要

古いブラウザへの対応

HTML5のテンプレート


よりよいWebアプリケーションのため

  • キャッシュを使う
  • ローカルなストレージを使う
  • アニメーションはCSS3
  • (あとなにか言ってた。教えてください ><)

Chrome Web Store


最後に

イグナイト

チームラボによるデモ

  • 端末・Chromeごとに違うアイコンが表示される
  • 振ると音が出る
  • みんなでセッション!

デモの実装

  • 中身はNode.jsを使って作っているらしい
  • あとはWeb Audio API, Canvas, etc...
  • Chromeスゲェ

LT

  • 15秒ごとにスライドが切り替わるドM仕様のLT
  • Googlerによるダンス[www.youtube.com/watch?v=xPY1G6Sfzec:title=GDD48]
    • 36人しかいなかったとのツイートが...
  • スタッフがスライドを間違えるというアクシデント
    • 場繋ぎで漫才的なやりとりや質問受付
    • Developer Linkはパーマネントサービスに

DevQuizの解説

  • スライドパズルは図らずとも決戦の場に...
  • Googleでは全部解いてません

クロージング

  • Chrome Web App Contestをやろうと思ってます
    • 詳しくはそのうち
  • 基調講演での3つを大事にしてください
    • 「なにごともエンジニアありき」
    • 「百聞は一デモに如かず」
    • 「日本で「イケる!」と思ったら、世界のみんなも同感するかも」

感想

HTML5のセッションばかり聞いていたわけですが、今後の自分のためになるものばかりでいい一日でした。
ただバッジ交換できるかも、とタカをくくってもう一つのHTML5のセッションにでなかったのは失敗だったかなぁと思いました。
スライドや動画があってもその場の雰囲気も大事ですしね。

でもバッジ交換やデベロッパーサンドボックスを見るためにセッション2と3の間を少し長めに休憩時間があればよかったな、と思いました。

楽しい一日には変わりないので来年も参加したいと思います!