Firefox OS勉強会 4th Untitled

Transcript

1. ໊শະઃఆ
   2013.10.16 Firefox OSษڧձ 4th @masawada
   

   View Slide

2. Έͳ͞Μ
   

   View Slide

3. ͜Μ͹Μ͸
   

   View Slide

4. masawada
   

   View Slide

5. View Slide

6. ࣗݾ঺հ
   • ిؾ௨৴େֶ ৘ใཧ޻ֶ෦
   ৘ใɾ௨৴޻ֶՊ 2೥
   • ΤϦΞϫϯηάͱ͔
   • Rubyͱ͔JavaScriptͱ͔
   

   View Slide

7. masawada.me
   

   View Slide

8. FxOS & Win8
   ϋοΧιϯ
   

   View Slide

9. αΠίʔ
   αΠίʔ
   

   View Slide

10. ຊ୊
    

    View Slide

11. ໊শະઃఆ
    2013.10.16 Firefox OSษڧձ 4th @masawada
    

    View Slide

12. View Slide

13. View Slide

14. ؒʹ߹Θͳ͔ͬͨ
    

    View Slide

15. Twitter
    

    View Slide

16. ΈΜͳ
    

    View Slide

17. ͍͖ͩ͢
    

    View Slide

18. Twitter
    

    View Slide

19. View Slide

20. 2013/10/16 17:43
    

    View Slide

21. ϋογϡλά
    

    View Slide

22. #FxOS
    

    View Slide

23. ͝ҙݟɾ࣭໰
    

    View Slide

24. #FxOS
    

    View Slide

25. Twitter
    

    View Slide

26. TwitterΫϥΠΞϯτ
    Λ࡞Ζ͏
    

    View Slide

27. TwitterΫϥΠΞϯτ͸
    ࣍ੈ୅ͷHello, world
    

    View Slide

28. Hello, world TwitterΫϥΠΞϯτ
    ςΩετೖྗ × ˕
    ςΩετग़ྗ ˕ ˕
    ը૾දࣔ ˚ ○
    Ϧετදࣔ ˚ ○
    ωοτϫʔΩϯά × ˕
    

    View Slide

29. ి௨େੜ͸ࡏֶதʹ1౓͸
    TwitterΫϥΠΞϯτΛ࡞Δ
    

    View Slide

30. View Slide

31. View Slide

32. TwitterΫϥΠΞϯτ
    Λ࡞Ζ͏
    

    View Slide

33. Twitter Libraries
    

    View Slide

34. View Slide

35. View Slide

36. Node.js޲͚ͬΆ͍
    

    View Slide

37. Cross Origin੍ݶ͕
    ݪҼʁ
    

    View Slide

38. →࡞Ζ͏
    

    View Slide

39. Ͱ͖·ͨ͠
    

    View Slide

40. Firefox OS޲͚
    Twitter APIϥΠϒϥϦ
    

    View Slide

41. Violet.js
    

    View Slide

42. ۩ମతʹԿ͕
    Firefox OS޲͚ʁ
    

    View Slide

43. // XHR
    var xhr = new XMLHttpRequest({mozSystem: true});
    // manifest.webapp
    "type": "privileged",
    "permissions": {
    “systemXHR”: {}
    }
    

    View Slide

44. violet.js
    • ΄ͱΜͲͷAPIΤϯυϙΠϯτʹରԠ
    → (ະςετ…)
    • Firefox OSΞϓϦͱͯ͠࢖͏ʹ͸
    systemXHRͷݖݶΛཁٻ͢Δඞཁ͕͋Δ
    

    View Slide

45. ͜͜·Ͱ͕
    ࠓ೥7݄ͷͰ͖͝ͱ
    

    View Slide

46. FxOS & Win8
    ϋοΧιϯ
    

    View Slide

47. 8/10
    

    View Slide

48. FoxBird
    

    View Slide

49. σϞ
    

    View Slide

50. FoxBird
    • OAuth: PIN Only
    • Tweet (statuses/update)
    • Favorite
    • Retweet
    • Streaming API (GET user)
    

    View Slide

51. ॏࢹͨ͜͠ͱ
    

    View Slide

52. Streaming APIରԠ
    

    View Slide

53. Streaming APIपΓΛ
    ղઆ
    

    View Slide

54. Streaming API͸
    ԿΛ΍͍ͬͯΔͷ͔
    

    View Slide

55. REST
    

    View Slide

56. View Slide

57. Streaming API
    

    View Slide

58. View Slide

59. ίωΫγϣϯΛ
    ੾அ͠ͳ͍
    

    View Slide

60. src/streaming.js
    

    View Slide

61. var con = Violet.HTTPClient({
    method: method,
    uri: uri
    });
    con.onloading = function(xhr){
    ...
    };
    

    View Slide

62. src/http.js
    

    View Slide

63. var xhr = new XMLHttpRequest({mozSystem: true});
    // தུ
    xhr.onreadystatechange = function(){
    if(xhr.readyState === 3){
    this.onloading(xhr);
    }else if(xhr.readyState === 4){
    if(xhr.status === 200){
    this.onsuccess(xhr);
    }else{
    this.onerror(xhr);
    }
    }
    }.bind(this);
    

    View Slide

64. SFBEZ4UBUFͷ஋ͷϦετ͸ҎԼͷΑ͏ʹͳΓ·͢ɻ
    ɾ ॳظԽ͞Ε͍ͯ·ͤΜ
    
    ɾ ಡΈࠐΈதͰ͢
    
    ɾ ಡΈࠐΈ͸׬ྃ͠·ͨ͠
    
    ɾ ૒ํ޲ʹѻ͑·͢
    
    ɾ ͢΂ͯ׬ྃ͠·ͨ͠
    
    

    View Slide

65. SFBEZ4UBUFͷ஋ͷϦετ͸ҎԼͷΑ͏ʹͳΓ·͢ɻ
    ɾ ॳظԽ͞Ε͍ͯ·ͤΜ
    
    ɾ ಡΈࠐΈதͰ͢
    
    ɾ ಡΈࠐΈ͸׬ྃ͠·ͨ͠
    
    ɾ ૒ํ޲ʹѻ͑·͢
    
    ɾ ͢΂ͯ׬ྃ͠·ͨ͠
    
    

    View Slide

66. readyState === 3ͷͱ͖
    ߋ৽ΞϦ
    

    View Slide

67. var con = Violet.HTTPClient({
    method: method,
    uri: uri
    });
    con.onloading = function(xhr){
    var lines = xhr.responseText.split('\r\n');
    if(!lines[lines.length-2]){ return false; }
    callback(JSON.parse(lines[lines.length-2]));
    };
    

    View Slide

68. Streaming APIରԠ
    

    View Slide

69. violet.jsΛ࢖ͬͯΈΔ
    

    View Slide

70. ΫϥΠΞϯτΛ
    ࡞ͬͯΈΔ
    

    View Slide

71. ΫϥΠΞϯτΛ࡞Δ
    • πΠʔτػೳ
    • Streaming APIͰλΠϜϥΠϯಡΉ
    • UI͸Building BlocksΛ࢖͏
    

    View Slide

72. σϞ
    

    View Slide

73. ؆୯ʹ࡞ΕΔ
    

    View Slide

74. ௒ߴ଎։ൃͰ͖Δ
    

    View Slide

75. [௒ߴ଎։ൃ][Google ݕࡧ]
    

    View Slide

76. ੋඇ
    ࢖ͬͯΈ͍ͯͩ͘͞
    

    View Slide

77. ࠷ޙʹ
    

    View Slide

78. v0.2.0
    

    View Slide

79. v0.2.0ͷ৽ػೳ
    • POST statuses/filterʹରԠ
    • ൐ͬͯstreaming͸deprecated
    • userstreamʹͳΓ·ͨ͠
    • v0.3.0Ͱফ͑·͢
    • POST statuses/update_with_mediaʹରԠ
    

    View Slide

80. ΋͏͙͢ϦϦʔε
    

    View Slide

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

    View Slide