![Page 1: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/1.jpg)
JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ (ちょっとだけラフノートの宣伝)
J Sオジサン # 2 2014年5月29日 ラフノート株式会社 代表 西小倉 宏信
![Page 2: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/2.jpg)
自己紹介
![Page 3: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/3.jpg)
自己紹介 →IT土方歴7年
![Page 4: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/4.jpg)
いろんなWebサービス作ってきました
![Page 5: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/5.jpg)
2010年
![Page 6: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/6.jpg)
とある クライアント様からの
要望
![Page 7: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/7.jpg)
「Webアプリを作って欲しい」 !
!
![Page 8: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/8.jpg)
ただし
![Page 9: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/9.jpg)
オフラインでも 動いて欲しい
![Page 10: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/10.jpg)
提案@2010年
![Page 11: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/11.jpg)
提案@2010年
![Page 12: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/12.jpg)
FlashかSilverlight を経由してファイルに データを保存?
![Page 13: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/13.jpg)
やめた
![Page 14: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/14.jpg)
HTML5!?
![Page 15: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/15.jpg)
localStorage!?
![Page 16: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/16.jpg)
localStorageは KVSだけどこの仕様で
RDBっぽくなれば使えるかも?
![Page 17: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/17.jpg)
JSRel
![Page 18: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/18.jpg)
shinout / jsrel @ github
![Page 19: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/19.jpg)
JSRelの特徴
1.localStorage、Node、Titaniumで動く 2.同期実行 3.RDB
var result = db.find('table1'); var result2 = db.find(‘table2'); // do something
db.find('table1', function (e, result) { db.find('table2', function (e, result2) { // do something }); });
![Page 20: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/20.jpg)
AppCache版@2012年
![Page 21: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/21.jpg)
AppCache
ここに書くと キャッシュされる
ここに書くと キャッシュされない
![Page 22: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/22.jpg)
!
・不安定 ・キャッシュが消えないことがある ・Chromeの自動バージョンアップで 不具合が出た事例 ・初回はネット必要
![Page 23: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/23.jpg)
完全オフライン版@2013年
![Page 24: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/24.jpg)
file://
![Page 25: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/25.jpg)
画像はbase64化 CSS、JSと一緒に全て
1つのhtmlファイルに埋め込み、 File URI scheme
にて動作!
![Page 26: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/26.jpg)
DEMO
![Page 27: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/27.jpg)
!
・安定(常にfileそのものを参照) ・USBメモリに入れて配布すれば 終始オフラインで動作!
オンラインの時だけデータ送るとかもできる
![Page 28: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/28.jpg)
結論
![Page 29: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/29.jpg)
JSRel便利。 今後も使っていきたいので
皆様starやforkやPullRequest お願いします
https://github.com/shinout/jsrel
![Page 30: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/30.jpg)
最後にちょっとだけ ラフノート宣伝
![Page 31: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/31.jpg)
GitHubのWIP PR ワークフローいいですよね
![Page 32: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/32.jpg)
GitHubの文書版である「ラフノート」はシステム的にWIP形式をサポート
![Page 33: JSRelでlocalStorageを使って 完全オフラインなブラウザアプリ@JSおじさん #2](https://reader033.vdocuments.pub/reader033/viewer/2022052321/55631a3ad8b42a5b498b5221/html5/thumbnails/33.jpg)
ラフノート株式会社 代表 西小倉宏信
ご清聴ありがとうございました
PC or iPhoneで
「ラフノート」 で検索!