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

!

オープン系セッション

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

#html5biz #html5bizB

Proﬁle:
!

佐川夫美雄
@albatrosary
http://albatrosary.hateblo.jp/
http://html5experts.jp/albatrosary/
HTML5Expert.jpコントリビュータ
html5jエンタープライズ部副部長
Angularユーザ会スタッフ
Sencha UG CO-ORGANIZER


本日お話すること

OSSで作るSingle-page Application
Oﬄine Web Application


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

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


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

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


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

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


こんな感じで営業してます
（みたいです）


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


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

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

デスクトップアプケーションと同等なUI：画面をリフレッシュすることな
く、バックエンドでサーバーとデータの送受信が可能

ユーザーエクスペリエンス：ユーザーの操作が即座にレスポンスされ、表示される画面
の情報が操作に応じて随時変化するようなインタラクティブな操作性を実現


HTML5が解決してくれる！


従来型の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により部分的な情報の取得


次世代型のWebアプリケーション

HTML
JavaScript

Browser

Controller

Business Logic

O/R

POJO


RDBMS

1. HTMLで作成された画面を表示
2. 必要な情報をAjaxにおいてXMLHttpRequestで非同期にJSONで
サーバへ送信
3. サーバでは受け取った情報（JSON）をPOJOへ変換し登録・更新な
どの処理を行う
4. 表示データはJSONでクライアントへ画面へ表示


Single-page Application(SPA)とは
単一ページによるWebアプリケーション
ページはDOMの操作により切り替える
サーバとのやりとりはAjaxやWebSocket等を利用

change

DOM

events

render

View

Template

get
set

Model

Ajax
Storage


でもSingle-page Applicationは難しい


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


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

http://backbonejs.org/

http://www.sencha.com/

http://angularjs.org/


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


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


HTML

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

View

!

ejs

Collection
Model

サーバサイドのアプリケーションと連動するため
の RESTful JSON など


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"

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

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


HTML

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

View
class NotesCollection extends Backbone.Collection
model: NotesModel

ejs

Collection
Model


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


altJS
altJSの言語の多くはクラス機構のサポート
JavaScriptの抱える問題の多くを解決

http://coﬀeescript.org/

http://www.typescriptlang.org/

http://html5experts.jp/clockmaker/2183/


CSS Preprocessor
膨大なCSSをどう整理するか

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

http://lesscss.org/

http://learnboost.github.io/stylus/


モック開発で効率よく

http://albatrosary.hateblo.jp/entry/2014/02/06/155004

package.jsonの一部
"devDependencies": {
"grunt": " 0.4.1",
"grunt-contrib-copy": " 0.4.0",
"grunt-contrib-concat": " 0.3.0",
"grunt-contrib-coﬀee": " 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"
}


やること多いでしょ？


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

http://yeoman.io/

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

http://git-scm.com/

https://github.com/


Yeoman とは
MODERN WORKFLOWS FOR MODERN WEBAPPS

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

http://yeoman.io/

開発の大まかな流れ

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

http://yeoman.io/

yo
雛形作成ツール

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


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

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


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


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


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

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

http://html5experts.jp/albatrosary/4939/

Java屋さん（バックエンドエンジニア）が頑張るところです！


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

http://blog.mitsuruog.info/2014/01/spa7.html

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

デメリット：
フルOSSでの開発が必要になる
技術要素が多すぎる
従来のWebアプリケーションに比べフロント開発が難しい


いろいろ面倒と思うなら

Sencha is All in One

http://www.xenophy.com/


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


オンラインじゃないと使えないんでしょ？


営業活動を妨げるつもりですか？


よしネイティブでやろう！


じゃなくて


Oﬄine Web Applicationでやろう！


Web ApplicationなのにOﬄineって何のこと？


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

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


これとはまったく違います


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


Application Cache

これはなに？

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

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

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

高速:

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

サーバー負荷の軽減:

ブラウザは、変更があったリソースのみを

サーバーからダウンロードする。


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


Application Cache
キャッシュクリアは意外と簡単
chrome://appcache-internals/


Application Cache
FireFoxでは
about:cacheで確認

削除は Cache Directoryの中をばさっと消す
※ Firefox 11 以前から Firefox 11 まで、ツール -> 最近の履歴を消去、あるいは、ツール -> オプション -> 詳細 -> ネットワー
ク -> オフラインデータ -> 今すぐ消去のどちらでもオフラインキャッシュ


Application Cache
View Entriesでキャッシュされているmanifestの内容が見れる

Removeでキャッシュの内容が削除できる

Application Cache
もちろんデベロッパーツールでも見れます


Application Cache

難しいところ

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


Application Cache

難しいところ

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


Application Cache

難しいところ

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


Application Cache

難しいところ

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


Application Cache

難しいところ

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

① 描画
Browser

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

Application Cache

難しいところ

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


Application Cache

意外と使えます


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():データをすべてクリア


比較してみる

WebStorage

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

session

local

○

指定期限まで有効

4KB

サーバへのアク
セスごと

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

○

データの有効期限

サーバへのデー
データ量の上限
タ送信

10MB

jsにて

永続的に有効

10MB

jsにて


WebStorage

ポイント

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


WebStorage

普通に使えます


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

http://www.slideshare.net/shumpei/thought-and-practice-of-oﬄine-ﬁrst


さすがです！白石先生！



http://www.html5rocks.com/ja/tutorials/oﬄine/quota-research/


さすがです！北村先生！


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


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


アプリケーションサーバに問い合わせしないので
Oﬃne Web Applicationも作りやすい


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


WebWorker

これはなに？

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


WebWorker

どうやるの？

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


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

Application
Cache

HTML
JavaScript
Controller
Web
Storage
Browser

Business Logic

O/R

POJO


RDBMS


最後に

Java
Single-page Application
RIA


WebSocket

altJS
CSS Preprocessor
Ajax

SPDY
HTTP 2.0

Web Worker

Yeoman

このあと

OSC Tokyo/Spring
!

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


Special Thanks

http://www.html5biz.org/

http://www.xenophy.com/

http://html5experts.jp/

http://www.gxp.co.jp/
http://html5j.org/


ご清聴ありがとうございました


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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

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

Plus de Fumio SAGAWA

Plus de Fumio SAGAWA (7)

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