SlideShare a Scribd company logo

Mobile Web

Mozilla Workshop @ Nagano

1 of 46
Mobile Web技術

   Makoto Kato
   Mozilla Japan
自己紹介


•   名前: 加藤 誠 / @makoto_kato
•   Firefox / Mobile / Thunderbird committer
    •   x64 / arm
    •   etc
Agenda



•   Mobile Web Browser?
•   APIs for Mobile / Devices
MOBILE WEB BROWSER?
Mobile Web Browser?

•   モバイルデバイス用のWebブラウザには2種類が
    存在する
    •   サーバーで描画して、クライアントに描画結果
        を転送
    •   クライアントですべてを行う(=デスクトップ用
        ブラウザと同じ)
サーバー側で描画
                  Web Server

HTMLの解析、描画をサー
バー側で行う              Internet
クライアント側はその結果
(画像)をサーバーから受け取   Rendering Server
り、描画


                     Mobile

Recommended

WebIntents × SNS
WebIntents × SNSWebIntents × SNS
WebIntents × SNSRyo Ito
 
Azure Service Fabric概要
Azure Service Fabric概要Azure Service Fabric概要
Azure Service Fabric概要Daiyu Hatakeyama
 
Data api workshop at Co-Edo
Data api workshop at Co-EdoData api workshop at Co-Edo
Data api workshop at Co-EdoYuji Takayama
 
Scala@SmartNews AdFrontend を Scala で書いた話
Scala@SmartNews AdFrontend を Scala で書いた話Scala@SmartNews AdFrontend を Scala で書いた話
Scala@SmartNews AdFrontend を Scala で書いた話Keiji Muraishi
 
AWS Black Belt Techシリーズ Amazon Cognito / Amazon Mobile Analytics
AWS Black Belt Techシリーズ  Amazon Cognito / Amazon Mobile AnalyticsAWS Black Belt Techシリーズ  Amazon Cognito / Amazon Mobile Analytics
AWS Black Belt Techシリーズ Amazon Cognito / Amazon Mobile AnalyticsAmazon Web Services Japan
 
JAZUG TOKYO NIGHT 2019-01 AADでユーザ管理しよう
JAZUG TOKYO NIGHT 2019-01 AADでユーザ管理しようJAZUG TOKYO NIGHT 2019-01 AADでユーザ管理しよう
JAZUG TOKYO NIGHT 2019-01 AADでユーザ管理しようTsubasa Yoshino
 

More Related Content

What's hot

Azure Service Fabric 概要
Azure Service Fabric 概要Azure Service Fabric 概要
Azure Service Fabric 概要Daiyu Hatakeyama
 
CognitoとSDKでサーバーレスなマルチデバイスアプリを構築する
CognitoとSDKでサーバーレスなマルチデバイスアプリを構築するCognitoとSDKでサーバーレスなマルチデバイスアプリを構築する
CognitoとSDKでサーバーレスなマルチデバイスアプリを構築するHiroyoshi Miyazaki
 
Data API + AWS = (CMS どうでしょう 札幌編)
Data API + AWS =  (CMS どうでしょう 札幌編)Data API + AWS =  (CMS どうでしょう 札幌編)
Data API + AWS = (CMS どうでしょう 札幌編)Yuji Takayama
 
雑談会議 Azure AD B2C 第一回
雑談会議 Azure AD B2C 第一回雑談会議 Azure AD B2C 第一回
雑談会議 Azure AD B2C 第一回Tsubasa Yoshino
 
NET 開発者のための Azure Service Fabric と、 Azure Container Service - 何が違うねん? -
NET 開発者のための Azure Service Fabric と、 Azure Container Service - 何が違うねん? -NET 開発者のための Azure Service Fabric と、 Azure Container Service - 何が違うねん? -
NET 開発者のための Azure Service Fabric と、 Azure Container Service - 何が違うねん? -Daiyu Hatakeyama
 
AWSを利用したアプリ開発
AWSを利用したアプリ開発AWSを利用したアプリ開発
AWSを利用したアプリ開発Fixel Inc.
 
サーバレスを可能にするAWSサービスの概要
サーバレスを可能にするAWSサービスの概要サーバレスを可能にするAWSサービスの概要
サーバレスを可能にするAWSサービスの概要Fixel Inc.
 
Aws lambda & amazon api gateway入門
Aws lambda &  amazon api gateway入門Aws lambda &  amazon api gateway入門
Aws lambda & amazon api gateway入門Yutaka Kajiwara
 
初めての Data API CMS どうでしょう - 仙台編 -
初めての Data API   CMS どうでしょう - 仙台編 -初めての Data API   CMS どうでしょう - 仙台編 -
初めての Data API CMS どうでしょう - 仙台編 -Yuji Takayama
 
Azure Container Services and Microservices design pattern
Azure Container Services and Microservices design patternAzure Container Services and Microservices design pattern
Azure Container Services and Microservices design patternYoshio Terada
 
Engineer is Hero !! DevOps MSA and AI
Engineer is Hero !! DevOps MSA and AIEngineer is Hero !! DevOps MSA and AI
Engineer is Hero !! DevOps MSA and AIYoshio Terada
 
Big DataとContainerとStream - AWSでのクラスタ構成とストリーム処理 -
Big DataとContainerとStream - AWSでのクラスタ構成とストリーム処理 -Big DataとContainerとStream - AWSでのクラスタ構成とストリーム処理 -
Big DataとContainerとStream - AWSでのクラスタ構成とストリーム処理 -Amazon Web Services Japan
 
PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530
PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530
PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530崇之 清水
 

What's hot (20)

Azure Service Fabric 概要
Azure Service Fabric 概要Azure Service Fabric 概要
Azure Service Fabric 概要
 
20120609
2012060920120609
20120609
 
CognitoとSDKでサーバーレスなマルチデバイスアプリを構築する
CognitoとSDKでサーバーレスなマルチデバイスアプリを構築するCognitoとSDKでサーバーレスなマルチデバイスアプリを構築する
CognitoとSDKでサーバーレスなマルチデバイスアプリを構築する
 
20100313
2010031320100313
20100313
 
Data API + AWS = (CMS どうでしょう 札幌編)
Data API + AWS =  (CMS どうでしょう 札幌編)Data API + AWS =  (CMS どうでしょう 札幌編)
Data API + AWS = (CMS どうでしょう 札幌編)
 
雑談会議 Azure AD B2C 第一回
雑談会議 Azure AD B2C 第一回雑談会議 Azure AD B2C 第一回
雑談会議 Azure AD B2C 第一回
 
NET 開発者のための Azure Service Fabric と、 Azure Container Service - 何が違うねん? -
NET 開発者のための Azure Service Fabric と、 Azure Container Service - 何が違うねん? -NET 開発者のための Azure Service Fabric と、 Azure Container Service - 何が違うねん? -
NET 開発者のための Azure Service Fabric と、 Azure Container Service - 何が違うねん? -
 
20111203
2011120320111203
20111203
 
AWSを利用したアプリ開発
AWSを利用したアプリ開発AWSを利用したアプリ開発
AWSを利用したアプリ開発
 
サーバレスを可能にするAWSサービスの概要
サーバレスを可能にするAWSサービスの概要サーバレスを可能にするAWSサービスの概要
サーバレスを可能にするAWSサービスの概要
 
Aws lambda & amazon api gateway入門
Aws lambda &  amazon api gateway入門Aws lambda &  amazon api gateway入門
Aws lambda & amazon api gateway入門
 
Lt7 SPA
Lt7 SPALt7 SPA
Lt7 SPA
 
Cognito User Pool
Cognito User PoolCognito User Pool
Cognito User Pool
 
Azure Data Platform
Azure Data PlatformAzure Data Platform
Azure Data Platform
 
初めての Data API CMS どうでしょう - 仙台編 -
初めての Data API   CMS どうでしょう - 仙台編 -初めての Data API   CMS どうでしょう - 仙台編 -
初めての Data API CMS どうでしょう - 仙台編 -
 
Azure Container Services and Microservices design pattern
Azure Container Services and Microservices design patternAzure Container Services and Microservices design pattern
Azure Container Services and Microservices design pattern
 
Engineer is Hero !! DevOps MSA and AI
Engineer is Hero !! DevOps MSA and AIEngineer is Hero !! DevOps MSA and AI
Engineer is Hero !! DevOps MSA and AI
 
Big DataとContainerとStream - AWSでのクラスタ構成とストリーム処理 -
Big DataとContainerとStream - AWSでのクラスタ構成とストリーム処理 -Big DataとContainerとStream - AWSでのクラスタ構成とストリーム処理 -
Big DataとContainerとStream - AWSでのクラスタ構成とストリーム処理 -
 
AWS CLIでAssumeRole
AWS CLIでAssumeRoleAWS CLIでAssumeRole
AWS CLIでAssumeRole
 
PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530
PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530
PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530
 

Viewers also liked

e10sとアプリ間通信
e10sとアプリ間通信e10sとアプリ間通信
e10sとアプリ間通信Makoto Kato
 
Firefox mobile for android internals
Firefox mobile for android internalsFirefox mobile for android internals
Firefox mobile for android internalsMakoto Kato
 
Mozillaのビルドインフラ
MozillaのビルドインフラMozillaのビルドインフラ
MozillaのビルドインフラMakoto Kato
 
Firefox 4 with SVG
Firefox 4 with SVGFirefox 4 with SVG
Firefox 4 with SVGMakoto Kato
 
Active scripting
Active scriptingActive scripting
Active scriptingMakoto Kato
 
AWSでGPUも安く大量に使い倒せ
AWSでGPUも安く大量に使い倒せ AWSでGPUも安く大量に使い倒せ
AWSでGPUも安く大量に使い倒せ Yasuhiro Matsuo
 

Viewers also liked (9)

Think.next
Think.nextThink.next
Think.next
 
e10sとアプリ間通信
e10sとアプリ間通信e10sとアプリ間通信
e10sとアプリ間通信
 
Firefox mobile for android internals
Firefox mobile for android internalsFirefox mobile for android internals
Firefox mobile for android internals
 
Mozillaのビルドインフラ
MozillaのビルドインフラMozillaのビルドインフラ
Mozillaのビルドインフラ
 
Firefox 4 with SVG
Firefox 4 with SVGFirefox 4 with SVG
Firefox 4 with SVG
 
Emoji
EmojiEmoji
Emoji
 
Raindrop
RaindropRaindrop
Raindrop
 
Active scripting
Active scriptingActive scripting
Active scripting
 
AWSでGPUも安く大量に使い倒せ
AWSでGPUも安く大量に使い倒せ AWSでGPUも安く大量に使い倒せ
AWSでGPUも安く大量に使い倒せ
 

Similar to Mobile Web

Getting started with Handoff
Getting started with HandoffGetting started with Handoff
Getting started with HandoffYuichi Yoshida
 
2010-11-02 第1回クラウドコンピューティング基盤シンポジウム(品川)
2010-11-02 第1回クラウドコンピューティング基盤シンポジウム(品川)2010-11-02 第1回クラウドコンピューティング基盤シンポジウム(品川)
2010-11-02 第1回クラウドコンピューティング基盤シンポジウム(品川)Takahiro Shinagawa
 
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Akira Inoue
 
WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWebWebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWebKensaku Komatsu
 
Microsoft Azure Mobile Serviceによるアプリ構築
Microsoft Azure Mobile Serviceによるアプリ構築Microsoft Azure Mobile Serviceによるアプリ構築
Microsoft Azure Mobile Serviceによるアプリ構築Nobuaki Aoki
 
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜Kensaku Komatsu
 
次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説kumo2010
 
JITA(日本産業技術振興協会)講演会資料:クラウドコンピューティングにおける仮想マシンのセキュリティ
JITA(日本産業技術振興協会)講演会資料:クラウドコンピューティングにおける仮想マシンのセキュリティJITA(日本産業技術振興協会)講演会資料:クラウドコンピューティングにおける仮想マシンのセキュリティ
JITA(日本産業技術振興協会)講演会資料:クラウドコンピューティングにおける仮想マシンのセキュリティKuniyasu Suzaki
 
App012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_をApp012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_をTech Summit 2016
 
App012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_をApp012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_をTech Summit 2016
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインShumpei Shiraishi
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...Naoya Ito
 
[AWS Summit 2012] ソリューションセッション#1 モバイルxクラウドシステム構築のベストプラクティス
[AWS Summit 2012] ソリューションセッション#1 モバイルxクラウドシステム構築のベストプラクティス[AWS Summit 2012] ソリューションセッション#1 モバイルxクラウドシステム構築のベストプラクティス
[AWS Summit 2012] ソリューションセッション#1 モバイルxクラウドシステム構築のベストプラクティスAmazon Web Services Japan
 
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発Naoki (Neo) SATO
 

Similar to Mobile Web (20)

Getting started with Handoff
Getting started with HandoffGetting started with Handoff
Getting started with Handoff
 
HTML5&API総まくり
HTML5&API総まくりHTML5&API総まくり
HTML5&API総まくり
 
2010-11-02 第1回クラウドコンピューティング基盤シンポジウム(品川)
2010-11-02 第1回クラウドコンピューティング基盤シンポジウム(品川)2010-11-02 第1回クラウドコンピューティング基盤シンポジウム(品川)
2010-11-02 第1回クラウドコンピューティング基盤シンポジウム(品川)
 
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
 
WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWebWebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWeb
 
Microsoft Azure Mobile Serviceによるアプリ構築
Microsoft Azure Mobile Serviceによるアプリ構築Microsoft Azure Mobile Serviceによるアプリ構築
Microsoft Azure Mobile Serviceによるアプリ構築
 
Node platforms
Node platformsNode platforms
Node platforms
 
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
 
次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説
 
JITA(日本産業技術振興協会)講演会資料:クラウドコンピューティングにおける仮想マシンのセキュリティ
JITA(日本産業技術振興協会)講演会資料:クラウドコンピューティングにおける仮想マシンのセキュリティJITA(日本産業技術振興協会)講演会資料:クラウドコンピューティングにおける仮想マシンのセキュリティ
JITA(日本産業技術振興協会)講演会資料:クラウドコンピューティングにおける仮想マシンのセキュリティ
 
10th jan 2013_miyazaki
10th jan 2013_miyazaki10th jan 2013_miyazaki
10th jan 2013_miyazaki
 
App012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_をApp012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_を
 
App012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_をApp012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_を
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
20060419
2006041920060419
20060419
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
 
20080524
2008052420080524
20080524
 
[AWS Summit 2012] ソリューションセッション#1 モバイルxクラウドシステム構築のベストプラクティス
[AWS Summit 2012] ソリューションセッション#1 モバイルxクラウドシステム構築のベストプラクティス[AWS Summit 2012] ソリューションセッション#1 モバイルxクラウドシステム構築のベストプラクティス
[AWS Summit 2012] ソリューションセッション#1 モバイルxクラウドシステム構築のベストプラクティス
 
勉強会資料①
勉強会資料①勉強会資料①
勉強会資料①
 
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
 

More from Makoto Kato

Firefox OSのアーキテクチャと構成技術
Firefox OSのアーキテクチャと構成技術Firefox OSのアーキテクチャと構成技術
Firefox OSのアーキテクチャと構成技術Makoto Kato
 
Openness, Innovation and Opptunity
Openness, Innovation and OpptunityOpenness, Innovation and Opptunity
Openness, Innovation and OpptunityMakoto Kato
 
Firefox 4 and Mobile
Firefox 4 and MobileFirefox 4 and Mobile
Firefox 4 and MobileMakoto Kato
 
Firefox for mobile
Firefox for mobileFirefox for mobile
Firefox for mobileMakoto Kato
 
Firefoxの開発プロセス
Firefoxの開発プロセスFirefoxの開発プロセス
Firefoxの開発プロセスMakoto Kato
 
ブラウザの歴史
ブラウザの歴史ブラウザの歴史
ブラウザの歴史Makoto Kato
 
CSS3の最新事情
CSS3の最新事情CSS3の最新事情
CSS3の最新事情Makoto Kato
 
FirefoxとMozillaでのSVGの取り組み
FirefoxとMozillaでのSVGの取り組みFirefoxとMozillaでのSVGの取り組み
FirefoxとMozillaでのSVGの取り組みMakoto Kato
 
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and laterWeb Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and laterMakoto Kato
 
Thunderbird 3のご紹介と企業に求められるカスタマイズ
Thunderbird 3のご紹介と企業に求められるカスタマイズThunderbird 3のご紹介と企業に求められるカスタマイズ
Thunderbird 3のご紹介と企業に求められるカスタマイズMakoto Kato
 
js-ctypes - ネイティブコードを呼び出す新しいカタチ
js-ctypes - ネイティブコードを呼び出す新しいカタチjs-ctypes - ネイティブコードを呼び出す新しいカタチ
js-ctypes - ネイティブコードを呼び出す新しいカタチMakoto Kato
 

More from Makoto Kato (16)

Moz2D
Moz2DMoz2D
Moz2D
 
Firefox OSのアーキテクチャと構成技術
Firefox OSのアーキテクチャと構成技術Firefox OSのアーキテクチャと構成技術
Firefox OSのアーキテクチャと構成技術
 
Openness, Innovation and Opptunity
Openness, Innovation and OpptunityOpenness, Innovation and Opptunity
Openness, Innovation and Opptunity
 
Firefox Mobile
Firefox MobileFirefox Mobile
Firefox Mobile
 
Firefox 4 and Mobile
Firefox 4 and MobileFirefox 4 and Mobile
Firefox 4 and Mobile
 
Mobile addon
Mobile addonMobile addon
Mobile addon
 
keep it real
keep it realkeep it real
keep it real
 
Firefox for mobile
Firefox for mobileFirefox for mobile
Firefox for mobile
 
Firefoxの開発プロセス
Firefoxの開発プロセスFirefoxの開発プロセス
Firefoxの開発プロセス
 
"Open"
"Open""Open"
"Open"
 
ブラウザの歴史
ブラウザの歴史ブラウザの歴史
ブラウザの歴史
 
CSS3の最新事情
CSS3の最新事情CSS3の最新事情
CSS3の最新事情
 
FirefoxとMozillaでのSVGの取り組み
FirefoxとMozillaでのSVGの取り組みFirefoxとMozillaでのSVGの取り組み
FirefoxとMozillaでのSVGの取り組み
 
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and laterWeb Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
 
Thunderbird 3のご紹介と企業に求められるカスタマイズ
Thunderbird 3のご紹介と企業に求められるカスタマイズThunderbird 3のご紹介と企業に求められるカスタマイズ
Thunderbird 3のご紹介と企業に求められるカスタマイズ
 
js-ctypes - ネイティブコードを呼び出す新しいカタチ
js-ctypes - ネイティブコードを呼び出す新しいカタチjs-ctypes - ネイティブコードを呼び出す新しいカタチ
js-ctypes - ネイティブコードを呼び出す新しいカタチ
 

Recently uploaded

00001_test_automation_portfolio_20240227
00001_test_automation_portfolio_2024022700001_test_automation_portfolio_20240227
00001_test_automation_portfolio_20240227ssuserf8ea02
 
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdfHarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdfMatsushita Laboratory
 
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)Kanta Sasaki
 
解説: Token Extensions - Solana Developer Hub Online #SolDevHub
解説: Token Extensions - Solana Developer Hub Online #SolDevHub解説: Token Extensions - Solana Developer Hub Online #SolDevHub
解説: Token Extensions - Solana Developer Hub Online #SolDevHubK Kinzal
 
scikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみんscikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみんtoshinori622
 
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishinMakoto Mori
 
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdfAyachika Kitazaki
 
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)NTT DATA Technology & Innovation
 

Recently uploaded (8)

00001_test_automation_portfolio_20240227
00001_test_automation_portfolio_2024022700001_test_automation_portfolio_20240227
00001_test_automation_portfolio_20240227
 
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdfHarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
 
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
 
解説: Token Extensions - Solana Developer Hub Online #SolDevHub
解説: Token Extensions - Solana Developer Hub Online #SolDevHub解説: Token Extensions - Solana Developer Hub Online #SolDevHub
解説: Token Extensions - Solana Developer Hub Online #SolDevHub
 
scikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみんscikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみん
 
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
 
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
 
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
 

Mobile Web

  • 1. Mobile Web技術 Makoto Kato Mozilla Japan
  • 2. 自己紹介 • 名前: 加藤 誠 / @makoto_kato • Firefox / Mobile / Thunderbird committer • x64 / arm • etc
  • 3. Agenda • Mobile Web Browser? • APIs for Mobile / Devices
  • 5. Mobile Web Browser? • モバイルデバイス用のWebブラウザには2種類が 存在する • サーバーで描画して、クライアントに描画結果 を転送 • クライアントですべてを行う(=デスクトップ用 ブラウザと同じ)
  • 6. サーバー側で描画 Web Server HTMLの解析、描画をサー バー側で行う Internet クライアント側はその結果 (画像)をサーバーから受け取 Rendering Server り、描画 Mobile
  • 8. クライアント側で描画 Web Server デスクトップ用のWebブ Internet ラウザと同じテクノロジ Mobile
  • 9. クライアント側で描画 •WebKitをベースとしたブラウザ(OSに組み込まれてい る標準ブラウザ) • Android • iOS • Symbian (Nokia) • Blackberry (6 or later) • Opera Mobile • Firefox Mobile • Internet Explorer Mobile (Windows Phone)
  • 10. 各タイプの違い サーバーで描画するタイプ クライアントで描画するタイプ • モバイルデバイス側にCPU • クライアントですべて完結する パワーを余り必要としない ため、JavaScriptを利用したコ ンテンツなどの場合にいちいち 利点 • サーバー側でデータを圧縮 サーバーに接続する必要がない できるので、トラフィック を縮小できる • オフラインサポート • CPUパワーを必要とする • インタラクティブなコンテ • トラフィックが増大しやすい ンツの場合には、逆にトラ 欠点 フィックが増える • Opera Turboのようなプロ キシを介すことで軽減可能 • クライアントだけで処 理が完結しないため
  • 14. モバイル上での Webブラウザ • OSに”まともな”ブラウザが組み込まれていない 環境下ではサードパーティ製ブラウザが使われる • JavaME • Symbian (old version) • Windows Moble (not Windows Phone) • OSに組み込まれたブラウザが”まとも”であれば、 そのまま使われることが多い
  • 15. APIS FOR MOBILE / DEVICES
  • 16. Network on Mobile • 常にネットワークがつながっている訳ではない • オンライン・オフラインが切り替わる • ネットワークの速度は改善されているが、デスク トップに比べれば。。。 • 効率のいいサーバーとの接続方法?
  • 17. Network on Mobile • モバイルではネットワークが常につながっている わけではない • 地下鉄・駅 • ネットワークが接続されているときに、サーバー へアクセスして、つながってない時にローカル キャッシュ (データベース) を利用
  • 18. Network API • 仕様が固まり、実装がすすんでいるもの • Online / offline state • XMLHttpRequest (XHR) • Sever Sent Event • WebSocket • 使用策定中 • Network Information API
  • 19. On-line state • Check current network state if (navigator.onLine) { // network is online } • event window.addEventListener(“online”, function() { // network status changes to online }, true);
  • 20. Server Sent Event • 定期的にサーバーと通信を行う • Cross Domain Acessは現在規格制定中 • おそらく、XHRと同様になる
  • 21. Server Sent Event (Server) • MIME Type • text/event-stream • クライアント側はAcceptヘッダで送信 • サーバー側はContent-Typeで送信 • データ形式 • id: <識別ID> • data: <送信内容> • retry: <ミリ秒> 次の秒後にリクエストを投げるかを指 定
  • 22. Server Sent Event (client) // http://<server>/events にリクエスト var source = new EventSource("/events"); source.addEventLitener( "message", function(e) { document.body.innerHTML += e.data; }, false);
  • 24. Network Information API • 現在利用しているネットワークの種類を取得 var conType = navigator.connection.type; if (conType == "wifi") { // 現在の接続先がWIFI } else if (conType == “3G”) { // 現在の接続先が3G }
  • 25. Data Storage • File API • Storage • Web Storage • Indexed Database • Web SQL Database (仕様としてほぼ消滅)
  • 26. Web Storage • 二種類のストレージタイプ • localStorage • sessionStorage • 簡単なkey-valueスタイル localStorage.setItem(‘key’, ‘value’); localStorage.getItem(‘key’); • 大きなデータや複雑なデータには向かない
  • 27. Indexed Database • No SQL Database • 2 APIs • 同期API • 非同期API • Firefoxでは非同期のみ現在サポート • 非同期APIの方が負荷をかけない • 同期APIはWorkersなどUIを伴わない処理にし か向かない
  • 28. Indexed Database // Firefox -> mozIndexedDB // WebKit -> webkitIndexedDB var request = window.indexedDB.open(“maildb", “Mail"); request.onsuccess = function(event) { var db = request.result; var transaction = aDB.transaction([“maildb"], IDBTransaction.READ_ONLY); var cursor = transaction.objectStore(“maildb").openCursor(); cursor.onsuccess = function(event) { } }
  • 29. User Interaction • 実装が進んでいる物 • Touch Event • Web Notification • 現在仕様議論中 • Vibration • Intent-base events • Speech etc
  • 30. Touch Event • タッチデバイスのためのイベントモデル • シングルタッチもマルチタッチもサポート • iOSで最初に実装されたもの • 現在W3C – Web Events Groupで仕様を策定中l
  • 31. Touch Event • タッチイベントにはいろいろな定義が存在 • touchstart … タッチポイントが開始 • touchmove … タッチポイントが移動中 • touchcancel… システムなどによって、タッチイベン トがキャンセル • touchleave … 要素間の移動などタッチポイントが離 れる • touchend … タッチが終了
  • 32. Touch Event function handleStart(event) { var touches = event.changedTouches; var x = touches[0].pageX; var y = touches[0].pageY; } function handleEnd(event) { … } function startup() { var el = document.getElementById("canvas"); el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchend", handleEnd, false); el.addEventListener("touchmove", handleMove, false); }
  • 33. Web Notification • モバイルOSでは、通知機能はOS標準で搭載され る傾向にある • メール通知など
  • 34. Web Notification // Firefox では、mozNotification // Chromeでは、webkitNotification var notification = navigator.notification(“title”, “message”); notification.onclose = function() { // close時 };
  • 35. Hardware Integration • 実装が進んでいる物 • Geo Location • Device Orientation (Accelerometer) • Media Capture • 仕様策定中 • Battey Status Event • Streaming API
  • 36. Device Orientation • ほとんどのデバイスに使われる傾きセンサーの値 を検出する window.addEventListner(“deviceorientation”, function(event) { alpha = event.alpha; beta = event.beta; gamma = event.gamma; }, true);
  • 37. Media Capture • <input type=“file”>でキャプチャデバイスを操 作 • カメラや音声などを取り込む <input type=“file” accept=“image/*” capture=“camera”> • Android 3.0 Web Browser <input type=“file” accept=“image/*;capture=camera”>
  • 38. その他 • Battery Status API • Steaming API (Web Real-Time Communication APIs)
  • 39. Bettery Status API • 電源の状態を取得 • ACで接続中とかバッテリ駆動中とか • バッテリの残量を取得
  • 40. その他APIs • Personal Information • Contact API – address book • Calendar API – calendar • Communication • Messaging API – email / SMS • P2P • Graphics • Media Query
  • 41. API for media query • Media Query • 画面の解像度などでCSSを切り替える <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 480px)" href="480px.css“>
  • 42. API for media query • MatchMedia • DOMでmedia queryを利用する if (window.matchMedia( "(min-device-width: 400px)").matches) { // min-device-width < 400px } else { } // イベントリスナ形式 window.matchMedia( "(min-width: 400px)").addListener( function() { });
  • 43. APIs • セキュリティを考慮すべき場所においては、仕様 策定には非常に慎重 • Contact API • Messaging API • ユーザーに許可を求める方式は正しいのか? • Web Appsに関しては?