Privileged Apps with Vue.js

Transcript

1. Privileged Apps with Vue.js
   Firefox OS ίʔυϦʔσΟϯάϛʔτΞοϓ #11 (2014/11/15)
   @masawada
   

   View Slide

2. ͜Μ͹Μ͸
   

   View Slide

3. @masawada
   

   View Slide

4. View Slide

5. FxOSϋοΧιϯͱ͔ओ࠵
   

   View Slide

6. http://masawada.me
   

   View Slide

7. εϥΠυ50ຕͳͷͰ
   ඈ͹͠·͢
   

   View Slide

8. Privileged Apps with Vue.js
   

   View Slide

9. Vue.js
   

   View Slide

10. MVVMϑϨʔϜϫʔΫ
    

    View Slide

11. MVCͷѥछΈ͍ͨͳͷ
    

    View Slide

12. ৄࡉ͸ׂѪ
    

    View Slide

13. (͜Θ͍͓͡͞Μ͜Θ͍)
    

    View Slide

14. Model
    View
    ViewModel
    

    View Slide

15. Model
    var model = {
    hello: “”
    };
    

    View Slide

16. View
    
    
    
    
    
    
    

    View Slide

17. ViewModel
    var app = new Vue({
    el: "#app",
    data: model
    });
    

    View Slide

18. ViewͱModelΛ
    ViewModel͕όΠϯυ
    

    View Slide

19. View Slide

20. Privileged Apps (ಛݖΞϓϦ)
    

    View Slide

21. Privileged Apps
    ɾHosted AppsͰ͸࢖͑ͳ͍API͕࢖͑Δ
    ɾmanifest.webappʹࢦఆΛॻ͘
    ɾ੍͍͔ͭ͘ݶ͕͋Δ
    ɾΞϓϦΛެ։͢Δͱ͖ʹ৹͕ࠪ͋Δ
    

    View Slide

22. ੍͍͔ͭ͘ݶ͕͋Δ
    

    View Slide

23. CSP
    

    View Slide

24. Content Security Policy
    

    View Slide

25. Content Security Policy
    ɾؔ਺ίϯετϥΫλͷېࢭ
    ɾeval ͷېࢭ
    ͳͲͳͲ…
    https://developer.mozilla.org/ja/Apps/CSP
    ΛݟͯͶ
    

    View Slide

26. Vue.js
    

    View Slide

27. ؔ਺ίϯετϥΫλଟ༻ͯͨ͠
    

    View Slide

28. View Slide

29. ΍ͬͨͥ
    

    View Slide

30. Ͳ͏΍࣮ͬͯݱ͍ͯ͠Δ͔
    

    View Slide

31. mmckegg/notevil
    

    View Slide

32. mmckegg/notevil
    ɾNode.jsͷϞδϡʔϧ
    ɾVue.jsͰ͸͜ΕΛforkͯ͠ґଘϥΠϒϥϦΛ݁߹
    ɾariya/esprimaͰparseͯ͠Δ
    ɾάϩʔόϧΦϒδΣΫτʹΞΫηε͠ͳ͍
    

    View Slide

33. mmckegg/notevil
    case 'BinaryExpression':
    var l = walk(node.left)
    var r = walk(node.right)
    switch(node.operator) {
    case '==': return l === r
    case '===': return l === r
    

    View Slide

34. .oO(not evil …?)
    

    View Slide

35. ศརͳͷͰ࢖͍·͠ΐ͏
    

    View Slide

36. ݱ஍͔Β͸Ҏ্Ͱ͢
    

    View Slide

37. ༨ஊ
    

    View Slide

38. ίʔυϦʔσΟϯάͷ
    ͓ͱ΋ʹ
    

    View Slide

39. git find ίϚϯυ
    

    View Slide

40. git find
    ɾgit subcommand
    ɾPATHͷ௨Δॴʹgit-findϑΝΠϧΛஔ͘
    → git findͰ࣮ߦͰ͖Δ
    ɾpeco͕ඞཁ
    

    View Slide

41. pecoͷΠϯετʔϧ (mac)
    $ brew tap peco/peco
    $ brew install peco
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. ࠷ߴ
    

    View Slide

47. git find
    DST_PATH=$(git grep -n $1 | grep -v
    "[0-9]:\s*//" | peco | awk -F ":"
    '{print "-c "$2" "$1}');
    if [ ${#DST_PATH} -ne 0 ]; then
    vim $DST_PATH;
    fi
    

    View Slide

48. [git find peco][ݕࡧ]
    

    View Slide

49. ͥͻ͓࢖͍͍ͩ͘͞
    

    View Slide

50. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide