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

2011年11月1日。久々の終日出張です。Google Developer Day (GDD) 2011 DevQuiz をある程度解いたので参加証をいただいていた Google Developer Day 2011 に参加してきました。開催場所はパシフィコ横浜・会議センター、朝早くから激込みの新宿湘南ライナーの人混みに揉まれてやっとの思いで横浜駅に着いたわけだが、大きな過ちを犯しました。普通に歩いて行けると思っていたら 2km ほど距離があったので汗だくになっての会場到着です。

ちょっと到着が遅れてしまったので基調講演では後ろの方の席になってしまいました。基本的に英語のスピーチが多いので英語がわけわかめな僕は同時通訳を一生懸命に聞くしかないので結構疲れます。

さて、そんな前振りはどうでもよいでしょう。GDD11JP で感じたことを書きますね。いやぁヤバイです。

Google は本気で Desktop Application や OS の機能、つまりネイティブアプリと呼ばれるものを HTML5 の機能をベースのウェブアプリに置き換えようとしています。そしてエンジニアとしてその波に乗り遅れると確実に取り残されてしまうと感じました。ウェブエンジニアの皆さん、HTML5 の技術は今後必須スキルです！間違いありません！
たしかに会場で見かけた Chromebook は正直魅力的に感じませんでした。しかしながら５年後は本当に OS はブラウザベースになり、アプリケーションはその上であたかもネイティブアプリのように動作しているかも知れません。

現時点では HTML5 の様々な機能のインプリメントは間違いなく chrome が最も進んでおり、かつ Google 自身も積極的に活動しています。今回の各セッションを聞いてるだけでエンジニアとしてワクワクするような機能がたくさん紹介されました。たしかに現時点では PC の世界ではブラウザシェアの観点から chrome はメジャーではないかも知れませんが、開発者にとっては Developer Tools を使いこなせばベストのブラウザであることは間違いなさそうです。個人的には Firefox をメインの開発ブラウザに使っていて、ブログ更新用に script の動作が速い chrome を使うスタイルをとってますが、Firebug の代わりに Developer Tools でも行けそうです。

そしてどのエンジニアも目を背けることができないのがモバイルの世界です。
今後は間違いなく PC の以上の市場と普及率に成長するはずです。端末自体も更に高速・高機能化することは確実です。今でこそ PC ＋ Chrome だからこそ現実的な速度で動くウェブアプリも、近い将来スマートフォンなどで普通に動作しているようになっているはずです。そんな世界に向けて HTML5 まわりの技術はしっかりと押さえておこうと思いました。

今回のセッションはこんな感じ。Chrome & HTML5 と Android の話が盛りだくさんです。

いろいろとまとめようと思ったのですが、取りあえず面倒なのでメモっていた内容をコピペっておきます。自分があとで見返す用途なので綺麗じゃありませんが悪しからず・・・。

gdd11jp基調講演

5000名を超える応募あり。ここにいる約1,500名は、DevQuizを勝ち抜いた人、技術貢献をされている人。
東日本大震災で感じた事
・オープンであること
・スケールできるアーキテクチャを実装すること
・迅速なアプリケーション開発が行えること
・企業・団体の枠を越えた結束

イノベーションの速度は加速中
すべてのサイトはモバイルのプレゼンスを持たなくてはならない。次に何がくるかはわからない。
リンクはURLの関係から人と人の関係に発展。Google+は貴方が中心

Androidの話
大きな投資をしてきた。モバイルこそが最も急速に成長している。ぜひモバイルを検討すべき。モバイルからのアクセスが急増中。デスクトップを超える。現在では一日当たり55万台を出荷中。大きなチャンス。アプリは30万でている。ストアで目立つためには、いいものでは足りない。際立つものを作らないと目立たない。
例えばセカイフォン。電話の内容をリアルタイムで翻訳する。すごい便利そう。

キャリア課金が可能。売り上げが伸びている。クレジットカードだけではない。課金の半分近くがキャリア課金。アプリ内課金もある。小額課金でうまく機能している。タブレットの登場が大きい。

Android 4.0（コードネーム：Icecream Sandwich）の紹介
どういう方法で友達とコンタクトできるかが瞬時にわかる。Androidビーム、nfc技術、ケータイを重ねるだけでデータを転送することができる。この技術で魅力的なアプリを作って欲しい。顔認証でロック解除

apiの話
最も魅力的なのはユーザ管理機能。プロファイル機能。人プライバシーには留意する必要がある。カメラ機能。目や口を認識することができる。callback方式。インテントやインテントフィルタを活用する。カレンダ機能。直接カレンダにアクセスできるようになった。

chromeプロジェクト
html5をサポートしているブラウザは60%程度。かなり普及してきている。chromeアクティブユーザ数は二億人。開発プラットフォームの提供が多い大きい。
3DグラフィックでGPUをハード的にアクセス。デバイスアクセスで音声を扱ったりできる。そしてオフライン技術。これらでネイティブアプリに負けないグラフィック機能をブラウザに組み込むことが可能。

google booksと組み合わせた螺旋本棚のデモ
web intents、nativeclient、js and dom　の技術
chromeデベロッパーツールが強力。難読化れたjsを読めるようにするツールが搭載されている。forms apiには様々な機能が搭載されている。elementsパネルに組み込む。cssのcolorを色パネル使って変更できるカラーピッカー機能。cssを修正したあとの作業。cssのソース変更を反映させたものを取得保存することができる。変更履歴を見ることもできる。つまりエディタがわりに使うことができる。

webmビデオ。web audio
リアルタイムコーデック。高機能なオーディオアプリ。ドラムマシンのデモ。ブラウザでシンセサイザーを作ることもできてしまう。
websocketとwebaudioによる音楽のコラボも実装できてしまう。

標準化及び実装を進めている
古いブラウザを使っている人を切り捨てなくても大丈夫。chrome frameを使う。admin権限なしでインストール可能

chromeウェブストア
手数料は5%。ユーザとのエンゲージメント向上ができると評価されている。

サーバ側の技術が支えている
app engineは20万以上のアプリが実行されている。20億pv／日を超えている。angly birdのhtml5版が人気。サーバ環境はGoogleにお任せして使う開発に専念。person finderもその一例。
cloud storage。prediction apiでマシン学習。cloud sqlで使いやすくアクセス。

Google+
ユーザにフォーカスすればビジネスは成功するはず。人ととは以上で共有をしたがている。共有に関するアイデア。ネット上ならではの共有。方向性は何なのか。
特徴はサークル。つぶやきも叫びも実現したかった。hangoutを使って欲しい。日進月歩で機能アップしている。
+1ボタン。50億回数以上のクリック。
apiはまだ初期段階にある。restful、json、oauth2
hangoutアプリ。見た感じはサイバーエージェントのアバターサービスみたいなのだな。

「日本でイケると思ったら世界のみんなも同感するかも」

html5最前線

bleeding edge
intelligent web apps
RequestAnimationFrameでsettimeoutより賢く処理できる。描画すべきかどうかを判断して処理を中断できる(タブきりかえなど)
プリレンダリング機能。rel=prerender　を使って高速にページ遷移。
navigator.onLineでネット接続のステータスを確認できる
web intentsでインテント処理するinitentタグ
rich multimedia
カメラとマイクのプラグイン。videoタグを使う。間もなくリリース。
mediastreamオブジェクト生成

ねむい・・・途中の記憶なし

web rtc、audio api、
http://chromestatus.com
http://html5rocks.com
を見てね
getusermedia api

クラウド上でイケてるゲームを構築しよう

angry birds、play n library使ってる。apacheライセンス。
HWアクセラレーションをサポートしてくれる
implement game interface

ゲーム作りの流れデモ
・blueskyから作り始める。画面サイズ、イメージレイヤー
・白い雲を追加してみる。
・paintをorverrideしてアニメーションする
・ボールを追加してみる。レイヤー追加。クリックイベントをlistenする。
・jbox2dを使ってみる。ボールが動きまわる。物理演算ライブラリ？
・ボールがしたに落ちて行くことができたので、地面を作って見る。
・ブロックをつけたして見る。コリジョンを設定する。
・釘をつけたして見る。釘に当たるとボールの動きが変わる。パチンコゲームのようになる。
・点数を加えて見る。座標を調べて点数を加える。スコア更新がリアルタイムで上書きされない。javaネイティブではうまくスコア更新される。canvasがリフレッシュされない。バグあり？
http://Code.googlecode.com/p/playn

今までにないサイトを作る html5による最新ウェブアプリ

クラウドの力 + native&desktop richness
html5を使うということで実現
css3、リッチな画像、アプリにくるための理由に特化。全画面表示アプリ。

io reader
ニュースリーダー。いろんなデバイスに対応。history api。デバイスによってcss、jsも出しわけする。元のコードは同じ。どうやってるか？

すべてのユーザエクスペリエンス最大化
今後のサービスはユーザのハードルをとにかく下げる必要あり。openid、toolkit
css、mediaqueryを使う。
media=only screen and (max-width:480)
MatchMedia()を使ってjsも出しわけする
Formfactor.js
history.pushState()によりuriを動的に書き換える。リフレッシュされる
githubも上記を使っている。ajaxみたいな動作ができるが仕組みが違う
webkitdirectoryでfileinput以上のことをできるようになった
draginはfilereaderを使えばできる
cut&pastはclipboarddataでできる
dragoutはdata-downloadurlでデスクトップに保存できる
WebkitRequestFileSystemをつかう。async。オンザフライでファイル作成ができる。

html5 terminalのデモ

オフラインの話
manifest=cache.appcache
ローカルストレージをルカって保持する。lawnchairというライブラリ使うと良い
x-webkit-speechで音声タイプアプリを作る
notification apiで通知する

速度が重要
css3を使いこなして速度アップ。worker使って並列化

互換性
古いブラウザはpolyfillつかって補完する。それでもダメならchrome frame使う。boilerplateも使える。modernizrも使える。

chrome web storeで収益化する
http://html5rock見てね

Googleapps 新しいapi、新機能、ベストプラックティス

中小企業に人気あり。suiteの中にたくさんのapiがある
app engine、app script上で動作する。
Google data protocol
Protocol http, https
Auth login, authsub, oauth
Format XML

一貫性を得るのが難しい。アプリごとに挙動が違う。これは問題だ。
new api setで一貫性を持つよう改善した。
Https, oauth2, json
partial responseで必要な要素のみを返す
pertial updateで差分だけを戻す
api explorerが使える。apiの使い方を学ぶ

apps script サーバサイドのjsエンジン。
ui builder で UI を GUI 的に作り込む。便利。
picker api

ディストリ方法はマーケットプレイスで売る。改善中。