Google Developer Day 2011 に参加しました(1) #gdd11jp

朝から基調講演聞いてセッション聞いてGoogleの中の人のダンス見て...

非常に楽しい充実した一日でした!

一つ悔いがあるとすれば缶バッチをもっと選べばよかった。
すごい適当に選んだから絵柄が何かすら分かりませんw

セッション内容に関してのメモを参考程度に何回かに分けてこのブログに残しておきます。

詳しく知りたい方は適当にぐぐってください。そして教えてください(´・ω・`)



(preタグだと変になっちゃうのでソース載せる方法で...まあこれも見にくいですが...)

[java]

<<概要>>

------------------------------------------------------------

今までにないサイトを作る:HTML5による最新Webアプリ

15:00 ~ 15:45

google+@Eric Bidelman

twitter@ebidel

--

Eric Bidelman は Chrome チームのシニアデベロッパー プログラムエンジニア であり、

html5rocks.com の重要なコントリビューターです。彼のミッションは開発者と接し世界中に

HTML5の素晴らしさを広めることです。(抜粋)

------------------------------------------------------------

<<ここからセッション内容>>

------------------------------------------------------------

新しいWebアプリケーションとは..

  - the power of the cloud + native & desktop richness

      - クラウドの力 + デスクトップが持つリッチ環境

        - これらを駆使する

  - html5を使うとよいよ

      - websocket(双方向通信),worker(バックグラウンド処理)...etc

参考例:spring pad(chrome app)

 - 既存製品をWebアプリケーションに

 - これをhtml5を使って素晴らしいものに

参考例:IO Reader(何これ見つからない..)

 - news readerのアプリケーション

 - いろいろなデバイス状態で動かしたい

 - キーボードのイベントを使う

 - タブレットではcssjavascriptも異なる

   - loadする、しないjsファイルがある

   - もとのコードベースは同じ

      - MediaQueryを使う

        - Formfactor.jsを使うとよいよ

          * https://github.com/PaulKinlan/formfactor

--------------------

lower the barrier to entry(参入障壁を下げる)

 - 簡単に使えるようにする

 - ユーザー名とかパスワードとかいろいろめんどくさい

   - open id を使うといいよ

     - google identety tool kitっていうライブラリーがあるよ

       * http://code.google.com/intl/ja/apis/identitytoolkit/

history(閲覧履歴)を操作する

 - window.history.pushState()

      - これを使うといいよ. githubもこんな感じ? ajaxとはちょっと違う?

フォルダ(複数ファイル?)のアップロード?

 - <input type-"file" id="dir-select" webkitdirectory />

colorピッカーもformから取得可能

- OSに付属したcolorピッカーが起動する

ブラウザ上でcut and paste のイベントを取得できる

- コピペがデスクトップとブラウザでシームレスに?

 - document.body.onpaste = function(e){}

   - 逆にブラウザからデスクトップにコピーもできるよ

--------------------

3d terminal demo

  - Eric Bidelman作(たぶん)

  - macなどで閲覧するとディレクトリを視覚化しながらlinuxコマンドで移動(mkdir,cd...)出来ます

    * http://www.htmlfivewow.com/demos/terminal/terminal.html

- 楽しいです

Make it work offline 

 - window.webkitRequestFIleSystem()

 - window.indexedDB.open()

 - window.localStrage.setItem()

  - localstrageを使ってブラウザクラッシュした場合にもデータを残しておく

    - lawnchairこれを使うといいよ

      * http://westcoastlogic.com/lawnchair/

speech enable your app

 - 音声入力

- なかなかの精度

   - <input type="text" x-webkit-speech />

     * http://www.ideaxidea.com/archives/2011/03/x-webkit-speech.html

 

Keep users informed

 - window.notifications

 - 通知機能を使う

 - 動画でもテキストでもOK

 - notifications.createNotification()

 - タイムアウトも設定可能

treat performance like a feature

 - appcache for faster initial load

 - <html manifest="cache.appcache">

 - store data locally

 - webkitRequestsFIleSystem

 - workers for nono-blocking(responsive) UI:

古いブラウザの対応

 - html5 cross browser polyfillsを使う

   * https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

 - 古いie系はchrome frameを使う

   * http://www.google.com/chromeframe?hl=ja&quickenable=true

   - chromeの機能を古いブラウザで使えるようになる

boilerplate

 - boilerplateからテンプレートを取得すると楽

    * http://html5boilerplate.com/

    * http://coliss.com/articles/build-websites/operation/work/template-html5boilerplate.html

modernizr

 - html5対応か否かの判定をしてくれる(っぽい)

   * http://www.modernizr.com/

   * http://my.opera.com/MezamashiTech/blog/modernizr-html5

--------------------

chrome web store 

 利点:

   - 簡単に見つけてもらえる

   - 2億のchromeユーザーがアクセスできる

   - 先々週に新しくなったので見てね

 課題:

   - webアプリケーションでお金を儲ける・収益化(別セッション)

参考例:world golf tour

 - プレイヤーが 23%ユーザーがふえた

 - 購買額(?)が147%ふえた

--------------------

すばらしいUXを作りましょう。

------------------------------------------------------------

[/java]

このセッションの流れはほんと早かった。って事をTLで呟いたら

@kanzmrsw さんが「あとでビデオ出るし話をしっかり聞くのがいいよー。」と..

まあもう半分以上セッションが終わってた訳で。

来年も是非とも参加せねばね。

ついでにigniteで行われたGoogleの中の人が踊ってた動画

なんだか一番盛り上がってた気がします。

忙しい中練習したそうです。

すごいですねっ(*´Д`)