Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

25,328 views

Published on

2015/6/13に開催された「HTML5オールスターズ」での登壇資料です。

Published in: Technology

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

  1. 1. オフラインWebアプリの再到来で今、 再び注目されるAPIの本命 JavaScript SQL-like database 2015/6/13 htmlday 2015/HTML5オールスターズ Toru Yoshikawa (@yoshikawa_t)
  2. 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. 3. オフラインWebアプリケーションとは?
  4. 4. オフラインWebアプリケーションとは? 当時の構成要素   Application  Cacheで静的ページをキャッシュ   SQL  Databaseでブラウザにデータベース   localStorageで簡易易な⽂文字列列データの格納を
  5. 5. オフラインWebアプリケーションの歴史 かつて、Offline  Web  ApplicationはHTML5の⼤大き な⽬目⽟玉要素のうちの⼀一つだった   そのうちの仕様のひとつであるApplication  Cache にはいろいろな課題があり、普及しなかった   現在は、Service  Workerが出てきてオフライン Webアプリケーションがより現実的になってきて いる
  6. 6. 開発者のオフラインWebアプリケーション における期待度度の推移 HTML5 誕生 絶頂期 AppCache コケる 黒歴史へ SW誕生 なう ※当社調べ
  7. 7. 今再び、⾼高まるオフラインWeb アプリケーションへの期待
  8. 8. ところで
  9. 9. 覚えていますか
  10. 10. Indexed  Databaseとは? ブラウザ上に持つKVS型のローカルデータベース   オフラインWebアプリケーションを前提としたローカ ルでのデータアクセス   オフラインWebアプリケーションを前提としたローカ ルでのデータアクセス(⼤大事なことなので)   Application  Cacheがコケたせいで、オフラインを前 提としたindexedDBが陽の⽬目を⾒見見ることなかった…
  11. 11. Indexed  Databaseの特徴   (localStorageとの違い) ⾮非同期API(メインスレッドをブロックしない)   ⼤大量量のデータ保存に向いている(クォータはブラウザによる)   JSオブジェクト(関数などは除く)やバイナリデータ (Blob)が直接保存できる   トランザクション対応   Worker上で動作可能(もちろんServiceWorkerでも)   APIが難解で複雑
  12. 12. Indexed  Databaseの難解さと扱いづらさ そもそもRDBMSではないのでSQL的な操作⽅方法はすべ てNG   なにかのプロパティで検索索したければ、あらかじめ索索引 を作っておく必要がある   複合検索索をするには、あらかじめ(以下略略   ソートをするには、あらかじめ(以下略略   集合関数?何それ
  13. 13. 正直、そのままで使うには 辛い…
  14. 14. みんな大好きなSQLライク にデータベースを扱おう
  15. 15. Lovefield https://github.com/google/lovefield
  16. 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. 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. 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()
  19. 19. SQLライクに快適なデータベー ス⽣生活をエンジョイしましょう
  20. 20. I/O  Codelabs   Bulding  data-‐‑‒rich  web  apps  with  Lovefield https://io2015codelabs.appspot.com/codelabs/all
  21. 21. Service  Worker
 +     Indexed  Database(lovefield)   =
 Offline  Web  Application
  22. 22. サーバー BaaS ex)Firebase Webページ SW  +  DBのアーキテクチャ例例   オンライン時 SW DB 単純な REST APIでJSONデータを やり取り Background Sync でデータ同期 データをRW
  23. 23. サーバー BaaS ex)Firebase Webページ SW  +  DBのアーキテクチャ例例   オフライン時 SW DB データをRW DBからデータを 取得して返す
  24. 24. Webページ SW サーバー BaaS ex) Firebase SW  +  DBのアーキテクチャ例例   SW  or  DB  ⾮非対応ブラウザ DB 単純な REST APIでJSONデータを やり取り
  25. 25. オフラインWebアプリケー ションに今こそチャレンジ!
  26. 26. Thank you!! ( @yoshikawa_t )

×