Enviar búsqueda
Cargar
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
•
34 recomendaciones
•
4,471 vistas
Shumpei Shiraishi
Seguir
QCon Tokyo 2012で使用した資料。2012年時点での、Webフロントエンド周りのトレンドを総括するような内容です。
Leer menos
Leer más
Denunciar
Compartir
Denunciar
Compartir
1 de 65
Descargar ahora
Descargar para leer sin conexión
Recomendados
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
yoshikawa_t
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
Web Intents入門
Web Intents入門
Shumpei Shiraishi
Build insider testingwithvs
Build insider testingwithvs
Tomoyuki Iwade
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
Kinuko Yasuda
Data api workshop at Co-Edo
Data api workshop at Co-Edo
Yuji Takayama
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Toru Kawamura
Data APIの基本
Data APIの基本
Hajime Fujimoto
Recomendados
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
yoshikawa_t
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
Web Intents入門
Web Intents入門
Shumpei Shiraishi
Build insider testingwithvs
Build insider testingwithvs
Tomoyuki Iwade
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
Kinuko Yasuda
Data api workshop at Co-Edo
Data api workshop at Co-Edo
Yuji Takayama
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Toru Kawamura
Data APIの基本
Data APIの基本
Hajime Fujimoto
Scotty を利用した "ゆるふわ" Web サービス作成
Scotty を利用した "ゆるふわ" Web サービス作成
krdlab
RESTful #とは RailsスタイルからRESTを学ぼう
RESTful #とは RailsスタイルからRESTを学ぼう
Toru Kawamura
ウェブから情報をあつめる
ウェブから情報をあつめる
Shuhei Iitsuka
Yesod勉強会
Yesod勉強会
Hideyuki Tanaka
Rubyで作るtwitter風webアプリケーション
Rubyで作るtwitter風webアプリケーション
Naoto Hori
リソースモデリングパターンの提案 #sendagayarb
リソースモデリングパターンの提案 #sendagayarb
Toru Kawamura
Workshop1-01
Workshop1-01
mashimonator
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Yasuhiro Onishi
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
Yuki Minakawa
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編
ksimoji
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
第12回rest勉強会 これまでの補足・展望編
第12回rest勉強会 これまでの補足・展望編
ksimoji
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
zaru sakuraba
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
Takayuki Shimizukawa
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
Kosuke Ogawa
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
Shumpei Shiraishi
エフスタ会津 - フロントエンドエンジニアの話 -
エフスタ会津 - フロントエンドエンジニアの話 -
thedesignium Inc.
Más contenido relacionado
La actualidad más candente
Scotty を利用した "ゆるふわ" Web サービス作成
Scotty を利用した "ゆるふわ" Web サービス作成
krdlab
RESTful #とは RailsスタイルからRESTを学ぼう
RESTful #とは RailsスタイルからRESTを学ぼう
Toru Kawamura
ウェブから情報をあつめる
ウェブから情報をあつめる
Shuhei Iitsuka
Yesod勉強会
Yesod勉強会
Hideyuki Tanaka
Rubyで作るtwitter風webアプリケーション
Rubyで作るtwitter風webアプリケーション
Naoto Hori
リソースモデリングパターンの提案 #sendagayarb
リソースモデリングパターンの提案 #sendagayarb
Toru Kawamura
Workshop1-01
Workshop1-01
mashimonator
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Yasuhiro Onishi
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
Yuki Minakawa
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編
ksimoji
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
第12回rest勉強会 これまでの補足・展望編
第12回rest勉強会 これまでの補足・展望編
ksimoji
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
zaru sakuraba
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
Takayuki Shimizukawa
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
Kosuke Ogawa
La actualidad más candente
(20)
Scotty を利用した "ゆるふわ" Web サービス作成
Scotty を利用した "ゆるふわ" Web サービス作成
RESTful #とは RailsスタイルからRESTを学ぼう
RESTful #とは RailsスタイルからRESTを学ぼう
ウェブから情報をあつめる
ウェブから情報をあつめる
Yesod勉強会
Yesod勉強会
Rubyで作るtwitter風webアプリケーション
Rubyで作るtwitter風webアプリケーション
リソースモデリングパターンの提案 #sendagayarb
リソースモデリングパターンの提案 #sendagayarb
Workshop1-01
Workshop1-01
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
HTML5 開発環境の紹介
HTML5 開発環境の紹介
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
第12回rest勉強会 これまでの補足・展望編
第12回rest勉強会 これまでの補足・展望編
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
HTML5 & The Web Platform
HTML5 & The Web Platform
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
iOS 8のWebKit Frameworkでアプリ内ブラウザがどう変わる?
Destacado
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
Shumpei Shiraishi
エフスタ会津 - フロントエンドエンジニアの話 -
エフスタ会津 - フロントエンドエンジニアの話 -
thedesignium Inc.
とりあえず始めるAngular2
とりあえず始めるAngular2
Hayashi Yuichi
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
Hayashi Yuichi
実務導入に向けたAngularの始め方@Angular入門者の会
実務導入に向けたAngularの始め方@Angular入門者の会
Hayashi Yuichi
Dockerとフロントエンド
Dockerとフロントエンド
Hayashi Yuichi
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
フロントエンド開発環境
フロントエンド開発環境
Masaki Kawaguchi
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Yusuke Amano
Angularおじさんの1年
Angularおじさんの1年
Hayashi Yuichi
フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。
Yutaka Horikawa
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
ゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめ
将一 深見
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Hayashi Yuichi
超絶UXを実現したい!小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践 【根性論と精神論編】 先生:桟 義雄
超絶UXを実現したい!小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践 【根性論と精神論編】 先生:桟 義雄
schoowebcampus
Destacado
(18)
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
エフスタ会津 - フロントエンドエンジニアの話 -
エフスタ会津 - フロントエンドエンジニアの話 -
とりあえず始めるAngular2
とりあえず始めるAngular2
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
実務導入に向けたAngularの始め方@Angular入門者の会
実務導入に向けたAngularの始め方@Angular入門者の会
Dockerとフロントエンド
Dockerとフロントエンド
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
フロントエンド開発環境
フロントエンド開発環境
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Angularおじさんの1年
Angularおじさんの1年
フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
ゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめ
React を導入したフロントエンド開発
React を導入したフロントエンド開発
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
超絶UXを実現したい!小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践 【根性論と精神論編】 先生:桟 義雄
超絶UXを実現したい!小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践 【根性論と精神論編】 先生:桟 義雄
Similar a Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
インフラジスティックス・ジャパン株式会社
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
About rails 3
About rails 3
issei126
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
SocketStream入門
SocketStream入門
Kohei Kadowaki
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
Nobuhiro Sue
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
アシアル株式会社
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
HTML5 for IA
HTML5 for IA
Atsushi HASEGAWA, Ph.D.
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Monaca
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
Attractive HTML5
Attractive HTML5
Sho Ito
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
Similar a Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
(20)
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
About rails 3
About rails 3
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
SocketStream入門
SocketStream入門
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Jqm20120804 publish
Jqm20120804 publish
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
HTML5 for IA
HTML5 for IA
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
jQuery Mobileの基礎
jQuery Mobileの基礎
Attractive HTML5
Attractive HTML5
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Más de 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
Más de 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フロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
1.
WEBフロントエンド開発の
最新トレンド HTML5,モバイル,オフライン 2012/4/17 株式会社シーエー・モバイル Web先端技術フェロー ⽩白⽯石俊平
2.
⾃自⼰己紹介 ¨
⽩白⽯石俊平と申します。 ¨ コミュニティhtml5j.org管理理⼈人(会員数4500名 超) ¨ HTML5とか勉強会主催(毎⽉月⼀一回、100名を動員) ¨ Google API Expert (HTML5) ¨ Microsoft Most Valuable Professional (IE9) ¨ Twitter: @Shumpei ¨ 著書:HTML5&API⼊入⾨門
3.
HTML5のパワーが、多くの⼈人に認 識識されつつある。
4.
Nike Air Jordan
2012 ¨ 最近はやりの、スクロールと連動した視差ス クロールをフル活⽤用したサイト
5.
ChronoZoom ¨
全宇宙史に関する様々なリソースを参照でき るWebアプリ
6.
WebGL City ¨
3Dで表現された都市空間を⾃自在に⾶飛び回れる デモ。
7.
開発者の関⼼心も⾮非常に⾼高まってい る。
8.
9.
2012年年中に、HTML5をモバイルアプリに統合し ようと考えている開発者の割合 Appcelerator/IDC
Mobile Developer Report, Q1 2012
10.
なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか? ¨
消極的な理理由 ¤ iOS上ではFlashが動かない ¤ 古いブラウザ(IE6-8)を考慮する必要がない
11.
なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか? ¨
積極的な理理由 ¤ Webアプリでできることが増加の⼀一途を辿ってい る ¤ 様々なデバイスに対応できる ¤ 様々なスクリーンサイズに対応できる
12.
なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか? ¨
積極的な理理由 ¤ Webアプリでできることが増加の⼀一途を辿ってい る n オフラインWebアプリケーション n デバイスの様々な機能にアクセス ¤ 様々なスクリーンサイズに対応できる ¤ 様々なデバイスに対応できる
13.
オフラインWebアプリケーション ¨
HTML/CSS/JavaScript/画像などの、Webアプリが必 要とするリソースを全てローカルにキャッシュすること で実現 o 例例: Titanium Mobile API Document
14.
アプリケーションキャッシュ ¨
キャッシュマニフェストを作成し、html要素の manifest属性に指定することでオフライン化可能 hello.appcache CACHE MANIFEST! ! hello.html! hello.js! hello.css hello.html <!DOCTYPE html>! <html manifest="hello.appcache">! …! </html>!
15.
オフラインWebアプリケーション ¨ オフラインでも編集可能なWebアプリケー
ションを作るには? ¨ →ブラウザ内(ローカルで利利⽤用できる)デー タベースやファイルシステムを利利⽤用する。 ¤ Webアプリのデータの読み書きはローカルのデー タベースやファイルに対して⾏行行う ¤ オンライン時にサーバに送信する
16.
オフラインWebアプリの典型的な アーキテクチャ クライアント UI
同期 エン ジン ローカルストレージ
17.
Indexed Database API ¨
Indexed Database APIは、ブラウザに内蔵さ れたデータベース(デモ)。
18.
Indexed Database APIとは? •
ブラウザ組み込みのキー・バリューストア • RDBのテーブルにあたるものがオブジェクトストア • JavaScriptオブジェクトをオブジェクトストアに対し てそのまま読み書きできる。
19.
IndexedDBのコード例例 ¨
IndexedDBの使い勝⼿手はよくない。。 ¤ →jdb.jsというフレームワーク作りました! var tx =! db.transaction(['Feed'], IDBTransaction.READ_ONLY);! var feedStore = tx.objectStore('Feed');! var cursorReq = feedStore.openCursor();! cursorReq.onsuccess = function() {! var cursor = cursorReq.result;! if (!cursor) {! return;! }! var value = cursor.value;! cursor.continue();! };! cursorReq.onerror = function() {! …! };!
20.
File API ¨
Webアプリによるファイルの読み(書き)も 可能に(デモ)
21.
File APIとは? ¨ Webアプリからファイルを読み書きするため
のAPI。 ¨ 以下の3仕様からなる。 ¤ File API・・・ファイルの読み取りや基本的なイ ンターフェースの定義 ¤ File API:Writer・・・ファイルの書き出し ¤ File API:Systems and Directories・・・ファイ ルシステムとディレクトリ構造
22.
File APIのコード例例 ¨
ファイルの読み取りは、ドラッグ&ドロップ かファイル選択ダイアログに限られている。 element.ondrag = function(event) {! var files = event.dataTransfer.files;! var reader = new FileReader();! reader.onload = function() {! var result = reader.result;! …! };! reader.readAsText(files[0]);! };!
23.
デバイスの様々な機能にアクセス ¨
Geolocation APIによる位置情報へのアクセス (デモ)
24.
Geolocation APIのコード例例 navigator.geolocation.getCurrentPosition(function(pos) {!
var coords = pos.coords;! var latitude = coords.latitude;! var longitude = coords.longitude;! …! });!
25.
デバイスの様々な機能にアクセス ¨
Device Orientation Eventにより、デバイ スの向きや傾きを検知する(デモ)
26.
Device Orientation Eventのコード例例 window.ondeviceorientation
= function(event) {! var alpha = event.alpha;! var beta = event.beta;! var gamma = event.gamma;! …! };!
27.
デバイスの様々な機能にアクセス ¨
カメラやマイクからメディアデータを取り込 む(デモ)
28.
getUserMedia()のコード例例 <video id="v" autoplay></video>! var
video = document.getElementById("v");! navigator.getUserMedia("video", function(stream) {! var url = URL.createObjectURL(stream);! video.src = url;! });!
29.
デバイスの様々な機能にアクセス ¨
他にも、以下のようなことを⾏行行えるようにな る ¤ ⾳音声によるテキスト⼊入⼒力力 ¤ 温度度や光、近接センサーなど、各種センサーを扱 える ネイティブアプリとの機能差が どんどん縮⼩小していく! ¤ バイブレーションを実⾏行行できる ¤ アドレス帳やギャラリーからデータを取得できる ¤ バッテリーの状態にアクセスできる ¤ ネットワークの状態にアクセスできる
30.
とはいえ、 ¨
デバイス間の実装にはかなりのバラつきがあ る
31.
Core Mobile Web
Platform Community Group ¨ FacebookによるモバイルWebの断⽚片化を解決 するW3Cコミュニティグループ
32.
ringmark ¨
http://rng.io
33.
なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか? ¨
積極的な理理由 ¤ Webアプリでできることが増加の⼀一途を辿ってい る ¤ 様々なスクリーンサイズに対応できる ¤ 様々なデバイスに対応できる
34.
なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか? ¨
積極的な理理由 ¤ Webアプリでできることが増加の⼀一途を辿ってい る ¤ 様々なスクリーンサイズに対応できる ¤ 様々なデバイスに対応できる
35.
様々なスクリーンサイズに対応で きる ¨
レスポンシブWebデザインにより、単⼀一の ソースコードで複数のスクリーンサイズに対 応できる
36.
レスポンシブWebデザインの例例
GRAVITATE
37.
レスポンシブWebデザインの例例
CREAN AIR WORKS
38.
レスポンシブWebデザインで使わ れるテクニック ¨ Fluid Grid・・・ピクセルではなく、パーセン
ト指定により幅を決定する ¨ Media Queries・・・デバイスの幅や⾼高さな ど、様々な条件に応じて、CSSを切切り替える 技術
39.
レスポンシブWebデザインのサンプル ¨
コンテンツの幅に応じて、ピクセル指定と% 指定を切切り替える事により、PCサイトも1 ソースで実現できる。
40.
レスポンシブWebデザインのサンプル #wrapper { width:
100% }! #col-left { width: 100%; float: none; }! #col-right { width: 100%; float: none; }! ! @media screen and (min-width: 768px) {! #col-left { width: 30%; float: left; }! #col-right { width: 70%; float: left; }! }! ! @media screen and (min-width: 960px) {! #wrapper { width: 960px; }! }!
41.
レスポンシブWebデザインは万能 ではない ¨ コンテンツや画像のファイルサイズがモバイ
ルにとって⼤大きすぎ、パフォーマンスが劣劣化 することも。 ¨ 画像をレスポンシブにするための⼯工夫や、ス クリーンサイズに合わせてコンテンツをサー バ側で切切り詰めるなどの対処が必要
42.
WebApp Field Guide ¨
オフライン対応、レスポンシブWebデザイン
43.
なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか? ¨
積極的な理理由 ¤ Webアプリでできることが増加の⼀一途を辿ってい る ¤ 様々なスクリーンサイズに対応できる ¤ 様々なデバイスに対応できる
44.
なぜこれほどまでにHTML5への関 ⼼心が⾼高まっているのか? ¨
積極的な理理由 ¤ Webアプリでできることが増加の⼀一途を辿ってい る ¤ 様々なスクリーンサイズに対応できる ¤ 様々なデバイスに対応できる
45.
46.
HTML5のマルチプラットフォーム 性が改めて注⽬目されている ¨
例例:jQuery Mobileがサポートするプラット フォーム(Grade A) Apple iOS 3.2-5.0, Android 2.1-2.3, Android 3.1 (Honeycomb), Android 4.0 (ICS), Windows Phone 7-7.5, Blackberry 6.0, Blackberry 7, Blackberry Playbook (1.0-2.0), Palm WebOS (1.4-2.0), Palm WebOS 3.0, Firebox Mobile (10 Beta), Chrome for Android (Beta), Skyfire 4.1, Opera Mobile 11.5:, Meego 1.2, Samsung bada 2.0, UC Browser, Kindle 3 and Fire, Nook Color 1.4.1, Chrome Desktop 11-17, Safari Desktop 4-5, Firefox Desktop 4-9, Internet Explorer 7-9, Opera Desktop 10-11
47.
jQuery Mobileとは ¨ スマートフォン向けのWebサイト開発フレー
ムワーク ¨ 現在のバージョンは1.1.0
48.
jQuery Mobileの特徴 ¨ ネイティブアプリに近い操作感 ¨
テーマの切切り替えが可能 ¨ JavaScriptの知識識がなくてもそこそこ使える ¨ jQueryに依存している ¨ マルチプラットフォーム
49.
ネイティブアプリに近い操作感 ¨
CSS/JavaScriptを駆使して、「ネイティブア プリに近い」操作感を実現する ¤ UIコンポーネント・・・フォーム要素やリストな ど、⽤用意されているコンポーネントがすべてブラ ウザネイティブのUIに近づけてあり、操作しやす い ¤ ページ遷移がなめらかなアニメーションで実現さ れる(画⾯面のリフレッシュが発⽣生しない) ¨ jQuery Mobileのドキュメントがデモになって いる。
50.
テーマの切切り替えが可能 ¨
jQuery Mobileは、CSSの切切り替えのみで⼤大幅 にUIを変更更することが可能。 ¤ ⾊色合いを変えるだけならば「スウォッチ」の変更更 だけで可能
51.
JavaScriptの知識識がなくてもそこ そこ使える ¨
マークアップに特別な属性(data-*属性)を 加えていくだけで、簡単にスマートフォン対 応サイトを作成できる。
52.
jQueryに依存している ¨ jQueryに強く依存している。 ¨ バージョン1.1でjQuery1.7系に対応。 ¨
少し凝ったことをやるなら、jQueryの知識識が あったほうが良良い。
53.
マルチプラットフォーム ¨
デスクトップを含め、22のプラットフォーム に対して同様のユーザ体験を提供できる ¤ Android 2.1-4.0 ¤ iOS 3.2-5.0 ¨ プログレッシブ・エンハンスメントのアプ ローチにより、古いブラウザに対しても最低 限の情報提供は⾏行行える。
54.
実際にjQuery Mobileを触ってみま しょう。
55.
ボイラープレートコードを貼りつけて みる。(1/7) <!DOCTYPE html> <html> <head>
<meta charset="UTF-8"> <title>jQuery Mobile Live Coding!</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div id="top_page" data-role="page"> <div data-role="header"> <h1>jQuery Mobileをはじめよう!</h1> </div> <div data-role="content"> <p>ページの内容はここに書きます。</p> </div> <div data-role="footer"> <h4>フッター</h4> </div> </div> </body> </html>
56.
サブページを作ってみる(2/7) <div id="sub_page"
data-role="page"> <div data-role="header"> <h1>こどもたち</h1> </div> <div data-role="content"> さぶぺーじです </div> <div data-role="footer"> <h4>フッター</h4> </div> </div> <a href="#sub_page">こどもたち</a>
57.
リンクをボタンに変えてみる(3/7) data-role="button" を要素に付与すると、⾒見見た⽬目がボタンに。
58.
サブページのヘッダに、Homeボタン をつけてみる(4/7) <a href="#top_page">Home</a> class="ui-btn-right"
59.
画⾯面遷移を変更更してみる(5/7) data-transition="slideup"
slide slideup slidedown pop fade flip turn flow
60.
リストを作ってみる(6/7) <ul data-role="listview" class="children_list">
<li><a href="http://goo.gl/vcQd3">こうたろう</a></li> <li><a href="http://goo.gl/p8ltb">ちほ</a></li> </ul>
61.
テーマを変えてみる(7/7) data-theme="e" テーマはa-eの5種類。
62.
jQuery Mobileを使⽤用したサイトは 増加中 ¨ DODA、マイナビバイト、マイナビ派遣、じゃ
らんnetなど、続々と利利⽤用事例例は増加中 ¨ jQuery Mobileを使った国内スマホサイトまと め ¨ ⼤大⼿手によって採⽤用されていることからも、安 ⼼心して使えるフレームワーク。
63.
Appcelerator/IDCの調査には 続きがある。
64.
アプリケーションをHTML5「のみ」で作ろうと する開発者はたった6% Appcelerator/IDC
Mobile Developer Report, Q1 2012
65.
まとめ ¨
今年年モバイル上(のハイブリッドアプリ)で、 HTML5は爆発的に普及する! ¤ その際、jQuery Mobile、オフラインWebアプリ、 レスポンシブWebデザインなどが活⽤用される ¨ 2020年年には、アプリよりもWebが主流流になっ ているかも知れない?(59%がWebを選択) http://japan.cnet.com/news/business/35015489/
Descargar ahora