End of Native ?
Sencha Touch : HTML5 + CSS3 + JavaScript
            Web




                                Ext Japan, LL...
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
                               jQT...
Sencha
 Ext Designer


                               Ext Core
                  Ext JS
                               jQT...
Sencha
 Ext Designer


                               Ext Core
                  Ext JS
                               jQT...
Sencha
 Ext Designer   JavaScript

                               Ext Core
                  Ext JS
                      ...
Sencha
  Ext Designer


                                Ext Core
                   Ext JS
                               ...
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
• ...
WebKit Rocks!
•   HTML5 + CSS3
•   Transforms, Transitions, and
    Animations
•   Canvas
•   SQLite
•   Cache Manifest
• ...
•   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
...
<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
 ...
HTML5?
•   HTML5                  CSS3

•                             HTML5

    •                 input[type=search] vide...
HTML5?
•   HTML5                  CSS3

•                             HTML5

    •                 input[type=search] vide...
HTML5?
•   HTML5                  CSS3

•                             HTML5

    •                 input[type=search] vide...
HTML5?
•   HTML5                  CSS3

•                             HTML5

    •                 input[type=search] vide...
•           ¥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)
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
100915 HTML5とか勉強会発表資料
Upcoming SlideShare
Loading in...5
×

100915 HTML5とか勉強会発表資料

18,669

Published on

Sencha Touchの紹介

Published in: Technology
1 Comment
19 Likes
Statistics
Notes
No Downloads
Views
Total Views
18,669
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
140
Comments
1
Likes
19
Embeds 0
No embeds

No notes for slide

  • &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;
  • jQTouch&amp;#x3001;Raphael&amp;#x306E;&amp;#x30C7;&amp;#x30E2;
  • jQTouch&amp;#x3001;Raphael&amp;#x306E;&amp;#x30C7;&amp;#x30E2;
  • jQTouch&amp;#x3001;Raphael&amp;#x306E;&amp;#x30C7;&amp;#x30E2;























  • &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;
  • &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;
  • &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;
  • Beta
  • &amp;#x5168;&amp;#x3066;WebKit&amp;#x30D9;&amp;#x30FC;&amp;#x30B9;
  • 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.
  • 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.
  • 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.
  • &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;
  • &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;
  • &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;
  • &amp;#x30B5;&amp;#x30F3;&amp;#x30D7;&amp;#x30EB;&amp;#x306E;&amp;#x30C7;&amp;#x30E2;















  • &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;

  • 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;
  • 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;
  • 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;

  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;

  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • &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;
  • 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;
  • 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;

  • &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;

  • &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;

  • &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;

  • &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;

  • &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;

  • &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;

  • &amp;#x30A4;&amp;#x30D9;&amp;#x30F3;&amp;#x30C8;&amp;#x9023;&amp;#x643A;&amp;#x304C;&amp;#x91CD;&amp;#x8981;

  • Beta
  • &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;





  • Transcript of "100915 HTML5とか勉強会発表資料"

    1. 1. End of Native ? Sencha Touch : HTML5 + CSS3 + JavaScript Web Ext Japan, LLC (@extjapan) (@naotori)
    2. 2. Ext JS is now Sencha
    3. 3. Ext JS is now Sencha • jQTouch Raphaël Connect
    4. 4. Ext JS is now Sencha • jQTouch Raphaël Connect • Sencha Touch
    5. 5. Ext JS is now Sencha • jQTouch Raphaël Connect • Sencha Touch • VC
    6. 6. Sencha Ext JS Ext GWT Sencha Touch Ext Core Ext Designer jQTouch Raphael
    7. 7. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
    8. 8. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
    9. 9. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
    10. 10. Sencha Ext Designer JavaScript Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
    11. 11. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Java Ext GWT
    12. 12. FAQ
    13. 13. FAQ • Ext JS4.0 Sencha Touch jQTouch Raphaël
    14. 14. FAQ • Ext JS4.0 Sencha Touch jQTouch Raphaël • Sencha Touch jQTouch
    15. 15. FAQ • Ext JS4.0 Sencha Touch jQTouch Raphaël • Sencha Touch jQTouch • jQTouch Raphaël GPL
    16. 16. Sencha Touch beta
    17. 17. Coming Soon: BlackBerry 6 & WebOS
    18. 18. WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
    19. 19. WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
    20. 20. • WebKit • • • Orientation • • • • • GUI
    21. 21. • • Tap Double tap Tap and hold Swipe Pinch Drag & drop
    22. 22. • • WebKitCSSMatrix • GUI
    23. 23. GUI • Lists Nested Grouped Sortable • Carousel • Picker • Overlay • Toolbars & buttons • HTML5 Audio Video GeoLocation
    24. 24. <75k minified & gzipped
    25. 25. FAQ
    26. 26. FAQ • Sencha Touch Ext JS
    27. 27. FAQ • Sencha Touch Ext JS • jQuery
    28. 28. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market
    29. 29. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market • Ext Designer
    30. 30. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market • Ext Designer • Windows Phone
    31. 31. HTML5?
    32. 32. HTML5? • HTML5 CSS3
    33. 33. HTML5? • HTML5 CSS3 • HTML5
    34. 34. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio
    35. 35. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local
    36. 36. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation
    37. 37. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5
    38. 38. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets?
    39. 39. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets? • SVG?
    40. 40. • ¥9,900/ • • GPLv3
    41. 41. Demos http://twimap.net/ http://github.com/naotori/twimap
    42. 42. viewport meta/link
    43. 43. UI
    44. 44. 3 TwiMap BookmarkForm HistoryPanel MapPanel
    45. 45. “xtype”
    46. 46. MapPanel
    47. 47. localStorage
    48. 48. Sencha Touch • Version: 0.95β • • Android • API •
    49. 49. • Ext JS / Sencha Touch
    50. 50. • Ext JS / Sencha Touch •
    51. 51. • Ext JS / Sencha Touch • • JavaScript+HTML+CSS iOS Android
    52. 52. • Ext JS / Sencha Touch • • JavaScript+HTML+CSS iOS Android • PhoneGap
    53. 53. Objective-C JavaScript Ext Japan, LLC (@extjapan) (@naotori)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×