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

#html5biz #html5bizB

!

オープン系セッション

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


Profile: !

佐川　夫美雄

HTML5Expert.jpコントリビュータ html5jエンタープライズ部副部長 Angularユーザ会スタッフ Sencha UG CO-ORGANIZER

@albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/


OSSで作るSingle-page Application

Offline Web Application

本日お話すること


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

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


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

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


ライフプランに必要な要素

教育資金計画住宅取得資金計画老後生活のための資金計画税務社会保険／公的年金／企業年金

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


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


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


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

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

再生機能を備えるデスクトップアプケーションと同等なUI：画面をリフレッシュすることな

く、バックエンドでサーバーとデータの送受信が可能ユーザーエクスペリエンス：ユーザーの操作が即座にレスポンスされ、表示される画面

の情報が操作に応じて随時変化するようなインタラクティブな操作性を実現


HTML5が解決してくれる！


Controller

JSP

Browser

HTML JavaScript

アプリケーションサーバ RDBMS

Business Logic O/RPOJO

従来型のWebアプリケーション

1. リクエストをサーバへ送りControllerへ 2. Controllerは必要な情報を POJO → Business Logic →O/Rマッパー → Database で取得（登録・更新） 3. ページをjspで生成しController経由でクライアントへ返却 4. 各ページではAjaxにより部分的な情報の取得


Controller

Browser

HTML JavaScript


Business Logic O/RPOJO

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

1. HTMLで作成された画面を表示 2. 必要な情報をAjaxにおいてXMLHttpRequestで非同期にJSONで

サーバへ送信 3. サーバでは受け取った情報（JSON）をPOJOへ変換し登録・更新な

どの処理を行う 4. 表示データはJSONでクライアントへ画面へ表示


Single-page Application(SPA)とは

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

events

renderchange

AjaxStorage

get

setModel

TemplateViewDOM


でもSingle-page Applicationは難しい


SPAに必要な技術

JavaScriptフレームワーク

altJS

CSS Preprocessor

開発環境

バックエンド技術 - 通信

バックエンド技術 - Webアプリケーションサーバ


JavaScriptフレームワーク

http://backbonejs.org/

http://angularjs.org/

http://www.sencha.com/

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


フレームワークの導入は処理を系統立てた仕組みにのせプログラマの作業の効率化

とアプリケーションの保守性を高めること

にあります


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


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

!

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

View

ejs Collection Model

HTML


ROUTER ・画面の遷移を定義する

画面 URL 処理登録画面 /#notes NotesView.render()一覧画面 /#list ListView.render()

メンテナンス画面 /#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


HTML


View ・ejs を使ったレンダリング・使用する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

View


HTML


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

class NotesModel extends Backbone.Model defaults: id: '' title: 'title' contents: 'contents' validate: (attrs) -> return 'title is empty.' if _.isEmpty attrs.title return 'contents is empty.' if _.isEmpty attrs.contents

View


HTML


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

class NotesCollection extends Backbone.Collection model: NotesModel

View


HTML


View


HTML bower.json { "dependencies": { "jquery": "~1.9.0", "requirejs": "~2.1.5", "backbone-amd": "~1.0.0", "Backbone.localStorage": "1.1.7", "underscore-amd": "~1.4.4", }, "devDependencies": {} }

$ bower install

localStorageを使うのも簡単


altJS

http://coffeescript.org/

http://www.typescriptlang.org/

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

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


CSS Preprocessor

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

http://lesscss.org/

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

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


モック開発で効率よく

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-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" }


やること多いでしょ？


開発環境

http://yeoman.io/

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

http://git-scm.com/

https://github.com/

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


Yeoman とは

Google社が作成した総合開発ツール群

yo(雛形作成ツール)

grunt(タスクランナー)

bower(フロントエンドパッケージマネージャ)

MODERN WORKFLOWS FOR MODERN WEBAPPS

http://yeoman.io/


開発の大まかな流れ

1. yo [generator] によるひな形

2. grunt server を使用しアプリケーション開発

3. grunt build によるリリースビルド

http://yeoman.io/


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

yo雛形作成ツール


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

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


gruntタスクランナー

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


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


WebSocketやSPDYを使って「より早く双方向」

スケールできるWebアプリケーションサーバ

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

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

バックエンド技術


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


パフォーマンスメモリリークセキュリティフレームワークロックイン設計思想の転換フロントエンジニア不足通信技術バックエンド技術

SPAを構築する上で考えるべきことのまとめ

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


Single-page Applicationを構築するにあたって

メリット：ページを遷移させてもJavaScriptのグローバル環境が変わらない WebSocketが有効に使える

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


http://www.xenophy.com/

Sencha is All in One

いろいろ面倒と思うなら


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


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


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


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


じゃなくて


Offline Web Applicationでやろう！


Web ApplicationなのにOfflineって何のこと？


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

アプリケーションサーバでのキャッシュ

プロキシサーバでのキャッシュ

ブラウザでのキャッシュ


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


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


Application Cacheこれはなに？

オフラインブラウジング: ユーザーがオフラインのときでも、す

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

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

サーバー負荷の軽減: ブラウザは、変更があったリソースのみを

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


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

<html manifest="sample.appcache">

Application Cacheどうすればいいの？


chrome://appcache-internals/

Application Cache

キャッシュクリアは意外と簡単

chrome://appcache-internals/


about:cacheで確認

Application CacheFireFoxでは

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

about:cache%E3%81%A7%E7%A2%BA%E8%AA%8D


Application Cache

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

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


Application Cache

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


manifestファイルが更新されていないとダメ

リソースは必ずmanifestファイルに定義しないと動きが奇妙

Application Cache難しいところ


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

意外と使えます


length:保存されているデータ数 key(n):保存されているn番目のkey getItem(key):keyに対応するvalue setItem(key, value):keyとvalueのペアでデータを保存 removeItem(key):keyに対応するvalueを削除 clear():データをすべてクリア

key-value型のデータストア • sessionStorage • localStorage

のストレージが用意されている（IE8から使える）

WebStorageこれはなに？


別ウィンドウのデータ共有データの有効期限データ量の上限サーバへのデー

タ送信

クッキー ○ 指定期限まで有効 4KB サーバへのアクセスごと

session × 別ウィンドウ／タブを閉じるまで有効 10MB jsにて

local ○ 永続的に有効 10MB jsにて

WebStorage比較してみる


WebStorageポイント

とても扱いやすい

トランザクションの概念がない


普通に使えます

WebStorage


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

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


さすがです！白石先生！



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


さすがです！北村先生！


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



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


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


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


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


WebWorker

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

これはなに？


WebWorker

var worker = new Worker(‘task.js');

ウェブワーカーは独立したスレッドで動作する

ウェブワーカーによって実行されるコードは個別ファイル

どうやるの？


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

Controller

Browser

HTML JavaScript


Business Logic O/RPOJOWeb

Storage

Application Cache

HTML

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


最後に

WebSocket

SPDY HTTP 2.0

Java

RIASingle-page Application

JavaScriptフレームワーク altJS CSS Preprocessor Ajax

Offline Web ApplicationWeb Worker

Yeoman


OSC Tokyo/Spring !

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

このあと


Special Thanks

http://www.xenophy.com/

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

http://www.html5biz.org/

http://html5experts.jp/

http://html5j.org/


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

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

Technology