HTML+CSS+JavaScriptなMetro style apps 開発 (MetroStyleDeveloper #3)

HTML+CSS+JavaScriptなMetro style apps 開発 (MetroStyleDeveloper #3)

PowerPointのスライドファイル: http://sdrv.ms/KAvp6j

Transcript

1. View Slide

2. : @mayuki
   http:// /
   

   View Slide

3. View Slide

4. Internet Explorer
   Windows Runtime (WinRT)
   WinJS
   

   View Slide

5. Web
   

   View Slide

6. 1. 1 HTML/CSS
   2. HTML+CSS WinJS
   CSS+Blend
   3. HTML
   Blend
   

   View Slide

7. WinJS
   Blend for Visual Studio (HTML)
   Windows Runtime (WinRT)
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. ?
    

    View Slide

12. A. JavaScript
    var anim = WinJS.UI.Animation;
    anim.enterPage(element.querySelectorAll('.fragment > *'));
    

    View Slide

13. ?
    (ListView )
    

    View Slide

14. A. HTML+CSS !
    
    Content goes here.
    Content goes here.
    Content goes here.
    
    .main .panel {
    width: 120px;
    height: 120px;
    background-color: #ffa500;
    margin-bottom: 10px;
    }
    

    View Slide

15. View Slide

16. A. JavaScript !!1
    var targetElements = element.querySelectorAll('.main .panel');
    Array.prototype.forEach.call(targets, function (elem, i) {
    elem.addEventListener('MSPointerDown',
    function (e) { anim.pointerDown(e.srcElement); });
    elem.addEventListener('MSPointerUp',
    function (e) { anim.pointerUp(e.srcElement); });
    });
    

    View Slide

17. WinJS.UI.ListView
    

    View Slide

18. View Slide

19. A. HTML CSS JavaScript !!1
    var listView = element.querySelector('.listView').winControl;
    WinJS.UI.setOptions(listView, {
    itemTemplate: element.querySelector('.listViewItemTemplate'),
    itemDataSource: items.dataSource,
    layout: new WinJS.UI.GridLayout({
    groupInfo: {
    multiSize: true,
    slotWidth: 0,
    slotHeight: 0,
    }
    }),
    });
    .pagecontrol2 .win-listview .win-container .win-item .item-content {
    width: 150px;
    height: 150px;
    background-size: 150px 150px;
    }
    .pagecontrol2 .win-listview .win-container:nth-of-type(2) .win-item .item-content {
    width: 310px;
    height: 310px;
    background-size: 310px 310px;
    }
    .pagecontrol2 .win-listview .win-container .win-item .item-content .item-label {
    display: none;
    }
    .pagecontrol2 .win-listview .win-container:nth-of-type(2) .win-item .item-content .item-label {
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    }
    
    
    
    Title
    
    
    HTML ListView item templating sample
    

    View Slide

20. HTML CSS
    JavaScript …
    

    View Slide

21. IntelliSense( ) ?
    

    View Slide

22. View Slide

23. Visual Studio 11 Hack
    

    View Slide

24. WinJS
    

    View Slide

25. HTML
    

    View Slide

26. View Slide

27. Visual Studio
    Blend
    WinJS JavaScript,CSS,DOM
    

    View Slide

28. WinJS
    WinRT
    Windows 8 Consumer Preview Metro style app samples - C#, VB.NET, C++, JavaScript
    

    View Slide

29. ( )
    

    View Slide

30. View Slide