Your SlideShare is downloading. ×
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

オフラインWebアプリケーションのつくりかた

14,002

Published on

オフラインWebアプリケーションを作る上での基本的なAPIとアーキテクチャについて解説しました。 …

オフラインWebアプリケーションを作る上での基本的なAPIとアーキテクチャについて解説しました。
2011/10/17のJJUG CCCで使用したスライドです。

Published in: Technology
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,002
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
24
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. オフラインWebアプリケーションのつくりかた
    2011/10/13 白石俊平
  • 2. 自己紹介
    白石俊平(@Shumpei)
    株式会社オープンウェブ・テクノロジー(http://www.openweb.co.jp)代表
    Web開発案件募集中!
    一緒にお仕事する仲間も募集中!
    html5j.org(元HTML5 Developers JP)主催
    HTML5とか勉強会主催
    Google API Expert (HTML5)
    Microsoft Most Valuable Professional (IE)
  • 3. 今日のアジェンダ
    オフラインWebアプリケーションとは?
    オフラインでも「読める」アプリのつくりかた
    オフラインでも「書ける」アプリのつくりかた
  • 4. Google Gearsって知ってますか?
  • 5.
  • 6.
  • 7.
  • 8. 結果オーライ♪
  • 9. オフラインWebアプリの開発経験
    「Google Gearsスタートガイド」執筆
    オフラインWebアプリケーションの研究開発を受託
    「DaVinciPad」(自社サービス、現在は終了)開発
  • 10. 今日のアジェンダ
    オフラインWebアプリケーションとは?
    オフラインでも「読める」アプリのつくりかた
    オフラインでも「書ける」アプリのつくりかた
  • 11. オフラインWebアプリケーションとは?
  • 12. オフラインWebアプリケーションとは?
    オフラインでも利用できるWebアプリケーション
  • 13. オフラインでも「利用できる」、とは?
    オフラインでも「読める」・・・こちらはそれほど実装は難しくない
    オフラインでも「書ける」・・・割と面倒だったり、途方もなく難しかったりする。
  • 14. オフラインWebアプリケーションをつくるためのAPI
    アプリケーションキャッシュ
    Web Storage
    Web SQL Database
    Indexed Database API
    File API
  • 15. 今日のアジェンダ
    オフラインWebアプリケーションとは?
    オフラインでも「読める」アプリのつくりかた
    オフラインでも「書ける」アプリのつくりかた
  • 16. 「オフラインでも読める」Webアプリケーションのつくりかた
  • 17. オフラインでも読めるWebアプリケーションのつくりかた
    アプリケーションキャッシュを利用すれば良い。
  • 18. アプリケーションキャッシュとは?
    静的なリソースをキャッシュするのに最適な機能
    Webアプリが必要とするリソースを全てローカルにキャッシュする、という仕様。
    オフラインでも動くという利点以外にも、起動が速いという大きなメリットも。
    IE以外のPCブラウザ、スマホブラウザに実装されている。
  • 19. JS
    CSS
    HTML
    HTML
    JS
    CSS
    HTML
    HTML
    アプリケーションキャッシュ
    オフラインに対応したWebアプリ
    ② リソースを全てダウンロード
    ①Webページにアクセス
    ③ 以降は、ローカル
    のキャッシュを参照
  • 20. キャッシュマニフェスト
    「Webアプリが必要とするリソース」をブラウザが知るための定義ファイル。
    キャッシュの更新チェックは、このファイルの更新チェックによって行われる。
    基本は1行に1URL。
    text/cache-manifestというMIMEタイプで配信
    CACHE MANIFEST
    hello.html
    hello.css
    hello.js
    hello.jpg
  • 21. デモ(?)
  • 22. アプリケーションキャッシュのJavaScript API
    対応ブラウザでは、applicationCacheというグローバル変数を通じてアプリケーションキャッシュの操作を行える。
    キャッシュの進捗状況をチェックできる
    キャッシュ更新を明示的に起動する
  • 23. アプリケーションキャッシュのJavaScript API
    キャッシュの進捗状況をチェックするためのコードは以下のようになる。
    他にも、error, noupdate, cached, updatereadyなどのイベントが存在する。
    // キャッシュ動作が進行中
    applicationCache.addEventListener(
    "progress", function(event) {

    }, false);
  • 24. デモ
  • 25. アプリケーションキャッシュを利用する上での注意点
    キャッシュマニフェストを更新しないと、リロードしてもアプリケーションが更新されない。
    キャッシュマニフェストの管理が少しめんどう。
    キャッシュ容量が限られている。
    スマホ上では、1ドメインあたり10Mとも20Mとも言われている。
    なんかブラウザの挙動が怪しくなる時がある。。
  • 26. 「オフラインでも書ける」Webアプリケーションのつくりかた
  • 27. 基本、そして理想
    ブラウザが備えているローカルのストレージにデータを読み書き
    その後、DBの内容をクラウドと同期
    これって、よく考えるとクラウド以前の
    デスクトップアプリとそんなに変わらない。
    App
  • 28. オフラインWebアプリをつくるためのポイント(1)
    基本は、リッチクライアント+同期機能であると言って良い。
    「Webアプリ」の経験があればあるほど、昔の作り方に引きずられる(経験者談)
  • 29. 利用できるローカルストレージ
    Web Storage
    Web SQL Database
    Indexed Database API
    File API
  • 30. Indexed Database APIとは?(サンプル)
    • ブラウザ組み込みのキー・バリューストア
    • 31. RDBのテーブルにあたるものがオブジェクトストア
    • 32. JavaScriptオブジェクトをオブジェクトストアに対してそのまま読み書きできる。
  • File APIとは?(サンプル)
    • Webアプリからファイルを読み書きするためのAPI。
    • 33. 以下の3仕様からなる。
    • 34. File API・・・ファイルの読み取りや基本的なインターフェースの定義
    • 35. File API:Writer・・・ファイルの書き出し
    • 36. File API:Systems and Directories・・・ファイルシステムとディレクトリ構造
    • 37. オリジンごとに異なる
  • 基本、そして理想
    ブラウザが備えているローカルのストレージにデータを読み書き
    その後、DBの内容をクラウドと同期
    「同期処理」の難易度が
    開発コストに大きく響く。
    App
  • 38. オフラインWebアプリをつくるためのポイント(2)
    完全な双方向同期を実現するのは、かなり難しい。
    フェールセーフ
    更新の衝突
    同期のタイミング
    各データの状態管理
    ネットワーク状態
    ローカルDBのスキーマ管理
    ローカルDBのクォータ

  • 39. 以前実現したアーキテクチャ
    クライアント
    同期するデータの範囲を指定できるようにすることで、検索にも対応
    テーブルA
    UI
    同期エンジン
    ジャーナル
    テーブルB
  • 40. オフラインWebアプリをつくるためのポイント(2)
    仕様面での割り切りが、開発コストに大きく影響する!
    完全な双方向同期を実現するのは、かなり難しい。
    フェールセーフ
    更新の衝突
    同期のタイミング
    各データの状態管理
    ネットワーク状態
    ローカルDBのスキーマ管理
    ローカルDBのクォータ

  • 41. ご清聴ありがとうございました。
    @Shumpei

×