Google Developer Day 2011 Tokyo に行ってきました #3
取り合えず、後はもうメモそのままで。
今までにないサイトを作る:HTML5による最新ウェブアプリ
Eric Bidelman@ebidel
http://ericbidelman.com
What's modern web application?
新しいWebアプリケーションとは何なのか、どうやって構築して行くのか。
APIやテクニックについて話して行く。
そして、出来た物をどうやって共有して、広めて行くのかを話して行く。
The Power Of The Cloud
まず考えるのは、クラウドの力。
+
Native & Desktop Richness
どうしていけばいいのか？
=
それはHTML5を利用すること。
RichなWebアプリケーションとは。
そのアプリケーションに来るためには、大きな目的があるはず。
料理が見たいならば、高精度の画像で料理の画像が見たいなど。
history APIを使うことで1つのURLにディープリンクが貼られる。
画面全体が更新されている感じはしないのに、URLは順々に切り替わって行ったり。
デバイスによって見え方が違うけど、元は1つのページ。
全て、素晴らしいユーザーエクスペリエンスを作るんだ、ということに集約する。
ユーザーがアプリケーションを使うまでのハードルを下げる。
ID登録であったり何なりが増えるごとにユーザーが離れて行く。
そういう場合はOpenIDを使うなど。
Google Identity Toolkit / OpenIDを使うためのTookKit
CSS MediaQueryを利用してMobile Device / Tablet Device / PCなどを切り替える。
<link rel="stylesheet" media="only screen and (max-width:480px)" href="/static/css/mobile.min.css" />
windows.matchMedia("").matches
http://formfactorjs.com
→ MediaQueryを利用したいならば、こういったとても便利なJSがある。
Make a single page app:navigation & deep linking
ver slideNo = curSlide+1;
var hash = '#' + slideNo;
window.history.pushState(slideNo, "Slide ' + slideNo, hash);
InfiniteScroll
Ajaxを使っていなくて、URLが変わっているだけでも実現できる。
historyAPIを使うと、そうしたページを作成できてしまう。
Make importing files easier
<input type="file" id="dir-select" webkitdirectory />
Utilize desktop paradigms:file drag-in ドラッグ&ドロップのイベントを取れる。 Utilize desktop paradigms:paste from clipboard 「ペースト」のイベントを取ったりすることも出来る。 Utilize desktop paradigms:file drag-out 逆にドラッグ＆ドロップアウトをしてアイテムを外すことも可能。 Utilize desktop paradigms:save data to folders フォルダ、ファイルをJavaScriptで作ることが出来るようになる。
Webアプリケーション上からこのような動作が行えるということ。
基本的に on the fly でファイルが作れてしまう。
http://www.htmlfivewow.com/demos/terminal/terminal.html
Make it work offline
データをオフラインに持って行く。オフラインでなんとか実行させる。
これまでとはまったく違った考え方になる。
<html manifest="cashe.appcache"> アプリケーションキャッシュを利用する。
Persist user data
ローカルストレージを使ってオフラインストレージ
lawnchair
simple json storage
(ローカルストレージの利用を簡単にするためのライブラリ)
Speech enable your app
<input type="text" x-webkit-speech />
コレを利用することで、簡単に音声を利用することが出来たり。
可能性が一番高いものを返してくれる。
Keep users intormed
Notification APIを利用することで、簡単にユーザーに対して
通知を表示することが出来る。
テキストだけでなく、他のHTMLを何でもその枠内に入れることが出来る。
つまりは、Video等を入れることも可能。 緊急地震速報なんかで使われてるね。
Treat performance like a feature
アプリケーションを作る際に大事なのは、レスポンスの早さ。
早く動けば動くほど、ユーザーが次も使ってくれるようになる。
How about older browsers?
古いブラウザに対してはどうするの？
→ Polyfillsを利用する。
javaScriptを作れないような物に対してはChromeFrameがある。
<meta http-equiv="X-UA-Compatible" content="...">
HTML5 BoilerPlate
はじめてHTML5のアプリケーションを作る際にはここから持ってくればいい。
Modernizr
そのブラウザで、その要素が使えるかどうかを判別してくれる。
古い格言だけど
Step 1. Build web app Step 2. ??? → Chrome Web Store Step 3. 収益化
先週出したばかりだが、Chrome Web Storeの新しいバージョンがリリースされた
Webアプリケーションであれば、HTML5だけに限らず
SilverLightなどでもおｋ
SS
(Manifestファイルの書き方など）
One last thing...
Aim for a grez
