1. Cybozu Meetup #1
Feb 27, 2017

2. Hello!
• a.k.a. @teppeis
• 2007
• Garoon
• kintone
• 2016

3. JavaScript
https://gihyo.jp/dp/ebook/2015/978-4-7741-7477-8

4. Agenda
•
•
•

6. • Web
•
•

8. 1997

9. Office

10. Garoon

11. Cybozu Live

12. 2011 cybozu.com

13. kintone

14. •
• Office
• Garoon
• Live /
•
• kintone

15. Web

16. •
• B2C Web, PC
• Web
•

18. • 700
• cybozu.com: 65
• : 1,000
• : 1.6
• : 600
• : 200

20. • :
• kintone JavaScript: 45
• :
• Web
• :
•

22. • kintone Google Closure Compiler
2010
•
• TypeScript, Flow
•

23. JSDoc

24. JSDoc
• JS
• JavaScript
•
• JSDoc

25. UI

26. UI
• Closure Library
• UI
• MVC

27. UI Component ( )

28. UI Component ( ): render

29. UI Component ( ): template

30. • Good
• UI UI
• Bad
•
• DOM
•
• MVC

31. React

32. https://www.slideshare.net/ama-ch/google-closure-toolsreact

33. React
• React
Closure
• Flux
•

34. React

35. React : Stateless

37. http://blog.cybozu.io/entry/2015/11/04/080000

38. •
• cybozu.com
•

40. • karma
•
• Lint : fixclosure
• : grunt-parallelize
• Grasp
• Yeoman Generator scaffolding

41. Yeoman

43. • kintone
• 3rd party
• JavaScript
• JavaScript API
• JS
•

44. https://cybozudev.zendesk.com/hc/ja/articles/202640890- -TEL-

45. JS API
https://cybozudev.zendesk.com/hc/ja/articles/202640890- -TEL-

46. https://kintone.cybozu.com/jp/feature/plugin.html

48. •
•
•
•

50. https://www.slideshare.net/ama-ch/kintone-61942444

51. • React
• ES2015+
• npm (Artifactory)
• CI with
•

53. •
• JS /
• 3rd party

55. • OpenSocial / Caja
•
• Salesforce Lightning / LockerService
• Secure DOM
: Web Sandbox LockerService - Qiita

56. •
• JavaScript
•

57. : iframe
• sandbox
• URL OAuth
•
• (postMessage)
• UI : iframe
•
• ES Realms API ?
• https://github.com/tc39/proposal-realms

59. •
• 3rd party /
UI

60. Jenkins Blue Ocean (React )
https://jenkins.io/projects/blueocean/

61. Lightning ( )

62. •
• CSS
• 3rd party API React
• Web Components?

63. Web Components
UI
http://blog.anatoo.jp/entry/2016/12/09/201511

65. https://cybozu.co.jp/efforts/accessibility/

66. /

67. アクセシビリティ基準に基づいたコントラストの設定
3.33 : 1 10.98:1
https://www.slideshare.net/KobayashiDaisuke1/web-59111913

69. Frontend Weekly Lunch
https://twitter.com/teppeis/status/730704571849269248

70. ECMAScript
http://azu.github.io/slide/2016/jser5years/sc22-ecmascript-ahodc.html

72. •
•
•
•
•
•
•
•

74. FAQ

75. FAQ
• Closure Compiler
• TypeScript ES2015
•
Vanilla Flowtype
• React Angular TypeScript
•
• React