オフライン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

3. オフラインWebアプリケーションとは？

4. オフラインWebアプリケーションとは？当時の構成要素 Application Cacheで静的ページをキャッシュ SQL Databaseでブラウザにデータベース localStorageで簡易易な⽂文字列列データの格納を

5. オフラインWebアプリケーションの歴史かつて、Oﬄine Web ApplicationはHTML5の⼤大きな⽬目⽟玉要素のうちの⼀一つだったそのうちの仕様のひとつであるApplication Cache にはいろいろな課題があり、普及しなかった現在は、Service Workerが出てきてオフライン Webアプリケーションがより現実的になってきている

6. 開発者のオフラインWebアプリケーションにおける期待度度の推移 HTML5 誕生絶頂期 AppCache コケる黒歴史へ SW誕生なう ※当社調べ

7. 今再び、⾼高まるオフライン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. 正直、そのままで使うには辛い…

14. みんな大好きなSQLライクにデータベースを扱おう

15. Loveﬁeld https://github.com/google/loveﬁeld

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. Loveﬁeldのその他の機能テーブル結合／グループ化 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()

19. SQLライクに快適なデータベース⽣生活をエンジョイしましょう

20. I/O Codelabs Bulding data-‐‑‒rich web apps with Loveﬁeld https://io2015codelabs.appspot.com/codelabs/all

21. Service Worker  + Indexed Database(loveﬁeld) =  Oﬄine 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データをやり取り

25. オフラインWebアプリケーションに今こそチャレンジ！

26. Thank you!! ( @yoshikawa_t )

オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database

yoshikawa_t

Transcript

オフラインWebアプリの再到来で今、再び注目されるAPIの本命　ーJavaScript SQL-like database