SlideShare a Scribd company logo
1 of 71
Download to read offline
End of Native ?
Sencha Touch : HTML5 + CSS3 + JavaScript
            Web




                                Ext Japan, LLC (@extjapan)

                                               (@naotori)
Ext JS is now Sencha
Ext JS is now Sencha


•   jQTouch Raphaël Connect
Ext JS is now Sencha


•   jQTouch Raphaël Connect

•   Sencha Touch
Ext JS is now Sencha


•   jQTouch Raphaël Connect

•   Sencha Touch

•   VC
Sencha
Ext JS
Ext GWT
Sencha Touch
Ext Core
Ext Designer
jQTouch
Raphael
Sencha
 Ext Designer


                               Ext Core
                  Ext JS
                               jQTouch

                Sencha Touch
                               Raphael


                 Ext GWT
Sencha
 Ext Designer


                               Ext Core
                  Ext JS
                               jQTouch

                Sencha Touch
                               Raphael


                 Ext GWT
Sencha
 Ext Designer


                               Ext Core
                  Ext JS
                               jQTouch

                Sencha Touch
                               Raphael


                 Ext GWT
Sencha
 Ext Designer   JavaScript

                               Ext Core
                  Ext JS
                               jQTouch

                Sencha Touch
                               Raphael


                 Ext GWT
Sencha
  Ext Designer


                                Ext Core
                   Ext JS
                                jQTouch

                 Sencha Touch
                                Raphael
 Java

                  Ext GWT
FAQ
FAQ


•   Ext JS4.0   Sencha Touch jQTouch   Raphaël
FAQ


•   Ext JS4.0   Sencha Touch jQTouch   Raphaël

•   Sencha Touch jQTouch
FAQ


•   Ext JS4.0   Sencha Touch jQTouch   Raphaël

•   Sencha Touch jQTouch

•   jQTouch     Raphaël         GPL
Sencha Touch beta
Coming Soon: BlackBerry 6 & WebOS
WebKit Rocks!
•   HTML5 + CSS3
•   Transforms, Transitions, and
    Animations
•   Canvas
•   SQLite
•   Cache Manifest
•   Geo-Location
WebKit Rocks!
•   HTML5 + CSS3
•   Transforms, Transitions, and
    Animations
•   Canvas
•   SQLite
•   Cache Manifest
•   Geo-Location
•   WebKit
•



•



•   Orientation
•



•



•



•



•          GUI
•



•



    Tap
    Double tap
    Tap and hold
    Swipe
    Pinch
    Drag & drop
•



•   WebKitCSSMatrix
•        GUI
GUI
•   Lists
    Nested

    Grouped

    Sortable

•   Carousel
•   Picker
•   Overlay
•   Toolbars & buttons
•   HTML5
    Audio

    Video

    GeoLocation
<75k
minified & gzipped
FAQ
FAQ

•   Sencha Touch   Ext JS
FAQ

•   Sencha Touch   Ext JS

•   jQuery
FAQ

•   Sencha Touch      Ext JS

•   jQuery

•   AppStore/Android Market
FAQ

•   Sencha Touch      Ext JS

•   jQuery

•   AppStore/Android Market

•   Ext Designer
FAQ

•   Sencha Touch      Ext JS

•   jQuery

•   AppStore/Android Market

•   Ext Designer

•   Windows Phone
HTML5?
HTML5?
•   HTML5   CSS3
HTML5?
•   HTML5   CSS3

•            HTML5
HTML5?
•   HTML5        CSS3

•                   HTML5

    •       input[type=search] video audio
HTML5?
•   HTML5               CSS3

•                          HTML5

    •              input[type=search] video audio
    •   webstorage session/local
HTML5?
•   HTML5                  CSS3

•                             HTML5

    •                 input[type=search] video audio
    •   webstorage session/local
    •   geolocation
HTML5?
•   HTML5                  CSS3

•                             HTML5

    •                 input[type=search] video audio
    •   webstorage session/local
    •   geolocation


•                                      HTML5
HTML5?
•   HTML5                  CSS3

•                             HTML5

    •                 input[type=search] video audio
    •   webstorage session/local
    •   geolocation


•                                      HTML5

    •   WebSockets?
HTML5?
•   HTML5                  CSS3

•                             HTML5

    •                 input[type=search] video audio
    •   webstorage session/local
    •   geolocation


•                                      HTML5

    •   WebSockets?
    •   SVG?
•           ¥9,900/

•
•   GPLv3
Demos
http://twimap.net/
http://github.com/naotori/twimap
viewport   meta/link
UI
3
         TwiMap
    BookmarkForm
       HistoryPanel
           MapPanel
“xtype”
MapPanel
localStorage
Sencha Touch

•   Version: 0.95β

•
•   Android

•   API

•
•   Ext JS / Sencha Touch
•   Ext JS / Sencha Touch

•
•   Ext JS / Sencha Touch

•
• JavaScript+HTML+CSS       iOS   Android
•   Ext JS / Sencha Touch

•
• JavaScript+HTML+CSS       iOS   Android



•   PhoneGap
Objective-C




  JavaScript
               Ext Japan, LLC (@extjapan)

                              (@naotori)

More Related Content

Similar to 100915 HTML5とか勉強会発表資料

html5和移动web应用
html5和移动web应用html5和移动web应用
html5和移动web应用麦哥UE
 
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and ShimsFilling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shimsreybango
 
Sencha Touch入門~HTMLとJavascriptだけでスマホ向けアプリ&サイトを作る!~
Sencha Touch入門~HTMLとJavascriptだけでスマホ向けアプリ&サイトを作る!~Sencha Touch入門~HTMLとJavascriptだけでスマホ向けアプリ&サイトを作る!~
Sencha Touch入門~HTMLとJavascriptだけでスマホ向けアプリ&サイトを作る!~Akiyuki Nomura
 
Welcome! RGBA
Welcome! RGBAWelcome! RGBA
Welcome! RGBAEven Wu
 
Building Pistachio with Sencha Touch 2 (introductory)
Building Pistachio with Sencha Touch 2 (introductory)Building Pistachio with Sencha Touch 2 (introductory)
Building Pistachio with Sencha Touch 2 (introductory)Luis Merino
 
HTML5 - Let’s make the WEB more powerful
HTML5 - Let’s make the WEB more powerfulHTML5 - Let’s make the WEB more powerful
HTML5 - Let’s make the WEB more powerfulNaga Harish M
 
baidu开发者大会 - Web App开发框架介绍以及分析
baidu开发者大会 - Web App开发框架介绍以及分析baidu开发者大会 - Web App开发框架介绍以及分析
baidu开发者大会 - Web App开发框架介绍以及分析joylite
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & FeaturesDave Ross
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi
 
FocusOnLearning Conference 2016 Austin, TX
FocusOnLearning Conference 2016 Austin, TXFocusOnLearning Conference 2016 Austin, TX
FocusOnLearning Conference 2016 Austin, TXKirsten Rourke
 
Workflow Refactoring
Workflow RefactoringWorkflow Refactoring
Workflow RefactoringKevin Cao
 
Cross platform native development with appcelerator titanium (2014 devnexus)
Cross platform native development with appcelerator titanium (2014 devnexus)Cross platform native development with appcelerator titanium (2014 devnexus)
Cross platform native development with appcelerator titanium (2014 devnexus)Stephen Feather
 
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorGail Frederick
 
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft EdgeChris Love
 
Exploring Ketai Library, Droidcon
Exploring Ketai Library, DroidconExploring Ketai Library, Droidcon
Exploring Ketai Library, Droidconsriram_iyengar
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5Doris Chen
 

Similar to 100915 HTML5とか勉強会発表資料 (20)

html5和移动web应用
html5和移动web应用html5和移动web应用
html5和移动web应用
 
Filling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and ShimsFilling the HTML5 Gaps with Polyfills and Shims
Filling the HTML5 Gaps with Polyfills and Shims
 
Sencha Touch入門~HTMLとJavascriptだけでスマホ向けアプリ&サイトを作る!~
Sencha Touch入門~HTMLとJavascriptだけでスマホ向けアプリ&サイトを作る!~Sencha Touch入門~HTMLとJavascriptだけでスマホ向けアプリ&サイトを作る!~
Sencha Touch入門~HTMLとJavascriptだけでスマホ向けアプリ&サイトを作る!~
 
Welcome! RGBA
Welcome! RGBAWelcome! RGBA
Welcome! RGBA
 
Building Pistachio with Sencha Touch 2 (introductory)
Building Pistachio with Sencha Touch 2 (introductory)Building Pistachio with Sencha Touch 2 (introductory)
Building Pistachio with Sencha Touch 2 (introductory)
 
Mobile html5
Mobile html5Mobile html5
Mobile html5
 
HTML5 - Let’s make the WEB more powerful
HTML5 - Let’s make the WEB more powerfulHTML5 - Let’s make the WEB more powerful
HTML5 - Let’s make the WEB more powerful
 
baidu开发者大会 - Web App开发框架介绍以及分析
baidu开发者大会 - Web App开发框架介绍以及分析baidu开发者大会 - Web App开发框架介绍以及分析
baidu开发者大会 - Web App开发框架介绍以及分析
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
FocusOnLearning Conference 2016 Austin, TX
FocusOnLearning Conference 2016 Austin, TXFocusOnLearning Conference 2016 Austin, TX
FocusOnLearning Conference 2016 Austin, TX
 
Workflow Refactoring
Workflow RefactoringWorkflow Refactoring
Workflow Refactoring
 
Cross platform native development with appcelerator titanium (2014 devnexus)
Cross platform native development with appcelerator titanium (2014 devnexus)Cross platform native development with appcelerator titanium (2014 devnexus)
Cross platform native development with appcelerator titanium (2014 devnexus)
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
Dojo & HTML5
Dojo & HTML5Dojo & HTML5
Dojo & HTML5
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
 
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft Edge
 
Exploring Ketai Library, Droidcon
Exploring Ketai Library, DroidconExploring Ketai Library, Droidcon
Exploring Ketai Library, Droidcon
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
 

More from Yuki Naotori

120611 html5とか勉強会 st2
120611 html5とか勉強会 st2120611 html5とか勉強会 st2
120611 html5とか勉強会 st2Yuki Naotori
 
101125 sencha con2010報告
101125 sencha con2010報告101125 sencha con2010報告
101125 sencha con2010報告Yuki Naotori
 
HTML5ビデオ導入編
HTML5ビデオ導入編HTML5ビデオ導入編
HTML5ビデオ導入編Yuki Naotori
 
SpreadOfficeとSencha Touch
SpreadOfficeとSencha TouchSpreadOfficeとSencha Touch
SpreadOfficeとSencha TouchYuki Naotori
 
Sencha touchのはじめかた
Sencha touchのはじめかたSencha touchのはじめかた
Sencha touchのはじめかたYuki Naotori
 
Sencha touch とyubizo engineで作るネイティブアプリ
Sencha touch とyubizo engineで作るネイティブアプリSencha touch とyubizo engineで作るネイティブアプリ
Sencha touch とyubizo engineで作るネイティブアプリYuki Naotori
 
Ext Designerについて
Ext DesignerについてExt Designerについて
Ext DesignerについてYuki Naotori
 
Ext Direct 入門 II
Ext Direct 入門 IIExt Direct 入門 II
Ext Direct 入門 IIYuki Naotori
 
Ext.util.Observableについて
Ext.util.ObservableについてExt.util.Observableについて
Ext.util.ObservableについてYuki Naotori
 
Ext.Directについて
Ext.DirectについてExt.Directについて
Ext.DirectについてYuki Naotori
 
Ext Jsで柔軟に開発仕事をこなす
Ext Jsで柔軟に開発仕事をこなすExt Jsで柔軟に開発仕事をこなす
Ext Jsで柔軟に開発仕事をこなすYuki Naotori
 
ExtJS 事例  2ちゃんビューアー「Cromartie49」
ExtJS 事例  2ちゃんビューアー「Cromartie49」ExtJS 事例  2ちゃんビューアー「Cromartie49」
ExtJS 事例  2ちゃんビューアー「Cromartie49」Yuki Naotori
 
090422 第10回勉強会(公開用)
090422 第10回勉強会(公開用)090422 第10回勉強会(公開用)
090422 第10回勉強会(公開用)Yuki Naotori
 
Prototyping tool "Degino"
Prototyping tool "Degino"Prototyping tool "Degino"
Prototyping tool "Degino"Yuki Naotori
 
第9回勉強会 開発の基本
第9回勉強会 開発の基本第9回勉強会 開発の基本
第9回勉強会 開発の基本Yuki Naotori
 
第9回勉強会(Ext3.0について)
第9回勉強会(Ext3.0について)第9回勉強会(Ext3.0について)
第9回勉強会(Ext3.0について)Yuki Naotori
 
第8回Ext勉強会プレゼン - 石丸
第8回Ext勉強会プレゼン - 石丸第8回Ext勉強会プレゼン - 石丸
第8回Ext勉強会プレゼン - 石丸Yuki Naotori
 

More from Yuki Naotori (20)

120611 html5とか勉強会 st2
120611 html5とか勉強会 st2120611 html5とか勉強会 st2
120611 html5とか勉強会 st2
 
101125 sencha con2010報告
101125 sencha con2010報告101125 sencha con2010報告
101125 sencha con2010報告
 
HTML5ビデオ導入編
HTML5ビデオ導入編HTML5ビデオ導入編
HTML5ビデオ導入編
 
SpreadOfficeとSencha Touch
SpreadOfficeとSencha TouchSpreadOfficeとSencha Touch
SpreadOfficeとSencha Touch
 
Sencha touchのはじめかた
Sencha touchのはじめかたSencha touchのはじめかた
Sencha touchのはじめかた
 
Sencha touch とyubizo engineで作るネイティブアプリ
Sencha touch とyubizo engineで作るネイティブアプリSencha touch とyubizo engineで作るネイティブアプリ
Sencha touch とyubizo engineで作るネイティブアプリ
 
Ext JS→Sencha
Ext JS→SenchaExt JS→Sencha
Ext JS→Sencha
 
Ext Designerについて
Ext DesignerについてExt Designerについて
Ext Designerについて
 
Ext Direct 入門 II
Ext Direct 入門 IIExt Direct 入門 II
Ext Direct 入門 II
 
Ext JS & HTML5
Ext JS & HTML5Ext JS & HTML5
Ext JS & HTML5
 
Ext.util.Observableについて
Ext.util.ObservableについてExt.util.Observableについて
Ext.util.Observableについて
 
Ext.Directについて
Ext.DirectについてExt.Directについて
Ext.Directについて
 
Ext Jsで柔軟に開発仕事をこなす
Ext Jsで柔軟に開発仕事をこなすExt Jsで柔軟に開発仕事をこなす
Ext Jsで柔軟に開発仕事をこなす
 
ExtJS 事例  2ちゃんビューアー「Cromartie49」
ExtJS 事例  2ちゃんビューアー「Cromartie49」ExtJS 事例  2ちゃんビューアー「Cromartie49」
ExtJS 事例  2ちゃんビューアー「Cromartie49」
 
090422 第10回勉強会(公開用)
090422 第10回勉強会(公開用)090422 第10回勉強会(公開用)
090422 第10回勉強会(公開用)
 
Ext.ux.google
Ext.ux.googleExt.ux.google
Ext.ux.google
 
Prototyping tool "Degino"
Prototyping tool "Degino"Prototyping tool "Degino"
Prototyping tool "Degino"
 
第9回勉強会 開発の基本
第9回勉強会 開発の基本第9回勉強会 開発の基本
第9回勉強会 開発の基本
 
第9回勉強会(Ext3.0について)
第9回勉強会(Ext3.0について)第9回勉強会(Ext3.0について)
第9回勉強会(Ext3.0について)
 
第8回Ext勉強会プレゼン - 石丸
第8回Ext勉強会プレゼン - 石丸第8回Ext勉強会プレゼン - 石丸
第8回Ext勉強会プレゼン - 石丸
 

Recently uploaded

Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 

Recently uploaded (20)

Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 

100915 HTML5とか勉強会発表資料

  • 1. End of Native ? Sencha Touch : HTML5 + CSS3 + JavaScript Web Ext Japan, LLC (@extjapan) (@naotori)
  • 2.
  • 3. Ext JS is now Sencha
  • 4. Ext JS is now Sencha • jQTouch Raphaël Connect
  • 5. Ext JS is now Sencha • jQTouch Raphaël Connect • Sencha Touch
  • 6. Ext JS is now Sencha • jQTouch Raphaël Connect • Sencha Touch • VC
  • 7. Sencha Ext JS Ext GWT Sencha Touch Ext Core Ext Designer jQTouch Raphael
  • 8. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  • 9. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  • 10. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  • 11. Sencha Ext Designer JavaScript Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  • 12. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Java Ext GWT
  • 13. FAQ
  • 14. FAQ • Ext JS4.0 Sencha Touch jQTouch Raphaël
  • 15. FAQ • Ext JS4.0 Sencha Touch jQTouch Raphaël • Sencha Touch jQTouch
  • 16. FAQ • Ext JS4.0 Sencha Touch jQTouch Raphaël • Sencha Touch jQTouch • jQTouch Raphaël GPL
  • 19. WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  • 20. WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  • 21. WebKit • • • Orientation • • • • • GUI
  • 22. • • Tap Double tap Tap and hold Swipe Pinch Drag & drop
  • 23. • • WebKitCSSMatrix • GUI
  • 24. GUI • Lists Nested Grouped Sortable • Carousel • Picker • Overlay • Toolbars & buttons • HTML5 Audio Video GeoLocation
  • 26. FAQ
  • 27. FAQ • Sencha Touch Ext JS
  • 28. FAQ • Sencha Touch Ext JS • jQuery
  • 29. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market
  • 30. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market • Ext Designer
  • 31. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market • Ext Designer • Windows Phone
  • 33. HTML5? • HTML5 CSS3
  • 34. HTML5? • HTML5 CSS3 • HTML5
  • 35. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio
  • 36. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local
  • 37. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation
  • 38. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5
  • 39. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets?
  • 40. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets? • SVG?
  • 41. ¥9,900/ • • GPLv3
  • 43.
  • 44.
  • 45. viewport meta/link
  • 46.
  • 47.
  • 48. UI
  • 49.
  • 50.
  • 51. 3 TwiMap BookmarkForm HistoryPanel MapPanel
  • 54.
  • 55.
  • 56.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65. Sencha Touch • Version: 0.95β • • Android • API •
  • 66.
  • 67. Ext JS / Sencha Touch
  • 68. Ext JS / Sencha Touch •
  • 69. Ext JS / Sencha Touch • • JavaScript+HTML+CSS iOS Android
  • 70. Ext JS / Sencha Touch • • JavaScript+HTML+CSS iOS Android • PhoneGap
  • 71. Objective-C JavaScript Ext Japan, LLC (@extjapan) (@naotori)

Editor's Notes

  1. &amp;#x6700;&amp;#x521D;&amp;#x306B;&amp;#x30D6;&amp;#x30E9;&amp;#x30F3;&amp;#x30C9;&amp;#x5909;&amp;#x66F4;&amp;#x306B;&amp;#x3064;&amp;#x3044;&amp;#x3066;&amp;#x7C21;&amp;#x5358;&amp;#x306B;&amp;#x8AAC;&amp;#x660E;
  2. jQTouch&amp;#x3001;Raphael&amp;#x306E;&amp;#x30C7;&amp;#x30E2;
  3. jQTouch&amp;#x3001;Raphael&amp;#x306E;&amp;#x30C7;&amp;#x30E2;
  4. jQTouch&amp;#x3001;Raphael&amp;#x306E;&amp;#x30C7;&amp;#x30E2;
  5. &amp;#x4ECA;&amp;#x65E5;&amp;#x306F;jQTouch&amp;#x306E;&amp;#x8A71;&amp;#x3082;&amp;#x3042;&amp;#x308B;&amp;#x307F;&amp;#x305F;&amp;#x3044;&amp;#x306A;&amp;#x306E;&amp;#x3067;&amp;#x3001;&amp;#x30E9;&amp;#x30A4;&amp;#x30BB;&amp;#x30F3;&amp;#x30B9;&amp;#x306B;&amp;#x3064;&amp;#x3044;&amp;#x3066;&amp;#x8A71;&amp;#x3092;&amp;#x3057;&amp;#x3066;&amp;#x304A;&amp;#x304D;&amp;#x307E;&amp;#x3059;
  6. &amp;#x4ECA;&amp;#x65E5;&amp;#x306F;jQTouch&amp;#x306E;&amp;#x8A71;&amp;#x3082;&amp;#x3042;&amp;#x308B;&amp;#x307F;&amp;#x305F;&amp;#x3044;&amp;#x306A;&amp;#x306E;&amp;#x3067;&amp;#x3001;&amp;#x30E9;&amp;#x30A4;&amp;#x30BB;&amp;#x30F3;&amp;#x30B9;&amp;#x306B;&amp;#x3064;&amp;#x3044;&amp;#x3066;&amp;#x8A71;&amp;#x3092;&amp;#x3057;&amp;#x3066;&amp;#x304A;&amp;#x304D;&amp;#x307E;&amp;#x3059;
  7. &amp;#x4ECA;&amp;#x65E5;&amp;#x306F;jQTouch&amp;#x306E;&amp;#x8A71;&amp;#x3082;&amp;#x3042;&amp;#x308B;&amp;#x307F;&amp;#x305F;&amp;#x3044;&amp;#x306A;&amp;#x306E;&amp;#x3067;&amp;#x3001;&amp;#x30E9;&amp;#x30A4;&amp;#x30BB;&amp;#x30F3;&amp;#x30B9;&amp;#x306B;&amp;#x3064;&amp;#x3044;&amp;#x3066;&amp;#x8A71;&amp;#x3092;&amp;#x3057;&amp;#x3066;&amp;#x304A;&amp;#x304D;&amp;#x307E;&amp;#x3059;
  8. Beta
  9. &amp;#x5168;&amp;#x3066;WebKit&amp;#x30D9;&amp;#x30FC;&amp;#x30B9;
  10. opacity, corners, shadows, gradients &amp;#x2014;&amp;#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
  11. opacity, corners, shadows, gradients &amp;#x2014;&amp;#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
  12. opacity, corners, shadows, gradients &amp;#x2014;&amp;#xA0;rotate, scale, depth, hardware accelerated. Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
  13. &amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x3053;&amp;#x3068;&amp;#x3067;&amp;#x3001;&amp;#x73FE;&amp;#x6642;&amp;#x70B9;&amp;#x3067;&amp;#x306F;WebKit&amp;#x306B;&amp;#x6700;&amp;#x9069;&amp;#x5316;&amp;#x3055;&amp;#x308C;&amp;#x3066;&amp;#x3044;&amp;#x307E;&amp;#x3059; &amp;#x30CD;&amp;#x30A4;&amp;#x30C6;&amp;#x30A3;&amp;#x30D6;&amp;#x30A2;&amp;#x30D7;&amp;#x30EA;&amp;#x4E26;&amp;#x307F;&amp;#x306E;&amp;#x3082;&amp;#x306E;&amp;#x3092;&amp;#x4F5C;&amp;#x308B;&amp;#x306E;&amp;#x306B;&amp;#x5FC5;&amp;#x8981;&amp;#x306A;&amp;#x30AF;&amp;#x30E9;&amp;#x30B9;&amp;#x304C;&amp;#x4E00;&amp;#x901A;&amp;#x308A;&amp;#x305D;&amp;#x308D;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x307E;&amp;#x3059;
  14. &amp;#x30CD;&amp;#x30A4;&amp;#x30C6;&amp;#x30A3;&amp;#x30D6;&amp;#x306E;&amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x306F;&amp;#x4F7F;&amp;#x3044;&amp;#x306B;&amp;#x304F;&amp;#x3044;&amp;#x306E;&amp;#x3067;&amp;#x3001;
  15. &amp;#x5B9F;&amp;#x969B;&amp;#x306B;&amp;#x30E9;&amp;#x30A4;&amp;#x30D6;&amp;#x30B3;&amp;#x30FC;&amp;#x30C7;&amp;#x30A3;&amp;#x30F3;&amp;#x30B0;&amp;#x3057;&amp;#x3066;&amp;#x307F;&amp;#x308B;
  16. &amp;#x30B5;&amp;#x30F3;&amp;#x30D7;&amp;#x30EB;&amp;#x306E;&amp;#x30C7;&amp;#x30E2;
  17. &amp;#x30A2;&amp;#x30D7;&amp;#x30EA;&amp;#x306E;&amp;#x7D39;&amp;#x4ECB; &amp;#x3053;&amp;#x306E;&amp;#x30D7;&amp;#x30EC;&amp;#x30BC;&amp;#x30F3;&amp;#x7528;&amp;#x306B;&amp;#x4F5C;&amp;#x3063;&amp;#x3066;&amp;#x305F;&amp;#x3089;&amp;#x3001;&amp;#x52E2;&amp;#x3044;&amp;#x4F59;&amp;#x3063;&amp;#x3066;&amp;#x30C9;&amp;#x30E1;&amp;#x30A4;&amp;#x30F3;&amp;#x307E;&amp;#x3067;&amp;#x3068;&amp;#x3063;&amp;#x3066;&amp;#x3057;&amp;#x307E;&amp;#x3063;&amp;#x305F;
  18. Web&amp;#x30A4;&amp;#x30F3;&amp;#x30B9;&amp;#x30DA;&amp;#x30AF;&amp;#x30BF;&amp;#x3092;&amp;#x898B;&amp;#x308B; Web&amp;#x30A4;&amp;#x30F3;&amp;#x30B9;&amp;#x30DA;&amp;#x30AF;&amp;#x30BF;&amp;#x3044;&amp;#x3044;&amp;#x3067;&amp;#x3059;&amp;#x3088; manifest&amp;#x306B;&amp;#x3064;&amp;#x3044;&amp;#x3066;&amp;#x3082;&amp;#x8A00;&amp;#x53CA; &amp;#x30C7;&amp;#x30D7;&amp;#x30ED;&amp;#x30A4;&amp;#x6642;&amp;#x306B;&amp;#x306F;JS&amp;#x30D5;&amp;#x30A1;&amp;#x30A4;&amp;#x30EB;&amp;#x306F;&amp;#x307E;&amp;#x3068;&amp;#x3081;&amp;#x308B;
  19. google map&amp;#x306E;&amp;#x30ED;&amp;#x30FC;&amp;#x30C7;&amp;#x30A3;&amp;#x30F3;&amp;#x30B0;&amp;#x306B;&amp;#x5BFE;&amp;#x5FDC;&amp;#x3059;&amp;#x308B;&amp;#x305F;&amp;#x3081;&amp;#x306B;&amp;#x3053;&amp;#x3046;&amp;#x3044;&amp;#x3046;&amp;#x66F8;&amp;#x304D;&amp;#x65B9;&amp;#x3057;&amp;#x3066;&amp;#x308B;&amp;#xFF08;&amp;#x30AD;&amp;#x30E3;&amp;#x30C3;&amp;#x30B7;&amp;#x30E5;&amp;#x3092;&amp;#x8272;&amp;#x3005;&amp;#x3084;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x3066;&amp;#xFF09;
  20. google map&amp;#x306E;&amp;#x30ED;&amp;#x30FC;&amp;#x30C7;&amp;#x30A3;&amp;#x30F3;&amp;#x30B0;&amp;#x306B;&amp;#x5BFE;&amp;#x5FDC;&amp;#x3059;&amp;#x308B;&amp;#x305F;&amp;#x3081;&amp;#x306B;&amp;#x3053;&amp;#x3046;&amp;#x3044;&amp;#x3046;&amp;#x66F8;&amp;#x304D;&amp;#x65B9;&amp;#x3057;&amp;#x3066;&amp;#x308B;&amp;#xFF08;&amp;#x30AD;&amp;#x30E3;&amp;#x30C3;&amp;#x30B7;&amp;#x30E5;&amp;#x3092;&amp;#x8272;&amp;#x3005;&amp;#x3084;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x3066;&amp;#xFF09;
  21. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  22. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  23. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  24. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  25. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  26. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  27. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  28. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  29. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  30. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  31. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  32. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  33. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  34. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  35. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  36. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  37. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  38. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  39. &amp;#x7D99;&amp;#x627F;&amp;#x3057;&amp;#x3066;&amp;#x4F7F;&amp;#x3046;&amp;#x306E;&amp;#x304C;&amp;#x9244;&amp;#x5247; &amp;#x30AB;&amp;#x30FC;&amp;#x30C9;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;&amp;#x4ED6;&amp;#x306B;&amp;#x3082;&amp;#x8272;&amp;#x3005;&amp;#x306A;&amp;#x30EC;&amp;#x30A4;&amp;#x30A2;&amp;#x30A6;&amp;#x30C8;&amp;#x304C;&amp;#x3042;&amp;#x308B;&amp;#xFF09; xtype&amp;#x306E;&amp;#x8AAC;&amp;#x660E;&amp;#xFF08;JSON&amp;#x3067;&amp;#x30B5;&amp;#x30FC;&amp;#x30D0;&amp;#x30FC;&amp;#x3068;&amp;#x3084;&amp;#x308A;&amp;#x53D6;&amp;#x308A;&amp;#x53EF;&amp;#x80FD;&amp;#x3001;&amp;#x3068;&amp;#x3044;&amp;#x3046;&amp;#x30E1;&amp;#x30EA;&amp;#x30C3;&amp;#x30C8;&amp;#xFF09; dockedItems&amp;#x306E;&amp;#x8AAC;&amp;#x660E;
  40. &amp;#x3053;&amp;#x306E;&amp;#x30A2;&amp;#x30D7;&amp;#x30EA;&amp;#x3067;&amp;#x306F;3&amp;#x3064;&amp;#x306E;&amp;#x30B9;&amp;#x30C8;&amp;#x30A2;&amp;#x3092;&amp;#x4F7F;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x308B; localstorage&amp;#x3078;&amp;#x306E;&amp;#x683C;&amp;#x7D0D;&amp;#x65B9;&amp;#x6CD5;&amp;#xFF08;Web&amp;#x30A4;&amp;#x30F3;&amp;#x30B9;&amp;#x30DA;&amp;#x30AF;&amp;#x30BF;&amp;#x3092;&amp;#x898B;&amp;#x308B;&amp;#xFF09; &amp;#x30E2;&amp;#x30C7;&amp;#x30EB;&amp;#x306F;&amp;#x30E1;&amp;#x30BD;&amp;#x30C3;&amp;#x30C9;&amp;#x3082;&amp;#x5B9A;&amp;#x7FA9;&amp;#x53EF;&amp;#x80FD;
  41. &amp;#x3053;&amp;#x306E;&amp;#x30A2;&amp;#x30D7;&amp;#x30EA;&amp;#x3067;&amp;#x306F;3&amp;#x3064;&amp;#x306E;&amp;#x30B9;&amp;#x30C8;&amp;#x30A2;&amp;#x3092;&amp;#x4F7F;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x308B; localstorage&amp;#x3078;&amp;#x306E;&amp;#x683C;&amp;#x7D0D;&amp;#x65B9;&amp;#x6CD5;&amp;#xFF08;Web&amp;#x30A4;&amp;#x30F3;&amp;#x30B9;&amp;#x30DA;&amp;#x30AF;&amp;#x30BF;&amp;#x3092;&amp;#x898B;&amp;#x308B;&amp;#xFF09; &amp;#x30E2;&amp;#x30C7;&amp;#x30EB;&amp;#x306F;&amp;#x30E1;&amp;#x30BD;&amp;#x30C3;&amp;#x30C9;&amp;#x3082;&amp;#x5B9A;&amp;#x7FA9;&amp;#x53EF;&amp;#x80FD;
  42. &amp;#x3053;&amp;#x306E;&amp;#x30A2;&amp;#x30D7;&amp;#x30EA;&amp;#x3067;&amp;#x306F;3&amp;#x3064;&amp;#x306E;&amp;#x30B9;&amp;#x30C8;&amp;#x30A2;&amp;#x3092;&amp;#x4F7F;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x308B; localstorage&amp;#x3078;&amp;#x306E;&amp;#x683C;&amp;#x7D0D;&amp;#x65B9;&amp;#x6CD5;&amp;#xFF08;Web&amp;#x30A4;&amp;#x30F3;&amp;#x30B9;&amp;#x30DA;&amp;#x30AF;&amp;#x30BF;&amp;#x3092;&amp;#x898B;&amp;#x308B;&amp;#xFF09; &amp;#x30E2;&amp;#x30C7;&amp;#x30EB;&amp;#x306F;&amp;#x30E1;&amp;#x30BD;&amp;#x30C3;&amp;#x30C9;&amp;#x3082;&amp;#x5B9A;&amp;#x7FA9;&amp;#x53EF;&amp;#x80FD;
  43. &amp;#x3053;&amp;#x306E;&amp;#x30A2;&amp;#x30D7;&amp;#x30EA;&amp;#x3067;&amp;#x306F;3&amp;#x3064;&amp;#x306E;&amp;#x30B9;&amp;#x30C8;&amp;#x30A2;&amp;#x3092;&amp;#x4F7F;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x308B; localstorage&amp;#x3078;&amp;#x306E;&amp;#x683C;&amp;#x7D0D;&amp;#x65B9;&amp;#x6CD5;&amp;#xFF08;Web&amp;#x30A4;&amp;#x30F3;&amp;#x30B9;&amp;#x30DA;&amp;#x30AF;&amp;#x30BF;&amp;#x3092;&amp;#x898B;&amp;#x308B;&amp;#xFF09; &amp;#x30E2;&amp;#x30C7;&amp;#x30EB;&amp;#x306F;&amp;#x30E1;&amp;#x30BD;&amp;#x30C3;&amp;#x30C9;&amp;#x3082;&amp;#x5B9A;&amp;#x7FA9;&amp;#x53EF;&amp;#x80FD;
  44. &amp;#x3053;&amp;#x306E;&amp;#x30A2;&amp;#x30D7;&amp;#x30EA;&amp;#x3067;&amp;#x306F;3&amp;#x3064;&amp;#x306E;&amp;#x30B9;&amp;#x30C8;&amp;#x30A2;&amp;#x3092;&amp;#x4F7F;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x308B; localstorage&amp;#x3078;&amp;#x306E;&amp;#x683C;&amp;#x7D0D;&amp;#x65B9;&amp;#x6CD5;&amp;#xFF08;Web&amp;#x30A4;&amp;#x30F3;&amp;#x30B9;&amp;#x30DA;&amp;#x30AF;&amp;#x30BF;&amp;#x3092;&amp;#x898B;&amp;#x308B;&amp;#xFF09; &amp;#x30E2;&amp;#x30C7;&amp;#x30EB;&amp;#x306F;&amp;#x30E1;&amp;#x30BD;&amp;#x30C3;&amp;#x30C9;&amp;#x3082;&amp;#x5B9A;&amp;#x7FA9;&amp;#x53EF;&amp;#x80FD;
  45. &amp;#x3053;&amp;#x306E;&amp;#x30A2;&amp;#x30D7;&amp;#x30EA;&amp;#x3067;&amp;#x306F;3&amp;#x3064;&amp;#x306E;&amp;#x30B9;&amp;#x30C8;&amp;#x30A2;&amp;#x3092;&amp;#x4F7F;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x308B; localstorage&amp;#x3078;&amp;#x306E;&amp;#x683C;&amp;#x7D0D;&amp;#x65B9;&amp;#x6CD5;&amp;#xFF08;Web&amp;#x30A4;&amp;#x30F3;&amp;#x30B9;&amp;#x30DA;&amp;#x30AF;&amp;#x30BF;&amp;#x3092;&amp;#x898B;&amp;#x308B;&amp;#xFF09; &amp;#x30E2;&amp;#x30C7;&amp;#x30EB;&amp;#x306F;&amp;#x30E1;&amp;#x30BD;&amp;#x30C3;&amp;#x30C9;&amp;#x3082;&amp;#x5B9A;&amp;#x7FA9;&amp;#x53EF;&amp;#x80FD;
  46. autoSave&amp;#x306B;&amp;#x306A;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x308B;&amp;#x306E;&amp;#x3067;&amp;#x3001;add&amp;#x5F8C;&amp;#x306B;&amp;#x81EA;&amp;#x52D5;&amp;#x7684;&amp;#x306B;localstorage&amp;#x306B;&amp;#x683C;&amp;#x7D0D;&amp;#x3055;&amp;#x308C;&amp;#x308B;
  47. autoSave&amp;#x306B;&amp;#x306A;&amp;#x3063;&amp;#x3066;&amp;#x3044;&amp;#x308B;&amp;#x306E;&amp;#x3067;&amp;#x3001;add&amp;#x5F8C;&amp;#x306B;&amp;#x81EA;&amp;#x52D5;&amp;#x7684;&amp;#x306B;localstorage&amp;#x306B;&amp;#x683C;&amp;#x7D0D;&amp;#x3055;&amp;#x308C;&amp;#x308B;
  48. &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;
  49. &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;
  50. &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;
  51. &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;
  52. &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;
  53. &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;
  54. &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;
  55. Beta
  56. &amp;#x30A2;&amp;#x30C3;&amp;#x30D7;&amp;#x30B0;&amp;#x30EC;&amp;#x30FC;&amp;#x30C9;&amp;#x3067;&amp;#x3088;&amp;#x304F;&amp;#x58CA;&amp;#x308C;&amp;#x308B; 9&amp;#x6708;&amp;#x4E2D;&amp;#x306E;&amp;#x30EA;&amp;#x30EA;&amp;#x30FC;&amp;#x30B9;&amp;#x304C;&amp;#x76EE;&amp;#x6A19;&amp;#x3060;&amp;#x3060;