2012年5月29日火曜日

「HTML5 で作るオフライン Web アプリケーション」 #gtuggirls

第5.5回 GTUG Girls では、HTML5 のオフライン機能を取り上げました。講師は吉川徹さん @yoshikawa_t 、チューターは北村英志さん @agektmr と一條美和子さん @ichijo3 でした。皆さん、ありがとうございました!

講師の吉川さん。ライブコーディングしながらしゃべれるよう、マイクスタンドが活躍 :)


GTUG Girls


●今回のお題目「オフライン web アプリケーション」のメリット

オフラインで動作させることができる。つまり、地下鉄などネットワークが使えない環境でも利用できるし、サーバーが落ちていてもサイトを表示することができる。
・必要なリソースをキャッシュするため、高速に動作する。

→HTML5 Rocks  WORKING OFF THE GRID WITH HTML5 OFFLINE

詳しく知りたくなった方、吉川さんによる講演スライドはこちら!
オフラインWebアプリケーションの作り方

1.必要なファイルをキャッシュする
・Application Cache

→HTML5 Rocks  アプリケーション キャッシュを初めて使う

2.ユーザーデータ・設定をローカルに保存する
・Web Storage
・Indexed Database/Web SQL Database
→HTML5 Rocks  CLIENT-SIDE STORAGE
→HTML5 Rocks  HTML5 の INDEXEDDB を使用した簡単な TODO リスト

3.アプリケーションデータをローカルに保存する
4.必要があれば適時、データの同期を行う
・Online/Offline events
・Network Information API
・Web Workers (Shared Worker)
→HTML5 Rocks  ウェブ ワーカーの基本

5.ファイルをローカルに保存する
・File APIs (File API, File API: Directories and System)
→HTML5 Rocks  FILESYSTEM API について知る
→HTML5 Rocks  JAVASCRIPT で FILE API を使用してファイルを読み取る

今回のチュートリアルのサンプル todo アプリのソースはこちら

その他参考:
→HTML5 Rocks  BEST PRACTICES FOR A FASTER WEB APP WITH HTML5

GDD 2011 Japan の「HTML5 のオフライン機能」


GTUG Girlsでは動画は撮影していませんが、GDD 2011 Japan でえーじさんが講演した「HTML5 のオフライン機能」もご参考に。

ブログ記事はこちらスライドはこちら。動画は下記です。



講師の吉川さん、チューター、スタッフ、参加者の皆さん、ありがとうございました!

Togetter のツイートまとめ
初参加の@miwa_chanさん、すごい tsuda ってくださって、ありがとうございました o(^^)o




ちなみにこれが GTUG Girls Tシャツです♪

GTUG Girls


Disclaimer このブログは山崎富美の個人的なものです。ここで述べられていることは私の個人的な意見に基づくものであり、私の雇用者には一切の関係はありません。