Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
!

オープン系セッション

オープンソースで始める
オフラインアプリケーション開発入門

#html5biz #html5bizB
Profile:
!

佐川 夫美雄
@albatrosary
http://albatrosary.hateblo.jp/
http://html5experts.jp/albatrosary/
HTML5Expert.jpコントリビュータ
h...
本日お話すること

OSSで作るSingle-page Application
Offline Web Application

#html5biz #html5bizB
業務系Webアプリケーション開発で何が起きているか

http://html5experts.jp/albatrosary/3191/

#html5biz #html5bizB
ファイナンシャルプランナーとは

顧客である個人から、収支・負債・家族構成・資産
状況などのリソース提供を受け、それを基に住居・
教育・老後など将来のライフプランニング(人生設
計計画)に即した資金計画やアドバイスを行う職種

#html5bi...
ライフプランに必要な要素
教育資金計画
住宅取得資金計画
老後生活のための資金計画
税務
社会保険/公的年金/企業年金

キャッシュフロー表 / 個人バランスシートで表現する

#html5biz #html5bizB
こんな感じで営業してます
(みたいです)

#html5biz #html5bizB
フロントシステムにはリッチクライアントが必要

#html5biz #html5bizB
RIAに求められたもの
Rich Internet Application

表現力の高さ:動画や音声などマルチディアの活用が可能で高いデザイン性を持った画面要素の
再生機能を備える

デスクトップアプケーションと同等なUI:画面をリフレッシュ...
HTML5が解決してくれる!

#html5biz #html5bizB
従来型のWebアプリケーション
Controller
POJO

HTML
JavaScript

Business Logic

O/R

JSP
RDBMS

アプリケーションサーバ

Browser

1. リクエストをサーバへ送りCon...
次世代型のWebアプリケーション

HTML
JavaScript

Browser

Controller

Business Logic

O/R

POJO

アプリケーションサーバ

RDBMS

1. HTMLで作成された画面を表示
...
Single-page Application(SPA)とは
単一ページによるWebアプリケーション
ページはDOMの操作により切り替える
サーバとのやりとりはAjaxやWebSocket等を利用

change

DOM

events

r...
でもSingle-page Applicationは難しい

#html5biz #html5bizB
SPAに必要な技術
JavaScriptフレームワーク
altJS
CSS Preprocessor
開発環境
バックエンド技術 - 通信
バックエンド技術 - Webアプリケーションサーバ

#html5biz #html5bizB
JavaScriptフレームワーク
すでにJavaScriptフレームワークは数十種類ある
自分のプロジェクトにあったものを選ぶ

http://backbonejs.org/

http://www.sencha.com/

http://a...
フレームワークの導入は
処理を系統立てた仕組みにのせ
プログラマの作業の効率化
と
アプリケーションの保守性を高めること
にあります

#html5biz #html5bizB
フレームワークを使ってロジックを整理する

#html5biz #html5bizB
HTML

カスタムイベントを備えた Model
Model のイテレーションである Collection
イベントをハンドリングする View
!

View

!

ejs

Collection
Model

サーバサイドのアプリケーショ...
ROUTER
・画面の遷移を定義する
HTML

/#notes

NotesView.render()

/#list

ListView.render()

メンテナンス画面

Collection
Model

処理

一覧画面

ejs...
View
・ejs を使ったレンダリング
HTML

View

ejs

Collection
Model

・使用するDOM要素の定義
・ビジネスロジック
・イベントの定義
class NotesView extends Backbone....
HTML

class NotesModel extends Backbone.Model
defaults:
id: ''
title: 'title'

View

ejs

Model
・View のデータバッファとして定義
・バリデーシ...
HTML

Collection
・使用するモデルを定義
・Ajax ? or localStorage ?

View
class NotesCollection extends Backbone.Collection
model: Note...
localStorageを使うのも簡単
HTML

bower.json
{
"dependencies": {
"jquery": " 1.9.0",
"requirejs": " 2.1.5",
"backbone-amd": " 1.0....
altJS
altJSの言語の多くはクラス機構のサポート
JavaScriptの抱える問題の多くを解決

http://coffeescript.org/

http://www.typescriptlang.org/

http://html5...
CSS Preprocessor
膨大なCSSをどう整理するか

http://compass-style.org/
http://sass-lang.com/

http://lesscss.org/

http://learnboost.g...
モック開発で効率よく

http://albatrosary.hateblo.jp/entry/2014/02/06/155004
#html5biz #html5bizB
package.jsonの一部
"devDependencies": {
"grunt": " 0.4.1",
"grunt-contrib-copy": " 0.4.0",
"grunt-contrib-concat": " 0.3.0",
...
やること多いでしょ?

#html5biz #html5bizB
開発環境
多くのアーキテクチャをどうやって開発するか

http://yeoman.io/

http://www.sencha.com/products/sencha-cmd/download

http://git-scm.com/

ht...
Yeoman とは
MODERN WORKFLOWS FOR MODERN WEBAPPS

Google社が作成した総合開発ツール群
yo(雛形作成ツール)
grunt(タスクランナー)
bower(フロントエンドパッケージマネージャ)

h...
開発の大まかな流れ

1. yo [generator] によるひな形
2. grunt server を使用しアプリケーション開発
3. grunt build によるリリースビルド

http://yeoman.io/
#html5biz ...
yo
雛形作成ツール

generator はどのくらいある?
http://yeoman.io/community-generators.html

#html5biz #html5bizB
bower
Twitter社が作ったパッケージマネージャ

bower components はどのくらいあるか?
http://bower.io/search/

#html5biz #html5bizB
grunt
タスクランナー
grunt で登録されているプラグインは?
http://gruntjs.com/plugins

#html5biz #html5bizB
Yeomanをうまく使って効率良く開発しyo

#html5biz #html5bizB
バックエンド技術
Ajaxでデータのやり取りをしている分には今までと変わらない。
しかし、WebSocketを使った場合は。。

WebSocketやSPDYを使って「より早く双方向」
スケールできるWebアプリケーションサーバ

http:/...
Java屋さん(バックエンドエンジニア)が頑張るところです!

#html5biz #html5bizB
SPAを構築する上で考えるべきことのまとめ
パフォーマンス
メモリリーク
セキュリティ
フレームワークロックイン
設計思想の転換
フロントエンジニア不足
通信技術
バックエンド技術

http://blog.mitsuruog.info/201...
Single-page Applicationを構築するにあたって
メリット:
ページを遷移させてもJavaScriptのグローバル環境が変わらない
WebSocketが有効に使える

デメリット:
フルOSSでの開発が必要になる
技術要素が多...
いろいろ面倒と思うなら

Sencha is All in One

http://www.xenophy.com/

#html5biz #html5bizB
これだけではアプリケーションを利用している
営業さんは納得しません

#html5biz #html5bizB
オンラインじゃないと使えないんでしょ?

#html5biz #html5bizB
営業活動を妨げるつもりですか?

#html5biz #html5bizB
よしネイティブでやろう!

#html5biz #html5bizB
じゃなくて

#html5biz #html5bizB
Offline Web Applicationでやろう!

#html5biz #html5bizB
Web ApplicationなのにOfflineって何のこと?

#html5biz #html5bizB
いままでのキャッシング技術

アプリケーションサーバでのキャッシュ
プロキシサーバでのキャッシュ
ブラウザでのキャッシュ

#html5biz #html5bizB
これとはまったく違います

#html5biz #html5bizB
Offline Web Application
Webアプリケーションを実行させるリソースをブラウザに保持
してネットワークが遮断された環境でも動かそうという機能

#html5biz #html5bizB
Application Cache

これはなに?

オフライン ブラウジング:

ユーザーがオフラインのときでも、す

べてのサイトにアクセスできる。

高速:

キャッシュされたリソースはローカルなので、高速に読み込まれる。

サーバー負荷...
Application Cache

どうすればいいの?

<html manifest="sample.appcache">
manifestファイル
CACHE MANIFEST
# リソースを更新する場合、必ず値を変更する
# マニフェス...
Application Cache
キャッシュクリアは意外と簡単
chrome://appcache-internals/

#html5biz #html5bizB
Application Cache
FireFoxでは
about:cacheで確認

削除は Cache Directoryの中をばさっと消す
※ Firefox 11 以前から Firefox 11 まで、ツール -> 最近の履歴を消去、あ...
Application Cache
View Entriesでキャッシュされているmanifestの内容が見れる

Removeでキャッシュの内容が削除できる
#html5biz #html5bizB
Application Cache
もちろんデベロッパーツールでも見れます

#html5biz #html5bizB
Application Cache

難しいところ

manifestファイルが更新されていないとダメ
リソースは必ずmanifestファイルに定義しないと動きが奇妙

#html5biz #html5bizB
Application Cache

難しいところ

Application Cacheを使った場合、ファイルを定義しないと使われない
main.cssをmanifestファイルでコメントアウトしてみた

#html5biz #html5biz...
Application Cache

難しいところ

manifestファイルには全部ちゃんと書く
→ ネットワークから取得したい場合はNETWORKに書く

#html5biz #html5bizB
Application Cache

難しいところ

NETWORKとCACHE両方に書いた場合はCACHE

#html5biz #html5bizB
Application Cache

難しいところ

② ファイルのダウンロード

① 描画
Browser

manifestファイルを更新してブラウザを実行してもキャッ
シュしているファイルを使う
2回目でようやくダウンロードしたファイルを...
Application Cache

難しいところ

関係ないファイルをmanifestに書いてもキャッシュされる

#html5biz #html5bizB
Application Cache

意外と使えます

#html5biz #html5bizB
WebStorage

これはなに?

key-value型のデータストア
sessionStorage
localStorage
のストレージが用意されている(IE8から使える)

•
•

length:保存されているデータ数
key(n)...
比較してみる

WebStorage

別ウィンドウの
データ共有
クッキー

session

local

○

指定期限まで有効

4KB

サーバへのアク
セスごと

別ウィンドウ/タブ
を閉じるまで有効

○

データの有効期限

サ...
WebStorage

ポイント

とても扱いやすい
トランザクションの概念がない

#html5biz #html5bizB
WebStorage

普通に使えます

#html5biz #html5bizB
オフラインファーストの思想と実践

http://www.slideshare.net/shumpei/thought-and-practice-of-offline-first

#html5biz #html5bizB
さすがです!白石先生!

#html5biz #html5bizB
Offline Web Application

http://www.html5rocks.com/ja/tutorials/offline/quota-research/

#html5biz #html5bizB
さすがです!北村先生!

#html5biz #html5bizB
Offline Web Application

http://www.html5rocks.com/ja/tutorials/offline/quota-research/

#html5biz #html5bizB
静的なリソースも動的なリソースもクライアントに保持

#html5biz #html5bizB
Single-page ApplicationでほとんどJavaScriptでの処理

#html5biz #html5bizB
アプリケーションサーバに問い合わせしないので
Offine Web Applicationも作りやすい

#html5biz #html5bizB
できればWeb StorageとAPIサーバの同期はWeb Workerで

#html5biz #html5bizB
WebWorker

これはなに?

JavaScriptにスレッド機能を追加する機能

#html5biz #html5bizB
WebWorker

どうやるの?

var worker = new Worker( task.js');
ウェブ ワーカーは独立したスレッドで動作する
ウェブ ワーカーによって実行されるコードは個別ファイル

#html5biz #html...
次世代型のWebアプリケーション
Single-page Applicationであたかもクライアントアプリ
ケーションのように動くWebアプリケーション
HTML

Application
Cache

HTML
JavaScript
Con...
最後に

Java
Single-page Application
RIA

JavaScriptフレームワーク

WebSocket

altJS
CSS Preprocessor
Ajax

SPDY
HTTP 2.0

Web Worke...
このあと

OSC Tokyo/Spring
!

2/28-3/1 306教室にてブース展示
3/1 10:00 203教室にて登壇

#html5biz #html5bizB
Special Thanks

http://www.html5biz.org/

http://www.xenophy.com/

http://html5experts.jp/

http://www.gxp.co.jp/
http://h...
ご清聴ありがとうございました

#html5biz #html5bizB
Upcoming SlideShare
Loading in …5
×

オープンソースで始めるオフラインアプリケーション開発入門

7,777 views

Published on

Published in: Technology
  • Be the first to comment

オープンソースで始めるオフラインアプリケーション開発入門

  1. 1. ! オープン系セッション オープンソースで始める オフラインアプリケーション開発入門 #html5biz #html5bizB
  2. 2. Profile: ! 佐川 夫美雄 @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER #html5biz #html5bizB
  3. 3. 本日お話すること OSSで作るSingle-page Application Offline Web Application #html5biz #html5bizB
  4. 4. 業務系Webアプリケーション開発で何が起きているか http://html5experts.jp/albatrosary/3191/ #html5biz #html5bizB
  5. 5. ファイナンシャルプランナーとは 顧客である個人から、収支・負債・家族構成・資産 状況などのリソース提供を受け、それを基に住居・ 教育・老後など将来のライフプランニング(人生設 計計画)に即した資金計画やアドバイスを行う職種 #html5biz #html5bizB
  6. 6. ライフプランに必要な要素 教育資金計画 住宅取得資金計画 老後生活のための資金計画 税務 社会保険/公的年金/企業年金 キャッシュフロー表 / 個人バランスシートで表現する #html5biz #html5bizB
  7. 7. こんな感じで営業してます (みたいです) #html5biz #html5bizB
  8. 8. フロントシステムにはリッチクライアントが必要 #html5biz #html5bizB
  9. 9. RIAに求められたもの Rich Internet Application 表現力の高さ:動画や音声などマルチディアの活用が可能で高いデザイン性を持った画面要素の 再生機能を備える デスクトップアプケーションと同等なUI:画面をリフレッシュすることな く、バックエンドでサーバーとデータの送受信が可能 ユーザーエクスペリエンス:ユーザーの操作が即座にレスポンスされ、表示される画面 の情報が操作に応じて随時変化するようなインタラクティブな操作性を実現 #html5biz #html5bizB
  10. 10. HTML5が解決してくれる! #html5biz #html5bizB
  11. 11. 従来型のWebアプリケーション Controller POJO HTML JavaScript Business Logic O/R JSP RDBMS アプリケーションサーバ Browser 1. リクエストをサーバへ送りControllerへ 2. Controllerは必要な情報を POJO → Business Logic →O/Rマッパー → Database で取得(登録・更新) 3. ページをjspで生成しController経由でクライアントへ返却 4. 各ページではAjaxにより部分的な情報の取得 #html5biz #html5bizB
  12. 12. 次世代型のWebアプリケーション HTML JavaScript Browser Controller Business Logic O/R POJO アプリケーションサーバ RDBMS 1. HTMLで作成された画面を表示 2. 必要な情報をAjaxにおいてXMLHttpRequestで非同期にJSONで サーバへ送信 3. サーバでは受け取った情報(JSON)をPOJOへ変換し登録・更新な どの処理を行う 4. 表示データはJSONでクライアントへ画面へ表示 #html5biz #html5bizB
  13. 13. Single-page Application(SPA)とは 単一ページによるWebアプリケーション ページはDOMの操作により切り替える サーバとのやりとりはAjaxやWebSocket等を利用 change DOM events render View Template get set Model Ajax Storage #html5biz #html5bizB
  14. 14. でもSingle-page Applicationは難しい #html5biz #html5bizB
  15. 15. SPAに必要な技術 JavaScriptフレームワーク altJS CSS Preprocessor 開発環境 バックエンド技術 - 通信 バックエンド技術 - Webアプリケーションサーバ #html5biz #html5bizB
  16. 16. JavaScriptフレームワーク すでにJavaScriptフレームワークは数十種類ある 自分のプロジェクトにあったものを選ぶ http://backbonejs.org/ http://www.sencha.com/ http://angularjs.org/ #html5biz #html5bizB
  17. 17. フレームワークの導入は 処理を系統立てた仕組みにのせ プログラマの作業の効率化 と アプリケーションの保守性を高めること にあります #html5biz #html5bizB
  18. 18. フレームワークを使ってロジックを整理する #html5biz #html5bizB
  19. 19. HTML カスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View ! View ! ejs Collection Model サーバサイドのアプリケーションと連動するため の RESTful JSON など #html5biz #html5bizB
  20. 20. ROUTER ・画面の遷移を定義する HTML /#notes NotesView.render() /#list ListView.render() メンテナンス画面 Collection Model 処理 一覧画面 ejs URL 登録画面 View 画面 /#mente MenteView.render() class NotesRouter extends Backbone.Router # "": localhost:9000 の呼び出し # "notes": localhost:9000/#notes の呼び出し # "list": localhost:9000/#list の呼び出し routes: "": "mains" "notes": "mains" "list": "lists" #html5biz #html5bizB
  21. 21. View ・ejs を使ったレンダリング HTML View ejs Collection Model ・使用するDOM要素の定義 ・ビジネスロジック ・イベントの定義 class NotesView extends Backbone.View el: $ "#main" template: JST["app/scripts/templates/notes.ejs"] events: 'click #update': '_onClickUpdate' 'click #added': '_onClickAdded' 'click #deleteAll': '_onClickDeleteAll' render: -> $("#notes").html @template this #html5biz #html5bizB
  22. 22. HTML class NotesModel extends Backbone.Model defaults: id: '' title: 'title' View ejs Model ・View のデータバッファとして定義 ・バリデーションの定義 Collection Model contents: 'contents' validate: (attrs) -> return 'title is empty.' if _.isEmpty attrs.title return 'contents is empty.' if _.isEmpty attrs.contents #html5biz #html5bizB
  23. 23. HTML Collection ・使用するモデルを定義 ・Ajax ? or localStorage ? View class NotesCollection extends Backbone.Collection model: NotesModel ejs Collection Model #html5biz #html5bizB
  24. 24. localStorageを使うのも簡単 HTML bower.json { "dependencies": { "jquery": " 1.9.0", "requirejs": " 2.1.5", "backbone-amd": " 1.0.0", View "Backbone.localStorage": "1.1.7", ejs Collection Model "underscore-amd": " 1.4.4", }, "devDependencies": {} } $ bower install #html5biz #html5bizB
  25. 25. altJS altJSの言語の多くはクラス機構のサポート JavaScriptの抱える問題の多くを解決 http://coffeescript.org/ http://www.typescriptlang.org/ http://html5experts.jp/clockmaker/2183/ #html5biz #html5bizB
  26. 26. CSS Preprocessor 膨大なCSSをどう整理するか http://compass-style.org/ http://sass-lang.com/ http://lesscss.org/ http://learnboost.github.io/stylus/ #html5biz #html5bizB
  27. 27. モック開発で効率よく http://albatrosary.hateblo.jp/entry/2014/02/06/155004 #html5biz #html5bizB
  28. 28. package.jsonの一部 "devDependencies": { "grunt": " 0.4.1", "grunt-contrib-copy": " 0.4.0", "grunt-contrib-concat": " 0.3.0", "grunt-contrib-coffee": " 0.7.0", "grunt-contrib-jst": " 0.5.0", "grunt-contrib-uglify": " 0.2.0", "grunt-contrib-compass": " 0.5.0", "grunt-contrib-jshint": " 0.6.3", "grunt-contrib-cssmin": " 0.6.0", "grunt-contrib-connect": " 0.3.0", "grunt-contrib-clean": " 0.5.0", "grunt-contrib-htmlmin": " 0.1.3", "grunt-contrib-imagemin": " 0.1.0", "grunt-contrib-watch": " 0.5.2", "grunt-mocha": " 0.4.1", "grunt-usemin": " 0.1.10", "grunt-bower-requirejs": " 0.7.0", "grunt-requirejs": " 0.4.0", "grunt-rev": " 0.1.0", "grunt-open": " 0.2.0", "load-grunt-tasks": " 0.1.0", "connect-livereload": " 0.2.0", "time-grunt": " 0.2.1", "jshint-stylish": " 0.1.3" } #html5biz #html5bizB
  29. 29. やること多いでしょ? #html5biz #html5bizB
  30. 30. 開発環境 多くのアーキテクチャをどうやって開発するか http://yeoman.io/ http://www.sencha.com/products/sencha-cmd/download http://git-scm.com/ https://github.com/ #html5biz #html5bizB
  31. 31. Yeoman とは MODERN WORKFLOWS FOR MODERN WEBAPPS Google社が作成した総合開発ツール群 yo(雛形作成ツール) grunt(タスクランナー) bower(フロントエンドパッケージマネージャ) http://yeoman.io/ #html5biz #html5bizB
  32. 32. 開発の大まかな流れ 1. yo [generator] によるひな形 2. grunt server を使用しアプリケーション開発 3. grunt build によるリリースビルド http://yeoman.io/ #html5biz #html5bizB
  33. 33. yo 雛形作成ツール generator はどのくらいある? http://yeoman.io/community-generators.html #html5biz #html5bizB
  34. 34. bower Twitter社が作ったパッケージマネージャ bower components はどのくらいあるか? http://bower.io/search/ #html5biz #html5bizB
  35. 35. grunt タスクランナー grunt で登録されているプラグインは? http://gruntjs.com/plugins #html5biz #html5bizB
  36. 36. Yeomanをうまく使って効率良く開発しyo #html5biz #html5bizB
  37. 37. バックエンド技術 Ajaxでデータのやり取りをしている分には今までと変わらない。 しかし、WebSocketを使った場合は。。 WebSocketやSPDYを使って「より早く双方向」 スケールできるWebアプリケーションサーバ http://html5experts.jp/albatrosary/4939/ #html5biz #html5bizB
  38. 38. Java屋さん(バックエンドエンジニア)が頑張るところです! #html5biz #html5bizB
  39. 39. SPAを構築する上で考えるべきことのまとめ パフォーマンス メモリリーク セキュリティ フレームワークロックイン 設計思想の転換 フロントエンジニア不足 通信技術 バックエンド技術 http://blog.mitsuruog.info/2014/01/spa7.html #html5biz #html5bizB
  40. 40. Single-page Applicationを構築するにあたって メリット: ページを遷移させてもJavaScriptのグローバル環境が変わらない WebSocketが有効に使える デメリット: フルOSSでの開発が必要になる 技術要素が多すぎる 従来のWebアプリケーションに比べフロント開発が難しい #html5biz #html5bizB
  41. 41. いろいろ面倒と思うなら Sencha is All in One http://www.xenophy.com/ #html5biz #html5bizB
  42. 42. これだけではアプリケーションを利用している 営業さんは納得しません #html5biz #html5bizB
  43. 43. オンラインじゃないと使えないんでしょ? #html5biz #html5bizB
  44. 44. 営業活動を妨げるつもりですか? #html5biz #html5bizB
  45. 45. よしネイティブでやろう! #html5biz #html5bizB
  46. 46. じゃなくて #html5biz #html5bizB
  47. 47. Offline Web Applicationでやろう! #html5biz #html5bizB
  48. 48. Web ApplicationなのにOfflineって何のこと? #html5biz #html5bizB
  49. 49. いままでのキャッシング技術 アプリケーションサーバでのキャッシュ プロキシサーバでのキャッシュ ブラウザでのキャッシュ #html5biz #html5bizB
  50. 50. これとはまったく違います #html5biz #html5bizB
  51. 51. Offline Web Application Webアプリケーションを実行させるリソースをブラウザに保持 してネットワークが遮断された環境でも動かそうという機能 #html5biz #html5bizB
  52. 52. Application Cache これはなに? オフライン ブラウジング: ユーザーがオフラインのときでも、す べてのサイトにアクセスできる。 高速: キャッシュされたリソースはローカルなので、高速に読み込まれる。 サーバー負荷の軽減: ブラウザは、変更があったリソースのみを サーバーからダウンロードする。 #html5biz #html5bizB
  53. 53. Application Cache どうすればいいの? <html manifest="sample.appcache"> manifestファイル CACHE MANIFEST # リソースを更新する場合、必ず値を変更する # マニフェストファイルを保存しておく場所は、htmlファイルと同じディレクトリです # 2013-04-06 12:40 ! # キャッシュしたいリソース # このうち一つでもファイルが見つからないとエラーになりキャッシュされません。 CACHE: sample.html js/test.js css/test.css ! # 常にネットワーク上を参照して欲しい場合に使用 # 必ずオンラインアクセスを試みるリソース NETWORK: test.cgi ! # 代替エントリを宣言 # アクセスに失敗した場合に代わりに使用するリソース(NETWORK:と両方に指定すると動作しない) FALLBACK: online.png error.png #html5biz #html5bizB
  54. 54. Application Cache キャッシュクリアは意外と簡単 chrome://appcache-internals/ #html5biz #html5bizB
  55. 55. Application Cache FireFoxでは about:cacheで確認 削除は Cache Directoryの中をばさっと消す ※ Firefox 11 以前から Firefox 11 まで、ツール -> 最近の履歴を消去、あるいは、ツール -> オプション -> 詳細 -> ネットワー ク -> オフラインデータ -> 今すぐ消去 のどちらでもオフラインキャッシュ #html5biz #html5bizB
  56. 56. Application Cache View Entriesでキャッシュされているmanifestの内容が見れる Removeでキャッシュの内容が削除できる #html5biz #html5bizB
  57. 57. Application Cache もちろんデベロッパーツールでも見れます #html5biz #html5bizB
  58. 58. Application Cache 難しいところ manifestファイルが更新されていないとダメ リソースは必ずmanifestファイルに定義しないと動きが奇妙 #html5biz #html5bizB
  59. 59. Application Cache 難しいところ Application Cacheを使った場合、ファイルを定義しないと使われない main.cssをmanifestファイルでコメントアウトしてみた #html5biz #html5bizB
  60. 60. Application Cache 難しいところ manifestファイルには全部ちゃんと書く → ネットワークから取得したい場合はNETWORKに書く #html5biz #html5bizB
  61. 61. Application Cache 難しいところ NETWORKとCACHE両方に書いた場合はCACHE #html5biz #html5bizB
  62. 62. Application Cache 難しいところ ② ファイルのダウンロード ① 描画 Browser manifestファイルを更新してブラウザを実行してもキャッ シュしているファイルを使う 2回目でようやくダウンロードしたファイルを利用する #html5biz #html5bizB
  63. 63. Application Cache 難しいところ 関係ないファイルをmanifestに書いてもキャッシュされる #html5biz #html5bizB
  64. 64. Application Cache 意外と使えます #html5biz #html5bizB
  65. 65. WebStorage これはなに? key-value型のデータストア sessionStorage localStorage のストレージが用意されている(IE8から使える) • • length:保存されているデータ数 key(n):保存されているn番目のkey getItem(key):keyに対応するvalue setItem(key, value):keyとvalueのペアでデータを保存 removeItem(key):keyに対応するvalueを削除 clear():データをすべてクリア #html5biz #html5bizB
  66. 66. 比較してみる WebStorage 別ウィンドウの データ共有 クッキー session local ○ 指定期限まで有効 4KB サーバへのアク セスごと 別ウィンドウ/タブ を閉じるまで有効 ○ データの有効期限 サーバへのデー データ量の上限 タ送信 10MB jsにて 永続的に有効 10MB jsにて #html5biz #html5bizB
  67. 67. WebStorage ポイント とても扱いやすい トランザクションの概念がない #html5biz #html5bizB
  68. 68. WebStorage 普通に使えます #html5biz #html5bizB
  69. 69. オフラインファーストの思想と実践 http://www.slideshare.net/shumpei/thought-and-practice-of-offline-first #html5biz #html5bizB
  70. 70. さすがです!白石先生! #html5biz #html5bizB
  71. 71. Offline Web Application http://www.html5rocks.com/ja/tutorials/offline/quota-research/ #html5biz #html5bizB
  72. 72. さすがです!北村先生! #html5biz #html5bizB
  73. 73. Offline Web Application http://www.html5rocks.com/ja/tutorials/offline/quota-research/ #html5biz #html5bizB
  74. 74. 静的なリソースも動的なリソースもクライアントに保持 #html5biz #html5bizB
  75. 75. Single-page ApplicationでほとんどJavaScriptでの処理 #html5biz #html5bizB
  76. 76. アプリケーションサーバに問い合わせしないので Offine Web Applicationも作りやすい #html5biz #html5bizB
  77. 77. できればWeb StorageとAPIサーバの同期はWeb Workerで #html5biz #html5bizB
  78. 78. WebWorker これはなに? JavaScriptにスレッド機能を追加する機能 #html5biz #html5bizB
  79. 79. WebWorker どうやるの? var worker = new Worker( task.js'); ウェブ ワーカーは独立したスレッドで動作する ウェブ ワーカーによって実行されるコードは個別ファイル #html5biz #html5bizB
  80. 80. 次世代型のWebアプリケーション Single-page Applicationであたかもクライアントアプリ ケーションのように動くWebアプリケーション HTML Application Cache HTML JavaScript Controller Web Storage Browser Business Logic O/R POJO アプリケーションサーバ RDBMS #html5biz #html5bizB
  81. 81. 最後に Java Single-page Application RIA JavaScriptフレームワーク WebSocket altJS CSS Preprocessor Ajax SPDY HTTP 2.0 Web Worker Offline Web Application Yeoman #html5biz #html5bizB
  82. 82. このあと OSC Tokyo/Spring ! 2/28-3/1 306教室にてブース展示 3/1 10:00 203教室にて登壇 #html5biz #html5bizB
  83. 83. Special Thanks http://www.html5biz.org/ http://www.xenophy.com/ http://html5experts.jp/ http://www.gxp.co.jp/ http://html5j.org/ #html5biz #html5bizB
  84. 84. ご清聴ありがとうございました #html5biz #html5bizB

×