Suche senden
Hochladen
オフラインWebアプリケーションのつくりかた
•
24 gefällt mir
•
9,534 views
Shumpei Shiraishi
Folgen
オフラインWebアプリケーションを作る上での基本的なAPIとアーキテクチャについて解説しました。 2011/10/17のJJUG CCCで使用したスライドです。
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 36
Empfohlen
診断ツールの使い方(Owasp zapの場合)
診断ツールの使い方(Owasp zapの場合)
shingo inafuku
「なにをどこまでやれば?」OWASP SAMMが導く開発セキュリティ強化戦略
「なにをどこまでやれば?」OWASP SAMMが導く開発セキュリティ強化戦略
Riotaro OKADA
「龍が如く7 光と闇の行方」の自動テスト活用事例とテスト自動化チーム(仮)による若手育成の取り組みについて
「龍が如く7 光と闇の行方」の自動テスト活用事例とテスト自動化チーム(仮)による若手育成の取り組みについて
SEGADevTech
SWEBOKにみるソフトウェアエンジニアリングの全体、および、 つながる時代のソフトウェアモデリング&品質
SWEBOKにみるソフトウェアエンジニアリングの全体、および、 つながる時代のソフトウェアモデリング&品質
Hironori Washizaki
オープンソースライセンスの基礎と実務
オープンソースライセンスの基礎と実務
Yutaka Kachi
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
shinjiigarashi
C#メタプログラミング概略 in 2021
C#メタプログラミング概略 in 2021
Atsushi Nakamura
デプロイメントパイプラインって何?
デプロイメントパイプラインって何?
ke-m kamekoopa
Empfohlen
診断ツールの使い方(Owasp zapの場合)
診断ツールの使い方(Owasp zapの場合)
shingo inafuku
「なにをどこまでやれば?」OWASP SAMMが導く開発セキュリティ強化戦略
「なにをどこまでやれば?」OWASP SAMMが導く開発セキュリティ強化戦略
Riotaro OKADA
「龍が如く7 光と闇の行方」の自動テスト活用事例とテスト自動化チーム(仮)による若手育成の取り組みについて
「龍が如く7 光と闇の行方」の自動テスト活用事例とテスト自動化チーム(仮)による若手育成の取り組みについて
SEGADevTech
SWEBOKにみるソフトウェアエンジニアリングの全体、および、 つながる時代のソフトウェアモデリング&品質
SWEBOKにみるソフトウェアエンジニアリングの全体、および、 つながる時代のソフトウェアモデリング&品質
Hironori Washizaki
オープンソースライセンスの基礎と実務
オープンソースライセンスの基礎と実務
Yutaka Kachi
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
shinjiigarashi
C#メタプログラミング概略 in 2021
C#メタプログラミング概略 in 2021
Atsushi Nakamura
デプロイメントパイプラインって何?
デプロイメントパイプラインって何?
ke-m kamekoopa
Apache Hadoopの新機能Ozoneの現状
Apache Hadoopの新機能Ozoneの現状
NTT DATA OSS Professional Services
LINEの新卒採用試験 ズバリ問題解説
LINEの新卒採用試験 ズバリ問題解説
LINE Corporation
あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?
Minoru Yokomichi
ChatGPTは思ったほど賢くない
ChatGPTは思ったほど賢くない
Carnot Inc.
自動でバグを見つける!プログラム解析と動的バイナリ計装
自動でバグを見つける!プログラム解析と動的バイナリ計装
uchan_nos
backlogsでもCI/CDする夢を見る
backlogsでもCI/CDする夢を見る
Takeru Maehara
技術者として抑えておきたい Power BI アーキテクチャ
技術者として抑えておきたい Power BI アーキテクチャ
Yugo Shimizu
全文検索サーバ Fess 〜 全文検索システム構築時の悩みどころ
全文検索サーバ Fess 〜 全文検索システム構築時の悩みどころ
Shinsuke Sugaya
What is Enterprise Agile
What is Enterprise Agile
Kenji Hiranabe
Snowflake Architecture and Performance
Snowflake Architecture and Performance
Mineaki Motohashi
チケット駆動開発の解説~タスク管理からプロセス改善へ
チケット駆動開発の解説~タスク管理からプロセス改善へ
akipii Oga
ソフトウェア開発を加速させるリーン開発の原則 公開用
ソフトウェア開発を加速させるリーン開発の原則 公開用
ESM SEC
CEDEC2015_スマホゲーム開発を支えろ!〜汗と涙のQAエンジニアリング〜
CEDEC2015_スマホゲーム開発を支えろ!〜汗と涙のQAエンジニアリング〜
gree_tech
データモデルについて知っておくべき7つのこと 〜NoSQLに手を出す前に〜
データモデルについて知っておくべき7つのこと 〜NoSQLに手を出す前に〜
Mikiya Okuno
Fiberの使いどころ
Fiberの使いどころ
Tomoya Kawanishi
JaSSTよいテストプロセスの作り方
JaSSTよいテストプロセスの作り方
崇 山﨑
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
shinjiigarashi
エンジニア必見!Sreへの第一歩
エンジニア必見!Sreへの第一歩
Takuya Tezuka
VarnishCache入門Rev2.1
VarnishCache入門Rev2.1
Iwana Chan
Sonar qubeでちょっと楽しい静的解析
Sonar qubeでちょっと楽しい静的解析
政雄 金森
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
yoshikawa_t
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
Weitere ähnliche Inhalte
Was ist angesagt?
Apache Hadoopの新機能Ozoneの現状
Apache Hadoopの新機能Ozoneの現状
NTT DATA OSS Professional Services
LINEの新卒採用試験 ズバリ問題解説
LINEの新卒採用試験 ズバリ問題解説
LINE Corporation
あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?
Minoru Yokomichi
ChatGPTは思ったほど賢くない
ChatGPTは思ったほど賢くない
Carnot Inc.
自動でバグを見つける!プログラム解析と動的バイナリ計装
自動でバグを見つける!プログラム解析と動的バイナリ計装
uchan_nos
backlogsでもCI/CDする夢を見る
backlogsでもCI/CDする夢を見る
Takeru Maehara
技術者として抑えておきたい Power BI アーキテクチャ
技術者として抑えておきたい Power BI アーキテクチャ
Yugo Shimizu
全文検索サーバ Fess 〜 全文検索システム構築時の悩みどころ
全文検索サーバ Fess 〜 全文検索システム構築時の悩みどころ
Shinsuke Sugaya
What is Enterprise Agile
What is Enterprise Agile
Kenji Hiranabe
Snowflake Architecture and Performance
Snowflake Architecture and Performance
Mineaki Motohashi
チケット駆動開発の解説~タスク管理からプロセス改善へ
チケット駆動開発の解説~タスク管理からプロセス改善へ
akipii Oga
ソフトウェア開発を加速させるリーン開発の原則 公開用
ソフトウェア開発を加速させるリーン開発の原則 公開用
ESM SEC
CEDEC2015_スマホゲーム開発を支えろ!〜汗と涙のQAエンジニアリング〜
CEDEC2015_スマホゲーム開発を支えろ!〜汗と涙のQAエンジニアリング〜
gree_tech
データモデルについて知っておくべき7つのこと 〜NoSQLに手を出す前に〜
データモデルについて知っておくべき7つのこと 〜NoSQLに手を出す前に〜
Mikiya Okuno
Fiberの使いどころ
Fiberの使いどころ
Tomoya Kawanishi
JaSSTよいテストプロセスの作り方
JaSSTよいテストプロセスの作り方
崇 山﨑
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
shinjiigarashi
エンジニア必見!Sreへの第一歩
エンジニア必見!Sreへの第一歩
Takuya Tezuka
VarnishCache入門Rev2.1
VarnishCache入門Rev2.1
Iwana Chan
Sonar qubeでちょっと楽しい静的解析
Sonar qubeでちょっと楽しい静的解析
政雄 金森
Was ist angesagt?
(20)
Apache Hadoopの新機能Ozoneの現状
Apache Hadoopの新機能Ozoneの現状
LINEの新卒採用試験 ズバリ問題解説
LINEの新卒採用試験 ズバリ問題解説
あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?
ChatGPTは思ったほど賢くない
ChatGPTは思ったほど賢くない
自動でバグを見つける!プログラム解析と動的バイナリ計装
自動でバグを見つける!プログラム解析と動的バイナリ計装
backlogsでもCI/CDする夢を見る
backlogsでもCI/CDする夢を見る
技術者として抑えておきたい Power BI アーキテクチャ
技術者として抑えておきたい Power BI アーキテクチャ
全文検索サーバ Fess 〜 全文検索システム構築時の悩みどころ
全文検索サーバ Fess 〜 全文検索システム構築時の悩みどころ
What is Enterprise Agile
What is Enterprise Agile
Snowflake Architecture and Performance
Snowflake Architecture and Performance
チケット駆動開発の解説~タスク管理からプロセス改善へ
チケット駆動開発の解説~タスク管理からプロセス改善へ
ソフトウェア開発を加速させるリーン開発の原則 公開用
ソフトウェア開発を加速させるリーン開発の原則 公開用
CEDEC2015_スマホゲーム開発を支えろ!〜汗と涙のQAエンジニアリング〜
CEDEC2015_スマホゲーム開発を支えろ!〜汗と涙のQAエンジニアリング〜
データモデルについて知っておくべき7つのこと 〜NoSQLに手を出す前に〜
データモデルについて知っておくべき7つのこと 〜NoSQLに手を出す前に〜
Fiberの使いどころ
Fiberの使いどころ
JaSSTよいテストプロセスの作り方
JaSSTよいテストプロセスの作り方
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
モダン PHP テクニック 12 選 ―PsalmとPHP 8.1で今はこんなこともできる!―
エンジニア必見!Sreへの第一歩
エンジニア必見!Sreへの第一歩
VarnishCache入門Rev2.1
VarnishCache入門Rev2.1
Sonar qubeでちょっと楽しい静的解析
Sonar qubeでちょっと楽しい静的解析
Andere mochten auch
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
yoshikawa_t
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門
Fumio SAGAWA
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
HTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップ
Shumpei Shiraishi
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
質問応答システム入門
質問応答システム入門
Hiroyoshi Komatsu
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
Andere mochten auch
(17)
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
オフラインファーストの思想と実践
オフラインファーストの思想と実践
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
HTML5開発最前線
HTML5開発最前線
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
HTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップ
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
jQuery Mobile is not dead!
jQuery Mobile is not dead!
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
質問応答システム入門
質問応答システム入門
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
Ähnlich wie オフラインWebアプリケーションのつくりかた
HTML5 のお話
HTML5 のお話
tomo_masakura
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
Monaca
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
Masakazu Muraoka
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
Osamu Monoe
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
Monaca
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
Masakazu Muraoka
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
Herlockサービス紹介
Herlockサービス紹介
SONICMOOV CO.,LTD.
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
アシアル株式会社
HTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionic
Kenichi Kanai
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
Akihiro Sugiyama
Mochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミット
Katsuaki Sato
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Masakazu Muraoka
フロントエンドエンジニアが知るべきFirebaseの世界
フロントエンドエンジニアが知るべきFirebaseの世界
Kenjiro Kubota
デブサミ2011 LT大会【17-E-7】appengine ja night
デブサミ2011 LT大会【17-E-7】appengine ja night
bluerabbit777jp
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
Monaca
Platform.html5
Platform.html5
Masakazu Muraoka
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Masakazu Muraoka
Webエンジニアのサバイバル英会話
Webエンジニアのサバイバル英会話
Jumpei iwamura
Ähnlich wie オフラインWebアプリケーションのつくりかた
(20)
HTML5 のお話
HTML5 のお話
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
Herlockサービス紹介
Herlockサービス紹介
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionic
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
Mochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミット
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
フロントエンドエンジニアが知るべきFirebaseの世界
フロントエンドエンジニアが知るべきFirebaseの世界
デブサミ2011 LT大会【17-E-7】appengine ja night
デブサミ2011 LT大会【17-E-7】appengine ja night
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
Platform.html5
Platform.html5
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Webエンジニアのサバイバル英会話
Webエンジニアのサバイバル英会話
Mehr von Shumpei Shiraishi
俺的GEB概論(前半)
俺的GEB概論(前半)
Shumpei Shiraishi
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
Shumpei Shiraishi
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Shumpei Shiraishi
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
Shumpei Shiraishi
変身×フランツ・カフカ
変身×フランツ・カフカ
Shumpei Shiraishi
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
Shumpei Shiraishi
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
Shumpei Shiraishi
漫☆画太郎論
漫☆画太郎論
Shumpei Shiraishi
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
Shumpei Shiraishi
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
Shumpei Shiraishi
はじめにことばありき
はじめにことばありき
Shumpei Shiraishi
秒速一億円
秒速一億円
Shumpei Shiraishi
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
この人と結婚していいの?を読んで
この人と結婚していいの?を読んで
Shumpei Shiraishi
20130921レジュメ2
20130921レジュメ2
Shumpei Shiraishi
Mehr von Shumpei Shiraishi
(20)
俺的GEB概論(前半)
俺的GEB概論(前半)
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Angular2実践入門
Angular2実践入門
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
変身×フランツ・カフカ
変身×フランツ・カフカ
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
漫☆画太郎論
漫☆画太郎論
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
はじめにことばありき
はじめにことばありき
秒速一億円
秒速一億円
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
この人と結婚していいの?を読んで
この人と結婚していいの?を読んで
20130921レジュメ2
20130921レジュメ2
オフラインWebアプリケーションのつくりかた
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.
31.
RDBのテーブルにあたるものがオブジェクトストア
32.
33.
以下の3仕様からなる。
34.
File API・・・ファイルの読み取りや基本的なインターフェースの定義
35.
File API:Writer・・・ファイルの書き出し
36.
File API:Systems and
Directories・・・ファイルシステムとディレクトリ構造
37.
38.
オフラインWebアプリをつくるためのポイント(2) 完全な双方向同期を実現するのは、かなり難しい。 フェールセーフ
更新の衝突 同期のタイミング 各データの状態管理 ネットワーク状態 ローカルDBのスキーマ管理 ローカルDBのクォータ …
39.
以前実現したアーキテクチャ クライアント 同期するデータの範囲を指定できるようにすることで、検索にも対応
テーブルA UI 同期エンジン ジャーナル テーブルB
40.
オフラインWebアプリをつくるためのポイント(2) 仕様面での割り切りが、開発コストに大きく影響する! 完全な双方向同期を実現するのは、かなり難しい。
フェールセーフ 更新の衝突 同期のタイミング 各データの状態管理 ネットワーク状態 ローカルDBのスキーマ管理 ローカルDBのクォータ …
41.
ご清聴ありがとうございました。 @Shumpei