Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Privileged Apps with Vue.js

masawada
November 15, 2014

Privileged Apps with Vue.js

masawada

November 15, 2014
Tweet

More Decks by masawada

Other Decks in Programming

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