SlideShare a Scribd company logo
1 of 42
Thought and Practice
of Offline First
オフライン・ファーストの
思想と実践


    株式会社オープンウェブ・テクノロジー
                  白石俊平
自己紹介

• 白石俊平と申します。
• HTML5開発者コミュニティhtml5j.org管理人(会員数5,000
  名超)
• HTML5とか勉強会主催(毎月一回、100名を動員)
• Google API Expert (HTML5)
• Microsoft Most Valuable Professional (IE9)
• Twitter: @Shumpei
• 著書:HTML5&API入門
Offline First – A better HTML5 User Experience
offlinefirst.com
Mobile First Web Second
Responsive Web Design
オフラインWeb時代の到来は・・・


   2014年?
白石俊平: 著
2007年
技術評論社刊
Why "Offline"?
なぜオフラインWebか?
オフライン
        スピード
でも使える




 ユーザビリティの向上
「Offline is a feature」




    Photo by methodship.com
「読む」中心のWebサイトでは


           メリット



 コスト
Google Slidesは
オフライン対応している




     "オフライン時の変更は、
     オンラインに戻った時に同期されます"
「編集」中心のWebアプリでは


 コスト



           メリット
オフラインの活路は
「モバイルアプリ」にあり!
         ネイティブ(Web)アプリ


   モバイルWebアプリ




    ハイブリッドアプリ
企業向けモバイルアプリの
  大半はHTML5に




Gartner Says by 2016, More Than 50 Percent of Mobile Apps Deployed Will be Hybrid
Building Blocks
オフラインWebを実現するAPI
オフラインWebアプリの基本




       Resources



                   Data
オフラインWebを実現するAPI

•   アプリケーションキャッシュ
•   Web Storage
•   Indexed Database API
•   File API
アプリケーションキャッシュ

         CACHE MANIFEST

         index.html
         index.css
         index.js




  ローカル          サーバ
アプリケーションキャッシュ

          CACHE MANIFEST

          index.html
 オフラインで   index.css
          index.js
  利用可能



  ローカル           サーバ
キャッシュマニフェスト


 ファイル先頭に「CACHE MANIFEST」

         1行に1URL

      "#"以降はコメント

    オンラインのアクセス先は
    NETWORKセクションに記述
キャッシュマニフェストが変更されていたら、
  キャッシュのリフレッシュが行われる
キャッシュマニフェストの例
 CACHE MANIFEST

 # v: 201302061503

 hello.html
 hello.css
 hello.js
 hello.jpg

 NETWORK:
 *



 <html manifest="site.appcache">
   ...
 </html>
アプリケーションキャッシュの
    「落とし穴」

  通常のHTTPキャッシュも怠らないで!

    キャッシュ容量は実装依存

    キャッシュは時間がかかる

     開発フローを改善しよう
Web Storage

• ブラウザ組み込みのキー・バリュースト
  ア
• 文字列しか保存できないが、JSONと組み
  合わせれば不便はあまりない。
• グローバル変数localStorageに、キーと
  値を保存するだけなので、非常に使いや
  すい。
Web Storageのコード例

// ストレージに値を保存
localStorage.person = JSON.stringify({
  name: "ご自分のお名前",
  age: ご自分の年齢
});
// 値を確認
alert(localStorage.person);
// オブジェクトに復元
var person = JSON.parse(localStorage.person);
alert(person.name);
alert(person.age);
Web Storageの
 「落とし穴」


文字列しか格納できない

  シンプルすぎる!

  同期APIしかない
Indexed Database API
•   ブラウザ組み込みのキー・バリューストア
•   WebStorageよりも複雑だが高機能
•   RDBのテーブルにあたるものがオブジェクトストア
•   JavaScriptオブジェクトをオブジェクトストアに対して
    そのまま読み書きできる。
Indexed Database API
           のコード例
var req = indexedDB.open(DB_NAME, latestVersion);
req.onsuccess = function(event) {
  db = req.result;
  var tx = db.transaction("FeedStore", "readonly");
  var feedEntryStore = tx.objectStore("FeedStore");
  var curReq = feedEntryStore.openCursor();
  var results = [];
  curReq.onsuccess = function() {
    var cursor = curReq.result;
    if (!cursor) {
      return;
    }
    var entry = cursor.value;
    results.push(entry);
    cursor.continue(); // カーソルを次に進める
  };
};
Indexed Database APIの
     「落とし穴」


    APIがあんまりイケてない

    RDBほどの柔軟性はない!

     SafariとOperaが未実装
File API

• Webアプリからファイルを読み書きする
  ためのAPI。
• 以下の3仕様からなる。
 – File API・・・ファイルの読み取りや基本的な
   インターフェースの定義
 – File API:Writer・・・ファイルの書き出し
 – File API:Systems and Directories・・・ファ
   イルシステムとディレクトリ構造
File API

• Chrome以外の実装が望めない状況。
• Google Docsのオフライン機能は、File
  APIを用いて実現されている。
Foundamental of
Offline First
オフライン・ファーストの勘所
1. アプリケーションとサーバを
       切り離す

     まずオフラインありき。



                 Resources
       サーバは、データを
     JSON APIで公開するのみ

                             Data
2. ラッパーを通じて
     Web APIを呼び出す
button.onclick = function() {
  $.get('/memo', function() {...});
};


            Ajax呼び出しを直接行わない。



button.onclick = function() {
  WebAPI.loadMemo(function() { ... });
};
3. 抽象化したオブジェクトを
   通じてデータを操作する
button.onclick = function() {
  WebAPI.loadMemo(function() { ... });
};


             データソースを抽象化する!



button.onclick = function() {
  Memo.get(function(memo) { ... });
};
User             Data          Web API
  Interface         Controller      Wrapper
Name:
E-mail:

          Submit




          データの永続化                データの同期
Demo
 デモ
Synchronization
データの同期について、
 ひとこと言いたい
同期処理の実装は

     難しい。
同期処理中にオフラインになったら?


   データ変更が衝突したら?


同期量を「必要最小限」に留めるには?
以前実現したアーキテクチャ




クライアント

         テーブ
          ルA
 UI                  同期
               ジャー
                     エン
                ナル
         テーブ         ジン
          ルB
Thank you!
ご清聴ありがとうございました!

    Follow me! @Shumpei

More Related Content

What's hot

Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
 
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかたパララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
 

What's hot (19)

Service workerとwebプッシュ通知
Service workerとwebプッシュ通知Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
 
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
 
Service Workerとの戦い ~ 実装編 ~ #scripty03
Service Workerとの戦い ~ 実装編 ~ #scripty03Service Workerとの戦い ~ 実装編 ~ #scripty03
Service Workerとの戦い ~ 実装編 ~ #scripty03
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会
 
Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】
 
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
 
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
 
React.js + Reduxで作るSPA
React.js + Reduxで作るSPAReact.js + Reduxで作るSPA
React.js + Reduxで作るSPA
 
Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発
 
10分でわかるOpenAPI V3
10分でわかるOpenAPI V310分でわかるOpenAPI V3
10分でわかるOpenAPI V3
 
【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会
 
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツールこんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
 
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発
 
Isomorphic web development with scala and scala.js
Isomorphic web development  with scala and scala.jsIsomorphic web development  with scala and scala.js
Isomorphic web development with scala and scala.js
 
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかたパララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
 
ウェブアプリケーションのパフォーマンスチューニング
ウェブアプリケーションのパフォーマンスチューニングウェブアプリケーションのパフォーマンスチューニング
ウェブアプリケーションのパフォーマンスチューニング
 
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれからReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
 
React+fluxを導入した話
React+fluxを導入した話React+fluxを導入した話
React+fluxを導入した話
 

Similar to オフラインファーストの思想と実践

SharePoint 2010 を使ったクラウドアプリ開発
SharePoint 2010 を使ったクラウドアプリ開発SharePoint 2010 を使ったクラウドアプリ開発
SharePoint 2010 を使ったクラウドアプリ開発
Tusyoshi Matsuzaki
 
クラウド開発に役立つ OSS あれこれ
クラウド開発に役立つ OSS あれこれクラウド開発に役立つ OSS あれこれ
クラウド開発に役立つ OSS あれこれ
Masataka MIZUNO
 

Similar to オフラインファーストの思想と実践 (20)

Workshop1-01
Workshop1-01Workshop1-01
Workshop1-01
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
Workshop1-02
Workshop1-02Workshop1-02
Workshop1-02
 
Workshop1-03
Workshop1-03Workshop1-03
Workshop1-03
 
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
 
SharePoint 2010 を使ったクラウドアプリ開発
SharePoint 2010 を使ったクラウドアプリ開発SharePoint 2010 を使ったクラウドアプリ開発
SharePoint 2010 を使ったクラウドアプリ開発
 
HTML5最新動向
HTML5最新動向HTML5最新動向
HTML5最新動向
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
 
HTML5&API総まくり
HTML5&API総まくりHTML5&API総まくり
HTML5&API総まくり
 
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
 
クラウド開発に役立つ OSS あれこれ
クラウド開発に役立つ OSS あれこれクラウド開発に役立つ OSS あれこれ
クラウド開発に役立つ OSS あれこれ
 
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
 
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
 
20180630 data transformationusinglogicflow
20180630 data transformationusinglogicflow20180630 data transformationusinglogicflow
20180630 data transformationusinglogicflow
 
勉強会資料①
勉強会資料①勉強会資料①
勉強会資料①
 
Azure Cosmos DB を使った高速分散アプリケーションの設計パターン
Azure Cosmos DB を使った高速分散アプリケーションの設計パターンAzure Cosmos DB を使った高速分散アプリケーションの設計パターン
Azure Cosmos DB を使った高速分散アプリケーションの設計パターン
 
AWSによるサーバーレスアーキテクチャ
AWSによるサーバーレスアーキテクチャAWSによるサーバーレスアーキテクチャ
AWSによるサーバーレスアーキテクチャ
 
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
第2回HTML5企業Webシステム開発セミナー hifive紹介資料第2回HTML5企業Webシステム開発セミナー hifive紹介資料
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
 

More from Shumpei Shiraishi

HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
 
この人と結婚していいの?を読んで
この人と結婚していいの?を読んでこの人と結婚していいの?を読んで
この人と結婚していいの?を読んで
Shumpei Shiraishi
 

More from Shumpei Shiraishi (20)

俺的GEB概論(前半)
俺的GEB概論(前半)俺的GEB概論(前半)
俺的GEB概論(前半)
 
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
 
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶjQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
 
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
Angular2実践入門
Angular2実践入門Angular2実践入門
Angular2実践入門
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカ
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
 
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
 
漫☆画太郎論
漫☆画太郎論漫☆画太郎論
漫☆画太郎論
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
 
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
 
はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありき
 
秒速一億円
秒速一億円秒速一億円
秒速一億円
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
 
この人と結婚していいの?を読んで
この人と結婚していいの?を読んでこの人と結婚していいの?を読んで
この人と結婚していいの?を読んで
 
20130921レジュメ2
20130921レジュメ220130921レジュメ2
20130921レジュメ2
 

Recently uploaded

研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
atsushi061452
 

Recently uploaded (14)

Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
 
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
 

オフラインファーストの思想と実践