オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
•
29 likes•26,843 views
2015/6/13に開催された「HTML5オールスターズ」での登壇資料です。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
Similar to オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database (20)
More from yoshikawa_t
More from yoshikawa_t (20)
Recently uploaded
Recently uploaded (9)
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
- 1. オフラインWebアプリの再到来で今、 再び注目されるAPIの本命 JavaScript SQL-like database 2015/6/13 htmlday 2015／HTML5オールスターズ Toru Yoshikawa (@yoshikawa_t)
- 2. Who? html5j 代表 Google Developer Experts (Chrome) HTML5 Experts.jp 副編集⻑⾧長兼エキスパー ト html5j ビギナー部（副部⻑⾧長）／Web先端 技術味⾒見見部 (顧問)／⽇日本jQuery Mobile ユーザー会 (管理理⼈人)／Sublime Text 2 Japan Users Group (管理理⼈人)などなど Blog: http://d.hatena.ne.jp/pikotea/ 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t
- 4. オフラインWebアプリケーションとは？ 当時の構成要素 Application Cacheで静的ページをキャッシュ SQL Databaseでブラウザにデータベース localStorageで簡易易な⽂文字列列データの格納を
- 5. オフラインWebアプリケーションの歴史 かつて、Offline Web ApplicationはHTML5の⼤大き な⽬目⽟玉要素のうちの⼀一つだった そのうちの仕様のひとつであるApplication Cache にはいろいろな課題があり、普及しなかった 現在は、Service Workerが出てきてオフライン Webアプリケーションがより現実的になってきて いる
- 8. ところで
- 9. 覚えていますか
- 10. Indexed Databaseとは？ ブラウザ上に持つKVS型のローカルデータベース オフラインWebアプリケーションを前提としたローカ ルでのデータアクセス オフラインWebアプリケーションを前提としたローカ ルでのデータアクセス（⼤大事なことなので） Application Cacheがコケたせいで、オフラインを前 提としたindexedDBが陽の⽬目を⾒見見ることなかった…
- 11. Indexed Databaseの特徴 （localStorageとの違い） ⾮非同期API（メインスレッドをブロックしない） ⼤大量量のデータ保存に向いている（クォータはブラウザによる） JSオブジェクト（関数などは除く）やバイナリデータ （Blob）が直接保存できる トランザクション対応 Worker上で動作可能（もちろんServiceWorkerでも） APIが難解で複雑
- 12. Indexed Databaseの難解さと扱いづらさ そもそもRDBMSではないのでSQL的な操作⽅方法はすべ てNG なにかのプロパティで検索索したければ、あらかじめ索索引 を作っておく必要がある 複合検索索をするには、あらかじめ（以下略略 ソートをするには、あらかじめ（以下略略 集合関数？何それ
- 13. 正直、そのままで使うには 辛い…
- 16. SQLライクにデータベースを操作可能 スキーマ定義（DDL） CREATE TABLE Item ( id AS INTEGER, description AS INTEGER, deadline as DATE_TIME, done as BOOLEAN, PRIMARY KEY ON ('id') ); CREATE INDEX idxDeadLine ON Item.deadline DESC; schemaBuilder.createTable('Item'). addColumn('id', lf.Type.INTEGER). addColumn('description', lf.Type.STRING). addColumn('deadline', lf.Type.DATE_TIME). addColumn('done', lf.Type.BOOLEAN). addPrimaryKey(['id']). addIndex('idxDeadline', ['deadline'], false, lf.Order.DESC);
- 17. SQLライクにデータベースを操作可能 データ操作（DML） //INSERT OR REPLACE INSERT OR REPLACE INTO Item VALUES row; ! //SELECT SELECT * FROM Item WHERE Item.done = false; ! //DELETE DELETE FROM infoCard WHERE lang = 'es'; //INSERT OR REPLACE db.insertOrReplace().into(item).values([row]). exec(); ! ! //SELECT db.select().from(item).where(item.done.eq(fals e)).exec(); ! //DELETE db.delete().from(infoCard).where(infoCard.lang .eq('es')).exec();
- 18. Lovefieldのその他の機能 テーブル結合／グループ化 INNER JOIN innerJoin() LEFT OUTRER JOIN leftOuterJoin() GROUP BY groupBy() 検索索条件 = eq <> neq < lt <= lte > gt >= gte SIMILAR match(regex) BETWEEN between IN in IS NULL isNull IS NOT NULL isNotNull AND lf.op.and OR lf.op.or NOT lf.op.not フィルタ／ソート LIMIT limit() SKIP skip() ORDER BY orderBy() 集合関数 AVG lf.fn.avg COUNT lf.fn.count DISTINCT lf.fn.distinct MAX lf.fn.max MIN lf.fn.min STDDEV lf.fn.stddev SUM lf.fn.sum 制約（実装中） FOREIGN KEY addForeignKey()
- 20. I/O Codelabs Bulding data-‐‑‒rich web apps with Lovefield https://io2015codelabs.appspot.com/codelabs/all
- 21. Service Worker + Indexed Database(lovefield) = Offline Web Application
- 22. サーバー BaaS ex)Firebase Webページ SW + DBのアーキテクチャ例例 オンライン時 SW DB 単純な REST APIでJSONデータを やり取り Background Sync でデータ同期 データをRW
- 23. サーバー BaaS ex)Firebase Webページ SW + DBのアーキテクチャ例例 オフライン時 SW DB データをRW DBからデータを 取得して返す
- 24. Webページ SW サーバー BaaS ex) Firebase SW + DBのアーキテクチャ例例 SW or DB ⾮非対応ブラウザ DB 単純な REST APIでJSONデータを やり取り