JavaScriptã®UIã©ã¤ãã©ãªã¯ã©ãããã¹ããã¨ãã話ã¨Onsen UIã®ã¢ã¼ããã¯ãã£
Onsen UI Advent Calendar ã®12/9ã®è¨äºã§ãã
Onsen UIã¯ãã¢ãã¤ã«ã¢ããªã®ãã¤ãã£ãã©ã¤ã¯ãªUIãHTML + CSS + JavaScriptã§ç°¡åã«æ§ç¯ãããã¨ãç®çã¨ããUIã©ã¤ãã©ãªã§ã(UIãã¬ã¼ã ã¯ã¼ã¯ã¨ããã¾ã«å¼ã°ãã¾ã)ã âã¿ãããªãã¤ãã£ããªã¢ãã¤ã«ã¢ããªã£ã½ãç»é¢ããµã¯ãã¨ä½ããã¨ãã§ãã¾ãã
ç§ã¯æ°å¹´åããéçºã¡ã³ãã¼ã¨ãã¦Onsen UIã®è¨è¨éçºãè¡ã£ã¦ãã¾ãããã®è¨äºã§ã¯ãOnsen UIã«æ±ããããUIã©ã¤ãã©ãªã¨ãã¦ã®è¦ä»¶ã¨ããã解決ããããã«ã©ã®ãããªã¢ã¼ããã¯ãã£ãåã£ã¦ããã®ãã«ã¤ãã¦è§£èª¬ãã¾ãã
ç¹å®ã®ãã¬ã¼ã ã¯ã¼ã¯ã«ä¾åããªã
jQuery UIãReactã®ä¸ã«ä¹ã£ãã£ã¦ããUIã©ã¤ãã©ãªãªã©ã®ããã«ç¹å®ã®ãã¬ã¼ã ã¯ã¼ã¯ã®ä»çµã¿ã使ã£ã¦å®è£ ãããUIã©ã¤ãã©ãªã¨ããã®ã¯ããããããã¾ãããããç¹å®ã®ãã¬ã¼ã ã¯ã¼ã¯ã«ä¾åãããã¨ã¯é¿ããã¹ãã ã¨ããèãã®ãã¨ã«Onsen UIã¯éçºããã¦ãã¾ãã
ããç¹å®ã®ãã¬ã¼ã ã¯ã¼ã¯ã«ä¾åããUIã©ã¤ãã©ãªãä½ãã¨ããã®ä»ã®ãã¬ã¼ã ã¯ã¼ã¯ãã使ã£ããç´ ã®JavaScriptãã使ããã¨ãå°é£ã«ãªãã¾ããä¾ãã°AngularJSã«ä¾åããUIã³ã³ãã¼ãã³ãã¯ä»ã®ãã¬ã¼ã ã¯ã¼ã¯ããå©ç¨ãããã¨ã¯åºæ¬çã«ã§ããªããªãã¾ããæè¡çã«ã¯ã§ããªããç¡ãã§ããããããããããããããããã¨æãéçºè ã¯ããããããªãã§ãããã
UIã©ã¤ãã©ãªã®æä¾è å´ã«ã¨ã£ã¦ãç¹å®ã®ãã¬ã¼ã ã¯ã¼ã¯ã«ä¾åããã®ã¯ãªã¹ã¯ãããã¾ãããããã®ä¾åãã¦ãããã¬ã¼ã ã¯ã¼ã¯ã使ãããªããªã£ãå ´åã«ãUIã©ã¤ãã©ãªãæ¸ãç´ããã¨ã«ãªãå¯è½æ§ãããã¾ãã
ããã¯å®éã«èµ·ãã£ããã¨ã§ãããOnsen UIã®1ç³»ã¯AngularJSã®directiveã¨ãã¦å®è£ ããã¦ããã®ã§ãAngularJSã¨äºææ§ã®ç¡ãAngular2ãç»å ´ããæã«directiveã¨ãã¦å®è£ ããã¦ãããã¹ã¦ã®UIã³ã³ãã¼ãã³ããæ¸ãç´ãããã¨ãããã¾ããã
ãã¬ã¼ã ã¯ã¼ã¯éä¾åã«ããããã«ãã¦ãããã¨
Onsen UIã§ã¯ãç¹å®ã®ãã¬ã¼ã ã¯ã¼ã¯ä¾åããããã¤ã©ã®ãã¬ã¼ã ã¯ã¼ã¯ããã§ãããç¨åº¦å©ç¨ã§ããããã«æ¬¡ã®ãããªæ§æãåã£ã¦ãã¾ãã
CSS Components層ã¯ãOnsen UIãæä¾ããæãã¬ãã«ã®ä½ãã³ã³ãã¼ãã³ã層ã§ããããã¯ä¸»ã«ãã¹ã¦ã®UIã³ã³ãã¼ãã³ãã®è¦ãç®ãæä¾ãã¾ããCSS Componentsã¨ããååã®ã¨ãããCSSãã¡ã¤ã«ã¨ãã¦æä¾ããã¾ãã
Web Components層ã§ã¯ãCustom Elementsã®APIã使ã£ã¦CSS Componentsã«JavaScriptã§æ¯ãèããä¸ãã¾ããCustom Elementsã使ã£ã¦ããã®ã§ãç´ ã®JavaScriptããã§ãããã¬ã¼ã ã¯ã¼ã¯ããã§ãåãããã«æ±ããããã«è¨è¨ããã¦ãã¾ãã
Framework Bindings層ã§ã¯ãå種ãã¬ã¼ã ã¯ã¼ã¯ç¨ã®ãã¤ã³ãã£ã³ã°ãè¨è¿°ãã¾ããç¾å¨ã®ã¨ããAngular1, Angular2, React.js,ã¨Vue2ç¨ã®ãã¤ã³ãã£ã³ã°ãè¨è¿°ããã¦ãã¾ãã
CSS Components層
CSS Components層ã§ã¯åã³ã³ãã¼ãã³ããCSSã ãã§å®çµããCSS Componentsã¨ãã¦å®è£ ããã¦ãã¾ããCSSã ãã§å®è£ ã§ãããã®ãããªãã¡ã³ã³ãã¼ãã³ãã®è¦ãç®ã¯ããã§å®è£ ããã¦ãã¾ãã
ãã®CSS Componentsã¯Adobe製ã®é«éCSSãã¬ã¼ã ã¯ã¼ã¯ã§ããTopcoatããã©ã¼ã¯ãã¦éçºããããã®ã§ããCSSã¡ã¿è¨èªã¨ãã¦StylusãCSSã³ã³ãã¼ãã³ãã®ããã¥ã¡ã³ãã®è¨è¿°ã«ã¯topdocãè¨è¨è¦ç´ã¨ãã¦ã¯é«éãªCSSã»ã¬ã¯ã¿ãè¨è¿°ãããã¨ãã§ããBEM+MindBEMdingãæ¡ç¨ãã¦ãã¾ãã
éçºè
ã¯CSS Components層ãæä¾ããCSSã®ã¿ã使ããã¨ãã§ãã¾ããä¾ãã°ãOnsen UIã®ãªãã¸ããªã®CSSãã¡ã¤ã«ãèªã¿è¾¼ãã§ãswtich
ã³ã³ãã¼ãã³ãã®ã¿ã°ãè¨è¿°ããã¨iOSã§ããè¦ãSwitchã®UIã表示ããã¾ãã
<link href="https://unpkg.com/[email protected]/css/onsen-css-components.css" rel="stylesheet" />
<label class="switch"> <input type="checkbox" class="switch__input" checked> <div class="switch__toggle"> <div class="switch__handle"></div> </div> </label>
ãªãã¸ããªçã«ã¯æ¬¡ã®å ´æã«å ¨ã¦è¨è¿°ããã¦ãã¾ãã
Web Components層
å ã»ã©ã®CSS Components層ã®ä¸ã«ä½ç½®ããã®ãWeb Components層ã§ããCSSã§è¨è¿°ãããè¦ãç®ã«å¯¾ãã¦JavaScriptã§æ¯ãèãã追å ãã¾ãã
ããã§ã¯ç¬èªã®HTMLè¦ç´ ãå®ç¾©ãããã¨ãåºæ¥ãCustom Elementsã®APIã使ã£ã¦CSSã³ã³ãã¼ãã³ãã«æ¯ãèãã追å ããã«ã¹ã¿ã è¦ç´ ãå®ç¾©ãã¦ãã¾ããããã¥ã¡ã³ããè¦ãã¨ç¾å¨ã¯ç´40ç¨åº¦ã®ã«ã¹ã¿ã è¦ç´ ãå®ç¾©ããã¦ãã¾ãã
ä¾ãã°<ons-button>
ã¨ããè¦ç´ ãããã®ã§ããããã¯CSSã³ã³ãã¼ãã³ããã¦å®è£
ããbutton
ã«Custom Elementsã被ãããã®ã§ãã
<button class="button">...</button> <!-- CSSã³ã³ãã¼ãã³ã --> <ons-button>...</ons-button> <!-- ons-buttonã«ã¹ã¿ã è¦ç´ -->
Custom Elementsã¨ãã¦å®è£ ããã¨ããã®DOMè¦ç´ ã®ããããã£ãã¡ã½ãããå±æ§ãªã©ã®æ¯ãèããå®ç¾©ãããã¨ãã§ãã¾ããããã使ã£ã¦ç´ ã®JavaScriptãjQueryãªã©ããã§ãæ±ããããã¤Angular2ãReact.jsãVue.jsãªã©ã®ãã¬ã¼ã ã¯ã¼ã¯ããã§ãæ±ããã³ã³ãã¼ãã³ããå®ç¾©ãããã¨ãã§ãã¾ãã
ãªãã¸ããªçã«ã¯æ¬¡ã®å ´æã«å
¨ã¦è¨è¿°ããã¦ãã¾ããCustom Elements以å¤ã«ãå種JavaScriptã®APIãæä¾ãã¦ããã®ã§ãã®é¨åãã²ã£ãããã¦coreã¨ãå¼ã°ãã¾ããOnsen UIã®onsenui.js
ã¨onsenui.css
ã¯ãã®coreããçæããã¾ãã
Framework Bindings層
ãã®å±¤ã§ã¯ãåãã¬ã¼ã ã¯ã¼ã¯ãã¨ã®ã©ããã¼ãå®ç¾©ãã¦ãã¾ãããã®ã©ããã¼ã¯Onsen UIã§ã¯ãã¤ã³ãã£ã³ã°ã¨å¼ã°ãã¦ãã¾ããç¾å¨å¯¾å¿ãã¦ãããã¬ã¼ã ã¯ã¼ã¯ã«ã¯React.js, AngularJS, Angular2, Vue.jsãªã©ãããã¾ããjQueryãç´ ã®JSããå©ç¨ããå ´åã«ã¯ããã®ãã¤ã³ãã£ã³ã°ã¯å©ç¨ãã¾ããã
éçºè ã¯ãå©ç¨ãããã¬ã¼ã ã¯ã¼ã¯ã«åããã¦ãã®ãã¤ã³ãã£ã³ã°ãå©ç¨ãã¾ãã
ãªãã§ãã®ãã¤ã³ãã£ã³ã°ããããã¨ããã¨ãWeb Componentsãæä¾ãã¦ããã¨ãã¦ãããã®ã«ã¹ã¿ã è¦ç´ ã®ããããã£ãã¡ã½ããã«ã¢ã¯ã»ã¹ã§ããªããã°æå³ãããã¾ãããåãã¬ã¼ã ã¯ã¼ã¯ãã¨ã«ã³ã³ãã¼ãã³ãã®æä½ãã©ã®ããã«è¡ããã«ã¤ãã¦ãæµåãç°ãªãã¾ãã
ä¾ãã°ãReact.jsã§ã¯ããããã³ã³ãã¼ãã³ãã®ã¡ã½ãããå©ãã¨ãã£ãæä½ã¯ããªãã®ãæ®éãªã®ã§ãCustom Elementsãæã¤ã¡ã½ããã«ä¾ãæä½ãReact.jsã®ã³ã³ãã¼ãã³ãã®propsãstateã«ãã£ã¦ç®¡çããå¿ è¦ãããã¾ããAngularJSãAnglar2ã®å ´åã«ã¯DOMè¦ç´ ãæã¤ã¡ã½ãããDirectiveããå©ããããã«ããå¿ è¦ãããã¾ãã
Framework Bindings層ã§ã¯ãã®ãã¬ã¼ã ã¯ã¼ã¯ãã¨ã«ç°ãªãæµåãå¸åããªãããã«ã¹ã¿ã è¦ç´ ã«å¯¾ããã¤ã³ã¿ã¼ãã§ã¤ã¹ãæä¾ãã¦ãã¾ãã
ãã¬ã¼ã ã¯ã¼ã¯ã«ãã£ã¦ã©ããããµãã«æ¸ãæ¹ãå¤ãããã¨ããã®ã¯æ¬¡ã®å ¬å¼ããã°ã®è¨äºã«ãæ¸ããã¦ãã¾ãã
ãªãã¸ããªçã«ã¯æ¬¡ã®å ´æã«å ¨ã¦è¨è¿°ããã¦ãã¾ããbindingsãã£ã¬ã¯ããªä»¥ä¸ã«ãã¬ã¼ã ã¯ã¼ã¯ãã¨ã®npmããã±ã¼ã¸ãæä¾ããã¦ãã¾ãã
ã¾ã¨ã
Onsen UIã¯æ§ã ãªãã¬ã¼ã ã¯ã¼ã¯ã«å¯¾å¿ããããã«ãCustom Elementsã使ã£ã¦ãã¾ãããã®éã®UIã©ã¤ãã©ãªã¨ãã¦ã®å¤§ã¾ããªã¢ã¼ããã¯ãã£ã«ã¤ãã¦ãã®è¨äºã§ã¯èª¬æãã¾ããã